اقتباستعلم لغة 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 لكتابة الأوراق البحثية الأكاديمية وغيرها الكثير.
تأتي بساطة HTML وسهولتها من كونها لغة توصيفية خفيفة وسهلة الفهم، ولا يتطلب العمل معها الكثير من الأدوات أو البرمجيات وبالتالي استقلالية ومحمولية portability أفضل.
تاريخ وتطور لغة HTML
قد لا تتوقع إطلاقًا أين ولدت لغة HTML! وهذا دليل إضافي على صحة مقولة "الحاجة أم الاختراع". لقد أراد مهندس الحاسوب تيم بيرنرز لي Tim Berners-Lee الذي يعمل في قسم خدمات الحاسب في مؤسسة CERN لفيزياء الجزيئات أن يُمكّن الزملاء في مختلف المواقع داخل وخارج المؤسسة من تبادل الدراسات والأوراق البحثية وربطها مع بعضها بدلًا من تحميل نسخ عن جميع هذه الأوراق والأبحاث على كل حاسوب. أي بكلمات أخرى، سيتمكن أي باحث أثناء قراءته لمقال ما أن ينتقل إلى مقال آخر أو يستعرض معلومات أخرى جرى ذكرها في المقال الذي يقرأه دون أن يُضطر إلى إغلاق مقاله ثم البحث من جديد في أرشيف المقالات عن الموضوع الذي صادفه ثم العودة إلى المقال الأصلي.
لا أعتقد أن بيرنرز-لي قد توقع من فكرته الثورية ميلاد تقنية شبكة الويب بأكملها فقد أثبتت هذه الفكرة قدرتها على التوسع لبناء شبكة عنكبوتية من الصفحات المترابطة التي تتيح لك التنقل فيما بينها جيئةً وذهابًا. لقد اعتمد بيرنرز-لي على لغة توصيف موجودة بالفعل ومحط اتفاق بين جميع العاملين في مجال الحواسب سواء آي بي إم أو آبل وغيرهما، وهي لغة الترميز المعياري العام Standard Geleralized Mark-up Langauge واختصارًا SGML. فبدون أساس يتفق عليه صانعو الحواسب والبرمجيات لم يكن ليُكتب البقاء لهذه اللغة، فقد بدأت بالفعل تلك الشركات بكتابة أدوات خاصة بها لدعم النصوص التشعبية التي تتيح التنقل من جزء من الشاشة إلى آخر بالنقر على أزرار معينة عن طريق تنفيذ بعض الشيفرات في الخلفية نذكر من هذه الأدوات Hypercard من إنتاج آبل وتعمل على حواسب ماك وأداة Toolbook من إنتاج IBM ويعمل على الحواسب الشخصية PC.
إذًا اعتمد بيرنرز-لي على فكرة الوسوم التي تُستخدم في SGML وهي مفاتيح تحيط بنص معين في بدايته ونهايته ليكون لهذا النص دلالة معينة وفقًا لنوع الوسم مثل <p/>...نص ما هنا...<p>، لكنه أضاف وسمًا جديدًا وهو وسم المربط أو المرساة <a> وأضاف إليها السمة href التي نضع فيها عنوان الوجهة التي سينقلنا إليها المربط.
ولكي تُفسّر هذه الوسوم لا بد من وجود أداة تحللها وتعرض المطلوب على الشاشة لهذا صمم بيرنيرز لي أول أداة لتحليل أكواد لغة HTML دُعيت حينها WorldWideWeb مستخدمًا حاسوبًا من صنع شركة NeXT كانت هذه الأداة أصل ما يُدعى اليوم بالمتصفحات 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 Ragett مسودة للنسخة HTML 3.0 عام 1995 وصدرت رسميًا عام 1997. أضافت هذه النسخة الكثير من الميزات إلى اللغة مثل الجداول ونماذج إرسال البيانات لكنها سببت في بطء المتصفحات مما دفع لاعتماد نسخة جديدة محسّنة هي HTML 4.0 عام 1999 ثم تلتها النسخة HTML 4.01 في وآخر العام ذاته وكانت بالفعل أكثر نجاحًا.
تكونت منظمة WHATWG وهي اختصار لعبارة "مجموعة عمل تطبيقات الويب المعتمدة على النص التشعبي Web Hypertext Application Working Group" عام 2004، وضمت الكثير من الشركات المهتمة بصناعة تقنيات ويب مثل غوغل ومايكروسوفت وموزيللا وآبل وقد أخذت على عاتقها تطوير لغة HTML وقدمت الكثير من الأفكار لتطوير النسخة الأكثر نجاحًا على الإطلاق HTML 4.01 لتظهر بعدها النسخة HTML 5 عام 2012 كنسخة مرشحة candidate recommendation ثم في أكتوبر 2014 كإصدار نهائي. وتُعد 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 حديثًا كأساس لكتابة واجهات تطبيقات سطح مكتب تعمل على أنظمة تشغيل مختلفة في وقت واحد عبر استعمال الثلاثي الذهبي السابق مع إطار العمل إلكترون Electron، وذلك اعتمادًا على المعايير الموحدة في تطوير الويب بدلًا من تعلم لغة مخصصة لكل نظام تشغل لبرمجة تطبيقاته فلا تستغرب أن بعض واجهات التطبيقات التي تستعملها الآن مكتوبة بلغة HTML، وتشرح دورة تطوير التطبيقات باستخدام JavaScript من أكاديمية حسوب كيفية تطوير تطبيق سطح مكتب باستخدام Electron.js مرة واحدة ولكن يعمل على كل أنظمة التشغيل كما أشرنا.
اقتباسواجهات أجهزة التوجيه: هل حاولت الدخول إلى موجه الإنترنت الموجود في منزلك DSL Router؟ لربما إن كتبت العنوان
192.168.1.1ضمن شريط عناوين متصفحك، فسيعرض لك صفحة HTML تمكّنك من ضبط مختلف إعدادات الموجّه وتفاصيل اشتراكك بالإنترنت. هذه إحدى استخدامات لغة HTML في ضبط إعدادات واجهات التخاطب مع التجهيزات الإلكترونية.
أساسيات لغة 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 هي مفاتيح داخلية توضع داخل وسم بداية العنصر لتقدم معلومات أو ميزات إضافية لهذا العنصر، ويمكن تشبيه العنصر بطفل والسمة بصفات ذلك الطفل مثل اسمه التي تحمل قيمة عبد الله وطوله ووزنه وغيرها من الصفات.
وتتكون السمة من اسم السمة يليها إشارة مساواة ثم قيمة السمة ضمن إشارتي تنصيص مزدوجتين (" ") أو مفردتين (' ').
ولا بد من وجود فراغ بين السمة واسم العنصر وبين السمة والسمة التي تليها إن وجدت. إليك مثالًا:
<h1 align="center"> HTML مرحبا بك إلى </h1>
<p align="right"> هي لغة توصيفية تُستخدم لهيكلة صفحات ويب HTML لغة </p>
لقد عدلنا في المثال السابق قليلًا وأضفنا سمة المحاذاة align التي تأخذ إحدى القيم center|right|left أي محاذاة إلى الوسط أو اليمين أو اليسار. ستكون النتيجة كالتالي:
ضع في بالك أن السمات التي يأخذها عنصر قد لا يأخذها عنصر آخر وأن لبعض العناصر سمات خاصة فريدة بها.
ملاحظة: إن وجدت سمة 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>. إليك مثالًا:
<h1 align="center">عنوان من المستوى الأول</h1>
<h2 align="center">عنوان من المستوى الثاني</h2>
<h3 align="center">عنوان من المستوى الثالث</h3>
<h4 align="center">عنوان من المستوى الرابع</h4>
ستكون النتيجة كالتالي:
عنصر القائمة 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>Fortran</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 وستستعملها في بناء واجهات تطبيقات حقيقية.
دعمت موسوعة حسوب الدورة هذه بتوفير توثيق HTML العربي وهو توثيق كامل عن لغة HTML بكل عناصرها وتفصيلاتها والسمات التي تأخذها وقيمها وكل شيء بلغة عربية لن تحتاج معه إلى مصادر أجنبية.
نضيف إلى ما سبق المنشورات التي تنشرها أكاديمية حسوب ومنها:
- كتاب نحو فهم أعمق لتقنيات HTML5 وهو كتاب يخص إصدار HTML 5 وما فيه من ميزات وتقنيات أضيفت للغة HTML.
- قسم لغة HTML: وتُنشر فيه دروس ومقالات عن لغة HTML عمومًا بمختلف المواضيع وفيه ما يزيد عن 80 مقال ودرس عملي تطبيقي ننصح بالإطلاع عليه دوريًا ومتابعته.
ستتعلم بتلك المصادر لغة HTML باتقان واحتراف وستستخدمها في مكانها أحسن استخدام لبناء واجهات وصفحات الويب احترافية وستدخل عالم الويب من أوسع أبوابه متجهًا نحو إتقان البرمجة والتطوير، وإن واجهت في رحلتك تلك أي عقبة، فضع سؤالك ضمن قسم الأسئلة والأجوبة لتحصل على إجابة من مبرمجين آخرين معك ولا تنسى مشاركة تجاربك في مجتمع حسوب IO البرمجي.
خاتمة
تُعد لغة HTML لغة توصيفية سهلة الاستخدام تعتمد على مجموعة من الوسوم لتنظيم النصوص وهيكلتها لتسهيل قراءتها وتوضيح مدلولاتها من فقرات وعناوين وقوائم وكذلك لتسهيل الوصول إلى أجزائها آليًا.
تعرفنا في هذا المقال على طبيعة لغة HTML كجزء من عائلة اللغات التوصيفية، واطلعنا على تاريخها واستخداماتها وأساسيات العمل معها، كما ناقشنا إيجابيات لغة HTML وأماكن قصورها لتتكون لديك عزيزي القارئ قاعدة من المعارف الأساسية التي تمكّنك من الانطلاق في رحلتك لتعلم لغة HTML اعتمادًا على مصادر التعلم التي اخترناها لك أو أية مصادر قد تقع عليها وتجدها يسيرة ومحفزّة.
تعليقات
إرسال تعليق