إنشاء ملف HTML و ملف CSS و ربطهما | الدرس 2\37

   السلام عليكم، في هذا الدرس سننشئ ملف HTML، و سنتعرف على بنيته، كما سننشئ ملف CSS و سنربطه مع ملف HTML، لكن لتطبيق كل ما يوجد في هذا الدرس أو الدروس المقبلة من هذه الدورة، يلزمكم محرر نصي و متصفح إنترنت، شخصياً سأعمل بالمحرر النصي 'Sublime Text' و متصفح الإنترنت 'Google Chrome'.

إنشاء ملف HTML

   لإنشاء ملف HTML يجب فتح محرر النصوص 'Sublime Text'، ثم فتح ملف جديد بالنقر على علامة التبويب 'File / Fichier' ثم النقر على 'New File / Nouveau Fichier'، ثم حفظه بالنقر على علامة التبويب 'File / Fichier' ثم النقر على 'Save As / Enregistrer Sous' لتنبثق نافذة الحفظ حيث يمكنكم اختيار مكان حفظ ملف HTML في جهازكم، و كتابة إسم ملف HTML، يحبذ تخصيص كلمة 'index' كإسم لملف HTML، و إجبارياً يجب إضافة اللاحقة 'html.' مباشرة بعد إسم ملف HTML، ثم النقر على 'Save / Enregistrer' لتجدونه في المكان الذي اخترتموه لحفظه، حيث يمكنكم النقر عليه نقرتين متتاليتين بزر الفأرة الأيسر ليُفتح في متصفح الإنترنت التلقائي على جهازكم.

بنية ملف HTML

  دائماً يُكتب كود 'DOCTYPE' في أول سطر من ملف HTML، و هو كود يوضع من أجل تعريف نوعية الملفات لمتصفحات الإنترنت و لمحركات البحث، لكنه أضحى تواجده غير أساسياً في ملفات HTML.

  يلي كود 'DOCTYPE' مباشرة عنصر 'HTML' حيث يتوفر على عنصرين مهمين و هما :

* عنصر 'HEAD' : هو العنصر الذي يحتوي على الأكواد المخصصة لمخاطبة المخدم Server.

* عنصر 'BODY' : هو العنصر الذي يحتوي على الأكواد التي يظهر محتواها في متصفحات الإنترنت.

   داخل عنصر 'HEAD' يوجد عنصران مهمان و هما :

- عنصر 'META' الذي يحتوي على Attribut بإسم 'CHARSET' التي بدورها تتوفر على Value بإسم 'UTF-8'، و هو عنصر يتم  إقحامه من أجل جعل متصفحات الإنترنت و محركات البحث تفهم ترميز محتوى الملف كاللغات مثلاً.

- عنصر 'TITLE' حيث يُكتب بين وسميه عنوان الموقع الإلكتروني أو التطبيق الهاتفي، و هو العنصر الوحيد الموجود في 'HEAD' و الذي يظهر في المتصفحات، و بالظبط في علامة التبويب للمتصفح.

See the Pen
بنية ملف HTML by osama (@webdesigner7)
on CodePen.

بنية ملف HTML

إنشاء ملف CSS

   إنشاء ملف CSS جد مهم لأن هذا الأخير يمكّن مصممو الويب من التعديل على مظهر مواقعهم و تطبيقاتهم عبر أكواده، و لإنشاء ملف CSS يجب فتح محرر النصوص 'Sublime Text'، ثم فتح ملف جديد بالنقر على علامة التبويب 'File / Fichier' ثم النقر على 'New File / Nouveau Fichier'، ثم حفظه بالنقر على علامة التبويب 'File / Fichier' ثم النقر على 'Save As / Enregistrer Sous' لتنبثق نافذة الحفظ حيث يمكنكم اختيار مكان حفظ ملف CSS في جهازكم، و كتابة إسم ملف CSS، يحبذ تخصيص كلمة 'style' كإسم لملف CSS، و إجبارياً يجب إضافة اللاحقة 'css.' مباشرة بعد إسم ملف CSS، ثم النقر على 'Save / Enregistrer' لتجدونه في المكان الذي اخترتموه لحفظه.

الفيديو التوضيحي للدرس

ربط ملف CSS و ملف HTML

   بعد إنشاء ملف CSS، يجب ربطه مع ملف HTML، و ذلك بإضافة عنصر 'LINK' في عنصر 'HEAD' للملف HTML المراد ربطه، و هذا العنصر 'LINK' يحتوي على ثلاثة Attributs :

- Attribut بإسم 'REL' تحتوي على Value بإسم 'STYLESHEET'.

- Attribut بإسم 'TYPE' تحتوي على Value بإسم 'TEXT/CSS'، لكن هذه Attribut أضحى تواجدها غير أساسي في عنصر ربط ملفا HTML و CSS.

- Attribut بإسم 'HREF' حيث يجب الإضافة في Value التي تحتويها إسم ملف CSS، شريطة أن يكون ملف CSS في نفس المجلد الذي يحتوي ملف HTML، أما إذا كان ملف CSS في مجلد آخر، فيجب الإضافة في Value مسار ملف CSS.

   للتأكد من عملية ربط ملف CSS مع ملف HTML، يجب كتابة كود CSS في ملف CSS يغير مظهر عنصر موجود في عنصر 'BODY' لملف HTML المربوط، ثم حفظ التغيير في المحرر النصي، ثم معاينة التغيير في المتصفح.

See the Pen
بنية ملف HTML by osama (@webdesigner7)
on CodePen.

أكواد HTML و CSS المستعملة في هذا الدرس

أتمنى أن تستفيدوا من الدرس