دليل المبتدئين الشامل إلى لغة HTML وتصميم المواقع
تُعدّ لغة HTML بمنزلة اللبنة الأساسية لإنشاء صفحات الويب، فهي تحدد بنية المحتوى في المواقع الإلكترونية، إذ تسمح عبر عناصرها من علامات وسمات، بإنشاء وهيكلة الأقسام والفقرات والروابط في المواقع الإلكترونية. فما هي استخدامات لغة HTML؟ وكيف يمكنك تعلمها؟
ما هي لغة HTML؟
تُستخدم لغة HTML لإنشاء صفحات وتطبيقات الويب، ويشير اختصار HTML إلى Hyper Text Markup Language أي لغة ترميز النص التشعبي. ولتكون الصورة أكثر وضوحًا حول ما هي لغة HTML لا بد من معرفة المقصود بلغة ترميز النص التشعبي وصفحة الويب.
لغة الترميز هي لغة الكمبيوتر التي تُستخدم لتطبيق التخطيط والتنسيق على مستند نصي، فهي التي تجعل النصوص أكثر ديناميكية وتفاعلية، بحيث يمكنها تحويل النص إلى صور وجداول وروابط، وما إلى ذلك. في حين أن النص التشعبي أو الفائق يعني وجود رابط داخل النص؛ فعندما تنقر على النص ينقلك إلى صفحة ويب أخرى، وهو يُعدّ وسيلة لربط صفحتين أو أكثر من صفحات الويب مع بعضها البعض.
أما صفحة الويب فهي عبارة عن مستند يُكتب عادةً بتنسيق HTML ليُترجم ويُعرض بواسطة متصفح الويب، عبر إدخال عنوان URL. يمكن أن تكون صفحة الويب من النوع الثابت أو الديناميكي، وبمساعدة لغة البرمجة HTML يمكنك إنشاء صفحات ويب ثابتة فقط.
إذن؛ لغة HTML هي لغة ترميز تُستخدم لإنشاء صفحات ويب جذابة بمساعدة التصاميم، لتبدو الصفحات بتنسيق جميل مثل جعل الكلمات مائلة أو غامقة، أو أن تصبح بحجم أكبر أو أصغر، أو إضافة الصور أو الروابط التشعبية ضمن المستندات. وتتكون مستندات HTML من علامات HTML، وكل علامة تتضمن محتوى مختلف.
تاريخ وتطور لغة HTML
يعود الفضل في اختراع لغة HTML إلى «تيم بيرنرز لي»، الفيزيائي في معهد أبحاث CERN في سويسرا في عام 1991. في عام 1993 تم إصدار النسخة الأولى، ولكن في ذلك الوقت لم يعرف الكثيرون عن اللغة لعدم وجود الكثير من المطورين الذين يعملون في إنشاء مواقع الويب.
في عام 1995 صدرت النسخة الثانية HTML 2.0 التي احتوى على بعض الميزات الجديدة، وظلت لغة الترميز القياسية لإنشاء مواقع الويب حتى عام 1997، عندما اخترع «ديف راجيت» النسخة الثالثة، التي أضافت ميزات جديدة للغة، وقدّمت خصائص أكثر قوة لمشرفي المواقع لإنشاء مواقع الويب. لكن أدت تلك الميزات إلى إبطاء عرض الصفحات على مستعرضات الويب.
في عام 1999 ظهرت النسخة الرابعة من اللغة، التي أثبتت نجاحها واستخدمت على نطاق واسع. أما في عام 2014 أُصدرت النسخة الخامسة التي يستخدمها المبرمجون حتى الآن في جميع أنحاء العالم.
أساسيات لغة HTML
مستندات HTML هي عبارة عن ملفات تنتهي بامتداد .html أو .htm يمكن عرضها باستخدام أي متصفح ويب مثل جوجل كروم، أو سفاري، أو فايرفوكس. إذ يقرأ المتصفح الملف المكتوب بلغة HTML ويعرض محتواه كي يتمكن متصفحو الإنترنت من مشاهدته. عادةً ما يتضمن موقع الويب العادي على صفحة HTML أو أكثر.
على سبيل المثال؛ الصفحة الرئيسية وصفحات الاتصال جميعها تحتوي على مستندات HTML منفصلة، وتتكون كل صفحة HTML من مجموعة من العلامات (العناصر) التي يمكن اعتبارها اللبنات الرئيسية لصفحات الويب، وهي التي تبني المحتوى وتُوزِعه على هيئة أقسام وفقرات، وعناوين وكتل محتوى أخرى.
يتكون أي ملف إتش تي إم إل من وسوم Tags، وهي رموز مُعرّفة مسبقًا في اللغة تعبر عن طريقة عرض المحتوى داخل الصفحة في عناصر، ويعبر كل وسم عن اسم عنصر محدد، ويتكون كل عنصر من وسم بداية ووسم نهاية.
- إعلان نوع المستند <! DOCTYPE>: يمثل الوسم <! DOCTYPE> نوع المستند، ويجب أن تبدأ جميع مستندات HTML بهذا الوسم. فهو يساعد المتصفحات على عرض صفحات الموقع الإلكتروني عرضًا صحيحًا، ويجب أن يظهر مرة واحدة فقط في أعلى الصفحة قبل أي علامة من علامات HTML.
- وسم بداية الصفحة <html>: يبدأ مستند HTML نفسه بالبادئة <html> وينتهي بـ </html>. ويقع الجزء المرئي من مستند HTML بين <body> و </ body>.
- الرأس <head>: تُحدد عناوين صفحة HTML بعلامات من <h1> إلى <h6>، حيث يحدد h1 العنوان الأكثر أهمية، ويحدد h6 العنوان الأقل أهمية.
- الجسم <body>: يحتوي هذا الوسم على كل محتوى الصفحة الذي سيظهر للقارئ على المتصفحات.
استخدامات لغة برمجة HTML
تُستخدم لغة البرمجة HTML على نطاق واسع، من أبرز هذه الاستخدامات:
1. تطوير صفحات الويب
تُستخدم لغة HTML كثيرًا في إنشاء الصفحات التي تُعرض على شبكة الإنترنت العالمية، وتتضمن كل صفحة على مجموعة من علامات HTML بما في ذلك الروابط التشعبية المستخدم للوصول إلى الصفحات الأخرى، وكل صفحة تشاهدها على الإنترنت كُتبت باستخدام نسخة من كود HTML.
2. إنشاء مستندات الويب
تسيطر لغة البرمجة HTML على إنشاء الملفات النصية (المستندات) على الإنترنت، حيث تُدخل علامات HTML قبل وبعد العبارات لتحديد موقعها، وتنسيقها على الصفحة. تتكون مستندات الويب من ثلاثة أقسام هي؛ العنوان، والمقدمة، والجسم.
يتضمن العنوان المعلومات التي تحدد ما هو المستند مثل الكلمة المفتاحية الرئيسية، بحيث يمكن رؤية العنوان على نتائج البحث، وقسم النص المكوّن من المقدمة، والجسم يُعدّ الجزء الرئيسي من موقع الويب الذي يشاهده الزائر. وتلك الأقسام الثلاثة أُنشأت باستخدام علامات HTML، ويحتوي كل قسم على مجموعة من العلامات الخاصة به.
3. الانتقال بين مواقع الإنترنت المختلفة
إحدى الاستخدامات المهمة للغة الترميز HTML هي قدرتها على تمكين المستخدمين من الانتقال بين المواقع الإلكترونية عبر استخدام النص التشعبي، وهو عبارة عن نص أو عدّة نصوص ترتبط بصفحات مواقع إلكترونية أخرى، ويُوجّه المستخدم إلى موقع إلكتروني آخر عندما ينقر على النص المشار إليه. إذ تُستخدم HTML كثيرًا لدمج الروابط التشعبية داخل صفحات الويب، مما يساعد المستخدمين على الانتقال بين صفحات الويب، والمواقع المتواجدة على خوادم مختلفة.
4. دعم إدخال البيانات
أدخلت HTML في النسخة الخامسة لها العديد من الميزات الجديدة التي تساعد على قيادة لوحات المفاتيح على الشاشة، مما يساعد على إدخال البيانات، وهذا يسمح للمستخدمين النهائيين بإدخال البيانات بطريقة ذات فعالية كبيرة.
5. الصور المتجاوبة على صفحات الويب
يتمكن المطورون من التحكم كليًا في كيفية عرض المستخدم للصور، وذلك من خلال استخدام السمة srcset لعنصر img في لغة الترميز HTML ودمجها مع عناصر الصورة، بحيث يمكن الآن تحميل أنواع عديدة من الصورة ذات الأحجام المختلفة باستخدام العنصر img.
6. تطوير الألعاب
يُعدّ تطوير الألعاب من الاستخدامات المهمة للغة البرمجة HTML، وبفضل التطويرات في نسختها الخامسة، أصبحت HTML بلمح البصر واحدة من أكثر لغات برمجة الألعاب شهرةً.
7. إمكانية استخدام واجهات برمجة التطبيقات الأصلية
تضيف النسخة الخامسة من HTML العديد من الأدوات الجديدة، التي أتاحت إمكانية إضافة مجموعة كبيرة من واجهات برمجة التطبيقات الجديدة فيما يتعلق بنظام الملفات، وتحديد الموقع الجغرافي، ومعالجة الأحداث، والسحب والإفلات، والتخزين من قبل العميل، وما إلى ذلك من القدرات التي تجعل استخدام HTML5 أسهل من أي وقت مضى. فيمكن الآن تحسين تجربة التطبيقات باستخدام واجهات برمجة التطبيقات الأخرى مثل: Full screen وVisibility وMedia Capture.
إيجابيات وسلبيات لغة ترميز النص التشعبي HTML
في الوقت الراهن، تُعدّ لغة HTML واحدة من أكثر اللغات أهمية، فهي أساس مجال تطوير الواجهات الأمامية. لذا، إن كنت تفكر في تعلمها، ينبغي التعرف على مزاياها وعيوبها.
6 من إيجابيات لغة HTML
تتمتع لغة HTML بالعديد من الإيجابيات كالآتي:
- سهلة التعلم بحيث يمكن تعلمها مهما كانت مهاراتك التقنية.
- تسمح بتخزين الملفات الكبيرة بسبب ميزة ذاكرة التخزين المؤقت للتطبيقات.
- سهولة التكامل مع لغات البرمجة الأخرى مثل: جافا سكريبت، وcss، وما إلى ذلك.
- سهولة كتابة التعليمات البرمجية، وسهولة التعديل عليها.
- تسمح لغة HTML باستخدام القوالب التي تجعل تصميم صفحات الويب أمرًا بسيطًا.
- تحتوي HTML على العديد من العلامات والسمات التي يمكنها اختصار أسطر كثيرة من التعليمات البرمجية.
8 من سلبيات لغة الـ HTML
- لا تستطيع لغة البرمجة HTML إنتاج مخرجات ديناميكية بمفردها، لأنها لغة ثابتة.
- تحتاج إلى كتابة الكثير من التعليمات البرمجية لإنشاء صفحة ويب بسيطة فقط.
- تحتاج إلى وقتٍ كبيرٍ لإدارة نظام ألوان الصفحة، وعمل قوائم، وجداول، ونماذج.
- يتعين عليك فحص العلامات المهملة وتأكيد عدم استخدامها، لأنه قد تكون هناك لغة أخرى تعمل مع HTML تنجز المهمة الأولى للعلامة، وبالتالي يجب فهم اللغة الأخرى وتعلمها.
- ميزات الأمان في لغة الترميز HTML محدودة.
- يتسبب كتابة رمز طويل لإنشاء صفحة ويب في بعض التعقيد.
- يجب أن تُحرر صفحات الويب كلٍ على حِدة فهي ليست مركزية.
- تستطيع HTML إنشاء صفحات ثابتة وعادية فقط، لذلك إذا أردت أن تكون الصفحات ديناميكية فلن تستطيع إنجاز ذلك باستخدامها.
ما الفرق بين لغة HTML ولغة CSS؟
تختلف لغة الترميز HTML عن لغة التنسيق CSS، إذ تُستخدم الأولى لبناء المواقع الإلكترونية، أما الثانية تستخدم لتصميم المواقع عبر ميزات تصميم متنوعة. كما تتكون HTML من علامات يُوضع النص فيها بخلاف CSS التي تتكون من محددات وكتل برمجية.
كما يمكن استخدام لغة CSS داخل مستند HTML بينما لا يمكن العكس. إضافةً إلى ذلك، لا يمكن استخدام HTML للعرض والتصور بينما CSS تفعل ذلك، وتُحفظ ملفات HTML بامتداد (.htm) أو (.html)، وملفات CSS بامتداد (.css) فقط.
كيفية تعلم لغة HTML
لحسن الحظ لغة HTML من اللغات سهلة التعلم التي يمكن إتقانها ببساطة وسهولة، فحتى إن كنت لا تمتلك خبرة برمجية سابقة ستتمكن من تعلمها خلال مدة قصيرة مع بعض الجهد. يمكنك الاطلاع على توثيق لغة HTML من موسوعة حسوب، للتعرَّف على أساسيات اللغة وكل ما يتعلق بها من معلومات بصورة عامة.
أما إن أردت دراسة اللغة دراسة معمقة، فيمكنك الالتحاق بدورة تطوير واجهات المستخدم من أكاديمية حسوب، إذا تتألف من 58 ساعة تدريبية تساعدك خلالها على إتقان لغة HTML، إضافةً إلى لغتي CSS وجافا سكريبت JavaScript، بالاعتماد على التطبيق العملي لمشاريع حقيقية، لتغدو مع نهايتها مطور واجهات أمامية محترف جاهز لخوض غمار سوق العمل.
تواصل معي خبير سيو لتقديم الاستشارة
متجر خدمة لي
دليل المبتدئين الشامل إلى لغة HTML وتصميم المواقع – متجر خدمة لي – منصة استقل – إتقان لغة HTML، لغتي CSS وجافا سكريبت JavaScript.
