الدليل الشامل لتعلُّم لغة HTML للمبتدئين: كيفية كتابتها واستخدامها
تُعد لغة HTML هي أساس كل صفحة ويب، وهي الطريقة التي نطلب بها من المُتصفِّحات تنظيم المحتوى في فقرات وعناوين وصور وروابط وقوائم ونماذج وجداول وأزرار وغيرها. لذا، إذا كُنت مهتمًا ببناء موقع ويب، أو تطوير الويب، أو مُجرَّد البرمجة بشكلٍ عام، فإن تعلُّم لغة HTML يُعد خطوةً رائعةً للبدء.
في هذا المقال، سنتعرَّف على ما هي لغة HTML وفيم تُستخدم، بالإضافة إلى كيفيَّة كتابة بعض عناصر HTML الأساسيَّة، كما سنراجع بعض أهم عناصرها وسماتها. هيا بنا نبدأ!
فرصة لتحقيق أرباح مذهلة وتحويل شغفك إلى مصدر دخل مجزٍ اكتشف إستراتيجيات العمل الحر الناجح وأسرار تحقيق الربح من الإنترنت من خلال دورة مكثفة عبر الإنترنت على موقع فرصة. سجِّل في الدورة الآن
لماذا نستخدم لغة HTML؟ ما هي إيجابياتها؟
لغة HTML لها إيجابيات كثيرة، منها أنه يتم استخدام لغة HTML بشكلٍ أساسي لإنشاء صفحات الويب، وهي لغة مجانيّة وتضمن عرض النصوص والصور والعناصر الأخرى على النحو الذي يريده المُبرمج.
باستخدام لغة HTML، لا يُمكنك فقط إضافة العناوين والفقرات والقوائم والعناصر الأخرى إلى صفحتك، بل يُمكنك أيضًا تضمين الصور ومقاطع الفيديو والملفات الصوتيَّة والوسائط المُتعدِّدة الأخرى. ويمكنك الارتباط بصفحات ويب أخرى على نفس الموقع أو من موقع آخر، وهو الأمر الذي يُتيح للزائرين التنقل بسهولة في موقع الويب الخاص بك مع التنقُّل بين مواقع الويب الأخرى.
لغة HTML مُخصَّصة فقط لمحتوى الصفحة، بمعنى أنّها تُنشئ قاعدة بسيطة يُمكنك من خلالها إضافة التصميم باستخدام لغة أخرى تسمى CSS. باستخدام لغة CSS، يُمكنك تخصيص التصميم والتخطيطات وتغيير اللون والخط ومحاذاة العناصر.
بالإضافة إلى ذلك، يتم استخدام لغة HTML لإنشاء أشياء أخرى غير صفحات الويب، حيث يُمكنك استخدامها من أجل:
عمل جداول لتنظيم البيانات
إنشاء نماذج لجمع معلومات المستخدم، أو معالجة المعاملات، أو إجراء الحجوزات، أو تقديم طلب.
إنشاء رسائل البريد الإلكتروني
سواءً كنت تريد إنشاء صفحات ويب أو جداول أو نماذج أو رسائل بريد إلكتروني، فسوف تحتاج إلى معرفة كيفيَّة البرمجة باستخدام لغة HTML. لذا، لنبدأ في رحلتنا لتعلُّم أساسيّات هذه اللغة. ويُمكننا البدء من خلال هذا الفيديو الصغير أولًا
اقرأ أيضًا: ما أهمية تعلم البرمجة؟ | فوائد البرمجة
كيفيّة الكتابة بلغة HTML
بالمقارنة بلغات البرمجة الأخرى، فإنَّ لغة HTML سهلة القراءة والفهم نسبيًا، نظرًا لأنها عبارة عن نص إنجليزي عادي مع رموز إضافيَّة.
لنبدأ بالوحدة الأساسيّة لصفحة الويب المكتوبة بلغة HTML وهو "العنصر". العنصر في لغة HTML هو وحدة معلومات تُخبر مُتصفِّح الويب بما يجب تقديمه للشخص الذي يستخدم الموقع. يُمكن أن يكون عنصر HTML جزءًا من النص مثل الفقرة، أو عنصرًا تفاعليًا مثل الزر، أو قسمًا من الصفحة مثل الرأس أو التذييل.
إليك ما يبدو عليه العنصر الأساسي مكتوبًا بلغة HTML. يُسمى هذا العنصر عنصر <button>، ويقوم بإنشاء زر على الشاشة يمكن للمستخدمين النقر عليه بالماوس.
والآن، دعونا نلقي نظرة سريعة على كل مُكوِّن من عناصر HTML.
اقرأ أيضًا: كيف تحقق الربح من البرمجة وتطوير البرمجيات؟
1. العلامات أو "Tags"
يتم تحديد عناصر HTML بواسطة العلامات، حيث تحتوي معظم العناصر على علامة فتح وعلامة إغلاق. تحتوي العلامات المفتوحة التي تسبق على اسم العنصر محاطًا بأقواس زاوية (<>). تتطابق علامات الإغلاق مع علامات الفتح، باستثناء الشرطة المائلة (/) التي تسبق اسم العنصر.
تحتوي العلامات على محتوى العنصر، وقد يكون هذا المحتوى نصًا أو عنصر وسائط أو حتى عناصر أخرى. لذا، لنفترض أنك تريد إضافة فقرة إلى صفحة الويب الخاصة بك، تحتوي الفقرة على النص "This is a paragraph". ستغلفها بعلامات فقرة <p> و </p>. لذلك، ستبدو HTML كما يلي:
<p>This is a paragraph.</p>
وبهذه البساطة، لن تحتاج أكثر من هذه الأشياء الثلاثة معًا لإنشاء فقرة باستخدام لغة HTML. تحتوي معظم عناصر HTML على علامة فتح وعلامة إغلاق ومحتوى بين هذه العلامات. ومع ذلك، تحتوي بعض عناصر HTML على علامة افتتاحية فقط، وتُسمى هذه العناصر بالعناصر الفارغة.
العنصر الخاص بفصل الأسطر هو هو عنصر فارغ شائع في لغة HTML أيضًا. لإضافة فاصل بين الأسطر، ما عليك سوى كتابة <br> وستتم إضافة فاصل بين الأسطر.
بالإَافة إلى ذلك، فأسماء العناصر غير حساسة لحالة الأحرف، مما يعني أنَّه يمكن كتابتها بأحرف كبيرة أو صغيرة. على سبيل المثال، يمكن أيضًا كتابة العلامة <p> كـ <P>. ومع ذلك، سترى دائمًا أسماء العناصر مكتوبة بأحرف صغيرة.
اقرأ أيضًا: أفضل لغات البرمجة لتتعلمها في 2025
2. السمات أو "Attributes"
في حينَّ أن جميع عناصر HTML تحتاج إلى علامات، فإن بعضها فقط يتطلَّب سمات، والسمة في لغة HTML هي نص داخل علامة الفتح التي توفر معلومات إضافية حول عنصر HTML. ويتم العثور على السمة دائمًا في العلامة الافتتاحية لعنصر HTML. تحتوي معظمها على صيغة الاسم = "القيمة"، على الرغم من أن بعض السمات تتطلب منك فقط كتابة الاسم دون أي قيمة معينة.
وتتطلَّب بعض العناصر سمات معينة. على سبيل المثال، يجب أن يحتوي عنصر الصورة (<img>) دائمًا على سمة مصدر (src) تكون قيمتها هي عنوان URL للصورة أو مسار الملف. وإلا فإن المتصفح لن يعرف الصورة التي سيتم عرضها.
وبالمثل، يجب أن يحتوي عنصر الربط (<a>)، الذي يقوم بإنشاء رابط تشعبي، على سمة href بقيمة تُحدِّد وجهة الارتباط. بخلاف ذلك، إذا نقر الزائر على عنصر الرابط، فلن يُرسله المُتصفِّح إلى أي مكان.
تحتوي العناصر الأخرى على سمات ليس من الضروري تضمينها، ولكنَّها تُعتبر ممارسة جيدة. على سبيل المثال، يأخذ العنصر <img> أيضًا سمة alt، التي تحتوي على نص بديل للصورة. سيستمر المُتصفِّح في عرض الصورة إذا لم تكن السمة alt موجودة في العلامة <img>. ولكن، قد يواجه القراء ضعاف البصر صعوبة في فهم ما تنقله الصورة دون وصف نصي بديل. لذا، يوصى بأن تحتوي جميع الصور على نص بديل وبالتالي استخدام السمة alt.
اقرأ أيضًا: أفضل 7 مواقع كي تصنع تطبيق هاتف دون أن تكون مبرمجا
كيفيَّة استخدام لغة HTML
للبدء في استخدام لغة HTML، ستحتاج إلى محرر نصوص، وهو برنامج لكتابة التعليمات البرمجيَّة. ونظرًا لأن ملف HTML يعمل بتنسيق نص قياسي، فإنَّ أي محرر نصوص سيفي بالغرض.
ستكون خطوتك الأولى هي تنزيل مُحرِّر نصوص مجاني لاستخدامه. يُعد برنامج Notepad++ محرر نصوص مُناسب وسهل الاستخدام لنظام التشغيل Windows، ويُعد Sublime Text خيارًا شائعًا لنظام التشغيل Mac. عادةً، يُمكنك البحث في محرر النصوص عبر الإنترنت وتنزيل ملف مضغوط من صفحة التنزيل. افتح الملف المضغوط، واتبع أي تعليمات مقدمة لتثبيت البرنامج، ثم افتحه.
عندما تفتح محرر النصوص، من المحتمل أن ترى نافذة مثل تلك الموجودة أدناه. هذا هو المكان الذي ستكتب فيه كود HTML الخاص بك.
بعد فتح نافذة محرر النصوص، انسخ كود HTML أدناه وقم بلصقه في النافذة.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
سنشرح ما يعنيه كل عنصر من هذه العناصر في القسم التالي. بعد ذلك، احفظ الملف وقم بتسميته "index.html". يُمكنك حفظه على سطح المكتب أو في أي مجلد آخر.
بعد حفظ ملف HTML، ستتمكَّن من فتح هذا الملف في متصفح الويب الخاص بك. للقيام بذلك، قم ببساطة بفتح الملف أو سحب رمز الملف وإفلاته في نافذة مُتصفِّح مفتوحة. سوف يبدو مثل هذا:
الآن بعد أن عرفت كيفية استخدام محرر النصوص لكتابة أمر بلغة HTML، دعونا نلقي نظرة على كيفيّة كتابة هذه الأكواد.
اقرأ أيضًا: علم أطفالك البرمجة مع موقع CodeMonkey
كيفية إنشاء ملف HTML
لإنشاء موقع ويب باستخدام HTML، يتعين عليك إنشاء ملف HTML أولاً. سيحتوي هذا الملف على كل أوامر HTML لصفحة الويب الخاصَّة بك وسيتم تحميله على خادم الويب الخاص بك. وبهذه الطريقة، عندما يبحث أحد الزائرين عن موقع الويب الخاص بك، سيرسل الخادم ملف HTML إلى مُتصفِّح الزائر، وسيعرض المتصفح الصفحة وفقًا لذلك.
في القسم الأخير، قمنا بإنشاء ملف HTML بسيط جدًا لفتحه في متصفحك. في هذا القسم، سنستعرض عملية إنشاء ملف أكثر تعقيدًا.
الخطوة 1: إضافة تعريف <!DOCTYPE>
للبدء، سنحتاج إلى تعريف نوع المستند كـ HTML. أضف الكود الخاص <!DOCTYPE html> في السطر الأول من الملف. يبدأ كل ملف HTML بهذه الطريقة.
<!DOCTYPE html>
الخطوة 2: إضافة عنصر <html>
بعد ذلك، سنضيف عنصر <html> بعد تعريف نوع المستند، والذي يُسمى أيضًا عنصر "الجذر" للمستند لأنه يحتوي على جميع العناصر الأخرى في المستند.
في السطر الموجود أسفل تعريف DOCTYPE، أضف علامة فتح <html>. أسفل ذلك، أضف علامة إغلاق </html>
<!DOCTYPE html>
<html>
</html>
سيتم وضع كل عنصر آخر في المستند بين هذه العلامات.
الخطوة 3: إضافة سمة اللغة
ضمن العلامة الافتتاحيَّة لعنصر html، سنضيف أيضًا سمة lang (اللغة). يساعد ذلك قارئي الشاشة على تحديد اللغة الموجودة في المستند، مما يجعل الوصول إلى موقع الويب الخاص بك أكثر سهولة.
بدون سمة اللغة، ستستخدم برامج قراءة الشاشة لغة نظام التشغيل بشكل افتراضي، مما قد يؤدي إلى أخطاء في نطق العنوان والمحتويات الأخرى على الصفحة.
نظرًا لأننا نكتب هذا المنشور باللغة العربيّة، فسنقوم بتعيين قيمة سمة lang للملف على ar.
<!DOCTYPE html>
<html lang="ar">
</html>
اقرأ أيضًا: مهارات حاسوبية يبحث عنها أرباب العمل في سيرتك الذاتية
الخطوة 4: إضافة قسم الرأس والجسم
يتكوَّن مستند HTML من جزأين: قسم الرأس وقسم الجسم. يحتوي قسم الرأس على معلومات وصفيَّة حول الصفحة ولا يعرض المتصفح هذه المعلومات للمستخدمين. في المقابل، يحتوي قسم الجسم على جميع المعلومات التي ستكون مرئية في الواجهة الأمامية، مثل الفقرات والصور والروابط.
لإنشاء هذه الأقسام، سنضيف علامات <head></head> وعلامات <body></body> داخل القسم <html> من المستند.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
ستلاحظ أيضًا وجود مسافة بادئة للعلامتين <head> و<body> هنا. يشير هذا إلى أنَّ هذه العلامات موضوعة داخل علامات <html> أو "متداخلة فيها". على الرغم من أن المسافة البادئة ليست ضرورية ولا تحدث فرقًا في كيفية عرض المتصفح للمستند، إلا أنه لا يزال من الممارسات الشائعة وضع مسافة بادئة لـ HTML الخاص بك لتحسين إمكانيَّة القراءة.
الخطوة 5: أضف عنوانًا في قسم الرأس
بعد ذلك، يجب إضافة اسم في قسم الرأس لتسمية الملف. اكتب اسمًا ثم ضعه في علامات <title></title>. سنقوم أيضًا بوضع مسافة بادئة لعنصر <title> هذا لإظهار أنه متداخل في قسم <head>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Page</title>
</head>
<body>
</body>
</html>
الخطوة 6: إضافة عناصر HTML في قسم الجسم
في قسم الجسم أو النص، دعونا الآن نضيف عنوانًا وفقرة. اكتب محتوى العنوان وضعغ في علامات <h1></h1>، ثم اكتب محتوى الفقرة وضعه في علامات <p></p>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
اقرأ أيضًا: ماذا تعرف عن الإنترنت المظلم والإنترنت العميق؟
مثال على استخدام HTML
لدينا الآن ملف HTML أساسي سيتم تحميله في متصفحك. إليك ما يبدو عليه الملف المُكتمل الذي قمنا بإنشائه في الواجهة الأمامية. ولاحظ أنَّه يتم عرض فقط العنوان والفقرة من قسم النص.
كما ترون، هذه صفحة رئيسيّة جميلة، ولكن لملئها نحتاج إلى تعلُّم المزيد من عناصر الصفحة. عناصر الصفحة هي عناصر يتم عرضها فعليًا على الواجهة الأمامية. لقد استخدمنا بالفعل اثنين منهم، <h1> و<p>. دعونا نلقي نظرة سريعة على المزيد من هذه العناصر.
وإذا كُنت تُفضِّل مشاهدة كيفية إنشاء ملف HTML أكثر تعقيدًا باستخدام الصور والروابط والنماذج والعناصر الأخرى، فشاهد هذا الفيديو:
أهم عناصر HTML
يتكوَّن الإصدار الأول من HTML من 18 عنصرًا فقط. منذ ذلك الحين، تم إصدار المزيد من الإصدارات مع إضافة العشرات من العلامات في كل إصدار. في أحدث إصدار (HTML5)، يوجد 110 علامة HTML.
لا تقلق، رغم ذلك، فهناك عدد قليل فقط من الأشياء التي ستستخدمها في أغلب الأحيان. سنراجع أدناه العناصر الأكثر شيوعًا وعلاماتها.
1. الفقرة (<p>)
يًمثِّل هذا العنصر من عناصر HTML فقرة. من خلال وضع العلامات <p></p> حول النص، ستجعل هذا النص يبدأ في سطر جديد.
2. الصورة (<img>)
يقوم هذا العنصر بتضمين صورة في المستند، ويتطلَّب سمة المصدر (src) لعرضها بشكلٍ صحيح. يجب أيضًا تضمين سمة alt في حالة عدم تحميل الصورة بشكل صحيح أو أن القارئ يعاني من فهم الصورة ويحتاج إلى وصف نصي.
3. العناوين (<h1>-<h6>)
تُمثِّل عناصر عناوين HTML مستويات مختلفة من عناوين الأقسام. <h1> هو أعلى مستوى للقسم وأكثره بروزًا، في حين أن <h6> هو الأدنى وبالتالي الأقل بروزًا.
4. القسم (<div>)
تُساعد عناصر Div في تنظيم التعليمات البرمجية في أقسام مُحدَّدة بوضوح، كما تقوم بإضافة فواصل أسطر قبل وبعد المحتوى الخاص بها. وبخلاف ذلك، فإنها لا تؤثر على محتوى الصفحة أو تخطيطها ما لم يتم تصميمها باستخدام CSS.
5. عنصر الامتداد (<span>)
لا تُمثِّل علامات الامتداد أي شيء بطبيعتها، ولكنها تُستخدم لتجميع محتوى الصياغة لسببين. الأول هو تطبيق التصميم على جزء من النص. على سبيل المثال، إذا كنت تقوم بإنشاء أحرف استهلالية كبيرة، فيمكنك لف الحرف الأول من الفقرات الافتتاحية لكل قسم من مقالتك بعلامات الامتداد.
السبب الثاني لاستخدام علامات الامتداد هو تجميع العناصر التي تشترك بالفعل في قيم السمات. على سبيل المثال، ربما يكون لديك موقع ويب للمتحدثين باللغة الإنجليزية الذين يتعلَّمون اللغة الفرنسية. تم تعيين اللغة الافتراضية على اللغة الإنجليزية ولكن في عدة صفحات، قد يكون لديك جدول يحتوي على المصطلحات الفرنسيَّة في العمود الأول وترجماتها الإنجليزية في العمود الثاني. في هذه الحالة، يمكنك تغليف المصطلحات الفرنسية بعلامات امتداد مع تعيين سمة اللغة على "fr".
اقرأ أيضًا: أفضل قنوات اليوتيوب العربية التي تقدم محتوى تعليمي هادف
6. عنصر الربط (<a>)
يقوم عنصر ربط HTML بإنشاء رابط تشعبي، ويتطلَّب سمة href، التي تحدد وجهة الارتباط. يمكن أن تكون الوجهة قسمًا آخر على نفس صفحة الويب أو صفحة ويب أخرى على نفس الموقع، أو مواقع ويب وملفات وعناوين بريد إلكتروني خارجية.
فيما يلي مثال على رابط متداخل في فقرة:
7. فاصل الأسطر (<br>)
يقوم عنصر فاصل الأسطر بإنشاء فاصل أسطر حيث يتم وضعه. وهذا يعني أنه يمكنك إضافته أينما تريد أن ينتهي النص في السطر الحالي ويستأنف في السطر التالي. يمكن استخدام هذا العنصر لعرض القصائد أو كلمات الأغاني أو أشكال المحتوى الأخرى التي يكون فيها تقسيم الخطوط مهمًا.
فيما يلي مثال لعنوان تم تقديمه بطريقتين: واحدة باستخدام عناصر فاصل الأسطر والأخرى باستخدام عناصر الفقرة.
8. عنصر التأكيد (<em>)
يشير عنصر التأكيد في HTML إلى ضرورة التركيز على النص الموجود بداخله. تعرض المتصفحات عادةً النص داخل علامات <em> بخط مائل. فيما يلي مثال على التركيز الملتف حول فقرة والمتداخل داخل الفقرة:
9. عنصر الأهميّة (<strong>)
يشير هذا العنصر إلى أن النص الذي يحتوي عليه له أهمية خاصّة، حيث تعرض المتصفحات عادةً النص بالخط العريض.
10. عنصر الجدول (<table>)
يقوم العنصر <table> بإنشاء جدول لتنظيم المحتوى، ويتطلَّب ثلاثة عناصر HTML أخرى:
<tr> يحدد صف الجدول.
<th> يحدد رأس الجدول
<td> يحدد بيانات الجدول (أي محتوى خلايا الجدول).
اقرأ أيضًا: أهم تطبيقات الذكاء الاصطناعي التي أحدثت تحولا في مجالات متعددة
تعلم الذكاء الاصطناعي! سجّل الآن في أفضل دورات الذكاء الاصطناعي المجانية والمدفوعة المتاحةعلى موقع فرصة.كوم. تصفَّح الدورات!
ختامًا، عرفنا من خلال هذا المقال أنّ لغة HTML هي اللغة التي تعرض بها المتصفحات النصوص والصور والفقرات والعناصر الأخرى على صفحة الويب. وعلى هذا النحو، فإنَّ لغة HTML هي اللغة السائدة في شبكة الويب العالمية. وهذا يجعل اللغة مهمة ليس فقط للأشخاص الذين يحاولون أن يصبحوا مبرمجين، ولكن أيضًا للمُسوِّقين.
فلا شكّ أنّ معرفة أساسيَّات هذه اللغة ستسمح لك بإجراء تغييرات على موقع الويب الخاص بك دون الحاجة إلى الاعتماد على مطور، مما يوفر لك ولعملك الوقت والمال. وأخيرًا، لا تنس الاشتراك في موقعنا ليصلك كل جديدنا أولًا بأوّل
اقرأ أيضًا: 22 طريقة للاستفادة من تطبيق Chat GPT في عملك
اقرأ أيضًا: أهم المهارات الشخصية التي عليك تعلمها في 2024
اقرأ أيضًا: أنماط التعلم | ما هو نمط التعلم المناسب لك وكيف تستغله؟
المصدر: blog.hubspot
