شرح HTML "لغة توصيف النص الفائق" .. وكيف تكتب بها؟

من المحتمل جدا أنك سمعت مصطلح HTML من قبل.

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

تقرير يشرح لغة توصيف النص الفائق HTML، صورة بالذكاء الاصطناعي من مايكروسوفت copilot، خاصة بالمعرفة للدراسات.

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

ما هي لغة HTML وما هو عملها؟:

في العام 1989 ابتكر (تيم بيرنرز لي) أستاذ علوم الحاسوب في جامعة أوكسفورد في المملكة المتحدة الترميز الشهير www ليدشن بذلك شبكة الإنترنت العالمية.

احتاج البروفيسور تيم بيرنرز لي، والذي سيصبح ((السير)) فيما بعد تقديرا لجهوده في ابتكار وتطوير الإنترنت إلي لغة يعرض بها المواقع التي ستعرضها الإنترنت.

لذا وفي العام 1991، ابتكر لغة HTML.

بعد عامين، وبالتحديد في عام 1993، طلت علينا بلاد الإنجليز مرة أخرى مع عالم الكمبيوتر (ديف راجيت) الذي وضع المسودات الأولى للغة الوليدة وأعطاها اسم HTML+.

ومرة أخرى يمر عامين حتى يتم الكشف عن التطوير الثاني في اللغة عام 1995 مع ظهور HTML 2.0.

ومنذ ذلك التاريخ ولم تتوقف HTML عن التطور وتراكم المعرفة.

لا مبالغة إذا ما قلنا أن لغة HTML هي حجر الأساس للويب منذ نهاية التسعينيات من القرن الماضي، فعن طريقها يستطيع المبرمجين العاملين في (تطوير الويب) تحديد وتنظيم وتنسيق البنية الأساسية للموقع الذي يريدون عرضه أو تقديمه.

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

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

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

هذا وتعرف لغة HTML بالعديد من الأسماء ولها أيضا العديد من الاستخدامات.

فهي لغة ترميز النص التشعبي (Hyper Text Markup Language)، ولكي لا تشعر بالتعقيد فمصطلح النص التشعبي أو (Hypertext) يشير إلى الراوبط التي تربط صفحات الويب ببعضها البعض سواء داخل الموقع الواحد أو بين عدة مواقع بعضها ببعض.

على سبيل المثال .. فنحن في ((المعرفة للدراسات)) نعتمد على النص التشعبي Hypertext عندما نقول لكم أن لدينا تقريرا مثل: ((أفضل دورات الأمن السيبراني للمبرمجين)) يمكنكم الإطلاع عليه.

وكذلك نعتمد عليه إذا قلنا لكم أن موقع خارجي مثل geeks for geeks يضع اختبارات للمبرمجين على لغة HTML ويمكنكم الوصول إليه من خلال (هذا الرابط).

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

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

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

ففي حين تساعدنا لغات البرمجة في تعديل البيانات، فإننا نستخدم لغات الترميز لتحديد كيفية عرض العناصر على صفحة الويب.

هي لغة الترميز القياسية لإنشاء صفحات الويب.
أيضا لغة HTML هي الواصف لبنية صفحة الويب، حيث تستخدم الترميز أو "markup" لتوضيح النصوص المكتوبة والصور والفيديوهات والمحتويات الأخرى لعرضها في متصفح الويب.
تتكون لغة HTML من سلسلة من العناصر الخاصة به، ومن أهمها:

كل عنصر من هذه العناصر وظيفته إخبار المتصفح بكيفية عرض المحتوى.
باستخدام عناصر HTML فإنك تقوم بتسمية اجزاء من المحتوي، مثل هذا هو العنوان "this is a heading"، أو هذه فقرة "this is a paragraph"، أو هذا رابط "this is a link"، وغير ذلك.
يتم تخزين أكواد HTML عادة في ملفات تستخدم الامتداد htm أو html، وقد يحتوي الموقع الواحد على المئات أو ربما الآلاف منها.

ولنضرب مثالا توضيحيا لأحد أبسط الأكواد المكتوبة بلغة HTML:

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Heading</h1>

<p>Content</p>

</body>

</html>

هذه الأكواد بلغة HTML هي التي تتعامل معها متصفحات الويب مثل (Chrome, Edge, Firefox, Safari) وتعرضها لكم في صورة صفحات سليمة وشيقة تستطيعون قراءتها والتحرك والتنقل بداخلها بشكل بسيط.

فالمتصفحات لا تعرض لنا هذه الأكواد بل تستخدمها لتفهم كيف تعرضها؟.

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

كيف تكتب باستخدام لغة HTML ؟:

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

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

الخطوة الأولى: تعلم الأساسيات، وأولها علامات HTML الأساسية، وما هي صفات وخصائص كل علامة فيها وكيف يتم تخطيطها وطريقة استجابتها؟.
الخطوة الثانية: تنتقل إلي المواضيع المتقدمة في HTML5 مثل: (HTML forms, media, APIs).

بإتمام هاتين الخطوتين سيكون لديك الأساس القوي الذي تستطيع من خلاله البدء في الكتابة بلغة HTML.

ملحوظة: يمكنك استخدام محررات HTML الاحترافية من أجل إنشاء صفحات الويب أو تعديلها.

ومع ذلك فإننا نرشح للمبتدئين ولمن يبدأون تعلم اللغة استخدام محرر نصوص بسيط مثل Notepad (للكمبيوتر الشخصي) أو TextEdit (لأجهزة Mac).

مقدمة إلي لغة ترميز النص التشعبي HTML:

في هذه المقدمة للدليل التعليمي للغة HTML سنستخدم أيضا أسلوب خطوة بخطوة.

1. أساسيات HTML:

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

وتشتمل هذه الأساسيات على:

مقدمة حول HTML: وتزداد أهمية هذه المقدمة خصوصا بالنسبة للمبتدئين في تطوير الويب.
محررات HTML.
تعليقات HTML.
عناصر HTML.
سمات HTML.
أنماط المستندات HTML.
عناوين HTML.
فقرات HTML.
روابط HTML.
صور HTML.
دلالات HTML.
كيانات HTML.
رموز HTML.

2. المشاركة في مشاريع المبتدئين:

من أهم الخطوات في رحلة تعلم لغة HTML الاشتراك في مشاريع المبتدئين، حيث توفر لك المكان والبيئة الملائمة للتعليم والتدريب، مما يطور مهاراتك في مجال تطوير الويب.

ومن الأمثلة على ذلك: تصميم موقع بسيط، ويمكنك الاكتفاء في البداية بموقع من صفحة واحدة.

3. معرفة إجابات الأسئلة حول العلامات الأساسية في HTML:

يجب أن تعرف أن العلامات أو (HTML tags) هي اللبنات الأساسية لأي صفحة ويب، وأنك من خلال فهم واستخدام علامات HTML بشكل فعال ستكون قادر على إنشاء صفحات ويب جيدة التنظيم ومفيدة.

ولكي تحقق ذلك لابد أن تكون على دراية بإجابات الأسئلة التالية:

كيفية إضافة فقرة في HTML؟.
كيفية إنشاء رابط في HTML؟.
ما هو div في HTML؟ وكيف يعتبر أحد العناصر الأكثر انتشارا فيها وطريقة استخدامه لفصل الصفحة إلي عدة أقسام ((على سبيل المثال، إذا كنت تريد إنشاء عمودين في صفحة ويب، فيمكنك استخدام عناصر div لتعريف كل منهما وتمييزه عن الآخر)).
ما هو span في HTML؟.
كيفية إضافة رأس الصفحة إلى صفحة الويب؟.
كيفية إضافة تذييل لصفحة الويب؟.
كيفية إضافة فاصل الأسطر في HTML؟.
كيفية إضافة شريط التنقل في HTML؟.
كيفية ربط JavaScript مع HTML؟.
علامات HTML – قائمة من الألف إلى الياء.

أكواد لغة HTML:

تعرف لغة HTML أيضا بلغة توصيف النص الفائق، صورة بالذكاء الاصطناعي من مايكروسوفت copilot، خاصة بالمعرفة للدراسات.

عندما تكتب التعليمات البرمجية باستخدام لغة HTML، فستكون في حاجة إلى إمكانية فصل عناصر HTML عن بقية نصوص المستند الذي تقوم بكتابته، يتم ذلك عن طريق ما يعرف باسم العلامات أو "tags".

تتكون العلامة من اسم العنصر المراد فصله محاطًا بعلامتي < و >.

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

على سبيل المثال، يمكنك كتابة العلامة <title> على النحو التالي <TITLE> أو <Title> أو بأي طريقة أخرى تريدها.

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

ولنضرب مثالا عمليا بكود مكتوب بلغة HTML:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

نلاحظ هنا أيضا على هذا الكود ما يلي:

استخدام <!DOCTYPE html> هو بمثابة إعلان أن هذا الكود عبارة عن مستند HTML5.
عنصر <html> هو العنصر الجذر لصفحة HTML.
يحتوي عنصر <head> على معلومات تعريفية حول صفحة HTML.
يحدد العنصر <title> العنوان لصفحة html (والتي تظهر في شريط عنوان المتصفح أو في علامة تبويب الصفحة).
فيما يحدد العنصر <body> نص المستند وهو عبارة كما نري عن جميع المحتويات التي سنراها في الصفحة مثل العناوين والفقرات والصور والارتباطات التشعبية والجداول والقوائم وما إلى ذلك.
العنصر <h1> يحدد أن هنا عنوان كبير الحجم، لذا فهو يستخدم عادة في تحديد العنوان الرئيسي لصفحة الويب.
العنصر <p> يحدد أن هذا المكان يوجد به فقرة.

عناصر HTML:

العنصر في لغة HTML يتم تحديده بواسطة علامة بداية ثم بعض المحتوى وفي النهاية علامة نهاية.

ولنضرب مثالا لتوضيح ذلك:

<tagname> Content goes here... </tagname>

ما هو داخل علامة البداية إلى علامة النهاية هو بالتحديد عنصر HTML... تماما كهذين المثالين:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

ملحوظة: بعض عناصر HTML لا تحتوي على أي محتوي (مثال: العنصر <br> ، وتسمي مثل هذه العناصر باسم (العناصر الفارغة)، وبالمناسبة فإن العناصر الفارغة لا يكون لها أيضا علامة نهاية أو end tag.

الاستخدام الرئيسي للعناصر في لغة HTML هو تنظيم صفحة الويب إلي أقسام وعناوين ومحتويات أخرى.

جداول HTML:

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