نظرة عامة على لغة HTML
إن HTML هي لغة سهلة جداً وتُستخدم من أجل وصف ما تحتوي عليه صفحات الويب ( Web Pages ). كلمة HTML هي إختصار للمصطلح Hyper Text Markup Language و تعني لغة ترميز. و هي تستخدم من أجل تحديد العناصر الموجودة في داخل الصفحة مثل العناوين address, الفقرات paragraphs, الأزرار buttons, الصور Image, القوائم menus, الجداول tables, و غيرها من الأشياء التي يتم إضافتها في صفحات الويب.
تُستخدَم HTML في إنشاء و تصميم صفحات و مواقع الويب, و تُعتبَر هذه اللّغة من أقدم اللّغات و أوسعها إستخداماً في تصميم صفحات الويب لأنها من أسهل اللغات.
تتألف صفحة الويب الأساسية من عناصر HTML. تعرف هذه العناصر كيفية تنسيق وعرض المحتوى على الصفحة. وتشمل العناصر الأساسية في HTML عناصر النصوص، والصور، والروابط، والجداول، والنماذج، والعناصر المتخصصة الأخرى.
تعمل عناصر HTML على تحديد نوع العنصر وكيفية عرضه وتنسيقه. يمكن تحديد العناصر باستخدام الوسوم أو العلامات التي تحيط بالنص. ويتم إرفاق خصائص مع العناصر لتحديد كيفية عرضها، مثل اللون والحجم والموقع.
على سبيل المثال، يمكن استخدام الوسم <p> لتعريف فقرة نصية على الصفحة، ويمكن استخدام الوسم <img> لإدراج صورة على الصفحة، ويمكن استخدام الوسم <a> لإنشاء رابط.
في عام 1989 قام المهندس "تيم برنرز لي" في إبتكار أول مشروع برمجي و كان هدفه مشاركة البيانات عبر شبكة الانترنت. شبكة الانترنت www و هي إختصار ( World Wide Web ) التي ما زلنا حتى يومنا هذا نراها في روابط المواقع. في ذاك الوقت 1989 كان الدخول إلى الإنترنت صعباً لأنه لم يكن هناك متصفحات browser تعرض المحتوى بشكل جميل.
و في عام 2014 شركة W3C قامت في إضافة بعض التطورات المهمة على HTML و قاموا بتسمية الإصدار إلى HTML 5. لغة HTML هي طريق البداية بالنسبة لمبرمجين الويب web programmers و هي ليست معقدة حتى أكوادها سهله. و كل ما تحتاجه لتعلمها هو محرر نصوص و متصفح browser لعرض محتويات الكود الخاص بالموقع الذي تكتبهُ.
و الكثير من المبرمجين لا يعتبرونها لغة برمجة "لأنها خالية من الدوال و التعقيد" و صفحة الويب بشكل عام بها وسم نهاية و وسم بداية. تتعامل الـ HTML بشيئ يسمى تاغ tags أو الوسوم و هذا التاغ له وسم بداية يكتب بالشكل <tags> و وسم نهاية يكتب بالشكل <tags/>.
خصائص و مميزات لغة html
- الخاصية الأهم لهذه اللغة أنها لا تحتاج إلى برامج تصميم أبداً, فقط نستطيع كتابة الأكواد في المفكرة المرفقة بنظام الويندوز أو تحميل أي محرر أكواد.
- هي سهلة جداً لأنها تعتمد على الوسوم و ليس بها دوال للتعقيد و يمكن برمجة صفحة بسيطة خلال وقت قصير جداً.
- هي تُساعد أي شخص من إجراء التعديلات على الموقع.
- مُعظَم برامج التصميم تكون مبنية على HTML مثل برنامج فرونت بيج المرفق مع حزمة أوفيس 2003.
مكونات صفحات الويب Web Pages
صفحة الويب تتكون من أكواد HTML أي هي العمود الأساس لأي صفحة ويب موجودة على الإنترنت. و تتكون من أكواد لغة CSS التي تُعطي الجمالية للصفحة بإعطاء الوسوم تصميم و جمالية. و تتكون ايضاً على اكواد لغة جافاسكربت تضيف المؤثرات لصفحة الانترنت و معالجة البيانات التي تعرض على الصفحة.
لغة الـ HTML من ابسط لغات البرمجة لكن تحتاج فقط مصمم مبدع ويكون يحب المجال لأنك إذا أحببت مجال تستطيع الإبداع به لأبعد الحدود.
فيما يلي نظرة عامة على بعض العناصر والوسوم الشائعة في HTML:
- وسم <html>: يعرف بداية ونهاية مستند HTML.
- وسم <head>: يحتوي على معلومات المستند المرتبطة بالعنوان والوصف ورابط النمط (CSS) والشفرات النصية (JavaScript) وما إلى ذلك.
- وسم <title>: يعرف عنوان الصفحة، ويظهر في شريط عنوان المتصفح.
- وسم <body>: يحتوي على محتوى الصفحة الفعلي الذي سيتم عرضه للمستخدم، مثل النص والصور والروابط والجداول وما إلى ذلك.
- وسم <h1> إلى <h6>: يستخدم لتعريف عناوين الصفحة بحيث يكون <h1> هو العنوان الأكبر و <h6> هو الأصغر.
- وسم <p>: يستخدم لتعريف فقرة نصية.
- وسم <a>: يستخدم لإنشاء رابط، حيث يتم تحديد عنوان الرابط في سمة href.
- وسم <img>: يستخدم لإدراج صورة في الصفحة، حيث يتم تحديد مسار الصورة في سمة src.
- وسم <ul> و <ol> و <li>: يستخدمون لإنشاء قوائم غير مرتبة ومرتبة وعناصر القائمة على التوالي.
- وسم <table> و <tr> و <td>: يستخدمون لإنشاء جداول وصفوف وخلايا الجدول على التوالي.
هذه مجرد نظرة عامة على بعض العناصر والوسوم الشائعة في HTML. هناك العديد من العناصر الأخرى والوسوم التي يمكن استخدامها لتنسيق وتخطيط صفحات الويب بطرق مختلفة. يمكن استخدام CSS (Cascading Style Sheets) لتخصيص تنسيق العناصر في صفحة HTML.
الأكواد الرئيسية في صفحات الويب
كما ذكرنا في الأعلى كل ما يوجد في داخل صفحة الـ HTML هي وسوم أو ما يشيع بين الناس إسمها تاغات.
الشكل العام للوسوم الرئيسية في HTML
<html> <head> <title></title> </head> <body> هنا يكتب كل ما يظهر للزائر على صفحة الويب </body> </html>
حيث أن:
- وسم HTML هذا الوسم الأم لصفحة الويب يوضع في أول الصفحة كبداية لتعريف المتصفح أن اللغه المستخدمة HTML أو أننا نبرمج صفحة ويب.
- وسم head هذا الوسم المستخدم بكل ما يخص صاحب الموقع أو النبذة التعريفية للموقع و يسمى برأس الصفحة.
- وسم title هذا الوسم يمكننا من إعطاء إسم للصفحه يظهر فب الأعلى في المتصفح.
- وسم body هذا يكون جسم الصفحة و به تكتب جميع الأكواد التي يراها زائر الصفحة, حيث يمثل هذا الوسم جميع محتويات الصفحة و يوضع في داخله جميع الأوسمة الخاصة بمحتوى الموقع مثل النصوص و الجداول و الصور ......الخ.
ما هي وظيفة وسم <head> في لغة HTML؟
وسم <head> في لغة HTML يستخدم لتعريف المعلومات الرئيسية المرتبطة بمستند HTML. يقع <head> داخل عنصر <html> وقبل عنصر <body>.
وظيفة وسم <head> هي توفير معلومات المستند التي لا تظهر مباشرة على الصفحة، ولكنها توفر معلومات مهمة للمتصفح ومحركات البحث والأجهزة الأخرى التي تتعامل مع المستند.
بعض العناصر الشائعة داخل وسم <head> تشمل:
- وسم <title>: يحدد عنوان الصفحة، ويظهر في شريط عنوان المتصفح.
- وسم <meta>: يستخدم لتحديد معلومات الميتا (meta information) حول المستند، مثل الوصف والكلمات الرئيسية وتعيين ترميز الحروف ومشغل العرض.
- وسم <link>: يستخدم لربط المستند بملفات خارجية مثل ملفات CSS وملفات الرموز النصية (JavaScript) ورموز الاختصار (favicon).
- وسم <style>: يستخدم لتعريف قواعد التنسيق الخاصة بالمستند باستخدام CSS.
- وسم <script>: يستخدم لتعريف رموز JavaScript وربطها بالمستند.
عناصر أخرى قد تكون موجودة في وسم <head> تعتمد على الاحتياجات ومتطلبات المستند الخاص بك. يجب أن يتم وضع جميع هذه العناصر داخل وسم <head> وليس لها تأثير مباشر على محتوى الصفحة، ولكنها توفر معلومات هامة وتعليمات للمتصفح والمحركات البحث وأنظمة الويب الأخرى.
كيف يمكنني استخدام وسم <meta> لتحديد وصف المستند؟
يمكن استخدام وسم <meta> في وسم <head> لتحديد وصف المستند، وهو وصف موجز يوضح محتوى المستند. يستخدم محركات البحث هذا الوصف لعرض ملخص عن المستند في نتائج البحث.
لتحديد وصف المستند باستخدام وسم <meta>، يمكنك اتباع الخطوات التالية:
- قم بإضافة وسم <meta> داخل وسم <head> في مستند HTML الخاص بك.
- في سمة name، استخدم القيمة "description" للإشارة إلى أنه ستتم تحديد وصف المستند.
- في سمة content، قم بكتابة الوصف المراد تعيينه للمستند.
هنا مثال يوضح كيفية استخدام وسم <meta> لتحديد وصف المستند:
<!DOCTYPE html> <html> <head> <meta name="description" content="وصف المستند هنا"> <title>عنوان المستند</title> </head> <body> <!-- محتوى الصفحة --> </body> </html>
احرص على تحديد وصف موجز وواضح يعكس محتوى المستند بشكل صحيح. يفضل ألا يزيد الوصف عن 150-160 حرفًا لضمان ظهوره بشكل كامل في نتائج البحث. كما يجب أن يكون الوصف جذابًا ومحفزًا لجذب المستخدمين إلى زيارة المستند الخاص بك.