مستندات HTML
- يجب أن تبدأ مستندات HTML بتصريح نوع المستند:
<!DOCTYPE html>. - يبدأ مستند HTML بالوسم
<html>وينتهي بالوسم</html>. - يقع المحتوى المرئي لمستند HTML بين الوسمين
<body>و</body>.
مثال :
تصريح <!DOCTYPE>
يحدّد التصريح <!DOCTYPE> نوع المستند، ويساعد المتصفحات على عرض صفحات الويب بصورة صحيحة.
- يجب أن يظهر هذا التصريح مرة واحدة فقط في بداية الصفحة، قبل أي وسوم HTML.
- لا يتأثر التصريح
<!DOCTYPE>بحالة الأحرف؛ إذ يمكن كتابته بالأحرف الكبيرة أو الصغيرة.
صيغة التصريح المعتمدة في HTML5 هي:
<!DOCTYPE html>العناوين في HTML
تُحدَّد العناوين في HTML باستخدام الوسوم من <h1> إلى <h6>.
يمثّل الوسم <h1> العنوان الأعلى أهميةً، بينما يمثّل الوسم <h6> العنوان الأقل أهميةً، وتُستخدم هذه الوسوم لتنظيم المحتوى في مستويات هرمية واضحة.
مثال :
الفقرات في HTML
تُنشأ الفقرات في HTML باستخدام الوسم <p>، الذي يُستخدم لتحديد الفقرات النصية داخل صفحة الويب.
مثال :
الروابط في HTML
تُنشأ الروابط في HTML باستخدام الوسم <a>، الذي يتيح الانتقال إلى صفحات ويب أخرى أو إلى مواقع إلكترونية مختلفة.
مثال :
تُحدَّد وجهة الرابط باستخدام السمة href، التي تُكتب داخل الوسم الافتتاحي <a>.
تُستخدم السمات (Attributes) لتوفير معلومات إضافية عن عناصر HTML وتحديد خصائصها.
ستتعرّف على السمات بمزيد من التفصيل في فصل لاحق.
الصور في HTML
تُدرج الصور في صفحات HTML باستخدام الوسم <img>.
يُحدَّد مصدر الصورة باستخدام السمة src، ويُضاف النص البديل باستخدام السمة alt، بينما تُحدَّد أبعاد الصورة باستخدام السمتين width وheight.
تُكتب هذه المعلومات ضمن سمات الوسم <img> لتحديد الصورة ووصفها وضبط أبعادها.
مثال :
كيفية عرض مصدر HTML
هل سبق لك أن شاهدت صفحة ويب وتساءلت: «كيف تم إنشاء هذه الصفحة؟»
عرض الشيفرة المصدرية لـ HTML
اضغط على CTRL + U أثناء فتح صفحة ويب، أو انقر بزر الفأرة الأيمن على الصفحة واختر View Page Source (عرض مصدر الصفحة).
ستُفتح علامة تبويب جديدة تعرض الشيفرة المصدرية بلغة HTML التي تكوّن الصفحة.
فحص أحد عناصر HTML
انقر بزر الفأرة الأيمن على أحد عناصر الصفحة، أو على مساحة فارغة فيها، ثم اختر Inspect (فحص).
ستظهر أدوات المطوّرين، التي تتيح لك الاطلاع على العناصر المكوّنة للصفحة، بما في ذلك شيفرات HTML وقواعد CSS المسؤولة عن تنسيقها.
يمكنك أيضًا تعديل شيفرات HTML أو قواعد CSS مباشرةً من خلال لوحتي Elements (العناصر) وStyles (الأنماط) اللتين تظهران في أدوات المطوّرين، ومعاينة التغييرات فورًا.