تعرفنا في الأمثلة السابقة على مجموعة من الوسوم التي تمكننا من إضافة مجموعة من العناصر إلى صفحة HTML , وسنتعرف على المزيد طبعا .
لكن قبل ذلك من الجيد أن نتعرف على عنصر من عناصر صفحة HTML وهو عنصر <head> يحتوي على الأكواد المهمة والتي تتحكم في طريقة عمل وعرض الموقع ككل , وهذه الأكواد وبما أنها داخل وسم <head> فهي لا تظهر في الموقع لكن لها دور مهم في الموقع وهذا ما سنتعرف عليه.
كما سبق الإشارة فهذا هو هيكل صفحة HTML الأساسي
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8">
<title>عنوان الموقع</title>
</head>
<body>
</body>
</html>فيما يخص العنصر “<!DOCTYPE html>” فهو سطر يكتب لإخبار المتصفح عن نوع الملف وكلمة DOCTYPE هي إختصار ل Document Type وكلمة HTML تشير إلى اللغة المستخدمة.
من العناصر أو الوسم المهمة التي تكون داخل وسم <head> هو وسم <title> وهو المسؤول عن تحديد عنوان الموقع , وهو العنوان الذي يظهر على المتصفحات , يمكنك تغيير النص داخل <title> ولاحظ التغييرات التي ستحدث .
أيضا من الوسوم الأخرى المهمة هو ال <meta> وهي عناصر وصفية , مثال :
<meta charset="UTF-8">في المثال الخاص بعنصر ال <meta> ثم إستخدام الخاصية charset=”” وهو الذي يخبر المتصفح عن الترميز المستخدم أو المتوافق مع المحتوى النصي للموقع , وفي هذه الحالة الترميز الذي تم إستخدامه هو UTF-8 وهو ترميز عالمي وهو طبعا يدعم اللغة العربية, والواقع التي لا تدع هذا الترميز ستلاحظ أن اللغة العربية لا تظهر بها بشكل جيد.
من عناصر ال <meta> التي تستخدم بكثرة وتعتبر أساسية هي name و content مثال
<meta name="description" content=" هنا وصف الموقع" > كما تلاحظ هذا السطر يحتوي على خاصية “name” الذي يشير إلى وصف الصفحة “description” و بالنسبة للخاصية “content” والذي يشير إلى محتوى الوصف , وهذه العناصر تستخدم من بشكل أساسي من قبل محركات البحث من أجل أرشفة المواقع , حيث ترسل محركات البحث زواحف أو عناكب من أجل فحص الموقع , وتقوم هذه البرمجيات بتحليل محتوى الموقع بشكل عام وتركز على عناصر ال <meta> بشكل خاص من أجل الحصول على المعلومات الدقيقة المتعلقة بالموقع, والعناصر التي تعرفنا عليها هي مجرد مثال بسيط للغاية , وهناك الكثير من العناصر الأخرى التي سنتعرف عليها عندما نحتاج لها.
التعليقات
التعليقات هي وسيلة مهمة تمكنك من توثيق أكواد الصفحة وتحديد دور كل عنصر , هي غير ضرورية إن تعلق الأمر بعمل الموقع فهو سيعمل بشكل جيد , يالتالي يمكنك عدم استخدامها إن كنت تفضل ذلك , خاصة إن كنت تعمل على موقع صغير والأكواد الخاصة به بسيطة وسهلة , أما إن كنت تعمل على مشروع كبير فينصح بشدة إستخدام التعليقات , حتى لا تنسى ما تقوم به, وهنا مثال على التعليقات في لغة HTML
<!-- هنا يمكنك وضع تعليق حيث أنه لا يظهر في الصفحة -->
<h1> صورة جميلة</h1>
<img src="myimage.png">لكتابة تعليق داخل صفحة يمكنك كتابة نص التعليق داخل <!– –> كما سبق الإشارة يقوم المتصفح بتجاهل التعليقات , بالتالي إن كنت ترى أن بعض أجزاء الموقع تحتاج لأن تضع لها تعليق من أجل تذكرها فيما بعد فيمكنك إستخدام التعليقات.
القوائم Lists
القوائم في مواقع الإنترنت لها دور أساسي وهو عرض المحتوى على شكل قوائم , وهذه القوائم تكون مختلفة إما عمودية أو أفقية وقد تكون مرتبة أي تتبع ترتيب محدد من 1 فما فوق , أو غير مرتبة حيث تتكون من مجموعة من النقاط.
القوائم الغير مرتبة Unordered List
إن القوائم الغير مرتبة هي عبارة عن قائمة مكونة من نقط , أي أنها لا تتبع أي ترتيب محدد , ويمكنك إنشاءها على هذا الشكل
<h3> قائمة غير مرتبة </h3>
<ul>
<li>لينكس</li>
<li>ويندوز</li>
<li>ماك</li>
<li>أندرويد</li>
</ul>قم بكتابة المثال داخل وسم <body> ولاحظ النتيجة حيث أن الوسم <ul> هو اختصار ل Unordered List و <li> إختصار ل List وتمتل محتوى القائمة.
القائمة المرتبة Ordered List
وهي تستخدم من أجل إنشاء قوائم لها ترتيب محدد , بشكل إفتراضي تكون على شكل أرقام من 1 فما فوق , مثال
<h3> قائمة مرتبة </h3>
<ol>
<li>لينكس</li>
<li>ويندوز</li>
<li>ماك</li>
<li>أندرويد</li>
</ol>وكما تلاحظ في هذه القائمة استخدمنا الوسم <ol> وهو إختصار ل Ordered List , طبعا يمكنك التحكم في طريقة العرض وتغيير طريقة العرض الافتراضية ويمكنك فعل التالي :
<ol type="A">لاحظ أن القائمة ستتحول من قائمة رقية إلى قائمة تتبع الترتيب الأبجدي وهذا بفضل الخاصية type=”” والتي أعطيناها القيمة A بالتالي تبدأ الترتيب من الحرف A.
وكما يمكنك إنشاء قوائم أساسية يمكنك إنشاء قوائم فرعية داخلها على هذا الشكل
<h3> قائمة مرتبة </h3>
<ol>
<li>لينكس</li>
<ol>
<li>أبونتو</li>
<li>لينكس منت</li>
</ol>
<li>ويندوز</li>
<li>ماك</li>
<li>أندرويد</li>
</ol>