مواقع إلكترونية
لغة HTML: أساس تطوير الويب
تُعتبر لغة HTML ( Hypertext Markup language) الأساس الذي تُبنى عليه صفحات الويب. حيث أنها، تستخدم لتحديد هيكل ومحتوى الصفحات على الإنترنت. بدأت “HTML “كمشروع بسيط في أواخر الثمانينات وأوائل التسعينات على يد العالِم “ تيم بيرنرز لى” أصبحت HTML الان أحد أهم الأدوات لتطوير الويب وبالتالي، بفضل لغة HTML يمكن للمطورين تنظيم المحتوي بطريقة تجعله من السهل عرض المتصفحات بشكل مناسب للمستخدمين من خلال استخدام عناصر معينة. تقوم لغة HTML بالكثير من المهام منها، تحديد العناوين، الفقرات والروابط والصور والجداول بالإضافة إلى ذلك، تتيح للمستخدمين استخدام متصفح مرن وسلس. مع التحديثات المتلاحقة وإصدار HTML 5 أصبحت اللغة تدعم عناصر ووسائط متعددة بشكل أفضل، مما يعزز من قدرتها على بناء تجارب ويب تفاعلية وغنية.
في هذه المقالة، سنعرض تطور لغة HTML ومميزاتها وكيفية استخدامها في بناء صفحات ويب حديثة ستجد مقالتنا دليل شامل لك.
المحتويات:
أهم الاصدارات للغة HTML وتاريخ تطورها
بدأ تاريخ تطور لغة “HTML” على يد العِالم “ تيم بيرنرز لى“، الذي ابتكر اللغة جزء من نظام الويب العالمي (World Wide Web) لتسهيل تبادل المعلومات بين العلماء والباحثين إليك نظرة على تطور “HTML ” وأهم إصداراتها .
- (1991)1.0 HTML : الإصدار الأول من HTML ، كان بسيطاً ويحتوي على مجموعة محدودة من العناصر المستخدمة لهيكلة النصوص الأساسية وإنشاء الروابط التشعبية.
- (1995) HTML 2.0 : في هذا الإصدار تم تقديم تحسينات وإضافات جديدة مثل النماذج (Forms) والجداول (Tables)، مما أتاح للمطورين القدرة على إنشاء مواقع أكثر مرونة وتفاعلية .
- (1997)3.2 HTML : اُعتُمد كمعيار رسمي من قبل (W3C) أضاف دعماً لعناصر التنسيق مثل الجداول، والخطوط ،والالوان، مما زاد من مرونة التصميم.
- (1997) HTML 4.0: اعتمد هذا الإصدار على تحسين دعم الوسائط المتعددة وتقديم نموذج كائن المستند (DOM) الذي فصل بين محتوى الصفحة وتصميها وساهم في تحسين إدارة صفحات الويب.
- (1999) HTML 4.01: كان تحديثاً طفيفاً ل 4.0 HTML، هَدف إلى تحسين توافقه مع المتصفحات حيث أن، لغة HTML تتعامل مع المتصفح بشكل مباشر، مما جعل هذا الإصدار أكثر استخداماً حتى أوائل القرن الواحد والعشرون.
- (XHTML 1.0 (2000: كان هذا الإصدار محاولة لدمج HTML مع XML (هو تقينه تستخدم في تحليل وفهم البيانات المعقدة والمتشعبة) .بالإضافة إلى ذلك، تم تحسين توافق الصفحات مع أنواع الاجهزة المختلفة في هذا الاصدار.
- (2014) HTML 5: أحدث هذا الإصدار ثورة في مجال تطوير الويب وذلك من خلال، إضافة العديد من الميزات مثل دعم العناصر المرئية (مثل <canvas> و< video >) وكذلك تحسين دعم الرسومات وتعزيز دعم الوسائط المتعددة وتقديم برمجة التطبيقات (APIs) الجديدة التي مَكّنت من إنشاء تطبيقات ويب أكثر تفاعلاً.
تُواصل لغة HTML في التطور المستمر مع إصدار 5.1 HTML وHTML 5.2، مما يدل على الاستجابة المستمرة لمتطلبات المطورين والتكنولوجيا الحديثة. وذلك مع التركيز على تعزيز أداء وتجربة المستخدم.
هيكل لغة HTML
يتكون هيكل HTML من مجموعة من العناصر والوسوم التي تعمل على تحديد وترتيب محتوى صفحات الويب. كل عنصر في HTML يحتوي على وسم بداية ووسم نهاية بالإضافة إلى ذلك، يوجد محتوى بينهما. إليك نظرة تفصيلية على هيكل HTML الأساسي:
- الوسم الوثائقي الأساسي (Document Type Declaration): يحدد نوع المستند ويسمى
<!DOCTYPE html>هذا الوسم يُعلم المتصفح بأن الصفحة مكتوبة باستخدام HTML5، وهو الإصدار الأحدث. - وسم
<HTML>يعتبر العنصر الجذري الذي يحتوي على كل عناصر الصفحة كما، يحتوي عادةً على سمات مثل lang لتحديد لغة الصفحة. - وسم
<head>يحتوي على البيانات الوصفية (metadata) للصفحة، والتي لا تُعرض مباشرة على الصفحة.
– العناصر الشائعة داخل<head>تشمل: –<title>يحدد عنوان الصفحة الذي يظهر في شريط عنوان المتصفح.
–<meta>:يوفر معلومات مثل نوع الترميز المستخدم،(<meta charset="UTF-8">)وصف الصفحة والكلمات المفتاحية لمحركات البحث.
–<link>: تستخدم لربط الصفحة بأوراق الأنماط الخارجية (CSS) أو أي موارد أخرى.
–<script>: يمكن وضعه هنا لربط أو تضمين ملفات JavaScript. - وسم
<body>:يحتوي على المحتوى الفعلي الذي يظهر للمستخدم ويشمل نصوص، صور، روابط، جداول و نماذج، وغيرها من العناصر. وكذلك يتضمن الوسوم التالية:
-العناوين: مثل<h1> إلى <h6>, تستخدم لتحديد العناوين من حيث الأهمية والتسلسل الهرمي.
-الفقرات: وسم<p>تستخدم لإنشاء فقرات نصية.
-الروابط: وسم<a>تستخدم لإنشاء روابط تشعبية لصفحات أخرى أو موارد على الإنترنت.
– الصور: وسم<img>تستخدم لإدراج الصور، ويحتاج إلى سمة “src” لتحديد مصدر الصورة. - القوائم وتتضمن نوعين وهما:
-غير المرتبة: وسم<ul>مع عناصر<li>.
-المرتبة: وسم<ol>مع عناصر<li>.
-الجداول: تشمل وسوم<table>, <tr>, <th>, و`<td>` لإنشاء وتنسيق الجداول.
– النماذج: تتكون من وسوم مثل <form>, <input>, <textarea>, و`<button>` لجمع البيانات من المستخدمين. - العناصر الهيكلية الحديثة (HTML5)
– الرأس (Header): وسم<header>يستخدم لتحديد الرأس أو مقدمة المحتوى أو الأقسام.
– الجزء الرئيسي (Main): وسم<main>يقوم بتحديد المحتوى الرئيسي للصفحة.
– الجانب (Aside) وسم<aside>يستخدم للمحتوى الجانبي مثل القوائم أو الإعلانات.
-الجزء (Section): وسم<section>يعمل على تقسيم المحتوى إلى أقسام منطقية.
-المقال (Article): وسم<article>يقوم بتحديد المحتوى المستقل مثل المقالات أو الأخبار.
-لتذييل (Footer): وسم<footer>يستخدم لتحديد التذييل للمحتوى أو القسم
العناصر الاساسية للغة HTMl
تتشكل العناصر في HTML من عناصر أساسية تعمل على تحديد وتنظيم المحتوى و بالإضافة إلى ذلك، توجد عناصر هيكلية تحتوي على وسوم ومعلومات محددة ، فيما يلي بعض العناصر الاساسية والعناصر الهيكلية ووظائفهم .
أولا : العناصر الاساسية
- العناوين (Headings): تستخدم لعرض العناوين الرئيسية والفرعية في الصفحة وتوجد ستة مستويات من العناوين من <h1> إلى <h6>, حيث <h1> هو الأكثر أهمية والأكبر حجمًا، و<h6>هو الأقل أهمية والأصغر حجمًا.
- الفقرات (Paragraphs): يمثلها الوسم <p>, وتُستخدم لإنشاء فقرات نصية وبالتالي تكون الفقرة هي الوحدة الأساسية للنص في HTML.
- الروابط (Links): تستخدم لإنشاء الروابط التشعبية باستخدام الوسم <a>وبالتالى، تتطلب سمة “href” لتحديد وجهة الرابط، مثل صفحة ويب أخرى أو ملف .
- الصور (Images): يتم إدراج الصور في الصفحة باستخدام الوسم <img>ويتطلب سمة “src ” لتحديد مصدر الصورة، وسمة “alt” لوصف الصورة للنص البديل.
- القوائم (Lists): تشمل القوائم غير المرتبة (Unordered Lists)تستخدم لإنشاء قوائم نقطية باستخدام الوسم <ul> وعناصر <li>. وبالإضافة الى ذلك، القوائم المرتبة (Ordered Lists) تستخدم لإنشاء قوائم مرقمة باستخدام الوسم <ol> وعناصر <li>.
- الجداول (Tables): تُستخدم لعرض البيانات في شكل جدولي وذلك، باستخدام الوسوم <table>, <tr> (صف), <th> (رأس العمود) , و<td> (خلية البيانات)
- النماذج (Forms): يقوم بجمع البيانات من المستخدمين حيث أنها،تحتوي على وسوم مثل،<form>, <input>, <textarea>, و<button> . يمكن تحديد نوع البيانات المدخلة باستخدام سمة type في وسم <input>، مثل النصوص أو كلمات المرور أو البريد الإلكتروني.
العناصر الهيكلية (Structural Elements):
- العناصر الهيكلية تشمل العناصر الاساسية وتتضمنها العناصر الهيكلية المتمثلة في الاتي:
-الجزء الرئيسي (Main): وسم <main> يستخدم لتحديد المحتوى الرئيسي للصفحة.
– الرأس (Header): وسم <header> يستخدم لتحديد العنوان أو مقدمة الصفحة أو القسم.
-التذييل (Footer): وسم <footer> يستخدم لتحديد التذييل للمحتوى أو القسم.
-الجزء (Section): وسم <section>يقوم بدور تقسيم المحتوى إلى أقسام منطقية.
-المقال (Article) وسم <article> يعمل على تحديد المحتوى المستقل مثل المقالات أو الأخبار.
-الجانب (Aside): وسم <aside> تستخدم للمحتوى الجانبي مثل القوائم أو الإعلانات. - الوسائط المتعددة (Multimedia):
-الفيديو (Video): يستخدم لتضمين مقاطع الفيديو باستخدام وسم <video>، ويتطلب سمة src لمصدر الفيديو.
-الصوت (Audio):يستخدم لتضمين الصوتيات باستخدام وسم <audio>وبالتالى، يتطلب سمة src لمصدر الصوت
هذه العناصر تشكل الأساس الذي تبني عليه صفحات الويب كما أنها ، تتيح تنظيم وعرض المحتوى بطرق متعددة تناسب متطلبات التصميم المختلفة وذلك من خلال ، استخدام هذه العناصر، يمكن للمطورين إنشاء مواقع ويب ديناميكية وتفاعلية تلبي احتياجات المستخدمين.
أهم المصادر التعليمية للغة HTML
إذا كنت ترغب في تعلم HTML، هناك العديد من المصادر الممتازة التي يمكنك الاستفادة منها لتعلم الأساسيات وتطوير مهاراتك. لذلك إليك قائمة بأهم المصادر التي يمكنك الاعتماد عليها:
- المواقع التعليمة عبر الأنترنت
– W3Schools : من أشهر المصادر التعليمية على الإنترنت لتعلم HTML. يوفر دروسًا تفاعلية وكذلك، أمثلة حية، وتمارين عملية.
– (MDN (Mozilla Developer Network : يقدم وثائق شاملة ومفصلة حول HTML بما في ذلك، الأمثلة والممارسات الجيدة.
– freeCodeCamp : منصة مجانية تقدم منهاجًا تفاعليًا يغطي HTML وCSS وأساسيات تطوير الويب بشكل عام. يوفر أيضًا، تحديات برمجة عملية لبناء مشاريع حقيقية. - الدورات التعليمية
–Coursera :تقدم العديد من الدورات حول HTML وتطوير الويب كما أنها، مقدمة من جامعات ومؤسسات تعليمية مرموقة مثل جامعة ميشيغان. يمكنك الحصول على شهادات معتمدة عند إكمال الدورات.
– Udemy : يقدم مجموعة واسعة من الدورات التدريبية حول HTML بأسعار معقولة، وتتراوح من دورات للمبتدئين إلى دورات متقدمة تغطي جوانب مختلفة من تطوير الويب.
– Codecademy: ُتقدم تجربة تعلم تفاعلية تمكنك من كتابة الكود مباشرةً في المتصفح والحصول على تغذية راجعة فورية. - الكتب
– HTML and CSS: Design and Build Websites” by Jon Duckett: كتاب ممتاز للمبتدئين يوفر شرحًا بصريًا مفصلًا لـ HTML وCSS، وذلك مع أمثلة توضيحية وتصميم جذاب.
– Learning Web Design” by Jennifer Niederst Robbins: كتاب شامل يغطي HTML وCSS وجوانب أخرى من تصميم وتطوير المواقع الإلكترونية. - التطبيقات التعليمية
–SoloLearn : تطبيق مجاني يوفر دروسًا تفاعلية في HTML ويتيح لك التفاعل مع مجتمع من المتعلمين والمبرمجين.
– Grasshopper : تطبيق من Google يركز على تعليم البرمجة بشكل تفاعلي وكذلك، هو مناسب للمبتدئين الذين يريدون تعلم الأساسيات بطريقة ممتعة. - اخيرا ً، قنوات اليوتيوب
– Traversy Media : قناة تقدم دروسًا شاملة حول HTML وتطوير الويب بشكل عاماً، مع شرح مفصل وسهل الفهم.
–The Net Ninja : قناة تحتوي على مجموعة كبيرة من الدروس حول HTML وCSS وجافا سكريبت، مناسبة للمبتدئين والمحترفين.
–Academind : قناة تقدم محتوى تعليمي حول HTML وتطوير الويب مع دروس متعمقة ومشاريع عملية.
أفضل الممارسات التي يجب اتباعها عند كتابة اكواد HTML
عند إنشاء صفحة ويب عليك اتباع أفضل الوسائل عند كتابة الاكواد وبالتالي تكون تلك الاكواد متوافقة مع المعايير وسهلة الصيانة. إليك بعض أفضل النصائح.
أولا: بعض النصائح التي تتبع الاهتمام بكتابة الاكواد .
- استخدام هيكل HTML صحيح : البدء بـ
<!DOCTYPE html>: تأكد من تضمين هذا التصريح في بداية كل مستند HTML لضمان عرض المتصفح للصفحة بشكل صحيح وفقًا لمعايير HTML5 وبالتالي، استخدام وسوم HTML الأساسية مثل <html>, <head>, و<body> لضمان أن الصفحة تحتوي على هيكل واضح ومحدد. - تنظيم وترتيب الكود: استخدام المسافات البادئة (Indentation) يجعل الكود أكثر قراءة وخاصاً، في المستندات الطويلة التي تحتوي على العديد من العناصر المتداخلة وذلك بالإضافة إلى، التعليقات (Comments)استخدام التعليقات
<! -- Comment -->لتوضيح أجزاء معينة من الكود يسهل الصيانة والتحديثات المستقبلية. - الاهتمام بإمكانية الوصول (Accessibility) : استخدام السمات alt للصور وإضافة وصف دقيق للصور باستخدام سمة alt لتحسين إمكانية الوصول للأشخاص ذوي الإعاقة البصرية. العناوين (Headings) بتسلسل صحيح يجب ترتيب العناوين بشكل هرمي صحيح (من <h1> إلى <h6>)، بحيث يكون العنوان الرئيسي <h1> ويليه العناوين الفرعية حسب التسلسل المنطقي.
- تجنب التداخل غير الصحيح للوسوم : تأكد من إغلاق جميع الوسوم بشكل صحيح وبالتالي، تجنب تداخلها بطرق غير صحيحة. مثال لا تضع وسم <p> داخل وسم <a> أو العكس .
- كتابة كود نظيف وقابل للصيانة: استخدام أسماء ذات معنى للسمات id و class يساعد ذلك في فهم الغرض من العناصر بسهولة ويُسهِّل عمليات الصيانة والتعديل وبالتالي، تقليل التكرار. حاول تقليل التكرار في الكود وذلك من خلال، استخدام الفئات (classes) والعناصر الشائعة في CSS بدلاً من كتابة نفس الكود عدة مرات.
ثانيا: بعض النصائح التي تتعلق بالاهتمامات الخارجية.
- التوافق مع المتصفحات المختلفة: التحقق من التوافق تأكد من أن الكود الخاص بك يعمل بشكل جيد عبر جميع المتصفحات الرئيسية (Chrome, Firefox, Safari, Edge). استخدام meta viewport بالنسبة إلي المواقع المتجاوبة لتحقيق تجربة مستخدم جيدة على الأجهزة المختلفة، تأكد من تضمين الوسم
<meta name="viewport" content="width=device-width, initial-scale=1.0">. - الاهتمام بأداء الموقع تقليل حجم الصور: استخدم الصور بأحجام مناسبة لضمان تحميل الصفحات بسرعةوكذلك، في حالة التحميل المتأخر للصور والفيديوهات استخدم تقنية التحميل المتأخر للصور والفيديوهات (Lazy Loading)التي لا تظهر فوراً، لتحسين سرعة تحميل الصفحة.
- اختبار وصيانة الكود: استخدام أدوات التحقق (Validators) استخدم أدوات مثل [W3C HTML Validator](https://validator.w3.org/) للتحقق من صحة الكود واكتشاف الأخطاء، مراجعة التغيير وذلك قبل نشر أي تعديلات، اختبر الصفحة على متصفحات وأجهزة مختلفة لضمان عملها بشكل صحيح.
- اتباع معايير الويب (Web Standards) : استخدام HTML5 بشكل صحيح تأكد من استخدام العناصر الجديدة في HTML5 بطريقة تتوافق مع معايير الويب، مثل <article>, <section>, و<nav>.
- تجنب الاعتماد المفرط على HTML فقط : الفصل بين الهيكل والتصميم استخدم CSS لتنسيق الصفحة وJavaScript لإضافة التفاعلات، مع ترك HTML لتنظيم المحتوى.
الخلاصة
في النهاية، يجب معرفة أن لغات البرمجة تعمل كشبكة وبالإضافة الي ذلك، تعتبر لغة HTMl هي الاساس الصلب التي بُنيت عليه شبكة الانترنت فهي ليست مجرد وسيلة لترتيب النصوص والصور، بل هي أداة تفتح الباب أمام الإبداع والتطوير المستمر.
ومع مرور الوقت، تستمر HTMl في التطوير باستمرار. لذلك ستظل HTMl دائماً في قلب كل موقع وتطبيق ويب ممثلة بذلك، اللغة التي تحافظ على جمالية ووظائف الانترنت كما تعرفة اليوم .
