تعلم لغة HTML

اقتباس

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

هل فكرت يومًا خلال تصفحك لموقع ما أن تخزّن إحدى الصفحات على حاسوبك لجودة المحتوى أو لأهمية المعلومات التي قرأتها؟ فهل لاحظت -إن فعلت ذلك- أن امتداد هذا الملف (آخر ثلاث أو أربعة أحرف من اسم الملف) من الشكل html أو htm؟ هل وصلك بريد إلكتروني من شركة أو من مجلة إلكترونية أو حتى من صديق ووجدته مميزًا يضم صورًا وعناوين وكل ما اعتدت أن تفعله هو كتابة بضعة أسطر توجز فيها ما تريد ثم ترسل بريدك؟ هل دخلت يومًا إلى منتدى إلكتروني وأردت أن تكتب تعليقًا وقرأت عبارة "يُسمح باستخدام أكواد HTML" وتساءلت ما هي أكواد HTML؟ هل فكّرت أخيرًا وأنت تتصفح الإنترنت، أنّ جميع المواقع دون استثناء تتشابه في هيكليتها؟ فجميعها يضم شكلًا من قوائم التنقل وأقسامٍ أعلى وأدنى الصفحات تبقى كما هي عند التنقل بين صفحات الموقع نفسه، ونماذج لتعبئتها وعناوين رئيسية وفرعية وروابط لتنظيم المحتوى وتسهيل الوصول إلى المعلومات المطلوبة. إن الوصفة السحرية خلف كل ذلك هي لغة ترميز النص التشعبي Hyper Text Markup Language واختصارًا لغة HTML.

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

جدول المحتويات

سنذكر هنا جدول المحتويات باختصار حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة:

ما هي لغة HTML؟
الفرق بين اللغات التوصيفية ولغات البرمجة
تاريخ وتطور لغة HTML
أهمية تعلم لغة HTML
ما الذي أحتاج إليه لأبدأ العمل مع لغة HTML
استخدامات لغة HTML
أساسيات لغة HTML
إيجابيات وسلبيات لغة HTML
مصادر تعلم لغة HTML

ما هي لغة HTML؟

لغة HTML أو لغة ترميز النص التشعبي هي لغة توصيف للمحتوى markup language بمعنى أنها توصِّف محتوًى معينًا كي تتمايز أجزاءه عن بعضها فيسهل تنظيمه وهيكلته، إذ تشير لغة HTML إلى جزء من المحتوى على أنه فقرة وتميز عدة كلمات على أنها عنوان رئيسي وأخرى على أنها عنوان فرعي وقد تسلسل جزءًا آخر من المحتوى على شكل قائمة من النقاط وكل ذلك باستعمال ما يُدعى وسوم HTML التي تُعطي صفحة ويب هيكليتها وتعطي كل جزء منها دلالة semantic معينة.

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

الفرق بين اللغات التوصيفية ولغات البرمجة

لغة HTML كما أشرنا هي من اللغات التوصيفية markup languages ولا تعد لغة برمجة programming language ويكثر الخلط بينهما ويظن حديث العهد بمجال علوم الحاسوب أن تعلمه لغة HTML يعني دخوله للمجال واحترافه للبرمجة وهذا خلط وخطأ، ويجب التفريق بين لغة التوصيف ولغة البرمجة.

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

تضم اللغات التوصيفية مجموعة من الوسوم أو القواعد التي يشير كل منها إلى دلالة معينة وتستخدم لتنظيم البيانات النصية وعرضها بطريقة يسهل تمييزها بالنسبة للإنسان أو الحاسوب كأن تشير إلى عبارة على أنها عنوان وتبرز عبارة أخرى بكتابتها بخط ثخين وهكذا. لا تُعرض تلك القواعد أو الوسوم ولا تُضاف إلى المحتوى الفعلي بل وظيفتها وصف البيانات فقط وترتيبها، وتتطلب هذه اللغات فقط برنامجًا ليحلل الوسوم ويعرض المحتوى وفقًا لمدلول كل وسم وغالبًا ما تحلل المتصفحات أكواد HTML وأكواد XML ثم تعرض النتائج بينما تحلل برمجيات أخرى مخصصة لغات توصيفية أخرى مثل مارك داون Markdown ودوك بوك DocBook اللتان تستخدمان في المحررات النصية ولاتخ LaTex لكتابة الأوراق البحثية الأكاديمية وغيرها الكثير.

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

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

تاريخ وتطور لغة HTML

قد لا تتوقع إطلاقًا أين ولدت لغة HTML! وهذا دليل إضافي على صحة مقولة "الحاجة أم الاختراع". لقد أراد مهندس الحاسوب تيم بيرنرز لي Tim Berners-Lee الذي يعمل في قسم خدمات الحاسب في مؤسسة CERN لفيزياء الجزيئات أن يُمكّن الزملاء في مختلف المواقع داخل وخارج المؤسسة من تبادل الدراسات والأوراق البحثية وربطها مع بعضها بدلًا من تحميل نسخ عن جميع هذه الأوراق والأبحاث على كل حاسوب. أي بكلمات أخرى، سيتمكن أي باحث أثناء قراءته لمقال ما أن ينتقل إلى مقال آخر أو يستعرض معلومات أخرى جرى ذكرها في المقال الذي يقرأه دون أن يُضطر إلى إغلاق مقاله ثم البحث من جديد في أرشيف المقالات عن الموضوع الذي صادفه ثم العودة إلى المقال الأصلي.

لا أعتقد أن بيرنرز-لي قد توقع من فكرته الثورية ميلاد تقنية شبكة الويب بأكملها فقد أثبتت هذه الفكرة قدرتها على التوسع لبناء شبكة عنكبوتية من الصفحات المترابطة التي تتيح لك التنقل فيما بينها جيئةً وذهابًا. لقد اعتمد بيرنرز-لي على لغة توصيف موجودة بالفعل ومحط اتفاق بين جميع العاملين في مجال الحواسب وهي لغة الترميز المعياري العام SGML فبدون أساس متين تستند عليه لم يكن ليُكتب البقاء لهذه اللغة.

إذًا اعتمد بيرنرز-لي على فكرة الوسوم التي تُستخدم في SGML وهي مفاتيح تحيط بنص معين في بدايته ونهايته ليكون لهذا النص دلالة معينة وفقًا لنوع الوسم مثل <p/>...نص ما هنا...<p>، لكنه أضاف وسمًا جديدًا للمساهمة في الربط بين الصفحات وهو وسم المربط أو المرساة <a>.

ولكي تُفسّر هذه الوسوم لا بد من وجود أداة تحللها وتعرض المطلوب على الشاشة لهذا صمم بيرنيرز لي أول أداة لتحليل أكواد لغة HTML دُعيت حينها WorldWideWeb وتختصر إلى www وهو اختصار معروف لك تجده اليوم في أغلب الروابط، وكانت هذه الأداة أصل ما يُدعى اليوم بالمتصفحات Browsers.

اقتباس

السير تيم بيرنرز-لي Sir Tim Berners-Lee‏ ولد في عام 1955 هو مهندس وعالم حاسوب إنجليزي، اشتهر بسبب اختراعه للشبكة العنكبوتية العالمية والتي تعرف بالويب ويلقب أحيانًا بلقب "أبو الويب" وهو الآن أستاذ في علوم الحاسوب في جامعة أوكسفورد في بريطانيا.

شجّع بيرنرز-لي المهتمين بلغة HTML على كتابة برمجيات لتحليل هذه اللغة وعرضها على الشاشة كما اخترع بنفسه بروتوكولًا لنقل وتوزيع النصوص التشعبية سماه بروتوكول HTTP أي بروتوكول نقل النصوص التشعبية HyperText Transfer Protocol.

لا زلنا حتى اللحظة في عام 1991 لكن مع ظهور فكرة أسماء النطاقات DNS (دُعيت حينها خدمة الأسماء الموزّعة) وعناوين إنترنت IP أمكن الربط بين الحواسب بطريقة أسهل وأكثر أمانًا وأصبح كل شيء مهيئًا لولادة الويب.

تصاعد اهتمام الباحثين والعاملين في مجال الحواسب بلغة HTML لاحقًا من خلال عدة اجتماعات ومراسلات لتظهر للعلن أولى نسخ لغة HTML الرسمية عام 1993 وهي HTML 1.0.

مع زيادة اهتمام الفعاليات بهذه اللغة أضيفت وسوم وميزات جديدة لها وبدأت الكثير من الشركات بالعمل على إنتاج المتصفحات فظهرت النسخة HTML 2.0 وتلاها ظهور متصفحات معروفة مثل نتسكيب Netscape وإنترنت إكسبلورر Internet Explorer.

قدم ديفيد راغيت David Raggett نسخة HTML+‎ عام 1993 وأضافت هذه النسخة الكثير من الميزات إلى اللغة مثل الجداول ونماذج إرسال البيانات، والتي اعتمدت أغلبها لاحقًا في نسخة HTML 3.0 عام 1995 لكنها سببت في بطء المتصفحات مما دفع لاعتماد نسخة جديدة محسّنة هي HTML 4.0 عام 1999 ثم تلتها النسخة HTML 4.01 في وآخر العام ذاته وكانت بالفعل أكثر نجاحًا.

تبنت منظمة W3C وهي رابطة الشبكة العالمية World Wide Web Consortium التي أسسها بيرنرز-لي اعتماد معايير لغة HTML وتطويرها منذ عام 1996 ثم تكونت لاحقًا مجموعة WHATWG عام 2004، وضمت الكثير من الشركات المهتمة بصناعة تقنيات الويب آنذاك وقد أخذت على عاتقها تطوير نسخة HTML 5 لتصدر رسميًا عام 2015، وتُعد HTML 5 امتدادًا لسابقتها والأكثر اعتمادًا حاليًا وتقدم الكثير من الميزات المتقدمة مثل الموقع الجغرافي ودعم الفيديو والصوتيات ضمنيًا واستخدام لوحات الرسوم الديناميكية من خلال من خلال العنصر Canvas وكذلك العمل مع مقابس ويب web sockets وغيرها، وصدرت بعد ذلك نسختي HTML 5.1 و HTML 5.2 في عامي 2016 و 2017 تباعًا.

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

أهمية تعلم لغة HTML

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

لغة HTML هي مدخلك الرئيسي إلى علوم الحاسب عمومًا وإلى تصميم مواقع وتطبيقات ويب خصوصًا: فإن شبهنا موقع ويب بالمنزل فستكون لغة HTML بمثابة هيكل المنزل من أعمدة وأسقف وجدران.
لغة HTML بسيطة التعلم: كل ما عليك فعله بداية هو تذكر وسوم لغة HTML ودلالاتها ثم استخدام هذه الوسوم وفق تسلسل منطقي لتكوين الصفحة فالوسم <title> مثلًا لإضافة عنوان للصفحة والوسم <p> لإضافة فقرة نصية والوسم <img> لإدراج صورة وهكذا.
لا يحتاج تعلم لغة HTML واستخدامها إلى أدوات معقدة: يمكنك استخدام أي محرر نصي بسيط لكتابة أكواد HTML ثم حفظ الملف بالامتداد html ليتحول إلى صفحة HTML ساكنة يستطيع أي متصفح تحليلها. مع ذلك قد تستفيد من محررات متقدمة لتسريع وتيرة عملك والتأكد من عدم وجود أخطاء.
لغة HTML لغة مرنة: ارتكب ما تشاء من الأخطاء وسيحاول المتصفح جاهدًا فهم ما تريده. يشجعك ذلك غالبًا على الانطلاق في العمل، فرؤية نتاج ما فعلته أمر محفز، بينما ستحبطك بالتأكيد قائمة بعشرات الأخطاء لا تعرف معها أين اخطأت وكيف تتجاوز تلك الأخطاء.

فإن شجعتك النقاط السابقة على البدء في تعلّم لغة HTML، تابع القراءة معنا لتتعرف على أساسيات لغة HTML وأين وكيف تُستخدم.

ما الذي أحتاج إليه لأبدأ العمل مع لغة HTML

كما أشرنا سابقًا لن تُضطر إلى شراء أية أدوات أو أن تتكلف أية مبالغ إضافية ولا حتى تعلم العمل على برامج جديدة، فكل ما تحتاجه:

محرر نصي: مثل المفكرة Notepad إن كنت من مستخدمي ويندوز أو محرر النصوص الافتراضي تكست Text أو كايت Kate إن كنت تستخدم إحدى توزيعات لينكس. إذ ستكتب أكواد HTML كما تكتب أي نص ثم تحفظ عملك تحت اسم معبّر ينتهي بالامتداد html، وهذا كبداية.
متصفح ويب: لن يخلو حاسوبك من هذه البرامج طالما أنك تستخدم الإنترنت. يُفضّل مع ذلك استخدام إحدى المتصفحات الحديثة مثل غوغل كروم أو موزيللا فايرفوكس أو مايكروسوفت إيدج أو غيرها، وبإمكانك تنزيلها مجانًا. يحلل المتصفح أكواد HTML ويعرض محتوى الصفحة وفقًا لأكواد HTML التي استخدمتها.

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

استخدامات لغة HTML

رأينا أن لغة HTML هي لغة توصيفية أي توصِّف النصوص لذا تُستخدم مع النصوص عمومًا لتنسيقها وهيكلتها ولكن شاع استخدامها مع نصوص صفحات الويب خصوصًا (التي هي نصوص في النهاية) وبالتالي تعتبر وسيلة يستخدمها مصممو ويب في:

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

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

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

اقتباس

هذه المقالة التي تقرؤها الآن هي عبارة عن صفحة HTML ويمكنك تصفحها مباشرة والاطلاع عليها عمليًا وعلى الوسوم والعناصر المكونة منها عبر الضغط على الاختصار Ctrl + U أو الضغط بزر الفأرة الأيمن واختيار view page source طبعًا إن كنت تقرأ المقال هذا على حاسوبك وليس على الجوال.

إضافة إلى ذلك تُستخدم HTML حديثًا كأساس لكتابة واجهات تطبيقات سطح مكتب تعمل على أنظمة تشغيل مختلفة في وقت واحد عبر استعمال الثلاثي الذهبي السابق مع إطار العمل إلكترون Electron، وذلك اعتمادًا على المعايير الموحدة في تطوير الويب بدلًا من تعلم لغة مخصصة لكل نظام تشغل لبرمجة تطبيقاته فلا تستغرب أن بعض واجهات التطبيقات التي تستعملها الآن مكتوبة بلغة HTML، وتشرح دورة تطوير التطبيقات باستخدام JavaScript من أكاديمية حسوب كيفية تطوير تطبيق سطح مكتب باستخدام Electron.js مرة واحدة ولكن يعمل على كل أنظمة التشغيل كما أشرنا.

أساسيات لغة HTML

تعتمد لغة HTML على مفهوم الوسم tag وهو مفتاح دلالي يحيط بنص ليعطيه مظهرًا أساسيًا ودلالة محددة. لنلق نظرة على المثال التالي:

<h1> HTML مرحبا بك إلى </h1>
<p> هي لغة توصيفية تُستخدم لهيكلة صفحات ويب HTML لغة </p>

لو كتبت هذه الشيفرة في محرر نصي (يمكنك نسخها ولصقها أيضًا) ثم حفظت التغييرات بالاسم test.html ونقرت على هذا الملف الجديد سيستدعي نظام التشغيل المتصفح الافتراضي ليعرض النتيجة التالية:

عرض المتصفح عبارة "مرحبًا بك إلى HTML" بخط ذو حجم كبير وثخين لأنه أحيط بالوسم <h1> والذي يُعرف بأنه وسم عنوان من المستوى الأول ويدلّ على أن النص الذي يغلّفه هو عنوان لفقرة ما. بينما عرض العبارة الأخرى التي أحيطت بالوسم <p> في سطر جديد وبالشكل الاعتيادي كما يعرضه أي محرر نصي. يُدعى وسم HTML هذا بوسم الفقرة النصية ويدل على أن النص الذي يُغلّفه هو فقرة نصية سردية تورد محتوى معينًا.

يتألف عنصر HTML من الأجزاء التالية:

وسم البداية Opening tag: وتتكون من اسم العنصر (p أو h1 في مثالنا) محاطًا بقوسي زاوية <>. ويشير هذا الوسم إلى النقطة التي يبدأ عندها العنصر.
وسم النهاية Closing tag: يشابه وسم البداية لكنه يبدأ بشرطة أمامية / تسبق اسم العنصر. ويشير هذا الوسم إلى نهاية العنصر (<p/> و <h1/>).
المحتوى Content: ويشير إلى المحتوى النصي الموجود بين وسمي البداية والنهاية. وقد لا يغلف وسمي البداية والنهاية أي محتوى، فيُدعى العنصر في هذه الحالة عنصرًا فارغًا empty element.

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

لا تُعد لغة HTML لغة ًحساسة لحالة الأحرف عند كتابة الوسوم، فالوسمين <p> أو <P> مثلًا متطابقين ويعطيان النتيجة ذاتها.

السمات في لغة HTML

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

وتتكون السمة من اسم السمة يليها إشارة مساواة ثم قيمة السمة ضمن إشارتي تنصيص مزدوجتين (" ") أو مفردتين (' ').

ولا بد من وجود فراغ بين السمة واسم العنصر وبين السمة والسمة التي تليها إن وجدت. إليك مثالًا عن عرض صورة باستعمال الوسم <img>:

<h1>جمال الطبيعة</h1>
<img src="nature.jpg" width="300px" alt="صورة من الطبيعة">

وضعت صورة بجانب صفحة text.html باسم nature.jpg وأشرت إليها في الخاصية src التي يأخذها عنصر الصورة ولاحظ أنني حددت عرضها عبر الخاصية width واسم بديل للصورة إن لم تُعرض لأي سبب عبر الخاصية alt، والنتيجة:

ضع في بالك أن السمات التي يأخذها عنصر قد لا يأخذها عنصر آخر وأن لبعض العناصر سمات خاصة فريدة بها، فانظر مثلًا إلى سمات العنصر <img> في توثيقه في موسوعة حسوب وبالطريقة نفسها يمكنك الرجوع إلى توثيق كل عنصر على حدة ومعرفة سماته التي يأخذها.

ملاحظة: إن وجدت سمة HTML بلا قيمة أو كانت قيمتها نفس اسمها مثل "disabled="disabled تُدعى حينها بالسمة المنطقية وتُنفّذ ما يوحي به اسمها.

الوسوم البنائية والعناصر السطرية

تصنف وسوم HTML ضمن مجموعتين مهمتين هما مجموعة الوسوم الكتلية أو البنائية Block elements والسطرية inline elements وسنشرح الفرق بينهما.

أما الوسوم الكتلية، فهي وسوم تظهر في سطر جديد بعد العنصر الذي يسبقها أي لا يمكن أن تقع على نفس السطر مع عنصر آخر لأنها تحتل سطرًا كاملًا من أوله لآخره وسيظهر العنصر الذي يليها في سطر جديد أيضًا. تُعد الوسوم الكتلية في الصفحة عناصر هيكلة وتنظيم ومن أمثلتها وسم الفقرة النصية <p> والعناوين <h> وقوائم تعداد <ol> و <ul> وغيرها، وتجدر الإشارة إلى أن الوسوم الكتلية لا توضع ضمن وسوم سطرية لكنها العكس صحيح.

وأما الوسوم السطرية، فتقع داخل الوسوم البنائية وتحيط بأجزاء صغيرة من المحتوى (أي جزء من فقرة نصية أو مجموعة من بنود قائمة). لا تسبب هذه اوسوم ظهور سطر جديد في المستند أي لا تشغل بنفسها السطر بالكامل من هذه الوسوم نذكر الوسم <span> الذي يطبق تنسيقًا على جزء من فقرة والوسم <em> الذي يعرض جزءًا من النص بخط مائل.

<h1> أنا وسم كتلي</h1>
<p>عندما لا أقع على سطر خاص بي <em>وسمًا سطريًا </em> وأكون </p>

الوسوم الأساسية في لغة HTML

إليك قائمة بأهم وسوم لغة HTML ودلالاتها:

عنصر الفقرة p

يغلف عنصر الفقرة Paragraph أي فقرة نصية تريد عرضها كما هي ضمن صفحة ويب. يبدأ العنصر بسطر جديد وينتهي بسطر جديد

عناصر عناوين الفقرات h

يُضاف إلى الوسم أرقام من 1 إلى 6 لتحديد مستوى العنوان Header لتصبح على الشكل <h1> و <h2> وهكذا حتى <h6>. إليك مثالًا:

<hgroup>
  <h1>عنوان من المستوى الأول</h1>
  <h2>عنوان من المستوى الثاني</h2>
  <h3>عنوان من المستوى الثالث</h3>
  <h4>عنوان من المستوى الرابع</h4>
</hgroup>

ستكون النتيجة كالتالي:

عنصر القائمة ol/ul

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

<ol>
  <li>أفرغ محتويات ظرف الكريمة ضمن وعاء نظيف</li>
  <li>أسكب كوبًا من الماء البارد وحرك المزيج بلطف حتى التجانس</li>
  <li>استخدم خفاقة كهربائية لخفق المزيج بشدة من 4 إلى 5 دقائق</li>
  <li>ضع الكريمة في البراد حتى يحين وقت استخدامها</li>
</ol>

ستكون النتيجة كما يلي:

وهذا مثال عن قائمة غير مرتبة:

<ul>
  <li>C++</li>
  <li>Python</li>
  <li>Java</li>
  <li>PHP</li>
</ul>

ستكون النتيجة كما يلي:

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

عنصر الرابط a

يولد عنصر <a> رابطًا إلى صفحة HTML أخرى أو إلى قسم آخر ضمن صفحة HTML نفسها ويأخذ سمة href التي تحوي رابط الوجهة المطلوبة:

<a href="https://academy.hsoub.com/">
  أكاديمية حسوب
</a>

يسمى النص بعد تحويله إلى رابط بالمربط anchor ومن هنا جاءت تسمية العنصر <a> اختصارًا لأول حرف.

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

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

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

إيجابيات لغة HTML

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

سلبيات لغة HTML

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

مصادر تعلم لغة HTML

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

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

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

نضيف إلى ما سبق المنشورات التي تنشرها أكاديمية حسوب ومنها:

كتاب نحو فهم أعمق لتقنيات HTML5 وهو كتاب يخص إصدار HTML 5 وما فيه من ميزات وتقنيات أضيفت للغة HTML.
قسم لغة HTML: وتُنشر فيه دروس ومقالات عن لغة HTML عمومًا بمختلف المواضيع وفيه ما يزيد عن 80 مقال ودرس عملي تطبيقي ننصح بالإطلاع عليه دوريًا ومتابعته.

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

خاتمة

تُعد لغة HTML لغة توصيفية سهلة الاستخدام تعتمد على مجموعة من الوسوم لتنظيم النصوص وهيكلتها لتسهيل قراءتها وتوضيح مدلولاتها من فقرات وعناوين وقوائم وكذلك لتسهيل الوصول إلى أجزائها آليًا.

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