مرحباً بك في الدرس الثاني من دورتنا البرمجية
في الدرس السابق، تعرفنا على المفهوم العام للغة HTML وكيف تعمل كميكل أساسي لصفحات الويب. اليوم، سنأخذ خطوتنا العملية الأولى لنبني هيكل الصفحة الحقيقي ون نتعلم كيفية إضافة العناوين والنصوص بطريقة صحيحة ومنظمة.
هيكل صفحة الويب الأساسي (HTML Boilerplate)
كل صفحة وخلفها كود HTML يجب أن تتبع بنية أساسية معينة لكي تفهمها متصفحات الإنترنت بشكل صحيح. دعونا نلقي نظرة على الكود الأساسي لأي صفحة ويب:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>موقعي الأول<لي>
</head>
<body>
<!-- محتوى الصفحة يكتب هنا -->
</body>
</html>شرح العناصر الأساسية في الهيكل:
- <!DOCTYPE html>: يخبر المتصفح أن هذا المستند مكتوب بأحدث إصدار من لغة HTML وهو HTML5.
- <html>: هو العنصر الجذري (Root) الذي يحيد بكود الصفحة كاملاً.
- <head>: يحتوي على معلومات غير مرئية للمستخدم مثل عنوان الصفحة وترميز النصوص.
- <body>: يحتوي على جميع العناصر المرئية التي تظهر للمستخدم على الشاشة.
العناوين والنصوص في HTML
لكتابة النصوص والعناوين، توفر لنا لغة HTML مجموعة من الوسوم المخصصة التي تعطي دلالة ومعنى للمتصفح ومحركات البحث.
العناوين (Headings)
تنقسم العناوين في HTML إلى ستة مستويات تبدأ من <h1> وهو الأكبر والأهم، وصولاً إلى <h6> وهو الأصغر:
<h1>هذا عنوان رئيسي مهم جداً</h1>
<h2>هذا عنوان فرعي</h2>
<h3>هذا عنوان من المستوى الثالث</h3>الفقرات النصية (Paragraphs)
لكتابة الفقرات العادية والمقالات، نستخدم الوسم <p>. يقوم المتصفح تلقائياً بترك مسافة فارغة قبل وبعد كل فقرة.
<p>هذه فقرة نصية توضيحية لتعلم كيفية كتابة النصوص في لغة إتش تي إم إل.</p>
<p>هذه فقرة أخرى جديدة تظهر تحت الفقرة الأولى.</p>خاتمة الدرس
لقد تعلمنا اليوم كيف نبني الهيكل الأساسي لأي صفحة ويب وكيف نضيف العناوين والفقرات النصية بانتظام. يمكنك قراءة المزيد من التفاصيل حول هذه الوسوم عبر زيارة موارد توثيق الويب من Mozilla.
