أساسيات HTML

HTML (لغة ترميز النص التشعبي) هي الكود المستخدم في هيكلة صفحة الويب ومحتواها. على سبيل المثال، يمكن هيكلة المحتوى داخل مجموعة من الفقرات أو قائمة من النقاط المنقطة أو باستخدام الصور وجداول البيانات. وكما يوحي العنوان، ستمنحك هذه المقالة فهمًا أساسيًا لـ HTML ووظائفها.
إذن، ما هي HTML؟

HTML هي لغة ترميز تحدد هيكل المحتوى الخاص بك. تتكون HTML من سلسلة من العناصر، والتي تستخدمها لإحاطة أو تغليف أجزاء مختلفة من المحتوى لجعله يظهر بطريقة معينة أو يتصرف بطريقة معينة. يمكن لعلامات الإحاطة إنشاء ارتباط تشعبي لكلمة أو صورة في مكان آخر، ويمكنها كتابة الكلمات بخط مائل، ويمكنها تكبير الخط أو تصغيره، وما إلى ذلك. على سبيل المثال، خذ السطر التالي من المحتوى:

قطتي غاضبة جدًا

إذا أردنا أن يكون السطر قائمًا بذاته، فيمكننا تحديد أنه فقرة من خلال تضمينه في علامات الفقرة:
html

قطتي غاضبة جدًا

تشريح عنصر HTML

لنستكشف عنصر الفقرة هذا بمزيد من التفصيل.

عنصر الفقرة بما في ذلك علامة الفتح، والمحتوى الذي يقرأ "قطتي غاضبة جدًا"، وعلامة الإغلاق

الأجزاء الرئيسية لعنصرنا هي كما يلي:

علامة الفتح: تتكون من اسم العنصر (في هذه الحالة، p)، ملفوفة بين قوسين زاوية للفتح والإغلاق. تشير هذه العلامة إلى المكان الذي يبدأ فيه العنصر أو يبدأ في العمل — في هذه الحالة حيث تبدأ الفقرة.
علامة الإغلاق: هي نفس علامة الفتح، إلا أنها تتضمن شرطة مائلة للأمام قبل اسم العنصر. تشير هذه العلامة إلى المكان الذي ينتهي فيه العنصر — في هذه الحالة حيث تنتهي الفقرة. يعد الفشل في إضافة علامة إغلاق أحد الأخطاء القياسية للمبتدئين ويمكن أن يؤدي إلى نتائج غريبة.
المحتوى: هذا هو محتوى العنصر، والذي في هذه الحالة هو مجرد نص.
العنصر: يتكون العنصر من علامة الفتح وعلامة الإغلاق والمحتوى معًا.

يمكن أن تحتوي العناصر أيضًا على سمات تبدو مثل ما يلي:

علامة افتتاح الفقرة مع إبراز سمة الفئة: class=editor-note

تحتوي السمات على معلومات إضافية حول العنصر لا تريد ظهورها في المحتوى الفعلي. هنا، class هو اسم السمة وeditor-note هي قيمة السمة. تسمح لك سمة الفئة بإعطاء العنصر معرفًا غير فريد يمكن استخدامه لاستهدافه (وأي عناصر أخرى لها نفس قيمة الفئة) بمعلومات الأسلوب وأشياء أخرى. بعض السمات ليس لها قيمة، مثل "مطلوب".

السمات التي تحدد قيمة تحتوي دائمًا على:

مسافة بينها وبين اسم العنصر (أو السمة السابقة، إذا كان العنصر يحتوي بالفعل على سمة واحدة أو أكثر).
اسم السمة متبوعًا بعلامة مساوية.
قيمة السمة محاطة بعلامات اقتباس افتتاحية وإغلاقية.

ملاحظة: يمكن أن تظل قيم السمات البسيطة التي لا تحتوي على مسافات بيضاء ASCII (أو أي من الأحرف " ' ` = < >) بدون علامات اقتباس، ولكن يوصى بوضع علامات اقتباس على جميع قيم السمات، حيث يجعل ذلك الكود أكثر اتساقًا وسهولة في الفهم.
عناصر التعشيش

يمكنك أيضًا وضع عناصر داخل عناصر أخرى — وهذا ما يسمى بالتعشيش. إذا أردنا أن نذكر أن قطتنا غاضبة للغاية، فيمكننا وضع كلمة "very" في عنصر ، مما يعني أنه يجب التأكيد على الكلمة بشدة:
html

قطتي very غاضبة.

لكنك تحتاج إلى التأكد من تعشيش عناصرك بشكل صحيح. في المثال أعلاه، فتحنا عنصر أولاً، ثم عنصر ؛ لذلك، يتعين علينا إغلاق عنصر أولاً، ثم عنصر . ما يلي غير صحيح:
html

قطتي very grumpy.

يجب فتح العناصر وإغلاقها بشكل صحيح حتى من الواضح أنهما داخل أو خارج بعضهما البعض. إذا تداخلا كما هو موضح أعلاه، فسيحاول متصفح الويب الخاص بك تخمين ما كنت تحاول قوله بأفضل طريقة، مما قد يؤدي إلى نتائج غير متوقعة. لذا لا تفعل ذلك!
عناصر فارغة

بعض العناصر ليس لها محتوى وتسمى عناصر فارغة. خذ عنصر <img> الذي لدينا بالفعل في صفحة HTML الخاصة بنا:
html

يحتوي هذا على خاصيتين، ولكن لا يوجد علامة إغلاق </img> ولا محتوى داخلي. وذلك لأن عنصر الصورة لا يلف المحتوى للتأثير عليه. والغرض منه هو تضمين صورة في صفحة HTML في المكان الذي تظهر فيه.

تشريح مستند HTML

هذا يلخص أساسيات عناصر HTML الفردية، ولكنها ليست مفيدة بمفردها. الآن سنلقي نظرة على كيفية دمج العناصر الفردية لتشكيل صفحة HTML كاملة. دعنا نراجع الكود الذي وضعناه في مثال index.html (الذي التقينا به لأول مرة في مقالة التعامل مع الملفات):
html

<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image" />
</body>
</html>

هنا، لدينا ما يلي:

<!doctype html> — doctype. إنها مقدمة مطلوبة. في الماضي، عندما كان HTML في بداياته (حوالي عام 1991/1992)، كان المقصود من أنواع المستندات أن تعمل كروابط لمجموعة من القواعد التي يجب أن تتبعها صفحة HTML حتى يتم اعتبارها HTML جيدة، وهو ما قد يعني فحص الأخطاء تلقائيًا وأشياء أخرى مفيدة. ومع ذلك، في هذه الأيام، لا تفعل الكثير وهي ضرورية بشكل أساسي للتأكد من أن مستندك يتصرف بشكل صحيح. هذا كل ما تحتاج إلى معرفته الآن.
<html></html> — عنصر <html>. يلف هذا العنصر كل المحتوى في الصفحة بأكملها ويُعرف أحيانًا باسم العنصر الجذر. كما يتضمن سمة lang، التي تحدد اللغة الأساسية للمستند.
<head></head> — عنصر <head>. يعمل هذا العنصر كحاوية لكل الأشياء التي تريد تضمينها في صفحة HTML والتي ليست المحتوى الذي تعرضه لمشاهدي صفحتك. يتضمن هذا أشياء مثل الكلمات الرئيسية ووصف الصفحة الذي تريد ظهوره في نتائج البحث، وCSS لتصميم المحتوى الخاص بنا، وإعلانات مجموعة الأحرف، والمزيد.
<meta charset="utf-8"> — يضبط هذا العنصر مجموعة الأحرف التي يجب أن تستخدمها مستندك على UTF-8 والتي تتضمن معظم الأحرف من الغالبية العظمى من اللغات المكتوبة. في الأساس، يمكنه الآن التعامل مع أي محتوى نصي قد تضعه عليه. لا يوجد سبب لعدم ضبط هذا، ويمكن أن يساعد في تجنب بعض المشاكل لاحقًا.
<meta name="viewport" content="width=device-width"> — يضمن عنصر viewport هذا عرض الصفحة بعرض viewport، مما يمنع متصفحات الأجهزة المحمولة من عرض الصفحات بعرض أكبر من viewport ثم تقليص حجمها.
<title></title> — عنصر <title>. يحدد هذا عنوان صفحتك، وهو العنوان الذي يظهر في علامة تبويب المتصفح التي يتم تحميل الصفحة فيها. كما يستخدم لوصف الصفحة عند وضع إشارة مرجعية عليها/إضافتها إلى المفضلة.
<body></body> — عنصر <body>. يحتوي هذا على كل المحتوى الذي تريد إظهاره لمستخدمي الويب عندما يزورون صفحتك، سواء كان نصًا أو صورًا أو مقاطع فيديو أو ألعابًا أو مسارات صوتية قابلة للتشغيل أو أي شيء آخر.

الصور

لننتقل إلى عنصر <img> مرة أخرى:
html

كما ذكرنا من قبل، فإنه يدمج صورة في صفحتنا في الموضع الذي تظهر فيه. ويفعل ذلك عبر السمة src (المصدر)، التي تحتوي على المسار إلى ملف الصورة الخاص بنا.

لقد قمنا أيضًا بتضمين سمة alt (بديلة). في السمة alt، تحدد نصًا وصفيًا للمستخدمين الذين لا يمكنهم رؤية الصورة، ربما للأسباب التالية:

هم يعانون من ضعف البصر. غالبًا ما يستخدم المستخدمون الذين يعانون من ضعف بصري كبير أدوات تسمى قارئات الشاشة لقراءة النص البديل لهم.
لقد حدث خطأ ما تسبب في عدم عرض الصورة. على سبيل المثال، حاول تغيير المسار داخل السمة src عمدًا لجعله غير صحيح. إذا قمت بحفظ الصفحة وإعادة تحميلها، فيجب أن ترى شيئًا مثل هذا بدلاً من الصورة:

الكلمات: صورتي الاختبارية

الكلمات الرئيسية للنص البديل هي "نص وصفي". يجب أن يوفر النص البديل الذي تكتبه للقارئ معلومات كافية ليكون لديه فكرة جيدة عما تنقله الصورة. في هذا المثال، النص الحالي "صورتي الاختبارية" ليس جيدًا على الإطلاق. سيكون البديل الأفضل بكثير لشعار Firefox الخاص بنا هو "شعار Firefox: ثعلب ملتهب يحيط بالأرض".