أهلاً وسهلاً بكم جميعاً في هذا الدرس التمهيدي عن HTML أنا سعيد جداً بمرافقتكم في هذه الرحلة الشيقة التي ستفتح لكم أبواب عالم إنشاء مواقع الويب. لا تقلقوا إذا بدا لكم كل هذا غامضاً بعض الشيء الآن، فسنقوم معاً بتبسيط كل مفهوم، خطوة بخطوة، بروح من الود والتعليم.
تخيلوا للحظة أن الويب عبارة عن مكتبة ضخمة. كل كتاب في هذه المكتبة هو صفحة ويب تزورونها. ولكن كيف تُبنى هذه الكتب؟ وكيف تُنظم لتتمكنوا من قراءتها وفهمها؟ هذا هو بالضبط دور HTML!
ما هو HTML؟ هيكل صفحة الويب الخاصة بك
HTML تعني HyperText Markup Language (لغة ترميز النص التشعبي). إنها اللغة الأساسية للويب. لتبسيط الأمر، إذا كان موقع الويب الخاص بك جسداً بشرياً، فإن HTML سيكون هيكله العظمي. تحدد هذه اللغة بنية ومحتوى الصفحة: أين توجد العناوين، الفقرات، الصور، الروابط، وما إلى ذلك.
إنها ليست لغة برمجة بالمعنى التقليدي للكلمة، لأنها لا تسمح بإنشاء منطق معقد أو تفاعلات ديناميكية. دورها وصفي بحت: إنها “تُعلّم” المحتوى لتخبر المتصفح بكيفية عرضه.
HTML و CSS و JavaScript: الثلاثي الذي لا ينفصل في الويب
لفهم دور HTML جيداً، من الضروري وضعها في سياق رفيقيها اللذين لا ينفصلان: CSS و JavaScript. دعونا نعود إلى تشبيه الجسد البشري:
•HTML (الهيكل العظمي): كما رأينا، هي التي تنظم المحتوى. تقول: “هذا عنوان”، “هذه فقرة”، “هذه صورة”.
•CSS (الجلد، الملابس، تصفيفة الشعر): Cascading Style Sheets (أوراق الأنماط المتتالية) هي اللغة التي تهتم بالمظهر. تقول: “يجب أن يكون هذا العنوان باللون الأزرق، وفي المنتصف، وبحجم كبير”، “يجب أن تكون هذه الفقرة بخط معين”، “يجب أن تكون هذه الصورة ذات حدود دائرية”. بدون CSS، ستكون صفحة الويب الخاصة بك وظيفية ولكنها أساسية جداً، بدون أي تنسيق.
•JavaScript (العضلات، الدماغ): هذه هي اللغة التي تضفي التفاعل والديناميكية على موقعك. تقول: “عندما ينقر المستخدم على هذا الزر، اعرض هذه الرسالة”، “مرر هذه الصورة كل 5 ثوانٍ”، “تحقق من صحة هذا النموذج قبل إرساله”. يسمح JavaScript بإنشاء تجارب مستخدم غنية ومتجاوبة.
باختصار، HTML توفر البنية، CSS تنسقها، و JavaScript تجعلها تفاعلية. تعمل هذه اللغات الثلاث جنباً إلى جنب لإنشاء مواقع الويب التي نستخدمها كل يوم.
الهيكل العام لصفحة HTML5: أسس منزلك على الويب
الآن بعد أن عرفنا ما هو HTML، دعونا نرى كيف تُنظم صفحة HTML5. فكروا في بناء منزل: هناك أسس، جدران، سقف. صفحة HTML لها أيضاً هيكلها الأساسي الخاص بها، وهو دائماً نفسه، ويعمل كنقطة بداية.
إليكم العناصر الرئيسية التي ستجدونها في كل صفحة HTML5:
1.<!DOCTYPE html>: هذا هو السطر الأول في ملف HTML الخاص بك. يخبر المتصفح أن المستند هو مستند HTML5. إنه إعلان بسيط ولكنه حاسم.
2.<html lang=”ar”>: هذا هو العنصر الجذري لأي صفحة HTML. كل محتوى صفحتك (باستثناء DOCTYPE) يقع داخل هذا الوسم. السمة lang=”ar” تشير إلى أن اللغة الرئيسية لمحتوى الصفحة هي العربية، وهو أمر مفيد لمحركات البحث وأدوات الوصول.
3.<head>: يحتوي قسم <head> على معلومات حول الصفحة لا يراها المستخدم مباشرة في المتصفح. إنه أشبه ببطاقة هوية صفحتك. ستجدون فيه البيانات الوصفية (معلومات حول المعلومات)، وعنوان الصفحة الذي يظهر في علامة تبويب المتصفح، وروابط لملفات CSS، وما إلى ذلك.
4.<body>: هذا هو الجزء الأكثر أهمية للمستخدم! كل ما ترونه على صفحة الويب (النصوص، الصور، مقاطع الفيديو، الروابط، الأزرار) يقع داخل وسم <body>. إنه الجسم المرئي لصفحتك.
صفحة HTML5 الأولى لك: “أهلاً بالعالم!”
حان الوقت للانتقال إلى التطبيق العملي! سنقوم معاً بإنشاء صفحة HTML بسيطة جداً. لا تقلقوا، سنقوم بتفكيك كل سطر.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحتي الأولى في HTML5</title>
</head>
<body>
<h1>أهلاً بالعالم!</h1>
<p>مرحباً بكم في أول صفحة ويب لي. إنها بداية مثيرة!</p>
</body>
</html>
دعونا نفكك هذا الكود، سطراً بسطر، كما يفعل الأستاذ:
<!DOCTYPE html>
كما ذكرنا سابقاً، هذا السطر هو إعلان. إنه ليس وسماً من وسوم HTML بحد ذاته، بل هو تعليمات للمتصفح. يخبره: “يا متصفح! هذا المستند الذي أنت على وشك قراءته مكتوب بلغة HTML5!” هذا أمر حاسم لكي يفسر المتصفح الكود بشكل صحيح.
تخيلوا أنه الملصق الموجود على غلاف كتاب يشير إلى: “هذه رواية خيال علمي” أو “هذا كتاب تاريخ”. بدون هذا الملصق، قد يختلط الأمر على القارئ.
<html lang="ar">
هذا هو الوسم الجذري، الحاوية الرئيسية لكل محتوى صفحة الويب الخاصة بك. يجب أن يقع كل شيء في صفحتك (باستثناء DOCTYPE) بين <html lang=”ar”> و </html>. السمة lang=”ar” مهمة جداً للوصول وتحسين محركات البحث. إنها تخبر المتصفحات ومحركات البحث أن محتوى الصفحة باللغة العربية.
هذا هو الهيكل العام لمنزلك، الجدران الخارجية الأربعة والسقف الذي يحيط بكل ما بداخله.
<head>
يحتوي هذا القسم على معلومات تقنية حول صفحتك. هذه المعلومات لا تُعرض مباشرة على الصفحة نفسها، ولكنها ضرورية لعملها بشكل صحيح وتفسيرها بشكل جيد من قبل المتصفحات ومحركات البحث. هنا تحددون عنوان علامة تبويب المتصفح، مجموعات الأحرف، روابط لملفات CSS، وما إلى ذلك.
إنه أشبه بالرسومات الهندسية لمنزلك: تحتوي على معلومات حيوية (أين تمر الكابلات الكهربائية، أنابيب المياه) ولكنها لا تُرى بمجرد بناء المنزل.
<meta charset="UTF-8">
هذا وسم meta (للمعلومات الوصفية) يحدد ترميز الأحرف لمستندك. UTF-8 هو الترميز الأكثر شيوعاً والموصى به. يسمح بعرض جميع الأحرف الخاصة بشكل صحيح، بما في ذلك الحركات (مثل الفتحة والكسرة والضمة في العربية)، والرموز، وأحرف اللغات المختلفة. بدون هذا، قد ترون أحرفاً غريبة بدلاً من الحركات.
إنه مثل أن تقول لجهاز الكمبيوتر الخاص بك: “استخدم هذا القاموس لفهم جميع الكلمات والرموز في هذه الصفحة”.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
هذا الوسم meta حاسم لتصميم المتجاوب (responsive design)، أي قدرة موقعك على التكيف مع أحجام الشاشات المختلفة (أجهزة الكمبيوتر، الأجهزة اللوحية، الهواتف الذكية). يخبر المتصفح أن عرض الصفحة يجب أن يتكيف مع عرض الجهاز (width=device-width) وأن مستوى التكبير الأولي يجب أن يكون 1.0 (initial-scale=1.0). بشكل أساسي، يقول: “اعرض صفحتي بشكل صحيح على جميع الأجهزة!”
إنه مثل إعطاء تعليمات للمهندس المعماري بحيث يمكن توسيع المنزل أو تصغيره بسهولة دون أن يفقد شكله، حسب المساحة المتاحة.
<title>صفحتي الأولى في HTML5</title>
هذا هو عنوان صفحة الويب الخاصة بك الذي يظهر في علامة تبويب المتصفح أو في شريط عنوان النافذة. هذا هو أيضاً العنوان الذي تعرضه محركات البحث في نتائجها. إنه مهم جداً للمستخدم ولتحسين محركات البحث (SEO). هذا هو اسم كتابك الذي يظهر على الغلاف والظهر.
<body>
هنا يقع كل المحتوى المرئي لصفحة الويب الخاصة بك. كل ما يراه المستخدم ويتفاعل معه (النصوص، الصور، الروابط، النماذج، إلخ) يجب أن يوضع بين وسمي <body> و </body>. هذا هو داخل منزلك، مع جميع الغرف والأثاث والديكورات. هنا تحدث الحياة!
<h1>أهلاً بالعالم!</h1>
<h1> هو وسم عنوان من المستوى الأول. في HTML، توجد ستة مستويات من العناوين، من <h1> (الأكثر أهمية) إلى <h6> (الأقل أهمية). يُستخدم <h1> عادةً للعنوان الرئيسي للصفحة أو القسم. إنه عنصر كتلي (block element)، مما يعني أنه يأخذ العرض المتاح بالكامل وينشئ سطراً جديداً بعده. هذا هو العنوان الرئيسي لفصل كتابك، الأكبر والأكثر وضوحاً.
<p>مرحباً بكم في أول صفحة ويب لي. إنها بداية مثيرة!</p>
<p> هو الوسم المستخدم لفقرات النص. إنه أحد العناصر الأكثر استخداماً في HTML. يجب أن يكون كل النص الذي تريد عرضه كفقرة محاطاً بوسمي <p> و </p>. مثل <h1>، إنه عنصر كتلي. هذه هي فقرات النص التي تشكل جسم فصلك.
</html>
هذا هو الوسم الختامي للعنصر <html>. يشير إلى نهاية مستند HTML الخاص بك.
نصائح عملية للبدء مع HTML5
الآن بعد أن كتبتم صفحتكم الأولى، إليكم كيفية إحيائها:
1.إنشاء ملف HTML: افتحوا محرراً نصياً بسيطاً (مثل Notepad على Windows، TextEdit على Mac، أو الأفضل من ذلك، محرر أكواد مثل VS Code وهو مجاني وشائع جداً). انسخوا والصقوا الكود أعلاه في هذا الملف.
2.حفظ الملف: احفظوه بامتداد .html (على سبيل المثال، index.html أو my_first_page.html). تأكدوا من أن الترميز هو UTF-8 عند الحفظ.
3.فتحه في المتصفح: انقروا نقراً مزدوجاً ببساطة على ملف index.html الخاص بكم. سيُفتح تلقائياً في متصفح الويب الافتراضي لديكم (Chrome، Firefox، Edge، Safari). وهكذا! سترون “أهلاً بالعالم!” معروضة في المتصفح.
تهانينا! لقد أنشأتم للتو أول صفحة ويب لكم. هذه خطوة كبيرة!
أهمية HTML5 في تطوير الويب الحديث
HTML5 هي أكثر بكثير من مجرد تطور لـ HTML. إنها ثورة جلبت وسوماً دلالية جديدة (لإعطاء معنى أكبر للمحتوى)، وقدرات وسائط متعددة أصلية (صوت، فيديو بدون إضافات)، وواجهات برمجة تطبيقات (APIs) لتطبيقات ويب أكثر ثراءً، ودعماً أفضل للتصميم المتجاوب. إنها حجر الزاوية في أي موقع ويب حديث.
من خلال إتقان HTML5، تكتسبون المهارة الأساسية لبناء أي موقع ويب، من صفحة شخصية بسيطة إلى تطبيقات ويب معقدة. إنها نقطة البداية التي لا غنى عنها لأي شخص يرغب في الدخول إلى عالم تطوير الويب.
استمروا في الاستكشاف، والتجريب، وقبل كل شيء، استمتعوا! عالم الويب واسع ومثير، ولديكم الآن الأسس للبدء في بنائه. حظاً موفقاً في بقية رحلتكم التعليمية!
ملخص الدرس
HTML (HyperText Markup Language) هي لغة وصفية تُستخدم لتحديد هيكل صفحات الويب وتنظيم محتواها، مثل العناوين والفقرات والصور والروابط. تُعد HTML “الهيكل العظمي” للموقع، حيث توفر القاعدة لبناء صفحات ويب.
لا، HTML ليست لغة برمجة. هي لغة وصفية تهدف إلى “تعليم” المحتوى للمتصفح لكيفية عرضه، ولا تتضمن منطقاً برمجياً أو تفاعلات ديناميكية.
HTML: تحدد البنية والمحتوى.
CSS: تتحكم في المظهر والتنسيق (الألوان، الخطوط، تصميم الصفحة).
JavaScript: تضيف التفاعل والديناميكية (الحركة، التحقق من البيانات، استجابة المستخدم).
HTML5 تقدم ميزات متقدمة مثل:
– الوسوم الدلالية لتحسين فهم المحتوى.
– دعم الوسائط المتعددة (تشغيل الصوت والفيديو بدون إضافات).
– واجهات برمجة التطبيقات (APIs) لتطبيقات الويب الغنية.
– تحسين التوافق مع الأجهزة المحمولة.
صفحة HTML5 تتكون من:
– الإعلان عن نوع المستند (<!DOCTYPE html>).
– وسم الجذر <html lang=”ar”>.
– قسم الرأس <head> يحتوي على بيانات وصفية وعنوان الصفحة.
– قسم الجسم <body> يحتوي على المحتوى المرئي مثل النصوص والصور والروابط.
تحدد اللغة الأساسية للمحتوى (مثل العربية)، مما يساعد محركات البحث وأدوات الوصول على فهم وعرض الصفحة بشكل صحيح.
يحتوي على معلومات تقنية مهمة، مثل:
– ترميز الأحرف (<meta charset=”UTF-8″>).
– إعدادات العرض المتجاوب (viewport).
– عنوان الصفحة <title> لتحسين SEO.
بعد كتابة الكود وحفظ الملف بامتداد .html، يمكن فتحه مباشرة بأي متصفح مثل Chrome أو Firefox أو Safari لمعاينة النتيجة.
الوسوم الدلالية (مثل <header>, <article>, <footer>) تعطي معنى أعمق للمحتوى، مما يسهل فهمه من قبل المتصفحات ومحركات البحث ويحسن الوصولية.
