HTML تعني لغة توصيف النص التشعبي. إنها لغة ترميزية قياسية لإنشاء صفحات الويب. فهو يسمح بإنشاء وهيكلة الأقسام والفقرات والروابط باستخدام عناصر HTML (العناصر الأساسية لصفحة الويب) مثل التاجات (Tags) والسمات (Attributes).

يحتوي HTML على الكثير من حالات الاستخدام، وهي:

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

ومن الجدير بالذكر أيضًا أن لغة HTML لا تعتبر لغة برمجة لأنها لا تستطيع إنشاء وظائف ديناميكية، على الرغم من أنها تعتبر الآن معيارًا رسميًا للويب. يحافظ اتحاد شبكة الويب العالمية (W3C) على مواصفات HTML ويطورها، إلى جانب توفير تحديثات منتظمة.

ستتناول هذه المقالة أساسيات HTML، بما في ذلك كيفية عملها وإيجابياتها وسلبياتها ومدى ارتباطها بـ CSS وJavaScript.

تاريخ موجز لـ HTML

تمت كتابة الإصدار الأول من HTML بواسطة Tim Berners-Lee في عام 1993. ومنذ ذلك الحين، ظهرت العديد من الإصدارات المختلفة من HTML. كان الإصدار الأكثر استخدامًا خلال العقد الأول من القرن الحادي والعشرين هو HTML 4.01، والذي أصبح معيارًا رسميًا في ديسمبر 1999.

اصدارات HTML

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

• تم إصدار HTML 1.0 في عام 1993 بهدف مشاركة المعلومات التي يمكن قراءتها والوصول إليها عبر متصفحات الويب. لكن لم يشارك الكثير من المطورين في إنشاء مواقع الويب. لذا فإن اللغة أيضًا لم تكن تنمو.
• ثم يأتي HTML 2.0، الذي تم نشره في عام 1995، والذي يحتوي على جميع ميزات HTML 1.0 إلى جانب بعض الميزات الإضافية، والتي ظلت لغة الترميز القياسية لتصميم وإنشاء مواقع الويب حتى يناير 1997 وقامت بتحسين الميزات الأساسية المختلفة لـ HTML.
• ثم يأتي HTML 3.0، حيث قدم ديف راجيت ورقة بحثية جديدة أو مسودة حول HTML. وتضمنت ميزات جديدة محسنة لـ HTML، مما يوفر خصائص أكثر قوة لمشرفي المواقع في تصميم صفحات الويب. لكن هذه الميزات القوية في HTML الجديد أدت إلى إبطاء المتصفح في تطبيق المزيد من التحسينات.
• ثم يأتي HTML 4.01، الذي يستخدم على نطاق واسع وكان نسخة ناجحة من HTML قبل HTML 5.0، والذي تم إصداره حاليًا واستخدامه في جميع أنحاء العالم. يمكن القول أن HTML 5 هو نسخة موسعة من HTML 4.01، والتي تم نشرها في عام 2012.

كيف تعمل HTML

يشتمل موقع الويب العادي على عدة صفحات HTML مختلفة. على سبيل المثال، ستحتوي الصفحة الرئيسية وصفحة من نحن وصفحة الاتصال على ملفات HTML منفصلة.

مستندات HTML هي ملفات تنتهي بملحق html. أو htm. يقرأ متصفح الويب ملف HTML ويعرض محتواه حتى يتمكن مستخدمو الإنترنت من مشاهدته.

تحتوي كافة صفحات HTML على سلسلة من عناصر HTML، تتكون من مجموعة من التاجات والسمات. عناصر HTML هي اللبنات الأساسية لصفحة الويب. تخبر التاجات متصفح الويب أين يبدأ العنصر وينتهي، بينما تصف السمة خصائص العنصر.

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

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

سيؤدي الجمع بين هذه الأجزاء الثلاثة إلى إنشاء عنصر HTML:

This is an example of how to add a paragraph in HTML.

جزء مهم آخر من عنصر HTML هو سمته، والتي تتكون من قسمين – اسم وقيمة السمة. يحدد الاسم المعلومات الإضافية التي يريد المستخدم إضافتها، بينما توفر قيمة السمة مزيدًا من المواصفات.

على سبيل المثال، عنصر النمط الذي يضيف اللون الأصفر ومجموعة الخط verdana سيبدو كما يلي:

<p style="color:purple;font-family:verdana">This is how you add a paragraph in HTML.</p>

هناك سمة أخرى، وهي فئة HTML، وهي الأكثر أهمية للتطوير والبرمجة. تضيف سمة الفئة معلومات النمط التي يمكن أن تعمل على عناصر مختلفة لها نفس قيمة الفئة.

على سبيل المثال، سوف نستخدم نفس النمط للعنوان h1> والفقرة p>. يتضمن النمط لون الخلفية، ولون النص، والحدود، والهامش، والحشوة، ضمن الفئة .important. لتحقيق نفس النمط بين <h1> و<p>، أضف class="important" بعد كل علامة بداية:

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

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

<img src="/" alt="Image">

تحتوي علامة الصورة هذه على سمتين – سمة src، مسار الصورة، وسمة alt، النص الوصفي. ومع ذلك، فهو لا يحتوي على محتوى ولا علامة نهاية.

وأخيرًا، يجب أن يبدأ كل مستند HTML بإعلان لإعلام متصفح الويب بنوع المستند. باستخدام HTML5، سيكون الإعلان العام لـ doctype HTML هو:

<!DOCTYPE html>

وسوم HTML وعناصر HTML الأكثر استخدامًا

يوجد حاليًا 142 علامة HTML متاحة تسمح بإنشاء عناصر متنوعة. على الرغم من أن المتصفحات الحديثة لم تعد تدعم بعض هذه العلامات، إلا أن تعلم جميع العناصر المختلفة المتاحة لا يزال مفيدًا.

سيناقش هذا القسم تاجات HTML الأكثر استخدامًا وعنصرين رئيسيين – عناصر مستوى الكتلة والعناصر المضمنة.

عناصر مستوى الكتلة

يشغل عنصر مستوى الكتلة عرض الصفحة بالكامل. يبدأ دائمًا سطرًا جديدًا في المستند. على سبيل المثال، سيكون عنصر العنوان في سطر منفصل عن عنصر الفقرة.

تستخدم كل صفحة HTML هذه الوسوم الثلاثة:

• وسم <html> هو العنصر الجذري الذي يحدد مستند HTML بأكمله.
• وسم <head> يحتوي على معلومات تعريفية مثل عنوان الصفحة ومجموعة الأحرف.
• وسم <body> يحتوي على كل المحتوى الذي يظهر على الصفحة.

<html>
  <head>
    <!-- Meta Information -->  
  </head>
  <body>
    <!-- Page Content -->
  </body>
</html>

تشمل الوسوم الشائعة الأخرى على مستوى الكتلة ما يلي:

• وسوم العناوين: تتراوح من <h1> إلى <h6>، حيث يكون العنوان h1 أكبر حجمًا، ويصغر كلما انتقل إلى h6.
• وسوم الفقرة: كلها محاطة باستخدام وسم <p>.
• وسوم القائمة: لها أشكال مختلفة. استخدم وسم <ol> للقائمة المرتبة، واستخدم <ul> للقائمة غير المرتبة. ثم قم بتضمين عناصر القائمة الفردية باستخدام وسم <li>.

العناصر المضمنة

يقوم العنصر المضمن بتنسيق المحتوى الداخلي للعناصر على مستوى الكتلة، مثل إضافة الروابط والسلاسل المميزة. تستخدم العناصر المضمنة بشكل شائع لتنسيق النص دون تعطيل تدفق المحتوى.

على سبيل المثال، قد يعرض وسم <strong> العنصر بالخط الغامق، بينما يعرض وسم <em> العنصر بخط مائل. الارتباطات التشعبية هي أيضًا عناصر مضمنة يستخدم وسم <a> وسمة href للإشارة إلى وجهة الارتباط:

<a href="https://example.com/">Click here!</a>

تطور HTML: ما الفرق بين HTML وHTML5؟

يتكون الإصدار الأول من HTML من 18 وسم. منذ ذلك الحين، يأتي كل إصدار جديد مزودًا بوسوم وسمات جديدة تضاف إلى الترميز. كانت أهم ترقية للغة حتى الآن هي تقديم HTML5 في عام 2014.

الفرق الرئيسي بين HTML وHTML5 هو أن HTML5 يدعم أنواعًا جديدة من عناصر التحكم في النماذج. قدم HTML5 أيضًا العديد من الوسوم الدلالية التي تصف المحتوى بوضوح، مثل <article> و<header> و<footer>.

إيجابيات وسلبيات HTML

تماما مثل أي لغة كمبيوتر أخرى، لغة HTML لها نقاط القوة والقيود. فيما يلي إيجابيات وسلبيات HTML:

الايجابيات:

• صديقة للمبتدئين. يحتوي HTML على ترميز نظيف ومتسق، بالإضافة إلى منحنى تعليمي سطحي.
• يدعم. تُستخدم اللغة على نطاق واسع، مع وجود الكثير من الموارد ومجتمع كبير يدعمها.
• يمكن الوصول. إنه مفتوح المصدر ومجاني تمامًا. يعمل HTML أصلاً في كافة متصفحات الويب.
• مرن. يمكن دمج HTML بسهولة مع اللغات الخلفية مثل PHP وNode.js.

سلبيات:

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

كيف ترتبط HTML وCSS وJavascript

يتم استخدام HTML لإضافة عناصر النص وإنشاء بنية المحتوى. ومع ذلك، لا يكفي لإنشاء موقع ويب احترافي وسريع الاستجابة. لذلك، يحتاج HTML إلى مساعدة من CSS وJavaScript لإنشاء الغالبية العظمى من محتوى موقع الويب.

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

فهم HTML وتحسين معرفتك بـ HTML

يعد التعرف على لغة HTML خطوة أولى رائعة للمهتمين بتطوير الويب.

هناك الكثير من الدورات التدريبية المتاحة عبر الإنترنت لتعلم البرمجة، ولكننا قمنا بإدراج ثلاث من أفضل قواعد البيانات التعليمية لـ HTML:

• W3Schools – يحتوي على موارد وأمثلة وتمارين للمساعدة في تعلم لغة HTML الأساسية مجانًا. يوجد أيضًا برنامج تعليمي HTML ذاتي التكلفة يكلف 95 دولارًا ويوفر شهادة رسمية ذلك.
• Codecademy – يقدم دورات تمهيدية مجانًا مع برامج تعليمية تفاعلية. يستخدم Codecademy شاشة مقسمة ستعرض تلقائيًا نتيجة الترميز الخاص بك على ملف HTML. هناك محتوى حصري متاح مقابل 19.99 دولارًا شهريًا.
• Coursera – تقدم دورات متنوعة تقدم شروحات متعمقة مع أمثلة من الحياة الواقعية. سعر الاشتراك هو 49 دولارًا شهريًا، وهناك نسخة تجريبية مجانية مدتها 7 أيام للبدء.

خاتمة

HTML هي لغة الترميز الأساسية الموجودة على الإنترنت. تحتوي كل صفحة HTML على سلسلة من العناصر التي تنشئ بنية محتوى صفحة الويب أو التطبيق.

HTML هي لغة سهلة الاستخدام للمبتدئين وتحظى بالكثير من الدعم وتستخدم بشكل أساسي لصفحات مواقع الويب الثابتة. يعمل HTML بشكل أفضل مع CSS للتصميم وJavaScript للوظائف. يمكنك التحقق من كيفية ربط CSS وHTML على مدونتنا (قريبًا).

لقد أظهرنا لك أيضًا بعضًا من أفضل الدورات التدريبية المتاحة عبر الإنترنت والتي ستساعدك إما على تحسين معرفتك بـ HTML أو توفير فهم أساسي لها.

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

الأسئلة الشائعة