تصميم مواقع الانترنت من الصفر حتى الاحتراف - الصفحة 4

ملفي الشخصي · [ **09-13-2008** ]

جهد مشكووووووور

ملفي الشخصي · [ **09-17-2008** ]

اشكر جميع الاخوة الذين مروا بهذا الموضوع واتمنى ان تكونوا قد استفدتم ونحن مازلنا في البداية واسفة للتآخر لكن هي ظروف الشهر المبارك اعاده الله علينا وعليكم وعلى الامة الاسلامية بالخير واليمن والبركات ..
ولنتابع الان في خطوات جديدة ..
تحياتي

ملفي الشخصي · [ **09-17-2008** ]

نحن بانتظار جديدك وفعلا الوقت ضيق يكون في الشهر المبارك

على كل حال سنتابع اولا باول ,,

ملفي الشخصي · [ **09-17-2008** ]

بسم الله الرحمن الرحيم

الاخ معتصم اشكر لك متابعتك الدائمة وتحياتي لك اخي الكريم .

قبل ان ندخل في تعلم فقرتنا الجديدة وهي تعداد القوائم اود ان اورد ملاحظة هنا وهي اننا ان شاء الله سأمشي معكم خطوة بخطوة في بناء موقع في الانترنت من ناحية عملية فعلى كل شخص يريد التعلم ان يهيء فكرة الموقع الذي يريد انشاؤه .. وانا اعمد في هذه الخطوات الى التدريب على امور اساسية نحتاجها فيما بعد في تأسيس اي موقع على شبكة الويب .

اليوم كما قلت سندخل الى فقرة جديدة وهي تعلم تعداد القوائم او سرد نقاط مهمة متتالية وهي امور قد يحتاجها البعض في مواقعهم خاصة ان كانت مواقع شركات على سبيل المثال لشرح مهام الشركة على طريق تعداد او ما الى ذلك ..

الان قم بإنشاء مستند نصي جديد ادخل به الشيفرة التالية واحفظه .. كما تعلمنا في الخطوات السابقة الاولى والثانية :

كود HTML:

<html> <head> <title>ترقيم القوائم</title> </head> <body bgcolor="#E9BCD2"> <ul> <li> 1(علامة ترقيم دائرية مصمتة)</li> <li> 2(علامة ترقيم دائرية مصمتة) </ul> <br> <ul type="circle"> <li> 1(علامة ترقيم دائرية مفرغة)</li> <li>2(علامة ترقيم دائرية مفرغة) </ul> <br> <ul type="square"> <li> (علامة ترقيم مربعة مصمتة)</li> </ul> <br> <ol> <li>تعداد رقميي</li> <li>تعداد رقمي</li> </ol> <br> <ol type="a"> <li>تعداد حرفي صغير</li> <li>تعداد حرفي صغير</li> </ol> <br> <ol type="A"> <li>تعداد حرفي كبير</li> <li>تعداد حرفي كبير</li> </ol> <br> <ol type="I"> <li>تعداد ارقام رومانية كبيرة</li> <li>تعداد</li> <li>تعداد</li> <li>تعداد</li> <li>تعداد</li> </ol> <br> <ol type="i"> <li>تعداد ارقام رومانية صغيرة</li> <li>تعداد</li> <li>تعداد</li> <li>تعداد</li> </ol> </body> </html>

ستاظهر لك الصفحة كهذه الصفحة :

http://www.freewebtown.com/jordan_am/yasminah3.htm

في الفقرة التالية سنشرح ما قمنا به ان شاء الله

ملفي الشخصي · [ **09-17-2008** ]

الان مالذي قمنا به ؟؟

انشأنا مستند نصي جديد واسميناه ترقيم القوائم ونسخنا الكود السابق وادخلناه بالمستند

كود HTML:

<html> <head> <title>ترقيم القوائم</title> </head>

اخترنا لون الخلفية ووضعناها داخل وسم ال body

كود HTML:

<body bgcolor="#E9BCD2">

لا تجزع من طول الشيفرة السابقة فالربما تشعر انها مشوشة بعض الشيء ولكن ما ان تفهم مابداخلها حتى تشعر انها جعلت لتنظيم شيفرة قائمتك بحيث يملك كل معرف قائمة سطره الخاص به وان كل عنصر قائمة جديد يملك سطراً خاصا به .

نبذة عن معرّفنا الجديد قبل ان نبدأ بالشرح التفصيلي

معرّفات القوائم المرتبة وغير المرتبة The Ordered and Unordered List Tags
يعتبر معرّف القائمة المرتبة المرقمة <OL> ومعرّف القائمة غير المرتبة <UL> اكثر انواع المعرّفات شيوعا في الاستخدام ضمن صفحات الويب فمها يمتازان بعموميتهما وبساطة الاستخدام بالاضافة الى سهولة المعالجة .. فانا عندما اريد ان اسرد عدة نقاط اقوم بترقيمهم يدويا :
1-
2-
3-
واحيانا انسى انا الى اي رقم وصل التعداد معي فاعود الى النقطة السابقة للتاكد من الرقم الذي يليه .
في ال HTML انت فقط تضع المعرّف الذي تختاره لتعداد نقاطك مع بداية كل سطر وهو يقوم عنك بمهمة التنظيم والترتيب وسرد الارقام او الاحرف بالتتالي بشكل مرتب ومنظم .
لنلقي نظرة على القسم الول من الشيفرة :

كود HTML:

<ul> <li> 1(علامة ترقيم دائرية مصمتة)</li> <li> 2(علامة ترقيم دائرية مصمتة) </ul>

ابتدأنا القائمة بعنصر المعرّف <UL> وهو معرّف القوائم غير المرتبة . وهو معرّف حاوي يقوم بتعريف قائمة بداية ونهاية قائمة غير مرتبة

كود HTML:

<ul></ul>

اذا لم تقم باغلاقه اي باستخدام معرف النهاية بعد الانتهاء من التعداد فستستمر قائمتك الى الابد !!.

عندما ابتدأنا بسرد محتوى القائمة اتبعناه بمعرّف <LI> أحاطت بالجملة الاولى

كود HTML:

<li> 1(علامة ترقيم دائرية مصمتة)</li>

وهو معرّف عنصر القائمة ويتم استخدامه قبل سرد كل نقطة في القائمة .
ملاحظة مهمة المعرّف <LI> لك ان تقوم بإضافة معرّف نهاية له

كود HTML:

</li>

ولك ايضا ان لا تغلقه فبعض محررات ال HTML تقوم بإضافة معرّف نهاية ويبقى استخدامها اختياري .
لاحظ اني في الفقرة الاولى استخدمته كمعرّف حاو وفي الفقرة الثانية لم ادخله كمعرف حاو

كود HTML:

<li> 2(علامة ترقيم دائرية مصمتة)

حيث ان مصممو مواصفات ال HTML اعتبرو ان وجود معرف <LI> آخر لا يبدأ بعنصر القائمة التالي وحسب بل ويشير تلقائيا الى نهاية عنصر القائمة السابق فالمثالين السابقين يعتبران مثالين صحيحين .

علامات الترقيم التي تسبق فقرة تعداد كما في المثال السابق تظهر على شكل دوائر مصمتة .
ماذا لو اردت ان تظهر تعداد قائمتي دوائر مفرغة ؟! لاحظ معي التالي وهي الفقرة الثانية في التعداد في الصفحة :

كود HTML:

<ul type="circle"> <li> 1(علامة ترقيم دائرية مفرغة)</li> <li>2(علامة ترقيم دائرية مفرغة) </ul>

عندما افتتحت الوسم <UL> توسعت بداخله واضفت له سمة type وهي تعني القيمة الافتراضية التي اريد اختيارها واتبعتها بسمة بعد ال = بسمة circleبين علامتي اقتباس "وعلامتي الاقتباس هنا ايضا اختيارية وبعض المحررات تضيفها تلقائي ". سمة ال circle تخبر المتصفح اني اريد التعداد على شكل دوائر مفرغة ..

كود HTML:

<ul type="circle">

وايضا اوردت في النقطتين مثالين لمعرّف <li> حاو في النقطة الاولى والنقطة الثانية غير حاو .

في الفقرة الثالثة اوردت المربع المصمت لتعداد قائمتي :

كود HTML:

<ul type="square"> <li> (علامة ترقيم مربعة مصمتة)</li> </ul>

كل ما اضفته هو سمة square بعد السمة type في داخل وسم <ul> وسمة square تفيد ان التعداد يأتي على شكل مربع مصمت .

ثم اخترت التعداد الرقمي للفقرة الرابعة وجاءت الشيفرة لها كالتالي :

كود HTML:

<ol> <li>تعداد رقميي</li> <li>تعداد رقمي</li> </ol>

لاحظ اننا هنا ابتدأنا بمعرّف جديد وهو <ol> وينطبق عليه ما انطبق على المعرّف <ul> السابق من انه معرف حاو يحتاج الى معرّف بداية ونهاية :

كود HTML:

<ol></ol>

وهو مختص بأنواع التعداد الرقمي تركتها فارغة لم اضف لها السمة type وهي بشكل انسيابي ستقوم بتعداد الفقرة على شكل ارقام 1- 2- الخ ..
وايضا احطت فقرات التعداد بمعرّف <li> هو ثابت بكل تعدادات القوائم الداخلية .

ثم اخترت في الفقرة الخامسة ان يكون التعداد على شكل احرف انكليزية صغيرة : a.b.c

كود HTML:

<ol type="a"> <li>تعداد حرفي صغير</li> <li>تعداد حرفي صغير</li> </ol>

كل ما قمت باضافته هو السمة type في ادخل المعرّف <ol> واضفت بعد ال = حرف a بين علامتي اقتباس وهي تفيد انني اريد التعداد هنا بالاحرف الانكليزية الصغيرة المتتابعة .

في الفقرة التي يليها اخترت التعداد باحرف انكليزية كبيرة A.B.C:

كود HTML:

<ol type="A"> <li>تعداد حرفي كبير</li> <li>تعداد حرفي كبير</li> </ol>

لاحظ انني كل ما قمت به هو استبدا حرف a الصغير بحرف A الكبير

كود HTML:

<ol type="A">

ثم اخترت التعداد باحرف رومانية كبيرة

كود HTML:

<ol type="I"> <li>تعداد ارقام رومانية كبيرة</li> <li>تعداد</li> <li>تعداد</li> <li>تعداد</li> <li>تعداد</li> </ol>

كل الذي فعلته هو فقط استبدال حرف ال A بحرف I كبيرة ويبدأ معي التعداد الروماني تلقائيا .
ثم اخترت في الفقرة الاخيرة التعداد الروماني باحرف صغيرة

كود HTML:

<ol type="i"> <li>تعداد ارقام رومانية صغيرة</li> <li>تعداد</li> <li>تعداد</li> <li>تعداد</li> </ol>

كل ما فعلت اني قمت باستبدال حرف ال I الكبير بحرف i صغير ويبدا التعداد الروماني باحرف صغيرة تلقائي عند كل بداية فقرة تعداد جديدة .

كود HTML:

<ol type="i">

ارجو من الاخوة الراغبين بالتعلم باجراء تدريبات بكتابة يدهم في المستندات وحفظ الملاحظات في دفتر خاص ..
في الدرس المقبل سنتعلم امرين مهمين ان شاء الله الاول الجداول والثاني تنسيق الصور وهما من اكتر الاستخدامات التي نستخدمها في التصاميم ..
اتمنى فعلا ان تكون الامور سابقة واضحة تماما .
تحياتي لكم جميعا

ملفي الشخصي · [ **09-17-2008** ]

اعتقد انه من اهم الدروس فالقوائم تضيف رونق للصفحات

والجميل اننا نستطيع اختيار نوع التعداد الذي يروق لنا ,,

اعلم انها لا تفي بالغرض ولكني لا املك سوى كلمة شكرا لك ,,

ملفي الشخصي · [ **09-18-2008** ]

فكرة رائعة جدا .... و ساتابع معك اخت ياسمينة اول باول

ملفي الشخصي · [ **09-18-2008** ]

معتصم الشكر موصول لك اخي الكريم .. تتحفني بمتابعتك دائما
daghlise اهلا بك متابعتك تسعدنا .. شكرالك
تحياتي

ملفي الشخصي · [ **09-18-2008** ]

الجداول Tables

مقدمة لابد منها (اقرأها جيدا قبل ان تنطلق ):
الجداول ذلك الشيء الرائع والذي يساعدني في تخطيط صفحة الويب عندما تدخل الى اي صفحة موقع ويب وتجدها مرتبة ومنظمة مقسمة الى عندة اجزاء كجزء البنر وجزء اليساري او اليميني الذي يحوي قوائم محتويات الموقع والجزء الوسطي او حتى لنلقي نظرة على هذا المنتدى في صفحته الرئيسية هو عبارة عن تخطيط جداول قاموا بتقسيم الصفحة به .. فمع الجداول أصبح لمؤلفي ويب قدرة اكبر على التحكم بتخطيط صفحاتهم فهي تسمح لك بترتيب النص الصور في الصفحة بأية طريقة .
الجداول في غاية المرونة فهي تستطيع إنشاء اي نوع من تخطيط الصفحة الذي يرغب به مؤلف الويب ارفض قول البعض ان الجداول عيبها الوحيد هو التعقيد واحب استبدالها بكلمة ان الجداول هي بنية قوية واذا فهمناها طوعناها وتصادقنا معها .. يمكن ان يظهر تعنت الجداول في المحررات التي تقدم بنية الجداول جاهزة كبرنامج الفرونت بيج فعندما تريد اجراء اي تعديل على الجدول او خلية من الجدول تجد صعوبة في بعض الاحيان واحيانا اخرى تجد ان الجدول لا يستجيب لك وهذا طبعا كله لانه قد يغيب او غاب عنك بعض الامور الاساسية والرئيسية في بناء الجدول ..
تخيل الجدول دائما انه كالطفل يقول لك ان لم تفهم كل الذرات (المعرّفات)التي بداخلي لن استجيب لك ..
ولن اؤدي واجبي على اكمل مايرام .
لابد ان نتعلم هنا الامور الاساسيةة في كل فقرة لاننا فيما بعد سنعود بتطورات دخلت على لغة ال html لن افهم هذه التطورات الا اذا كنت ملم بالامور الاساسية .
من البداية اقول لك : لا تصب بالاحباط ولا تيأس قم بكتابة شيفرة الجدول باستمرار ولا بد من الخطأ ولكن الخطأ هو الذي سيعلمك بالتجربة والخطأ يصبح بناء الجدول اكثر وضوحا .

سنبدأ هنا ببداية جدول بسيط ذو خلية واحدة قم بإنشاء مستند نصي جديد ضع به الشيفرة التالية :

كود HTML:

<html> <head> <title> tablesالجداول</title> </head> <body bgcolor="#FEE2A9"> <div align="center"> <table border="1" width="20%" height="20%" bgcolor="#CC3300"> <tr> <td></td> </tr> </table> </div> </body> </html>

احفظه في الملف الخاص بك لهذه التمارين واذهب اليه افتحه ستجد ان الصفحة ظهرت معك كالاتي :

http://www.freewebtown.com/jordan_am/yasminah4.htm

قمنا بهذا التمرين ببناء جدول بسيط جدا يتكون من خلية واحدة .. الان لنشرح ما قمنا به :
ابتدانا المستند بكتابة لغة ال html وفي ال head في داخل ال title حددنا اسم الصفحة وهي الجداول ثم اقفلنا ال head:

كود HTML:

<html> <head> <title> tablesالجداول</title> </head>

ثم افتتحنا ال body وحددنا الخلفية bgcolor بالقيمة الرقمية #FEE2A9:

كود HTML:

<body bgcolor="#FEE2A9">

قبل ان ابدا برسم الجدول اعطيت امر التوسيط اي انني اريد الجدول يكون متوسط في الصفحة

كود HTML:

<div align="center">

بامكانك طبعا تغيير الاتجاه حسب ما ترغب فإن اردته على الجهة اليمين تستبدل كلمة center ب كلمة right او بمحاذاة اليسار فتضع كلمة left.

ومن ثم اعطيت امرا ببناء جدول فاستفتحه بالشيفرة التالية :

كود HTML:

<table border="1" width="20%" height="20%" bgcolor="#CC3300">

في داخل الوسم كتبت table وهي تفيد انني بدأت بتخطيط جدول ومن ثم حددت بعض المواصفات لهذا الجدول وهي ال الحدود borderاي الحدود الخارجية لهذا الجدول اردت ان تكون قيمتها هي الرقم 1 وهي السماكة ولك ان تزيد (حاول ان تزيد سماكة الحدود في التدريب وارجع في كل مرة لترى الفرق بأن تكتب ارقام من الواحد الى ماشئت ) .
ثم حددت عرض الجدول والمساحة التي اريد ان يحتلها هذا الجدول عن طريق المعرّف width اخترت القيمة المئوية 20% اي عشرين بالمئة من حجم الصفحة الكامل ، ولك ان تختار الحجم اما بالبكسل px او بالنسبة المئوية وانصح في البداية هنا ان تختار الطول والعرض بالنسبة المئوية الى ان تتقن احجام الجدول . ثم انتقلت الى تحديد ارتفاع الجدول height وايضا اخترته بالقيمة المئوية 20% من قيمة مساحة الصفحة الاجمالية . وفي النهاية حددت لون خلفية لهذا الجدول عن طريق المعرّف bgcolor واخترت له القيمة الرقمية #CC3300 . هذا كله جاء داخل وسم ال table .

ثم اعطيت امر ال <tr>

كود HTML:

<tr>

ماهو معرّف ال <tr> ؟ ال <TR> هو معرّف لإنشاء اسطر بين خلايا الجدول اي يقسم الجدول الى اسطر التي تم انشاؤها بواسطة المعرّف :

كود HTML:

<td></td>

والمعرّف TD يحوي النصوص التي تقوم بتشكيل محتويات الجدول .

من ثم اغلقت المعرّف <TR>

كود HTML:

</tr>

اتبعته باغلاق المعرّف table :

كود HTML:

</table>

واتبعته باغلاق معرّف div الذي حددنا بداخله اتجاه الجدول في الصفحة

كود HTML:

</div>

وفي النهاية اغلقنا ال body وال html

كود HTML:

</body> </html>

لنعد الان لتعريف كل معرّف جديد مر معنا اليوم :

كود HTML:

<table></table>

معرّف ال <TABLE>
the <table> tag-creating table يستخدم لإضافة جدول الى مستند ويب وهو معرّف حاو اي يحتاج الى معرّف بداية

كود HTML:

<table>

ويحتاج الى معرف نهاية واقفال :

كود HTML:

</table>

ومعرّف النهاية هو اجباري .

والجدول يتضمن معرّفين اساسيين اولهما المعرّف <tr>:

كود HTML:

<tr></tr>

the <tr> tag-table rows وهو معرّف سطر الجدول اي لانشاء اسطر بين الخلايا وهو معرّف حاوي بالرغم من ان معرّف النهاية اختياري لكن لا احبذ ابدا تركه ومن الافضل استخدامه لان هناك بعض البرامج ان لم تغلقه تعطيك خطأ . وايضا غير ذلك اغلقه لرتابة الشيفرة حتى تعلم اين بدأت واين انتهيت .

كود HTML:

</tr>

ثم المعرّف <td> معرّف معطيات الجدوال وهي تحيط النصوص التي تقوم بتشكيل محتويات جدولك وهو ايضا معرّف حاوي ينطبق عليه ما ينطبق على معرّف ال <tr>

كود HTML:

<td>

لايهم باي حجم حروف تكتب في داخل مستند ال html لك ان تكتب بحروف كبيرة او صغيرة فالنتيجة واحد ‘ واورد هنا ملاحظة كنت قد اوردتها سابقا ان مستند ال html لا يعترف بالفراغات التي تتركها داخل المستند اي انها لاتظهر في صفحة الويب نحن نترك الفراغ حتى يسهل علينا التعرف الى محتويات الشيفرة ولكن الانتقال من سطر الى سطر جديد في المستند كما اوردنا سابقا هو المعرّف <br> والمعرف <p> والسبيس هو كلمة  

كود HTML:

<p> 

مشوارنا مع الجدوال مازال في البداية فقط وفي الخطوة التالية سننتقل الى تطوير الجدول اكثر .
تحياتي للجميع

ملفي الشخصي · [ **09-19-2008** ]

مقدمة رائعة ياسمينة نعم الكثير يصعب عليه التعامل

مع الجداول وتشبيهك اياه بالطفل يصيب لب الفكرة

واعتقد ان فهم كل جزئيات الجداول قد تهون علينا الموضوع

بالاضافة الى التجربة ,, فلا يكفي ان نصمم جدول واحد او اثنان

حتى نقول انا اجدنا الامر ولكن علينا نحاول كثيرا ونبتكر فالمحاولة والتكرار

لا بد ان توصلنا الى الهدف المنشود ,,,

بالفعل يهمني كثيرا متابعة الجدوال والدروس المتعلقة به ,,,

ننتظرك دائما تقبلي مروري وثقل ظلي على الموضوع ,,

لك ,,

الاخبــــار
إضافة خبر