تعتبر لغة HTML هي اللغة الأساسية لبناء المواقع وهي إختصار ل “HyperText Markup Language” وهي تتكون من وسوم أو Tags وهذه الوسوم هي التي تشكل عناصر صفحة HTML , من أجل إنشاء صفحة HTML نحتاج إلى متصفح و محرر نصوص , من ثم نقوم بإنشاء ملف وهذا الملف يجب أن يكون إمتداده .HTML على سبيل المثال “index.html” أو “page.html” إختر الإسم الذي تريد عادة ما نختار الإسم “index” , والسبب في ذلك هو أن المتصفح عندما يدخل للموقع فأول ملف يبحث عنه هو ملف الذي يحمل إسم index .
أما فيما يخص المتصفح فينصح بإستخدام متصفح جوجل كروم , حيث أنه يعتبر من أقوى المتصفحات وأشهرها كما يتوفر على أدوات مهمه تساعد مطوري المواقع , و سنحتاج لها في دروس قادمة , أما فيما يخص محرر النصوص فهناك الكثير من الخيارات لكن أنصح بإستخدام محرر النصوص VS Code وهو محرر نصوص من تطوير شركة مايكروسوفت وهو مجاني ومفتوح المصدر , وهو يعتبر الأن من أهم محررات النصوص .
هيكل صفحة HTML
من أجل بناء صفحة HTML نقوم بإنشاء مجلد وهذا المجلد هو الذي يحتوي على ملفات الموقع , إختر الإسم الذي تريد مثلا “MyProject” وداخل هذا المجلد قم بإنشاء ملف جديد أعطه مثلا الإسم “index.html” الخطوة التالية هي فتح هذا الملف بإستخدام محرر النصوص VS Code أو أي محرر نصوص يعجبك وترتاح في إستخدامه ,ثم نقوم بكتابة الهيكل الأساسي لصفحة HTML وهو على هذا الشكل
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8">
<title>عنوان الموقع</title>
</head>
<body>
</body>
</html>كما تلاحظ فإن الهيكل الأساسي يتكون من عدة عناصر , منها عنصرين أساسيين وهما <head> و <body> , أما فيما يتعلق بال <head> والذي يمثل رأس الصفحة وتوضع فيه العناصر الغير مرئية من الصفحة , وأيضا يستخدم لربط صفحة HTML مع ملفات CSS الخاصة بالتنسيقات وأمور أخرى سنتعرف عليها فيما بعد.
قد تلاحظ مجموعة من الأمور في هذا الأكواد التي قمنا بكتابتها , منها سطر ” <!DOCTYPE html> ” أما DOCTYPE فهي إختصار ل Document Type أي نوع الملف و Html توضح نوع الملف , وهذا السطر يوضح نوع الملف للمتصفح.
بعدها نلاحظ وسم <html> وهو الوسم الأساسي لبدأ صفحة HTML وهو يحتاج للاقفال حيث ستلاحظ في الأسفل وجود </html> ليدل على نهاية الملف , ستلاحظ أن وسم البداية <html> يحتوي بداخله بعض الخصائص مثل ” dir=”rtl” ” و ” lang=”ar ” أما الخاصية dir فهي تستخدم لتحديد إتجاه الخط وقد أعطيناها في هذا المثال القيمة rtl وهي إختصار ل Right To Left أي من اليمين إلى اليسار , أما بالنسبة للخاصية lang فهي تستخدم لتحديد اللغة المستخدمة واعطيناها القيمة ar وهي إختصار ل Arabic طبعا هذه الخصائص تضعها إن كنت تريد العمل على موقع عربي أو يعرض محتوى باللغة العربية.
طبعا وبما أن هذا الشرح موجه للقارئ العربي أو الذي يفهم اللغة العربية من غير العرب , فمن الجيد أن تكون بعض الأمثلة باللغة العربية , الأمر الأخر وهو يتعلق بإختيار محرر النصوص VS Code هو أنه أيضا يدعم اللغة العربية , حيث أن الكثير من محررات النصوص لا تدعم اللغة العربية بشكل جيد , وعند محاولة الكتابة بالعربية تكتب معكوسة الأمر الذي يعتبر مزعج للغاية.
عنصر Heading في HTML
طبعا في هذه المرحلة كل الأكواد التي سنقوم بكتابتها ستكون داخل وسم <body> على هذا الشكل
<body>
نكتب الاكواد هنا
</body>ال Heading وهي عناصر أو وسوم تستخدم للإشارة للعناوين داخل صفحة HTML وهي تبدأ من <h1> إلى <h6> مثال
<h1>عنوان هنا</h1>
<h2>عنوان هنا</h2>
<h3>عنوان هنا</h3>
<h4>عنوان هنا</h4>
<h5>عنوان هنا</h5>
<h6>عنوان هنا</h6>قم بكتابت هذه العناصر كما سبق الإشارة داخل وسم <body> وقم بحفظ التعديلات وفتح ملف index.html من خلال المتصفح ولاحظ ما هي النتيجة.
عادة ما تستخدم هذه الوسم إلى الإشارة إلى العناوين داخل الصفحة , حيث يستخدم بشكل شائع الوسم <h1> مرة واحدة في الصفحة للإشارة إلى عنوان الصفحة أو عنوان المقال , بينما تستخدم بكثرة <h3> للإشارة إلى عناوين الفقرات , وهي تقسيمات تسهل قراءة المحتوى , وتستخدم بقية الوسوم بشكل منفصل وبطرق مختلفة .
كما أن وسوم Heading مهمة لأغراض أخرى , منها على سبيل المثال ما يتعلق بمحركات البحث , حيث أن العناكب أو الزواحف الخاصة بالأرشفة التي تدخل للمواقع من أجل فحصها , من بين الأمور التي تقوم بفحصها هي عناصر أو وسوم ال Heading وهذا حتى تتمكن من فهم المحتوى تصنيفه وتقسيمه بشكل جيد .
<h3>عنوان هنا</h3>
<p> هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى،
حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. </p>في هذا المثال قمنا بإستخدام قمنا باستخدام الوسم <h3> للإشارة إلى عنوان للفقرة و الوسم <p> وهو إختصار ل Paragraph وهي الفقرة , والفقرات تعتبر من عناصر صفحة HTML الأساسية , وهي تستخدم من المواقع التي تحتوي على نصوص كثيرة مثل موسوعة ويكيبيديا أو موقع موضوع , لو قمت بإختبار المثال أعلاه ستلاحظ أن النص ملئ الشاشة بالكامل , والسبب أن المتصفح قام بعرض النص كما هو , فنحن لم نخبر المتصفح متى يقوم بالرجوع لبداية السطر , لفعل هذا يمكننا الإستعانة بالوسم <br> وهو وسم يستخدم للرجوع للسطر أو كسر السطر , ويمكنك وضعه وسط النص ولاحظ ماذا سيحدث , تجدر الإشارة إلى أن الوسم <br> لا يحتاج لإقفال أي أنه يستخدم كما هو.
الصور في HTML
الصور عنصر مهم للغاية في أي موقع , لهذا ستجد أن هناك وسوم في لغة HTML مخصصة للتعامل مع الصور , أهم هذه الوسوم هو الوسم <img> وهو إختصار لكلمة Image ونقوم بكتابته على هذا الشكل
<img src="myimage.jpeg" >لاحظ في المثال أعلاه قمنا بكتابة الوسم <img> والذي لا يحتاج لإغلاق , وداخل الوسم قمنا بإضافة الخاصية src وهي إختصار Source وهي تشير إلى مصدر الصورة أي المكان الذي تخزن فيه الصورة أو رابط الصورة , في هذه الحالة قمنا بكتابة إسم الصورة التي توجد في نفس المجلد الذي يوجد فيه الملف الذي نعمل عليه أي index.html و الصورة myimage.jpeg كلاهما يتواجدان داخل مجلد Myproject الذي نعمل عليه , ولاحظ أننا قمنا بكتابة إسم الصورة متبوعا باللاحقة .jpeg والذي توضح نوع الصورة , فإن كانت الصورة png مثلا سيكون المثال على هذا الشكل
<img src="myimage.png" >ماذا لو كنت تريد وضع الصور في مجلد منفصل , أي تقوم بجمع الصور في مكان واحد على سبيل المثال تقوم بوضع الصور في مجلد إسمه images كيف ستقوم في هذه الحالة باستدعاء الصورة
<img src="images/myimage.png" >لاحظ أننا قمنا بكتابة إسم المجلد متبوعا بالرمز “/” بعدها بإسم الصورة , وفي حالة كنت تريد إدراج صورة موجودة في موقع آخر يكفي أن تقوم بوضع رابط الصورة المباشر على هذا الشكل
<img src="https://cdn.pixabay.com/photo/2018/03/26/06/20/desktop-3261768_960_720.jpg" >لاحظ أن الرابط الذي قمنا بإدراجه هو الرابط المباشر , يحتوي في نهايته على لاحقة الصورة , والتي هي في هذه الحالة jpg .