وثائق HTML
مرجع موجز ومدعّم بأمثلة للغة HTML. اقرأ المفهوم، شاهد الكود، ثم تدرّب عليه في رحلة Coddy.
ابدأ رحلة موجَّهة في HTMLالبداية
- Doctype`<!DOCTYPE html>` هو السطر الأول في كل مستند HTML. يخبر المتصفح بأن يعرض الصفحة في الوضع القياسي بدلًا من وضع التوافق (quirks mode). تعلّم صيغته، وما الذي تفعله الأنواع القديمة، وكيف تتحقق من الوضع.
- وسوم HTMLوسوم HTML تحدد نوع المحتوى ليعرف المتصفح ما هو كل جزء: عنوان أو فقرة أو رابط أو صورة. تعلّم كيف تعمل الوسوم والعناصر، وأي الوسوم ليس لها وسم إغلاق، وكيف يعمل التداخل، وما الوسوم التي ستستخدمها أكثر من غيرها.
- سمات HTMLالسمات تضيف معلومات إلى عنصر HTML: إلى أين يذهب الرابط، وماذا تعرض الصورة، وأي فئة CSS تنطبق عليه. تعلّم الصيغة، والسمات العامة التي يقبلها كل عنصر، وclass وid، والسمات المنطقية، وسمات data-*.
- التعليقات في HTMLالتعليق في HTML نص بين <!-- و--> لا يعرضه المتصفح. تعلّم الصيغة، والتعليقات متعددة الأسطر، وتعطيل الشيفرة بالتعليق، واختصار المحرر، ولماذا لا يمكن تداخل التعليقات، ولماذا لا تكون خاصة أبدًا.
- وسم divالوسم <div> حاوية كتلية عامة بلا معنى خاص بها. تعلّم كيف تجمّع به المحتوى، وتنسّقه باستخدام class، وتبني التخطيطات بعناصر div وflexbox، ومتى يكون الوسم الدلالي أو الزر خيارًا أفضل.
- وسم spanالوسم <span> حاوية سطرية عامة: يحيط ببضع كلمات داخل السطر كي تنسّقها أو تتحكم بها بسكربت من دون كسر السطر. تعلّم كيف تستخدمه، وكيف يختلف عن div، ومتى يناسب وسم أكثر تحديدًا.
النص
- العناوين في HTMLفي HTML ستة مستويات للعناوين، من <h1> إلى <h6>، وهي التي تعطي الصفحة مخططها. تعلّم الأحجام الافتراضية، وكيف ترتب العناوين، وكم وسم h1 تستخدم، وكيف تغيّر حجمها بـ CSS، وكيف تستخدمها قارئات الشاشة.
- سطر جديد في HTMLاستخدم <br> لبدء سطر جديد داخل كتلة نص. تعلّم متى يكون <br> مناسبًا ومتى تكون الفقرة أفضل، وكيف تحافظ على الأسطر الموجودة في نصك، وكيف تسمح بكسر الكلمات الطويلة بـ <wbr>، وكيف تمنع السطر من الانكسار.
- المسافة في HTMLتدمج المتصفحات أي تتابع من المسافات في HTML في مسافة واحدة. تعلّم كيف تضيف مسافات إضافية بـ ، وما وظيفة المسافة غير القابلة للكسر، وكيف تحافظ على المسافات ومسافات الجدولة بـ <pre> وwhite-space، ومتى يكون تباعد CSS الأداة الأفضل.
- النص العريض والمائلاجعل النص عريضًا في HTML بـ <strong> أو <b>، ومائلًا بـ <em> أو <i>. تعلّم أي وسم تستخدم ومتى، وكيف تجمع بين العريض والمائل، وكيف تجعل النص عريضًا أو مائلًا بـ CSS بدلًا من ذلك.
- التسطير في HTMLضع خطًا تحت النص في HTML بـ <u> أو بخاصية text-decoration في CSS، واشطبه بـ <s> أو <del>. تعلّم معنى كل وسم، وكيف يحدد <ins> و<del> التعديلات، ولماذا يربك تسطير نص ليس رابطًا القراء.
- النص المرتفعاكتب النص المرتفع بـ <sup> والنص المنخفض بـ <sub>: الأسس، والأعداد الترتيبية، وعلامات الحواشي، والصيغ الكيميائية. تعلّم الاستخدامات الشائعة، وكيف تمنعهما من تفريق الأسطر، ومتى يناسب محرف Unicode أو MathML أكثر.
- الخط الأفقيارسم خطًا أفقيًا في HTML بالوسم <hr>. تعلّم ماذا يعني، وكيف تغيّر لونه وسماكته وعرضه ونمطه بـ CSS، وكيف تبني فاصلًا بنص في منتصفه، وكيف ترسم خطًا عموديًا.
- توسيط النصوسّط النص في HTML بخاصية CSS text-align: center. تعلّم أين تضعها، ولماذا لا تعمل على span، وكيف توسّط النص عموديًا داخل صندوق، وكيف تحاذي النص إلى البداية أو النهاية أو الحافتين معًا، وكيف تزيح الفقرات.
الروابط والصور
- الروابط (a href)كيف ينشئ العنصر <a> الروابط: السمة href، والروابط المطلقة والنسبية، والانتقال إلى قسم في الصفحة بـ #id، وروابط التنزيل، وروابط البطاقات، والأخطاء التي تعطّلها.
- فتح رابط في تبويب جديدأضف target="_blank" إلى الرابط ليُفتح في تبويب جديد. تشرح هذه الصفحة rel="noopener" وnoreferrer، وكيف تخبر المستخدم أن الرابط يفتح تبويبًا جديدًا، وقيم target الأخرى، وفعل ذلك من JavaScript.
- رابط mailtoأنشئ رابطًا يفتح رسالة بريد جديدة بـ href="mailto:"، واملأ الموضوع والنص وcc وbcc، ورمّزها بشكل صحيح، وأنشئ روابط اتصال بنقرة واحدة بـ tel: وsms:.
- زر كرابطالطريقة الصحيحة لصنع زر ينتقل إلى صفحة أخرى هي رابط منسَّق كزر. تعرّف لماذا يفشل وضع زر داخل رابط والتنقل بـ onclick، ومتى يكون زر النموذج هو الخيار الصحيح، وكيف تنسّق أزرار الروابط وتعطّلها.
- إدراج صورةكيف تضيف صورة في HTML بالوسم <img>: السمتان src وalt، وتحديد حجم الصورة بـ width وheight، والصور المتجاوبة، والقص بـ object-fit، والتعليقات بـ figure، والتحميل الكسول، والفجوة تحت الصور.
القوائم والجداول
- القوائم في HTMLكيف تنشئ القوائم في HTML: النقاط بـ <ul>، والقوائم المرقمة بـ <ol> (start وreversed والحروف والأرقام الرومانية)، والقوائم المتداخلة، وقوائم الوصف، وتنسيق النقاط أو إزالتها بـ CSS.
- الجداول في HTMLكيف تنشئ جدولًا في HTML: الصفوف بـ <tr>، والخلايا بـ <td>، وخلايا العناوين بـ <th> وscope، والتسميات التوضيحية، وthead وtbody وtfoot، والصفوف المتناوبة الألوان، والجداول التي تتمرر على الشاشات الصغيرة.
- حدود الجدولكيف تضيف حدودًا إلى جدول HTML بـ CSS: خطوط مفردة بـ border-collapse، وborder-spacing، وخطوط الصفوف فقط، والحدود الداخلية فقط، والزوايا المستديرة، ولماذا السمة border مهجورة.
- colspan وrowspanادمج خلايا الجدول عبر الأعمدة بـ colspan وعبر الصفوف بـ rowspan. تعلّم كيف تعد الخلايا كي يبقى الجدول منتظمًا، وكيف تبني عناوين مجمّعة، وكيف تُبقي الجداول ذات الخلايا الممتدة مقروءة لقارئات الشاشة.
النماذج
- النماذج في HTMLكيف تبني نموذجًا في HTML: العنصر form، وسمات name، وaction وmethod (الفرق بين GET وPOST)، والتجميع بـ fieldset وlegend، والتحقق المدمج بـ required وpattern، ومعالجة الإرسال في JavaScript.
- أنواع inputكل أنواع الوسم <input> في HTML في مكان واحد: text وemail وpassword وnumber وrange والتاريخ والوقت وcolor وfile وhidden والبقية، مع ما يتحقق منه كل نوع، ولوحة المفاتيح التي يفتحها على الهواتف، والسمات المشتركة بينها.
- وسم buttonكيف تصنع زرًا في HTML بالعنصر <button>: الأنواع الثلاثة (submit وbutton وreset)، وإرسال قيمة مع النموذج، والأزرار المعطّلة، والأيقونات، وتنسيق CSS الذي يحافظ على حلقة التركيز.
- مربع الاختياركيف تنشئ مربع اختيار في HTML بـ <input type="checkbox">: التسميات، والسمة checked، وما يرسله النموذج حين يكون المربع محددًا وحين لا يكون، ومجموعات المربعات، و«تحديد الكل» مع الحالة الوسطى، والتنسيق.
- زر الاختيار radioكيف تعمل أزرار الاختيار في HTML: التجميع بالسمة name، والخيار الافتراضي بـ checked، والمجموعات الإلزامية، وقراءة القيمة المختارة في JavaScript، وسلوك لوحة المفاتيح، وتنسيقها كدوائر مخصصة أو بطاقات.
- القائمة المنسدلةكيف تنشئ قائمة منسدلة في HTML بـ <select> و<option>: القيم، والخيار الافتراضي أو خيار العنصر النائب، وrequired، ومجموعات الخيارات، والاختيار المتعدد، وقراءة القيمة وضبطها في JavaScript، وتنسيق السهم.
- وسم textareaكيف تنشئ حقل نص متعدد الأسطر بـ <textarea>: rows وcols، والنص الافتراضي بين الوسمين، وتغيير الحجم والتمدد التلقائي، وmaxlength مع عداد للمحارف، وكسور الأسطر في النص المرسل، والتنسيق.
- وسم labelكيف يسمّي العنصر <label> حقل النموذج: ربطه بـ for وid أو بالإحاطة، وهدف النقر الأكبر لمربعات الاختيار وأزرار الاختيار، والتلميحات ورسائل الخطأ، والتسميات المخفية، والأخطاء التي تقطع الربط.
HTML الدلالي
- HTML الدلاليHTML الدلالي يعني اختيار الوسوم بحسب ماهية المحتوى لا بحسب مظهره. تعلّم وسوم التخطيط الدلالية (header وnav وmain وarticle وaside وfooter)، وما تقدمه لقارئات الشاشة ومحركات البحث، وكيف تفحص بنية صفحتك.
- وسم headerالعنصر <header> يحتوي على مقدمة الصفحة أو القسم: شعار، عنوان، تنقل، اسم الكاتب. تعلّم كيف تبني ترويسة الموقع، وكيف يختلف <header> عن <head> وعن العناوين، وكيف تستخدمه داخل المقالات، وكيف تجعله ثابتًا.
- وسم footerالعنصر <footer> يختم الصفحة أو القسم: حقوق النشر، بيانات الاتصال، الروابط، معلومات الكاتب. تعلّم كيف تبني تذييل موقع بأعمدة روابط، وكيف تُبقيه في أسفل الصفحة القصيرة، وكيف تعمل التذييلات داخل المقالات.
- وسم navالعنصر <nav> يحدد مجموعة من روابط التنقل الرئيسية. تعلّم كيف تبني شريط تنقل بـ <nav> وقائمة، وكيف تميّز الصفحة الحالية، وكيف تسمّي عدة عناصر nav في صفحة واحدة، وكيف تصنع زر قائمة للجوال.
- وسم sectionالعنصر <section> يجمع محتوى موضوع واحد تحت عنوان خاص به. تعلّم متى تستخدم <section>، ومتى يكون <article> أو <div> خيارًا أفضل، وكيف تتداخل الثلاثة، وكيف يصبح القسم المسمّى معلمًا.
الترويسة ووسوم meta
- وسم titleالعنصر <title> يسمّي الصفحة في تبويب المتصفح وفي المفضلة وفي نتائج البحث. تعلّم أين يوضع، وكم يجب أن يكون طوله، وكيف يختلف عن <h1> وعن السمة title، وكيف تغيّره بـ JavaScript.
- meta viewportوسم meta viewport يخبر الهواتف بأن ترتب الصفحة بعرض الشاشة بدلًا من عرض الحاسوب. تعلّم الوسم المعتمد، وما تفعله كل قيمة، ولماذا يعتمد CSS المتجاوب عليه، وما القيم التي يجب تجنبها.
- إعادة التوجيهأعد توجيه صفحة إلى أخرى بوسم meta refresh في HTML العادي، أو بـ JavaScript، أو على الخادم. تعلّم صيغة meta refresh، وكيف تحدّث الصفحة تلقائيًا، ولماذا تكون إعادة التوجيه 301 على الخادم أفضل، وما تفعله محركات البحث مع كل طريقة.
- Faviconfavicon هي الأيقونة الصغيرة في تبويب المتصفح. تعلّم وسم link الذي يضيفها، وأي الملفات والأحجام تحتاجها (ICO وSVG وPNG وapple-touch-icon)، وكيف تصنع favicon من SVG أو رمز تعبيري، وكيف تغيّرها بـ JavaScript، ولماذا تظل القديمة ظاهرة.
- سمة langالسمة lang تخبر المتصفحات وقارئات الشاشة وأدوات الترجمة بلغة محتواك. تعلّم أين تضعها، وأي الرموز تستخدم (en وen-US وpt-BR)، وكيف تحدد عبارة بلغة أخرى، والأشياء المرئية التي تغيّرها.
الوسائط والعناصر التفاعلية
- وسم iframeالعنصر <iframe> يعرض صفحة ويب أخرى داخل صفحتك. تعلّم السمات التي تحتاجها (src وtitle وwidth وheight)، وكيف تضمّن فيديوهات YouTube والخرائط، وكيف تجعل iframe متجاوبًا، وكيف يحد sandbox مما يستطيع فعله، ولماذا ترفض بعض المواقع التحميل داخله.
- وسم videoالعنصر <video> يشغّل ملفات الفيديو بمشغل المتصفح نفسه. تعلّم البنية، والسمات المهمة (controls وautoplay وmuted وloop وplaysinline وposter وpreload)، والصيغ البديلة بـ <source>، والترجمات بـ <track>، والحجم المتجاوب، والتحكم في التشغيل بـ JavaScript.
- وسم audioالعنصر <audio> يشغّل الملفات الصوتية بالمشغل المدمج في المتصفح. تعلّم البنية، والسمات (controls وautoplay وloop وmuted وpreload)، والصيغ التي تستخدمها، ولماذا يُمنع التشغيل التلقائي مع الصوت، وكيف تبني زر تشغيل خاصًا بك بـ JavaScript.
- details وsummaryالعنصران <details> و<summary> يصنعان قسمًا قابلًا للطي من دون JavaScript: summary ظاهر دائمًا، والنقر عليه يُظهر البقية أو يخفيها. تعلّم البنية، والسمتين open وname، والأكورديون، وتنسيق السهم، وحدث toggle.
