فهم لغة HTML وأساسيات الوسوم الرئيسية
 |
| فهم لغة HTML وأساسيات الوسوم الرئيسية بأسلوب بسيط |
تُعتبر لغة HTML من أهم لغات البرمجة الأساسية لتطوير صفحات الويب، حيث تقوم ببناء الهيكل الأساسي للمواقع الإلكترونية وتنظيم المحتوى ليظهر بشكل جيد في متصفحات الإنترنت. تعد HTML خطوة البداية في عالم تطوير الويب، إذ تقوم بتحديد كيف سيبدو المحتوى في الصفحة وكيف سيتم تنظيمه. من المهم توضيح أن HTML ليست مسؤولة عن تنسيق المحتوى أو تصميمه، بل يتمثل دورها في إنشاء الهيكل العام للصفحة، بينما تُستخدم لغات أخرى مثل CSS وJavaScript للتحكم في التصميم والوظائف التفاعلية. سنشرح اليوم بعض الوسوم الأساسية في HTML ونستعرض كيفية عملها ودورها في بناء هيكل الصفحة، ونؤجل تفصيل الأكواد وتطبيقاتها إلى مقالات قادمة.
أولاً: الوسوم الرئيسية في HTML
تعمل HTML من خلال مجموعة من الوسوم (Tags)، كل منها يقوم بوظيفة معينة في بناء الصفحة. ومن أهم هذه الوسوم:
- وسم
<html>: يمثل بداية ونهاية وثيقة HTML، ويخبر المتصفح بأن هذه الصفحة مكتوبة بلغة HTML. - وسم
<head>: يحتوي على معلومات غير مرئية للمستخدم مثل العنوان، والروابط الخارجية مثل CSS أو JavaScript، والمعلومات التي يستخدمها محرك البحث لتحسين نتائج الموقع. - وسم
<body>: يُمثل القسم الرئيسي للصفحة ويحتوي على جميع المحتوى المرئي من نصوص وصور وفيديوهات وروابط. - وسم
<footer>: يعبر عن تذييل الصفحة ويستخدم عادةً لعرض حقوق الملكية، الروابط الهامة، أو أي معلومات أخرى توضع في أسفل الموقع.
وسم <head>: محتوى الرأس
وسم <head> هو القسم الأول الذي يأتي بعد وسم <html> في وثيقة HTML، ولكنه لا يحتوي على أي محتوى مرئي يظهر للمستخدم. بل يحتوي على معلومات تساعد محركات البحث في قراءة الموقع وترتيبه، وتُفيد أيضًا المتصفح في فهم تفاصيل الصفحة.
أهم ما يمكن أن يتضمنه وسم <head>:
- العنوان
<title>: يظهر في علامة تبويب المتصفح، ويجب أن يكون واضحًا ليعبر عن محتوى الصفحة. - الميتا تاجز
<meta>: تشمل معلومات مثل وصف الصفحة وكلمات البحث، مما يساعد في تحسين ظهور الصفحة في نتائج محركات البحث. - الروابط الخارجية: يمكن إضافة ملفات خارجية مثل CSS لتنسيق الصفحة أو JavaScript لإضافة وظائف تفاعلية.
ملاحظة: سنقوم بشرح مفصل حول كيفية استخدام هذه العناصر والأكواد المرتبطة بها في مقالات قادمة، لكن من المهم هنا فهم أن وسم
<head>لا يحتوي على محتوى مرئي بل على معلومات تقنية تخدم الصفحة.
وسم <body>: محتوى الصفحة الأساسي
وسم <body> هو المكان الذي يحتوي على كل ما يظهر للمستخدم في صفحة الويب، مثل النصوص، الصور، القوائم، الروابط، والجداول. أي عنصر مرئي على الصفحة يجب أن يوضع داخل هذا الوسم، إذ أنه يعبر عن المحتوى الرئيسي للصفحة الذي يتفاعل معه المستخدم.
أهمية وسم <body>:
- يحدد بنية الصفحة المرئية: يسمح بترتيب وتنسيق العناصر بطريقة تجعل من السهل قراءتها وفهمها.
- يحتوي على الوسوم الفرعية مثل
<h1>,<p>,<img>وغيرها التي تتحكم في المحتوى والنصوص والصور، وكل وسم يؤدي غرضًا معينًا في عرض المحتوى.
سنتناول في المقالات القادمة كيف يمكن استخدام الوسوم الفرعية داخل <body> بشكل عملي، وكيفية كتابة الأكواد الخاصة بها لبناء صفحة ويب متكاملة.
وسم <footer>: تذييل الصفحة
وسم <footer> يأتي عادةً في أسفل محتوى الصفحة، ويُستخدم لعرض المعلومات التكميلية أو الروابط الهامة. هذا القسم لا يقتصر فقط على وضع روابط التواصل الاجتماعي، بل يمكن استخدامه لعرض حقوق الطبع والنشر أو روابط الأقسام المختلفة للموقع.
أهم العناصر التي يمكن أن يحتويها <footer>:
- حقوق الملكية: مثل “© 2024 جميع الحقوق محفوظة”.
- روابط هامة: مثل “سياسة الخصوصية”، “الشروط والأحكام”، أو “اتصل بنا”.
- أيقونات التواصل الاجتماعي: لوضع روابط حسابات التواصل.
وسم <footer> يعد جزءًا هامًا من هيكل الصفحة لأنه يضيف معلومات توضيحية للمستخدم ويوفر له طرقًا أخرى للتنقل أو للتواصل.
في المقالات القادمة، سنستعرض كيفية إضافة الأكواد التي تجعل من وسم
<footer>أداة فعالة تساهم في تجربة مستخدم شاملة.
Comments