جاري التحميل...
جاري التحميل...
ما هو HTML ولماذا نحتاجه؟
HTML اختصار لـ HyperText Markup Language، وهي لغة الترميز القياسية لإنشاء صفحات الويب.
دعنا نفكر في الأمر ببساطة: إذا كنت تريد بناء منزل، فأنت بحاجة إلى هيكل يشكل أساس المنزل (جدران، أبواب، نوافذ). بدون هذا الهيكل، لا يمكنك إضافة الأثاث أو الطلاء أو أي تفاصيل أخرى.
HTML هو الشيء نفسه ولكن لمواقع الويب. إنه الهيكل الأساسي لكل صفحة ويب في العالم. كل ما تراه في المتصفح - النصوص، الصور، الأزرار، الروابط - كلها مبنية على هيكل HTML.
💡 تشبيه بسيط:
تخيّل أنك تكتب رسالة. HTML يحدد أي جملة هي عنوان، وأي جملة هي فقرة عادية، وأي كلمة هي رابط. HTML يعطي المتصفح تعليمات حول الهيكل للصفحة، لكنه لا يتحدث عن المظهر (ذلك دور CSS).
HTML يحل مشكلة أساسية: كيف يفهم المتصفح ما تريد عرضه للمستخدم؟
بدون HTML، المتصفح يرى نصاً عشوائياً بدون أي معنى. HTML يعطي النص هيكلاً ودلالات حتى يفهم المتصفح:
💡 حقيقة مهمة:
كل صفحة ويب تزورها الآن (Google، YouTube، Facebook، Twitter) مبنية على HTML في جوهرها. حتى تطبيقات JavaScript المعقدة تستخدم HTML لبناء الواجهة.
تخيّل أنك تريد إرسال ملف نصي إلى المتصفح وتخبره: "هذه صفحة ويب." ماذا يحدث؟
المتصفح يرى نصاً عشوائياً ولا يفهم:
HTML يحل هذه المشكلة باستخدام "علامات" بسيطة تحيط بالنص وتعطيه معنى. المتصفح يعرف هذه العلامات ويعالج كل علامة وفقاً لدورها.
HTML يعمل على مبدأ بسيط جداً: علامة الفتح + المحتوى + علامة الإغلاق
دعنا نحلل هذا السطر:
<h1> هي علامة الفتح - تخبر المتصفح: "ابدأ عنواناً من المستوى الأول هنا"مرحبا بالعالم هو المحتوى - النص الذي سيُعرض للمستخدم</h1> هي علامة الإغلاق - تخبر المتصفح: "العنوان ينتهي هنا"لاحظ أن علامة الإغلاق تحتوي على / قبل اسم العلامة. هكذا تميز بين علامات الفتح والإغلاق.
💡 تشبيه بسيط:
العلامة مثل الأقواس: (مرحبا بالعالم). القوس المفتوح ( يبدأ النص، والقوس المغلق ) ينهيه. HTML يستخدم < و> بدلاً من الأقواس العادية.
إليك أبسط صفحة HTML ممكنة. يمكنك كتابتها في أي ملف بامتداد .html وفتحها في المتصفح:
دعنا نفهم كل سطر:
<!DOCTYPE html>: تخبر المتصفح بأن هذا ملف HTML5 (أحدث إصدار). يجب أن يكون هذا السطر دائماً الأول في الملف.<html lang="ar" dir="rtl">: العلامة الجذرية التي تحتوي على الصفحة بأكملها. lang="ar" تخبر المتصفح بأن اللغة عربية، وdir="rtl" تخبره بأن الاتجاه من اليمين إلى اليسار.<head>: يحتوي على معلومات عن الصفحة لا تظهر مباشرة للمستخدم (مثل العنوان و charset).<meta charset="UTF-8">: يحدد ترميز الأحرف - مهم لدعم الأحرف العربية بشكل صحيح.<title>: العنوان الذي يظهر في تبويب المتصفح.<body>: يحتوي على كل المحتوى المرئي للصفحة - كل ما يراه المستخدم.دعنا نرى كيف تبدو صفحة ويب حقيقية في بداية المشروع. هذا المثال يحاكي هيكل صفحة "من نحن" على موقع ويب بسيط:
💡 ملاحظة:
استخدمنا علامات مثل <header> و<nav> و<main> و<section> و<footer>. هذه علامات دلالية سنتعلمها بالتفصيل في درس لاحق. إنها تعطي المتصفح فهماً أعمق لهيكل الصفحة.
عندما تكتب ملف HTML وتفتحه في المتصفح، يحدث ما يلي:
<body> هو الأب لـ <h1> و<p>.💡 هل تعلم؟:
يمكنك رؤية هذه "الشجرة" بنفسك! اضغط F12 على أي صفحة ويب وانتقل إلى تبويب Elements. سترى HTML الأصلي وكيف يحوله المتصفح إلى بنية شجرية.
<p>نص بدون إغلاق بدلاً من <p>نص مع إغلاق</p>. قد يعالجها المتصفح بشكل غير متوقع، أو يغلق العلامة تلقائياً في المكان الخطأ.lang='ar' بدلاً من lang="ar". في HTML، يُفضل دائماً استخدام علامات التنصيص المزدوجة.<!DOCTYPE html> في بداية الملف. بدونها، قد يعالج المتصفح الصفحة في "وضع الغرابة" مما يؤدي إلى سلوك غير متوقع.<body>، وليس في <head>. الـ head فقط للبيانات الوصفية.<b><i>نص</b></i> بدلاً من <b><i>نص</i></b>. العلامة الداخلية يجب إغلاقها أولاً.HTML وDOCTYPE وUTF-8 - غير مطلوب لكنه ممارسة شائعة.lang="ar" بدلاً من lang='ar'.<br> و<img> يُفضل كتابتها كـ <br /> و<img /> في XHTML.<header> و<nav> و<main> بدلاً من استخدام <div> لكل شيء.<!-- هذا هو عنوان الصفحة --><اسم_العلامة>محتوى</اسم_العلامة><!DOCTYPE html><head> (معلومات) و<body> (المحتوى المرئي)ما هو الدور الرئيسي لـ HTML؟
أين يوضع المحتوى المرئي للصفحة (النصوص، الصور، الأزرار)؟
أي علامة تخبر المتصفح بأن اللغة عربية والاتجاه من اليمين إلى اليسار؟
أنشئ ملف HTML جديد يسمى <code>index.html</code> يحتوي على: 1. عنوان رئيسي <code><h1></code> باسمك، 2. فقرة <code><p></code> تقدمك بنفسك، 3. قائمة غير مرقمة <code><ul></code> بثلاثة من هواياتك.
الحل:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>My Profile</title>
</head>
<body>
<h1>Hello, I'm Ahmed</h1>
<p>I'm a beginner in programming and currently learning HTML</p>
<h2>My Hobbies:</h2>
<ul>
<li>Programming</li>
<li>Reading</li>
<li>Gaming</li>
</ul>
</body>
</html>أنشئ صفحة HTML تحتوي على بطاقة هوية شخصية تتضمن:
<h1><p><ul><ol><a>💡 ستحتاج علامات جديدة لم تتعلمها بعد مثل <code><a></code> للروابط. يمكنك البحث عنها على Google أو الانتظار حتى الدرس القادم!
العلامات الأساسية:
<!DOCTYPE html> - إعلان نوع المستند<html> - العنصر الجذر<head> - البيانات الوصفية للصفحة<body> - المحتوى المرئي<title> - عنوان التبويب<meta> - معلومات البيانات الوصفيةقالب صفحة أساسية:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>العنوان</title>
</head>
<body>
<!-- المحتوى هنا -->
</body>
</html>