iklan banner
كورس HTML5 - الدرس الثانى

كورس HTML5 - الدرس الثانى

2:17 م
تك ماستر

عناصر  HTML

تتكون كل صفحة من صفحات HTML من مجموعة من العناصر Elements يتم انشاؤها باستخدام الوسوم Tages والوسوم كما قلنا سابقا عبارة عن أحرف أو كلمات تحمل معانى خاصة بالنسبة لمستعرض الويب وغالبا ما تكون أسماء الوسوم عبارة عن اختصارات لكلمات انجليزية فالوسم <P> مثلا يستخدم لانشاء العنصر المسؤول عن عرض مقاطع النصوص Paragraphs ضمن صفحات HTML والذى سيتم مناقشة عمله مع عمل باقى الوسوم بشكل تفصيلى فى الصفحات التالية .

تحصر الوسوم بين أقواس من لشكل < > ومن أمثلتها الوسم <html> والوسم <head> والوسم <title> والوسم <body> والوسم <p> .

لكل عنصر من عناصر HTML وسم بداية Begin Tag  ووسم نهاية End Tag  تكون البداية محصورة بين القوسين < > أما وسوم النهاية فتكون محصورة بين القوسين السابقين مضافا اليهما رمز الخط المائل / المعروف ب Slash بالشكل التالى </  >  ومن أمثلة وسوم النهاية الوسم </html>  والوسم </head> والوسم </title> والوسم </body> والوسم </p> ويحوى كل عنصر من عناصر HTML بين وسمى بدايته ونهايته نصا عاديا لعرضه (كما فعل العنصر P فى مثالنا السابق ) ويمكن أن يحوى أى عدد أخر من عناصر HTML شرط الالتزام بترتيب متناظر لوسوم النهاية والبداية , فعند كتابة وسوم النهاية يجب أن يراعى الترتيب فيتم كتابة وسم النهاية الخاص بوسم البداية غير المنتهى (الذى ليس له وسم نهاية ) الأقرب فالأقرب , ففى حين أن الترتيب التالى يعتبر صحيحا :

تك ماستر

لأن وسم النهاية </p> جاء لانهاء أقرب وسم وسم بداية غير منتهى وهو <p>  فى مثالنا , ثم جاء وسم النهاية </body> لانهاء أقرب وسم بداية غير منتهى وهو <body> , ثم جاء وسم النهاية</html> لانهاء أقرب وسم بداية غير منتهى وهو <html> .

فان الترتيب التالى يعتبر خاطئا :

تك ماستر

لأن وسم النهاية </body> جاء لانهاء الوسم <body> الذى لم يكن الوسم الاقرب غير المنتهى للأسف والحالة نفسها تكررت مع وسمى النهاية </html> و </p> .

الخلاصة : لا تنسَ كتابة وسم الاغلاق وراعِِِِ ترتيب وسوم الاغلاق .

الفراغات White Spaces

فى لغة HTML لا يوجد أى قيمة لأزرار الفراغات (مثل Space و Tab ..الخ ) عند استعراض الصفحات باستخدام مستعرض الويب وانما تستخدم أزرار الفراغات لغرض ترتيب الكود وجعله مقروء بشكل أوضح فقط , فقراءة كود HTML  التالية على سبيل المثال :

تك ماستر

 أسهل من قراءة كود HTML التالى :
 
تك ماستر

مع أنهما متماثلتان تماما عند استعراضهما باستخدام مستعرض الويب .
فائدة : من العادات البرمجية الجيدة ازاحة كل المحتوى الموجود بين وسمى بداية ونهاية متماثلين بمقدار ضغطة Tab والبعض يفضل ازاحتها بمقدار ثلاث فراغات (ثلاث ضغطات على مفتاح Space) .

الشكل العام لعناصر HTML

يتم وصف عناصر HTML باستخدام الوسوم , وفيما يلى نعرض الشكل العام لعنصر HTML : 
- ينتهى عنصر HTML بوسم النهاية End Tag .
- كل مايتم كتابته بين وسمى البداية والنهاية يدعى محتوى عنصر HTML علما أن هناك بعض العناصر التى لا تحوى أى محتوى والتى تسمى عديمة المحتوى .
- يندمج وسما البداية والنهاية فى وسم واحد فى حالة العناصر عديمة المحتوى .
- يتم تمرير مجموعة من الخصائص لأغلب عناصر HTML فى وسم البداية عن طريق الواصفات Attributes .
ملحوظة : دائما وأبدا قم بكتابة عناصر HTML بالأحرف الانجليزية بحالتها الصغيرة .
لنشاهد الأمثلة التالية :

وسم النهاية
محتوى العنصر
وسم البداية
</p>
Welcome to my website
<p>
</a>
Go to firstpage
<a href="firstpage.htm">


<hr  />

يمثل كل سطر فى الجدول السابق عنصرا من عناصر HTML فى الصفحة بشكل تخيلى , فالعنصر الأول يبدأ بالوسم <p> وينتهى بالوسم </p> ويحوى المحتوى النصى Welcome to my website بينما يبدأ العنصر الثانى بالوسم <a href="firstpage.htm"> وينتهى بالوسم </a> ويحوى المحتوى النصى Go to firstpage مع اسناد قسمة firstpage.htm الى واصفته href , فى حين أن العنصر الثالث عديم المحتوى يتكون من اتحاد وسمى البداية والنهاية فى وسم واحد بالشكل <hr /> فيظهر فارغ .

 والى اللقاء فى الدرس القادم .
اضغط هنا لقراءة الدرس الأول


نبذة عن

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

شكرا لك على التعليق
الاشتراك في: تعليقات الرسالة ( Atom )