HTML
لغة بناء صفحات الويب
ابنِ صفحات ويب منظمة: العناصر والسمات، الروابط والصور، الجداول والنماذج، العناصر الدلالية، وإمكانية الوصول ودعم العربية.
- عدد الدروس: 23
- عدد الفصول: 4
- بالعربية والإنجليزية
تقدّمك
محتوى التوثيق
الدروس مرتّبة من الأساس إلى المتقدّم. اقرأها بالترتيب أو اقفز إلى ما تحتاجه.
الفصل 1
أساسيات HTML
- 1مقدمة إلى HTMLHTML هي اللغة المعيارية لبناء صفحات الويب. تعرّف عليها، وافهم كيف يحوّلها المتصفح إلى صفحة مرئية، ثم اكتب أول مستند HTML بنفسك.
- 2هيكل مستند HTMLتُبنى كل صفحة HTML على الهيكل نفسه. تعرّف على دور تعريف نوع المستند والعناصر <html> و<head> و<body>، وعلى أهمية lang وcharset وإعداد منطقة العرض.
- 3عناصر HTMLيتكوّن عنصر HTML من وسم بداية ومحتوى ووسم نهاية. تعلّم كيف تكتب العناصر، وكيف تُداخلها بشكل صحيح، وكيف تميّز العناصر الفارغة.
- 4سمات HTMLتمنح السمات العناصرَ معلومات إضافية، مثل عنوان الرابط أو وصف الصورة. تعلّم طريقة كتابتها، وتعرّف على أكثرها استخدامًا.
- 5العناوين في HTMLتمنح العناوين من <h1> إلى <h6> صفحتك مخططًا واضحًا. تعلّم كيف تستخدمها، ولماذا يهم تسلسلها الصحيح لمحركات البحث ولإمكانية الوصول.
- 6الفقرات في HTMLاكتب الفقرات بالعنصر <p>، واكسر الأسطر بـ<br>، وافصل بين المواضيع بـ<hr>، واعرض النص كما كتبته تمامًا بـ<pre>.
- 7تنسيق النصوص في HTMLتوفّر HTML عناصر خاصة للنصوص ذات المعنى: المهمة، والمؤكَّدة، والمميَّزة، والمحذوفة، والمُضافة، إلى جانب النصوص السفلية والعلوية. تعلّم متى تستخدم كلًّا منها.
- 8التعليقات في HTMLتتيح لك التعليقات ترك ملاحظات داخل الشيفرة لا يعرضها المتصفح. تعلّم طريقة كتابتها، وكيف تستخدمها لإخفاء أجزاء من الشيفرة أثناء تتبّع الأخطاء.
الفصل 2
المحتوى
- 9الروابط في HTMLالروابط هي ما يصل صفحات الويب ببعضها. تعلّم العنصر <a> والسمتين href وtarget، والفرق بين الروابط المطلقة والنسبية، وروابط البريد الإلكتروني، والروابط إلى أقسام الصفحة.
- 10الصور في HTMLأضف الصور بالعنصر <img>، وصِفها بالسمة alt، وحدّد أبعادها، وأرفق بها تعليقًا توضيحيًا باستخدام <figure> و<figcaption>.
- 11القوائم في HTMLنظّم العناصر المترابطة باستخدام القوائم غير المرتبة (<ul>) والمرتبة (<ol>) وقوائم الوصف (<dl>)، وتعلّم كيف تُداخل القوائم وتتحكم في ترقيمها.
- 12الجداول في HTMLتعرض الجداول البيانات في صفوف وأعمدة. تعلّم العناصر <table> و<tr> و<th> و<td>، وجمّع الصفوف بـ<thead> و<tbody>، وادمج الخلايا بـcolspan وrowspan، وأضف عنوانًا بـ<caption>.
- 13الألوان في HTMLيمكن كتابة الألوان بأسمائها أو بصيغ HEX وRGB وHSL. تعرّف على كل صيغة، وطبّق الألوان على النصوص والخلفيات والحدود باستخدام السمة style.
الفصل 3
النماذج
- 14النماذج في HTMLتجمع النماذج البيانات من المستخدمين. تعلّم العناصر <form> و<label> و<input> و<button>، ودور السمتين action وmethod.
- 15أنواع حقول الإدخالتحوّل السمة type العنصر <input> إلى أدوات متنوعة: نص، وبريد إلكتروني، وكلمة مرور، ورقم، وتاريخ، ومربع اختيار، وزر اختيار، وشريط تمرير، ولون، وملف، وزر إرسال. تعرّف عليها جميعًا في مثال تفاعلي.
- 16سمات حقول النماذجتحكّم في سلوك الحقول بسمات مثل required وplaceholder وvalue وmin وmax وpattern وdisabled وreadonly، واحصل على تحقق مدمج من البيانات دون أي جهد إضافي.
الفصل 4
البنية والدلالات
- 17العناصر الكتلية والسطريةلكل عنصر طريقة عرض افتراضية، فهو إما كتلي أو سطري. تعرّف على الفرق بينهما، وعلى الحاويتين العامتين <div> و<span>.
- 18الفئات والمعرّفاتتجمع السمة class العناصر التي تشترك في التنسيق نفسه، بينما تمنح السمة id عنصرًا واحدًا اسمًا فريدًا. تعلّم طريقة عملهما، ومتى تستخدم كلًّا منهما.
- 19العناصر الدلاليةتصف العناصر الدلالية، مثل <header> و<nav> و<main> و<section> و<article> و<aside> و<footer>، طبيعة كل جزء في الصفحة. تعلّم كيف تبني تخطيطًا واضح المعنى لصفحاتك.
- 20رأس الصفحة والبيانات الوصفيةيحمل العنصر <head> معلومات عن صفحتك: عنوانها، ووصفها، وإعداد منطقة العرض، وروابط ملفات CSS، والأيقونة المفضلة (Favicon). تعرّف على وظيفة كل منها.
- 21الوسائط في HTMLأضف الفيديو والصوت بالعنصرين <video> و<audio>، واعرض صفحة داخل صفحتك بالعنصر <iframe>، وقدّم الصورة الأنسب لكل شاشة بالعنصر <picture>.
- 22إمكانية الوصول في HTMLالصفحات سهلة الوصول تعمل للجميع، ومنهم مستخدمو قارئات الشاشة ومن يعتمدون على لوحة المفاتيح وحدها. تعلّم الأساسيات: النص البديل، والتسميات، والمعالم، والأزرار الحقيقية، والسمة aria-label.
- 23الاتجاه من اليمين إلى اليسار واللغاتابنِ صفحاتك العربية بالطريقة الصحيحة: اضبط lang="ar" وdir="rtl"، وامزج العربية والإنجليزية بأمان، واعزل النصوص مجهولة الاتجاه باستخدام <bdi>.