عناصر 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 /> فيظهر فارغ .
والى اللقاء فى الدرس القادم .
محمود البحراوى : من جمهورية مصر العربية , إهتمام وتخصص في تصميم المواقع وايضا برمجتها وتطويرها كذلك التصاميم العامة أعمل حر ,عملت كثيرا فى مجال التسويق الالكترونى, حب وعشق للأجهزة الكمبيوتر وايضا الهواتف.
محول الاكواد محول الأكواد اضافة الإبتسمات اضافة الإبتسمات