
تُعد لغة HTML هي أساس كل صفحة ويب، وهي الطريقة التي نطلب بها من المُتصفِّحات تنظيم المحتوى في فقرات وعناوين وصور وروابط وقوائم ونماذج وجداول وأزرار وغيرها. لذا، إذا كُنت مهتمًا ببناء موقع ويب، أو تطوير الويب، أو مُجرَّد البرمجة بشكلٍ عام، فإن تعلُّم لغة HTML يُعد خطوةً رائعةً للبدء.
في هذا المقال، سنتعرَّف على ما هي لغة HTML وفيم تُستخدم، بالإضافة إلى كيفيَّة كتابة بعض عناصر HTML الأساسيَّة، كما سنراجع بعض أهم عناصرها وسماتها. هيا بنا نبدأ!
اكتشف إستراتيجيات العمل الحر الناجح وأسرار تحقيق الربح من الإنترنت من خلال دورة مكثفة عبر الإنترنت على موقع فرصة. سجِّل في الدورة الآن
لماذا نستخدم لغة HTML؟ ما هي إيجابياتها؟
لغة HTML لها إيجابيات كثيرة، منها أنه يتم استخدام لغة HTML بشكلٍ أساسي لإنشاء صفحات الويب، وهي لغة مجانيّة وتضمن عرض النصوص والصور والعناصر الأخرى على النحو الذي يريده المُبرمج.
باستخدام لغة HTML، لا يُمكنك فقط إضافة العناوين والفقرات والقوائم والعناصر الأخرى إلى صفحتك، بل يُمكنك أيضًا تضمين الصور ومقاطع الفيديو والملفات الصوتيَّة والوسائط المُتعدِّدة الأخرى. ويمكنك الارتباط بصفحات ويب أخرى على نفس الموقع أو من موقع آخر، وهو الأمر الذي يُتيح للزائرين التنقل بسهولة في موقع الويب الخاص بك مع التنقُّل بين مواقع الويب الأخرى.
لغة HTML مُخصَّصة فقط لمحتوى الصفحة، بمعنى أنّها تُنشئ قاعدة بسيطة يُمكنك من خلالها إضافة التصميم باستخدام لغة أخرى تسمى CSS. باستخدام لغة CSS، يُمكنك تخصيص التصميم والتخطيطات وتغيير اللون والخط ومحاذاة العناصر.
بالإضافة إلى ذلك، يتم استخدام لغة HTML لإنشاء أشياء أخرى غير صفحات الويب، حيث يُمكنك استخدامها من أجل:
-
عمل جداول لتنظيم البيانات
-
إنشاء نماذج لجمع معلومات المستخدم، أو معالجة المعاملات، أو إجراء الحجوزات، أو تقديم طلب.
-
إنشاء رسائل البريد الإلكتروني
سواءً كنت تريد إنشاء صفحات ويب أو جداول أو نماذج أو رسائل بريد إلكتروني، فسوف تحتاج إلى معرفة كيفيَّة البرمجة باستخدام لغة HTML. لذا، لنبدأ في رحلتنا لتعلُّم أساسيّات هذه اللغة. ويُمكننا البدء من خلال هذا الفيديو الصغير أولًا
اقرأ أيضًا: ما أهمية تعلم البرمجة؟ | فوائد البرمجة
كيفيّة الكتابة بلغة HTML
بالمقارنة بلغات البرمجة الأخرى، فإنَّ لغة HTML سهلة القراءة والفهم نسبيًا، نظرًا لأنها عبارة عن نص إنجليزي عادي مع رموز إضافيَّة.
لنبدأ بالوحدة الأساسيّة لصفحة الويب المكتوبة بلغة HTML وهو “العنصر”. العنصر في لغة HTML هو وحدة معلومات تُخبر مُتصفِّح الويب بما يجب تقديمه للشخص الذي يستخدم الموقع. يُمكن أن يكون عنصر HTML جزءًا من النص مثل الفقرة، أو عنصرًا تفاعليًا مثل الزر، أو قسمًا من الصفحة مثل الرأس أو التذييل.
إليك ما يبدو عليه العنصر الأساسي مكتوبًا بلغة HTML. يُسمى هذا العنصر عنصر
والآن، دعونا نلقي نظرة سريعة على كل مُكوِّن من عناصر HTML.
اقرأ أيضًا: كيف تحقق الربح من البرمجة وتطوير البرمجيات؟
1. العلامات أو “Tags”
يتم تحديد عناصر HTML بواسطة العلامات، حيث تحتوي معظم العناصر على علامة فتح وعلامة إغلاق. تحتوي العلامات المفتوحة التي تسبق على اسم العنصر محاطًا بأقواس زاوية (<>). تتطابق علامات الإغلاق مع علامات الفتح، باستثناء الشرطة المائلة (/) التي تسبق اسم العنصر.
تحتوي العلامات على محتوى العنصر، وقد يكون هذا المحتوى نصًا أو عنصر وسائط أو حتى عناصر أخرى. لذا، لنفترض أنك تريد إضافة فقرة إلى صفحة الويب الخاصة بك، تحتوي الفقرة على النص “This is a paragraph”. ستغلفها بعلامات فقرة
و
. لذلك، ستبدو HTML كما يلي:
This is a paragraph.
وبهذه البساطة، لن تحتاج أكثر من هذه الأشياء الثلاثة معًا لإنشاء فقرة باستخدام لغة HTML. تحتوي معظم عناصر HTML على علامة فتح وعلامة إغلاق ومحتوى بين هذه العلامات. ومع ذلك، تحتوي بعض عناصر HTML على علامة افتتاحية فقط، وتُسمى هذه العناصر بالعناصر الفارغة.
العنصر الخاص بفصل الأسطر هو هو عنصر فارغ شائع في لغة HTML أيضًا. لإضافة فاصل بين الأسطر، ما عليك سوى كتابة
وستتم إضافة فاصل بين الأسطر.
بالإَافة إلى ذلك، فأسماء العناصر غير حساسة لحالة الأحرف، مما يعني أنَّه يمكن كتابتها بأحرف كبيرة أو صغيرة. على سبيل المثال، يمكن أيضًا كتابة العلامة
كـ
. ومع ذلك، سترى دائمًا أسماء العناصر مكتوبة بأحرف صغيرة.
اقرأ أيضًا: أفضل لغات البرمجة لتتعلمها في 2025
2. السمات أو “Attributes”
في حينَّ أن جميع عناصر HTML تحتاج إلى علامات، فإن بعضها فقط يتطلَّب سمات، والسمة في لغة HTML هي نص داخل علامة الفتح التي توفر معلومات إضافية حول عنصر HTML. ويتم العثور على السمة دائمًا في العلامة الافتتاحية لعنصر HTML. تحتوي معظمها على صيغة الاسم = “القيمة”، على الرغم من أن بعض السمات تتطلب منك فقط كتابة الاسم دون أي قيمة معينة.
وتتطلَّب بعض العناصر سمات معينة. على سبيل المثال، يجب أن يحتوي عنصر الصورة () دائمًا على سمة مصدر (src) تكون قيمتها هي عنوان URL للصورة أو مسار الملف. وإلا فإن المتصفح لن يعرف الصورة التي سيتم عرضها.
وبالمثل، يجب أن يحتوي عنصر الربط ()، الذي يقوم بإنشاء رابط تشعبي، على سمة href بقيمة تُحدِّد وجهة الارتباط. بخلاف ذلك، إذا نقر الزائر على عنصر الرابط، فلن يُرسله المُتصفِّح إلى أي مكان.
تحتوي العناصر الأخرى على سمات ليس من الضروري تضمينها، ولكنَّها تُعتبر ممارسة جيدة. على سبيل المثال، يأخذ العنصر أيضًا سمة alt، التي تحتوي على نص بديل للصورة. سيستمر المُتصفِّح في عرض الصورة إذا لم تكن السمة alt موجودة في العلامة
. ولكن، قد يواجه القراء ضعاف البصر صعوبة في فهم ما تنقله الصورة دون وصف نصي بديل. لذا، يوصى بأن تحتوي جميع الصور على نص بديل وبالتالي استخدام السمة alt.
اقرأ أيضًا: أفضل 7 مواقع كي تصنع تطبيق هاتف دون أن تكون مبرمجا
كيفيَّة استخدام لغة HTML
للبدء في استخدام لغة HTML، ستحتاج إلى محرر نصوص، وهو برنامج لكتابة التعليمات البرمجيَّة. ونظرًا لأن ملف HTML يعمل بتنسيق نص قياسي، فإنَّ أي محرر نصوص سيفي بالغرض.
ستكون خطوتك الأولى هي تنزيل مُحرِّر نصوص مجاني لاستخدامه. يُعد برنامج Notepad++ محرر نصوص مُناسب وسهل الاستخدام لنظام التشغيل Windows، ويُعد Sublime Text خيارًا شائعًا لنظام التشغيل Mac. عادةً، يُمكنك البحث في محرر النصوص عبر الإنترنت وتنزيل ملف مضغوط من صفحة التنزيل. افتح الملف المضغوط، واتبع أي تعليمات مقدمة لتثبيت البرنامج، ثم افتحه.
عندما تفتح محرر النصوص، من المحتمل أن ترى نافذة مثل تلك الموجودة أدناه. هذا هو المكان الذي ستكتب فيه كود HTML الخاص بك.
بعد فتح نافذة محرر النصوص، انسخ كود HTML أدناه وقم بلصقه في النافذة.
My first paragraph.
سنشرح ما يعنيه كل عنصر من هذه العناصر في القسم التالي. بعد ذلك، احفظ الملف وقم بتسميته “index.html”. يُمكنك حفظه على سطح المكتب أو في أي مجلد آخر.
بعد حفظ ملف HTML، ستتمكَّن من فتح هذا الملف في متصفح الويب الخاص بك. للقيام بذلك، قم ببساطة بفتح الملف أو سحب رمز الملف وإفلاته في نافذة مُتصفِّح مفتوحة. سوف يبدو مثل هذا:
الآن بعد أن عرفت كيفية استخدام محرر النصوص لكتابة أمر بلغة HTML، دعونا نلقي نظرة على كيفيّة كتابة هذه الأكواد.
اقرأ أيضًا: علم أطفالك البرمجة مع موقع CodeMonkey
كيفية إنشاء ملف HTML
لإنشاء موقع ويب باستخدام HTML، يتعين عليك إنشاء ملف HTML أولاً. سيحتوي هذا الملف على كل أوامر HTML لصفحة الويب الخاصَّة بك وسيتم تحميله على خادم الويب الخاص بك. وبهذه الطريقة، عندما يبحث أحد الزائرين عن موقع الويب الخاص بك، سيرسل الخادم ملف HTML إلى مُتصفِّح الزائر، وسيعرض المتصفح الصفحة وفقًا لذلك.
في القسم الأخير، قمنا بإنشاء ملف HTML بسيط جدًا لفتحه في متصفحك. في هذا القسم، سنستعرض عملية إنشاء ملف أكثر تعقيدًا.
الخطوة 1: إضافة تعريف
للبدء، سنحتاج إلى تعريف نوع المستند كـ HTML. أضف الكود الخاص في السطر الأول من الملف. يبدأ كل ملف HTML بهذه الطريقة.
الخطوة 2: إضافة عنصر
بعد ذلك، سنضيف عنصر بعد تعريف نوع المستند، والذي يُسمى أيضًا عنصر “الجذر” للمستند لأنه يحتوي على جميع العناصر الأخرى في المستند.
في السطر الموجود أسفل تعريف DOCTYPE، أضف علامة فتح . أسفل ذلك، أضف علامة إغلاق
سيتم وضع كل عنصر آخر في المستند بين هذه العلامات.
الخطوة 3: إضافة سمة اللغة
ضمن العلامة الافتتاحيَّة لعنصر html، سنضيف أيضًا سمة lang (اللغة). يساعد ذلك قارئي الشاشة على تحديد اللغة الموجودة في المستند، مما يجعل الوصول إلى موقع الويب الخاص بك أكثر سهولة.
بدون سمة اللغة، ستستخدم برامج قراءة الشاشة لغة نظام التشغيل بشكل افتراضي، مما قد يؤدي إلى أخطاء في نطق العنوان والمحتويات الأخرى على الصفحة.
نظرًا لأننا نكتب هذا المنشور باللغة العربيّة، فسنقوم بتعيين قيمة سمة lang للملف على ar.
اقرأ أيضًا: مهارات حاسوبية يبحث عنها أرباب العمل في سيرتك الذاتية
الخطوة 4: إضافة قسم الرأس والجسم
يتكوَّن مستند HTML من جزأين: قسم الرأس وقسم الجسم. يحتوي قسم الرأس على معلومات وصفيَّة حول الصفحة ولا يعرض المتصفح هذه المعلومات للمستخدمين. في المقابل، يحتوي قسم الجسم على جميع المعلومات التي ستكون مرئية في الواجهة الأمامية، مثل الفقرات والصور والروابط.
لإنشاء هذه الأقسام، سنضيف علامات
وعلامات داخل القسم من المستند.
ستلاحظ أيضًا وجود مسافة بادئة للعلامتين
و هنا. يشير هذا إلى أنَّ هذه العلامات موضوعة داخل علامات أو “متداخلة فيها”. على الرغم من أن المسافة البادئة ليست ضرورية ولا تحدث فرقًا في كيفية عرض المتصفح للمستند، إلا أنه لا يزال من الممارسات الشائعة وضع مسافة بادئة لـ HTML الخاص بك لتحسين إمكانيَّة القراءة.
الخطوة 5: أضف عنوانًا في قسم الرأس
بعد ذلك، يجب إضافة اسم في قسم الرأس لتسمية الملف. اكتب اسمًا ثم ضعه في علامات
الخطوة 6: إضافة عناصر HTML في قسم الجسم
في قسم الجسم أو النص، دعونا الآن نضيف عنوانًا وفقرة. اكتب محتوى العنوان وضعغ في علامات
، ثم اكتب محتوى الفقرة وضعه في علامات .
This is a paragraph.
اقرأ أيضًا: ماذا تعرف عن الإنترنت المظلم والإنترنت العميق؟
مثال على استخدام HTML
لدينا الآن ملف HTML أساسي سيتم تحميله في متصفحك. إليك ما يبدو عليه الملف المُكتمل الذي قمنا بإنشائه في الواجهة الأمامية. ولاحظ أنَّه يتم عرض فقط العنوان والفقرة من قسم النص.
كما ترون، هذه صفحة رئيسيّة جميلة، ولكن لملئها نحتاج إلى تعلُّم المزيد من عناصر الصفحة. عناصر الصفحة هي عناصر يتم عرضها فعليًا على الواجهة الأمامية. لقد استخدمنا بالفعل اثنين منهم،
. دعونا نلقي نظرة سريعة على المزيد من هذه العناصر.
وإذا كُنت تُفضِّل مشاهدة كيفية إنشاء ملف HTML أكثر تعقيدًا باستخدام الصور والروابط والنماذج والعناصر الأخرى، فشاهد هذا الفيديو:
أهم عناصر HTML
يتكوَّن الإصدار الأول من HTML من 18 عنصرًا فقط. منذ ذلك الحين، تم إصدار المزيد من الإصدارات مع إضافة العشرات من العلامات في كل إصدار. في أحدث إصدار (HTML5)، يوجد 110 علامة HTML.
لا تقلق، رغم ذلك، فهناك عدد قليل فقط من الأشياء التي ستستخدمها في أغلب الأحيان. سنراجع أدناه العناصر الأكثر شيوعًا وعلاماتها.
1. الفقرة (
)
يًمثِّل هذا العنصر من عناصر HTML فقرة. من خلال وضع العلامات
حول النص، ستجعل هذا النص يبدأ في سطر جديد.
2. الصورة (
)
يقوم هذا العنصر بتضمين صورة في المستند، ويتطلَّب سمة المصدر (src) لعرضها بشكلٍ صحيح. يجب أيضًا تضمين سمة alt في حالة عدم تحميل الصورة بشكل صحيح أو أن القارئ يعاني من فهم الصورة ويحتاج إلى وصف نصي.
3. العناوين (
تُمثِّل عناصر عناوين HTML مستويات مختلفة من عناوين الأقسام.