مدخل الى لغة html ( مقدمة عن أساسيات لغة HTML)
لغة HTML
من اللغات البرمجية الأساسية المستخدمة في تصميم مواقع الويب ولذلك سنبدأ بها بإذن
الله تعالى - كما وعدناكم - بتفصيل كبير بحيث تناسب المبتدئين وذلك قدر الإمكان
والله المستعان.
ماذا تعني كلمة HTML؟
HTML : هي اختصار للجملة التالية
: Hyper Text Markup
Language
وتعني " لغة ترميز أو توصيف النص التشعبي "٬ دعك من الترجمة الحرفية فهي لا تعنينا كثيراً.
وتعتبر هذه اللغة من أقدم اللغات المستخدمة في تصميم صفحات الويب وتستخدم في تشكيل هيكل صفحة الويب ومحتوياتها وتميييز العناوين من الفقرات من غيرها.
وتعني " لغة ترميز أو توصيف النص التشعبي "٬ دعك من الترجمة الحرفية فهي لا تعنينا كثيراً.
وتعتبر هذه اللغة من أقدم اللغات المستخدمة في تصميم صفحات الويب وتستخدم في تشكيل هيكل صفحة الويب ومحتوياتها وتميييز العناوين من الفقرات من غيرها.
وأخذت هذه اللغة العديد من المراحل والإصدارات من HTML عام 1991م حتى وصلت إلى HTML5 عام 2014 م.
وتستخدم هذه اللغة مجموعة من الوسوم " tags " لإصدار التعليمات إلى المتصفح والذي يقوم بدوره بترجمتها وتنفيذها.
وتستخدم هذه اللغة مجموعة من الوسوم " tags " لإصدار التعليمات إلى المتصفح والذي يقوم بدوره بترجمتها وتنفيذها.
ما هي الوسوم " tags "؟
الوسوم أو
" tags " بالإنجليزية عبارة عن الأكواد التي يتم
من خلالها إصدار التعليمات البرمجية للمتصفح ليقوم بتنفيذها - كما ذكرنا بالأعلى.
ويوضع الوسم بين علامتي أكبر من " > " وأصغر من " < ".
ويوضع الوسم بين علامتي أكبر من " > " وأصغر من " < ".
وتنقسم الوسوم إلى نوعين :
1- وسم بداية " Start Tag " : ويكون على الصورة : <tag name>
مثل : <html> و <body> و <h1> و <h2> و <p> و <div> ... إلخ
2- وسم نهاية " End Tag " : ويكون على الصورة : </tag name>
مثل : </html> و </body> و </h1> و </h2> و </p> و </div> ... إلخ
* ملاحظة : يتم كتابة وسم النهاية " End Tag " مثل وسم البداية " Start Tag " أي أنهما متشابهان مع اختلاف بسيط وهو إضافة شارطة مائلة " Slash " في حالة وسم النهاية " End Tag ".
* ملاحظة : يسمى أيضاً وسم البداية " Start Tag " بوسم الفتح أو الافتتاح " Opening Tag " و وسم النهاية " End Tag " بوسم الإغلاق " Closing Tag ".
ويتكون عنصر HTML من : وسم البداية " Start
Tag " + محتوى العنصر " Content " + وسم النهاية " End Tag ".
هكذا :
<tagname>content</tagname>
وهي تنفيذ لكود HTML التالي :
<html><head><title>My first page</title></head><body><h1>My first heading</h1><p> This is my first paragraph</p></body></html>
تركيب وهيكل صفحة HTML :
فيما يلي
تصور لهيكل صفحة HTML :
كما نلاحظ
جميعاً أن أبسط صفحة HTML تبدأ بالوسم <html> وتنتهي به أيضاً </html> وبداخله الوسمان <head></head> و <body></body> وبداخل الوسم " head " الوسم <title></title> .
وكما يظهر
في الصورة بالأعلى أن الجزء الخاص بجسم الصفحة " body " والمعلم باللون
الأبيض هو فقط ما يظهر بصفحة الويب الموجود بمنطقة رأس الصفحة " head
" فإن به إعدادات الصفحة من تحديد اللغة وتوصيف مجال الصفحة والكلمات
المفتاحية ... إلخ مما سنأتي على ذكره لاحقاً كل في حينه بإذن الله.
محرر أكواد HTML :
في المراحل
المتقدمة من شروحاتنا في HTML ستكون الأكواد التي تقوم بتحريرها كثيرة وخصوصاً
عند تصميم الإضافات أو القوالب كاملة٬ لذلك كان لزاماً علينا استخدام بعض البرامج
التي تنظم شكل الأكواد وتميز بدايات الوسوم ونهاياتها بألوان مختلفة بحيث يسهل
تحريرها و التعامل معها.
ومن أشهر تلك المحررات أو البرامج :
1- برنامج Notepad ++ : وقد سبق وتحدثنا عنه في تدوينة سابقة بعنوان : برنامج ++Notepad لعرض و تنسيق قوالب و إضافات بلوجر.
ملاحظة
هامة : و جدير بالذكر في هذا المقام أنه بعد تحرير أي كود HTML
داخل تلك المحررات التي ذكرناها بالأعلى٬ يتم حفظ الملف بامتداد " htm. " أو " .html " حتى يظهر كصفحة ويب عند
النقر عليه لفتحه.
وهذا مثال
صغير لكود html :
<html>
<head><title>عنوان الصفحة</title></head><body><h1>عنوان رئيسي</h1><p>مقال أو فقرة رقم 1</p><p>مقال أو فقرة رقم 2</p><p>مقال أو فقرة رقم 3</p><p>مقال أو فقرة رقم 4</p></body></html>
وهذه هي
النتيجة عند النقر على الملف بعد حفظه بامتداد " .html " :
أضف تعليق