HTML & CSS • المستوى الأول • الدرس 1
العودة لفهرس المستوىمقدمة في الويب وبنية مستند HTML5 القياسي
أهداف الدرس العلمية
- فهم آلية عمل متصفحات الويب وكيفية تفسير وقراءة شفرات HTML.
- استيعاب دور الوسم القياسي
<!DOCTYPE html>في تفعيل معيار HTML5. - التمييز الدقيق بين منطقة البيانات الوصفية
<head>ومنطقة المحتوى المرئي<body>. - بناء هيكل موقع ويب قياسي خالي من الأخطاء من الصفر.
1. ما هي لغة HTML وكيف يعالجها المتصفح؟
تُعد لغة HTML (اختصاراً لـ HyperText Markup Language) اللبنة الأساسية والركيزة الهيكلية لأي صفحة أو تطبيق ويب. هي ليست لغة برمجية تعتمد على المنطق، بل لغة توصيفية تُخبر متصفح الويب (مثل Chrome أو Firefox) بكيفية تنظيم المكونات الأساسية كالفقرات، الأزرار، العناوين، والجداول.
2. التشريح التفصيلي لهيكل المستند القياسي
<!DOCTYPE html>السطر الإعلاني الأول في الملف؛ ينبه المتصفح فوراً لاتباع المعايير الحديثة للغة HTML5 لتفادي تشغيل وضع التوافق القديم (Quirks Mode).
<html lang="ar" dir="rtl">الجذر الأصلي الذي ينطوي بداخله كامل الكود، وتُحدد الخصائص lang و dir لغة ومحاذاة الاتجاه للغة العربية.
<head> ... </head>القسم الخلفي للصفحة؛ يضم عنوان التبويب title، ترميز الحروف العالمي UTF-8، وروابط الملفات الخارجية.
<body> ... </body>القسم التفاعلي المرئي؛ يحتوي على كل ما يشاهده ويستخدمه الزائر داخل واجهة الموقع.
التطبيق العملي المباشر
تحدي الدرس الأول: بناء الصفحة القياسية
- كتابة السطر الإعلاني
<!DOCTYPE html>في بداية الملف. - إنشاء العنصر الجذر
<html>وضبط الاتجاه إلىdir="rtl"ولغةlang="ar". - إنشاء رأس المستند
<head>وبداخله عنوان الصفحة<title>باسم: منصة نهضة. - إنشاء جسم المستند
<body>وإدراج عنوان رئيسي<h1>يحمل النص: مرحباً بكم في نهضة.
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 12, Col 1UTF-8Spaces: 2
165 chars