اللغة الترميزية للنص التشعبي أو HTML هي اللغة الترميزية القياسية لوصف بنية المستندات المعروضة على الويب. يتكون HTML من سلسلة من العناصر والسمات التي يتم استخدامها لترميز جميع مكونات المستند لتنظيمه بطريقة مجدية.
مستندات HTML هي في الأساس شجرة من العُقد، بما في ذلك عناصر HTML والعُقد النصية. توفر عناصر HTML الدلالات والتنسيق للمستندات، بما في ذلك إنشاء الفقرات والقوائم والجداول وتضمين الصور وعناصر التحكم في النماذج. قد يكون لكل عنصر عدة سمات محددة. يمكن أن تتضمّن العديد من العناصر محتوى، بما في ذلك عناصر أخرى ونصوص أخرى. العناصر الأخرى فارغة، مع العلامة والسمات التي تحدد وظيفتها.
هناك عدة فئات من العناصر، بما في ذلك بيانات التعريف والتقسيم والنص والدلالة المضمنة والشكل والتفاعلي والوسائط والمكون والبرمجة النصية. سنتناول معظم هذه الأشياء في هذه السلسلة. لكن أولاً، ما العنصر؟
العناصر
يتكون HTML من سلسلة من العناصر، والتي تستخدمها لتضمين أجزاء مختلفة من المحتوى أو لفها لجعله يظهر أو يعمل بطريقة معينة. يتم تحديد عناصر HTML بواسطة علامات، مكتوبة باستخدام أقواس معقوفة (< و>).
إنّ عنوان الصفحة هو عنوان من المستوى الأول، نستخدم له علامة <h1>. العنوان الفعلي، "ورشة التعلم الآلي"، هو محتوى العنصر. المحتوى يمر بين علامتي الفتح والإغلاق. الشيء برمته - علامة الفتح وعلامة الإغلاق والمحتوى - هو العنصر.
علامة الإغلاق هي نفس علامة علامة الفتح، مسبوقة بشرطة مائلة.
العناصر والعلامات ليست متشابهة تمامًا، على الرغم من أن العديد من الأشخاص يستخدمون المصطلحات بالتبادل. اسم العلامة هو المحتوى بين قوسين. وتتضمن العلامة الأقواس. وهي في هذه الحالة <h1>. "العنصر" هو علامات الفتح والإغلاق وكل المحتوى الموجود بين هذه العلامات، بما في ذلك العناصر المتداخلة.
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
يحتوي عنصر الفقرة هذا على عناصر أخرى مدمجة فيه. عند دمج العناصر، من المهم أن يتم دمجها بشكل صحيح. يجب إغلاق علامات HTML بالترتيب العكسي الذي تم فتحها به. في المثال أعلاه، لاحِظ كيفية فتح <em> وإغلاقها داخل علامتَي <strong> للفتح والإغلاق، وأنّ <strong> مفتوحة ومغلقة داخل علامات <p>.
ولا تعرض المتصفّحات العلامات. يتم استخدام العلامات لتفسير محتوى الصفحة.
HTML تساهل للغاية. على سبيل المثال، إذا حذفنا علامات </li> للإغلاق، تكون علامات الإغلاق ضمنية.
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
وعلى الرغم من أنّه يُسمح بعدم إغلاق <li>، فهي ليست ممارسة جيدة. يجب إغلاق </ul>. وفي حال حذف علامة إغلاق القائمة التي لم يتم ترتيبها، سيحاول المتصفّح تحديد المكان الذي تنتهي فيه القائمة وعناصر القائمة، ولكنك قد لا توافق على هذا القرار.
وتوضّح مواصفات كل عنصر ما إذا كانت علامة الإغلاق إلزامية أم لا. تعني عبارة "لا يمكن لأي علامة من العلامات" في المواصفات استخدام كل من علامة الفتح وعلامة الإغلاق. وتوفِّر المواصفات قائمة بجميع علامات الإغلاق المطلوبة.
وإذا لم يتم إغلاق <em> أو <strong> في المثال السابق، قد يغلق المتصفّح العنصر أو لا يغلقه. يؤدي عدم إغلاق <em> إلى عرض المحتوى بشكل مختلف عما كنت تقصده. إذا تم حذف </ul> وكانت العلامة التالية هي علامة إغلاق للحاوية الرئيسية للقائمة، لن يتسنى لك ذلك. ومن ناحية أخرى، إذا كانت علامة <h1> افتتاحية، سيفترض المتصفِّح أنّ العنوان جزء من القائمة، بما في ذلك اكتساب الأنماط. يؤدي حذف بعض علامات الإغلاق إلى حدوث مشاكل أكبر، إذ إنّ إغلاق بعض العلامات، مثل <script> و<style> و<template> و<textarea> و<title>، يؤدي إلى إيقاف المحتوى اللاحق كما هو موضّح في المثال التالي.
لن يؤدي جعل بعض المحتوى مائلاً عن غير قصد أو إدراج مسافة بادئة في العنوان إلى تدمير نشاطك التجاري. إنّ ظهور معظم المحتوى الخاص بك بدون تصميم في مساحة نصية 200×300 لأنّك نسيت إضافة </textarea> أو عدم ظهوره على الإطلاق لأنّك نسيت إغلاق </style>، ما يجعل الموقع الإلكتروني غير قابل للاستخدام.
في بعض الحالات، ستتضمن المتصفحات عناصر حتى إذا لم تكن العلامات موجودة في الترميز. ولأنه يمكن أن تكون العناصر ضمنية، فيمكن أن يكون العنصر موجودًا حتى عندما لا تكون العلامات موجودة. سيضيف المتصفّح علامة <body></body> حول المحتوى و<tbody></tbody> حول صفوف الجدول، حتى إذا لم تفعل ذلك. ومع ذلك، في حين أن حذف العلامات يكون صالحًا، لا يجوز إغفاله. وأيضًا، كما ذكرنا سابقًا، تأكد من أنها متداخلة بشكل صحيح. شكرًا لك في المستقبل بصفتك مشرفًا للترميز وأي شخص آخر يعمل على قاعدة الرموز الخاصة بك.
هناك نوعان من العناصر: العناصر التي تم استبدالها وغير البديلة.
العناصر التي لم يتم استبدالها
ولا يتم استبدال جميع الفقرة والرأس والقوائم التي تم ترميزها في القسم السابق. تحتوي العناصر التي لم يتم استبدالها على علامات فتح و (اختيارية في بعض الأحيان) تحيط بها وقد تتضمّن نصًا وعلامات أخرى كعناصر فرعية. يمكن أن تحوّل علامات التضمين هذه عبارة أو صورة إلى رابط تشعبي، ويمكن أن تحوِّل جملة إلى عنوان، وتركز على الكلمات، وهكذا.
العناصر المستبدلة والملغاة
يتم استبدال العناصر المستبدلة بكائنات، سواء كانت أداة واجهة مستخدم تصويرية (UI) في حالة معظم عناصر التحكم في النموذج، أو ملف صورة نقطي أو قابل للتوسع في حالة معظم الصور. يتم استبدال كل عنصر بكائنات، ويأتي كل عنصر بمظهر افتراضي. الأنماط القابلة للتطبيق محدودة بالاستناد إلى نوع الكائن والمتصفّح. على سبيل المثال، تتيح معظم المتصفحات تصميمًا محدودًا للتطبيقات المصغّرة لواجهة المستخدم والعناصر الزائفة ذات الصلة. في حالة الصور النقطية، يتم بسهولة إجراء الارتفاع والعرض والاقتصاص والتصفية باستخدام CSS، ولكن ليس كثيرًا. ومن ناحية أخرى، فإن الرسومات المتجهة القابلة للتطوير والتوسع، التي تستخدم لغة ترميزية تستند إلى XML مشابهة لـ HTML، قابلة للتطوير بشكل كامل (ما لم تكن تحتوي على صور نقطية). إنها أيضًا قابلة للنمط بالكامل. تجدر الإشارة إلى أنّ إمكانية تصميم رسومات موجّهة يمكن تغيير حجمها (SVG) مضمَّنة من CSS والمرتبطة بملف HTML الذي يضمّنه تعتمد على طريقة إعداد الرسومات الموجّهة التي يمكن تغيير حجمها (SVG).
في هذا المثال، تم استبدال العنصرين <img> و<input> بمحتوى غير نصي: صورة وكائن واجهة مستخدم رسومي، على التوالي.
<input type="range">
<img src="switch.svg" alt="light switch">
ناتج HTML أعلاه:
غالبًا ما يتم الخلط بين العناصر المستبدلة والعناصر الفارغة. العناصر الملغاة هي جميع عناصر ذاتية الإغلاق ويتم تمثيلها بعلامة واحدة. هذا يعني أنه لا يوجد ما يسمى علامة إغلاق لعنصر خالٍ. وبشكل اختياري، يمكنك تضمين شرطة مائلة في نهاية العلامة، مما يعثر عليه العديد من الأشخاص يجعل الترميز أسهل في القراءة. استمرارًا لهذا المثال، نغلق العلامة بشرطة مائلة:
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
الشرطة المائلة في النهاية هي قديمة، وهي طريقة للإشارة إلى أن العنصر مغلق ذاتيًا وأنه لن تكون هناك علامة نهاية أو علامة إغلاق مطابقة.
لا يمكن أن تحتوي العناصر المُلغاة على محتوى نصي أو عناصر مدمجة. تشمل العناصر الملغاة <br> و<col> و<embed> و<hr> و<img> و<input> و<link> و<meta> و<source> و<track> و<wbr> وغير ذلك.
معظم العناصر التي تم استبدالها هي عناصر فارغة، وليس كلها. يتم استبدال العناصر video وpicture وobject وiframe، ولكنها ليست باطلة. يمكن أن تحتوي جميعها على عناصر أو نص آخر، بحيث يكون لها جميعًا علامة إغلاق.
يتم استبدال معظم العناصر الفارغة، ولكن ليس كلها، كما لاحظنا في base وlink وparam وmeta. لماذا يوجد عنصر خالٍ، لا يمكن أن يحتوي على أي محتوى، ولا يتم استبداله وبالتالي لا يعرض أي شيء على الشاشة؟ لتوفير معلومات حول المحتوى يتم توفير المعلومات من خلال سمات العناصر.
السمات
ربما لاحظت أنّ المثالَين <img> و<input> يحتويان على أكثر من مجرد نوع العنصر في العلامة الافتتاحية. تُعرف هذه البتّات الإضافية من أزواج الأسماء/القيم المفصولة بمسافات (على الرغم من أنّ تضمين قيمة أحيانًا يكون اختياريًا) باسم السمات. السمات هي ما يجعل HTML قويًا للغاية. سوف نتناول المئات من السمات وقيم السمات في هذه السلسلة، ولكن سنناقشها هنا فقط ونناقشها بشكل عام وكيفية تضمينها.
توفر السمات معلومات عن العنصر. لن تظهر السمة، مثل بقية علامة الفتح، في المحتوى، ولكنها تساعد في تحديد كيفية ظهور المحتوى للمستخدمين المبصرين وغير المبصرين (التقنيات المساعدة ومحركات البحث).
لا تظهر السمات إلا في علامة الفتح. تبدأ علامة الفتح دائمًا بنوع العنصر. ويمكن أن يتبع النوع صفر أو أكثر من السمات، مع الفصل بينها بمسافة واحدة أو أكثر. تكون معظم أسماء السمات متبوعةً بعلامة يساوي تساوي قيمة السمة، وترتبط بعلامتَي اقتباس للفتح والإغلاق.
في هذا المثال، لدينا رابط ارتساء بسمتَين. حوَّلت هاتان السمتان المحتوى "تسجيل" إلى رابط ارتساء داخلي يمكن استخدامه للانتقال إلى السمة id="register" في علامة تبويب المتصفّح الحالية عند النقر على الرابط أو النقر عليه أو تفعيله باستخدام لوحة المفاتيح أو جهاز آخر.
تحدد السمات سلوك العناصر وارتباطاتها ووظائفها. سنتناول المزيد من السمات في قسم السمات من هذه السلسلة. في الوقت الحالي، فقط لاحظ أن بعض السمات عالمية — مما يعني أنها يمكن أن تظهر داخل علامة فتح أي عنصر. ينطبق بعضها فقط على عدة عناصر ولكن ليس على جميعها، والبعض الآخر خاص بعنصر، وذات صلة بعنصر واحد فقط.
تكون معظم السمات أزواج الاسم/القيمة. يمكن تضمين السمات المنطقية التي تكون قيمتها true أو false أو مشابهة لاسم السمة كسمة فقط: القيمة ليست ضرورية.
<img src="switch.svg" alt="light switch" ismap />
تتضمّن هذه الصورة ثلاث سمات: src وalt وismap. تُستخدَم السمة src لتوفير موقع مادة عرض صورة SVG. توفّر السمة alt نصًا بديلاً يصف محتوى الصورة. السمة ismap هي قيمة منطقية، ولا تتطلّب قيمة. وهذا فقط لشرح ماهية السمات. سنتناول هذه السمات بمزيد من التفصيل في قسم الصور.
قد لا يكون اقتباس السمات مطلوبة دائمًا، إلا أنّه في بعض الأحيان لا يكون مطلوبًا. إذا تضمّنت القيمة مسافة أو أحرفًا خاصة، يجب استخدام علامات الاقتباس. لهذا السبب، يوصى دائمًا بالاقتباس. وإذا كانت قيمة السمة بين علامتَي اقتباس غير مطلوبة، لا يلزم فعلاً استخدام مسافة أو أكثر بين السمات، ولكن يُنصح باستخدام علامات اقتباس والمسافات وتقديرها لضمان وضوحها ووضوحها.
إنّ ترميز HTML ليس حساسًا لحالة الأحرف، ولكن بعض قيم السمات هي من النوع نفسه. والقيم التي يتمّ تحديدها في المواصفات غير حساسة لحالة الأحرف. السلاسل التي لم يتم تعريفها ككلمات رئيسية هي بشكل عام حسّاسة لحالة الأحرف، بما في ذلك قيمتَي id وclass.
تجدر الإشارة إلى أنّه إذا كانت قيمة السمة حسّاسة لحالة الأحرف في HTML، تكون حسّاسة لحالة الأحرف عند استخدامها كجزء من أداة اختيار السمات في CSS وفي JavaScript.
لتسهيل قراءة الترميز، من المستحسن تنفيذ ترميز HTML باستخدام الأحرف الصغيرة لجميع أسماء العناصر وأسماء السمات داخل العلامات، مع اقتباس جميع قيم السمات. إذا سمعت من قبل المصطلح "ترميز نمط XHTML"، فإن هذا هو ما يعنيه العناصر الفارغة التي يتم إغلاقها ذاتيًا بشرطة مائلة في النهاية.
مظهر العناصر
يتم ضبط المظهر التلقائي للعناصر الدلالية من خلال أوراق أنماط وكيل المستخدم. تستخدم معظم المتصفحات أوراق أنماط فعلية لهذا الغرض، بينما تحاكيها المتصفحات الأخرى في شكل رموز برمجية. والنتيجة النهائية هي نفسها. على الرغم من أنه يتم تعيين بعض القيود المفروضة على أوراق أنماط وكيل المستخدم بواسطة مواصفات HTML، إلا أن المتصفحات تتمتع بمساحة كبيرة من خطوط العرض، ما يعني وجود بعض الاختلافات بين المتصفحات.
يجب أن يكون العنصر الذي تختاره، وبالتالي العلامات التي تستخدمها، مناسبًا للمحتوى الذي تعرضه، لأنّ العلامات لها معنى دلالي. تُعدّ الدلالات، أو role، للعنصر عاملاً مهمًا للتكنولوجيات المساعِدة، ومحركات البحث في بعض الحالات. يجب استخدام HTML لبناء المحتوى، وليس لتحديد مظهر المحتوى. المظهر هو مجال CSS. على الرغم من أنّ العديد من العناصر التي تغيّر مظهر المحتوى، مثل <h1> و<strong> و<em>، لها معنى دلالي، يمكن تغيير المظهر وبشكل عام باستخدام أنماط المؤلفين.
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
العنصر والسمات وJavaScript
نموذج كائن المستند (DOM) هو تمثيل البيانات لبنية مستند HTML ومحتواه. أثناء تحليل المتصفح HTML، ينشئ كائن JavaScript لكل عنصر وقسم من النص يتم مواجهته. تسمى هذه الكائنات بالعُقد—وعقد العناصر والعُقد النصية، على التوالي.
هناك واجهة لتحديد وظائف كل عنصر من عناصر HTML. توفر واجهة برمجة تطبيقات HTML DOM إمكانية الوصول إلى كل عنصر HTML والتحكم فيه عبر DOM، مما يوفر واجهات لعنصر HTML وجميع فئات HTML التي تكتسبه. تمثل واجهة HTMLElement عنصر HTML وجميع العُقد التابعة له. وينفذ كل عنصر آخر ذلك عبر واجهة تكتسبه منه. تحتوي كل واجهة اكتساب على دالة إنشاء وطرق وخصائص. من خلال سمات HTMLElement المكتسَبة، يمكنك الوصول إلى كل سمة عامة، بالإضافة إلى أحداث input وpointer وtransition وanimation. من خلال النوع الفرعي للعنصر الفردي، مثل HTMLAnchorElement وHTMLImageElement، يمكنك الوصول إلى قيم السمات وطرقها الخاصة بالعناصر.
التحقق من فهمك
اختبر معلوماتك حول HTML
يتم استخدام عناصر HTML للنمط.
حدد العناصر التي تم استبدالها.
<img><p><ul><input>حدد جميع العبارات الصحيحة.