التمرين - إضافة HTML الأساسي إلى تطبيق الويب الخاص بك

10 دقائق

في الوقت الحالي، يحتوي موقع الويب الخاص بك على ملف HTML فارغ. دعونا نضيف بعض التعليمات البرمجية! الهدف هو استخدام لغة تمييز النص التشعبي (HTML) لوصف صفحة الويب التي يجب أن تعرضها مستعرضات عملائك. أليس لطيفًا أن يكون لديك قالب بداية؟ يمكن للمحررين ملء مريح في بعض من الشفرات المتداولة النموذجية أو بنية HTML بالنسبة لك.

في هذه الوحدة، يمكنك إضافة محتوى HTML الأساسي، وفتح صفحة HTML في مستعرض، والحصول على أول نظرة على أدوات المطور.

إضافة بعض التعليمات البرمجية لـ HTML

يوفر Visual Studio Code الدعم الأساسي لبرمجة HTML خارج المربع. يوجد تمييز لبناء جملة، والإكمال الذكي باستخدام IntelliSense، والتنسيق القابل للتخصيص.

افتح مجلد موقع الويب في Visual Studio Code، ثم افتح index.html الملف عن طريق تحديده في المستكشف.
في index.html الصفحة، اكتب html:5، ثم حدد إدخال. يتم إضافة التعليمات البرمجية لقالب HTML5 إلى الملف.

إشعار

إذا لم تتم إضافة رمز قالب HTML5 إلى index.html الملف، فحاول إغلاق الملف وإعادة فتحه.

قم بتحرير التعليمات البرمجية للقالب بحيث تشبه ما يلي. ثم احفظ الملف باستخدام Control+S على Windows أو Command+S على macOS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

كانت هناك إصدارات مختلفة من HTML. يشير doctype<!DOCTYPE html> إلى أن مستند HTML هذا يحتوي على تعليمة HTML5 البرمجية.

في حين أننا لن نتعمق بعمق في معنى جميع عناصر HTML، نريد أن نشير إلى بعض العناصر المهمة. meta تشير العلامة إلى معلومات بيانات التعريف التي لا تكون مرئية عادة للعارض إلا إذا عرضوا التعليمات البرمجية المصدر في المستعرض الخاص بهم. توفر عناصر التعريف أو علامات التعريف معلومات وصفية حول صفحة ويب. على سبيل المثال، تساعد محركات البحث في معالجة المعلومات الموجودة في صفحات الويب الخاصة بك للعودة إلى نتائج البحث.

قد تبدو مجموعة الأحرف (charset) ل UTF-8 غير هامة، ولكنها ضرورية لتأسيس كيفية تفسير أجهزة الكمبيوتر للأحرف. إذا كانت بيانات التعريف لمجموعة الأحرف مفقودة، يمكن أن يؤدي ذلك إلى الأمان المخترق. هناك الكثير من التاريخ والمعلومات التقنية وراء سمة charset، ولكن الالاستنتاجات الهامة من هذا التمرين هي أن Visual Studio Code المتداول يوفر بعض الإعدادات الافتراضية المعقولة.

تحرير العنوان

يحتوي العنصر <head> الموجود في التعليمات البرمجية لـ HTML على معلومات عن موقعك على الويب غير مرئية داخل علامة تبويب المستعرض.

تعرف بيانات التعريف البيانات حول مستند HTML، مثل مجموعة الأحرف والبرامج النصية والمستعرض الذي تفتح صفحة ويب فيه.

يظهر عنوان صفحة ويب في أعلى نافذة المتصفح، وهو مهم من عدة جوانب. على سبيل المثال، يتم استخدام العنوان وعرضه في محركات البحث. دعونا نضيف عنوانًا.

هام

من هذه النقطة فصاعدًا، يشير القطع (...) إلى أن التعليمات البرمجية التي تم تعريفها مسبقًا تسبق أو تتبع. يجب أن تكون هناك تعليمة برمجية كافية تم توفيرها كسياق لإجراء التغييرات الضرورية أو تحديث العمل الخاص بك، ولكن يجب عدم نسخ ولصق علامة الحذف في التعليمة البرمجية الخاصة بك.

في المحرر، قم بتعديل العنصر <title> بحيث يشبه المثال التالي.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

لتطبيق الأنماط على عناصر HTML على صفحة الويب، يمكنك كتابة التعليمات البرمجية ل CSS مباشرة في رأس صفحة الويب. تسمى كتابة CSS في صفحة HTML CSS الداخلية. مع ذلك، إنها أفضل ممارسة لفصل بنية HTML، وتصميم CSS. يسمى وجود صفحة CSS منفصلة CSS خارجية. يميل الرمز إلى أن يكون أسهل في القراءة عندما يكون موجزًا ومجزأ. يمكنك استخدام ورقة أنماط خارجية واحدة أو أكثر لخدمة صفحات ويب متعددة. بدلا من تحديث كل صفحة HTML مع تعليمات CSS البرمجية المنسوخة نسخا متماثلا، يمكنك إجراء تغييرات على ملف CSS واحد وتطبيق هذه التحديثات على جميع صفحات الويب التابعة. دعونا نربط بملف CSS خارجي.

في محرر Visual Studio Code، أضف سطرا فارغا بعد <title> العنصر، واكتب link، ثم حدد Enter. يجب أن يضيف Visual Studio Code السطر التالي إلى ملفك index.html .
```
<link rel="stylesheet" href="">
```

قم بتحديث href= إلى href="main.css"، ثم احفظ الملف عن طريق تحديد Control+S على Windows أو Command+S على macOS.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

تحرير المتن

لنبدأ في <body> ملء العنصر الآن.

<body> يحتوي العنصر على محتوى موقعك على ويب المرئي لعملائك في المستعرضات الخاصة بهم.

<body> داخل العنصر، أضف ، متبوعا بعنصر <h1>، ثم قم بإنشاء غير مرتبة تحتوي على عدة <p> قائمة.

قم بتحرير التعليمات البرمجية الخاصة بك، أو انسخها والصقها، بحيث يبدو مثل المثال التالي.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

يمكنك استخدام سمة معرف (مستخدمة <p> في العنصر) لتصفيف عنصر واحد، بينما سمة الفئة (المستخدمة في <li> العنصر) هي لتصفيف كافة العناصر من نفس الفئة.

قبل الخطوة التالية، تأكد من حفظ ملفك عن طريق تحديد على Control+S أو Command+S.

فتح في المستعرض

يمكنك معاينة صفحة الويب الخاصة بك محليًا عن طريق فتح ملف HTML في مستعرض. بدلاً من عنوان موقع الويب الذي يبدأ بـ https://، يشير متصفحك إلى مسار الملف المحلي والذي يجب أن يبدو كـ C:/dev/simple-website/index.html.

للمعاينة باستخدام Visual Studio Code، انقر بزر الماوس الأيمن وحدد index.html الافتراضي، أو حدد الملف واستخدم اختصار index.html.

هام

إذا كنت تواجه مشكلة، فتأكد من النقر بزر الماوس الأيمن مباشرةً على أيقونة اسم الملف أو النص. إذا ظهر مربع حوار Visual Studio Code، فحدد نعم، أثق في الكتاب؛ هذه هي ميزة Workspace Trust التي تتيح لك تحديد ما إذا كان يجب أن تسمح مجلدات المشروع بتنفيذ التعليمات البرمجية التلقائي أو تقيده. لقد أنشأت الملف للتو، لذا فهو آمن.

تفتح صفحة الويب في المستعرض الافتراضي.

عرض الصفحة باستخدام أدوات المطور

يمكنك فحص صفحة ويب باستخدام أدوات المطور في المستعرض. لنجرب ذلك.

افتح أدوات المطور بالنقر بزر الماوس الأيمن فوق صفحة ويب وتحديد فحصأو جرب هذه الاختصارات:
- اضغط على اختصار لوحة المفاتيح لـ Developer Tools، وهو F12.
- اضغط على Ctrl+Shift+I على Windows وLinux أو Option+Command+I على جهاز Mac.
تعمل اختصارات لوحة المفاتيح هذه في Microsoft Edge و Chrome و Firefox. إذا كنت تستخدم Safari، فشاهد أدوات مطوري الويب. عند التثبيت، حدد > Safari، ثم حدد خيارات متقدمة. في أسفل الجزء، حدد خانة الاختيار إظهار القائمة تطوير في شريط القوائم. حدد Develop > Show Web Inspector. لمزيد من المعلومات، راجع وثائق "مراقب ويب Safari ".

لمعرفة المزيد حول فتح أدوات المطور والميزات الرئيسية المتوفرة، راجع مقالة نظرة عامة على DevTools.
حدد علامة التبويب العناصر.
حرك الماوس خاصتك فوق عناصر HTML المعروضة في علامة التبويب Elements ثم بادر بتوسيع محتويات العناصر المختلفة.

تعرض علامة التبويب عناصر في أدوات المطور توضح لك نموذج كائن المستند (DOM) كما هو موضح في المستعرض. عند تصحيح الأخطاء، من المهم غالباً أن ترى كيف يفسر المستعرض تعليماتك البرمجية المصدر.

يوفر فحص الصفحة في مستعرض كافة أنواع المعلومات المفيدة، كما يمكن أن يساعدك في استكشاف المشاكل وإصلاحها. يمكنك أيضًا عرض تفاصيل CSS مع المراقب، كما سترى في المقطع التالي.