٧. أساسيات اتش.تي.إم.إل

نظري

في هذه الدروس، سوف تتعلم عن أساسيات اتش.تي.إم.إل (HTML fundamentals) مثل عنصر "ديڢ" (div)، وسمات "اي.دي" (id) و"كلاس" (class)، ونموذج اتش.تي.إم.إل (HTML boilerplate)، وكيانات اتش.تي.إم.إل (HTML entities)، والمزيد.

أ. ما هي عناصر "ديڢ" (Div Elements) ومتى يجب عليك استخدامها؟

يتم استخدام عنصر "ديڢ" (div) كحاوية (container) لتجميع العناصر الأخرى.

هذا مثال لعنصر "ديڢ" (div).

الكود :

code 

<div>

    <p>مثال لعنصر الفقرة.</p>

</div>

معاينة :

مثال لعنصر الفقرة.

ستستخدم عنصر "ديڢ" (div) بشكل أساسي لتجميع عناصر اتش.تي.إم.إل (HTML elements) التي تشترك في مجموعة من أنماط "سي.اس.اس" (CSS). ستتعلم المزيد عن "سي.اس.اس" (CSS) في الدروس وورش العمل المستقبلية.

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

على سبيل المثال، إذا كنت تريد تقسيم المحتوى الخاص بك إلى أقسام (sections)، فسيكون عنصر القسم (section) أكثر ملاءمة من عنصر "ديڢ" (div).

إليك مثال عملي يحتوي على أكثر من قسم (section):

code 

<section>

    <h2>عنوان القسم الأول</h2>
    <p>هذا هو المحتوى الخاص بالقسم الأول.</p>

</section>

<section>

    <h2>عنوان القسم الثاني</h2>
    <p>هذا هو المحتوى الخاص بالقسم الثاني.</p>

</section>

معاينة :

عنوان القسم الأول

هذا هو المحتوى الخاص بالقسم الأول.

عنوان القسم الثاني

هذا هو المحتوى الخاص بالقسم الثاني.

لعنصر القسم (section) معنى دلالي (semantic meaning) مقارنةً بعنصر "ديڢ" (div) الذي ليس له معنى دلالي (not semantic). الدلالات (Semantics) هي معاني الكلمات أو العبارات في اللغة. في لغة اتش.تي.إم.إل (HTML)، العناصر لها معناها الدلالي الخاص بها أيضًا. هذا يعني أنه عند استخدام عنصر قسم (section)، سيستوعب المتصفح (browser) معناه الدلالي (semantic meaning) ويفهم كيفية التعامل معه كقسم (as a section) - سواءً على أجهزة الكمبيوتر (desktops) أو الهواتف المحمولة (mobiles)، وما إلى ذلك.

أسئلة :

ما المعنى الدلالي لعنصر "ديڢ" (div)؟

أ. يمثل عنصر "ديڢ" (div) حاوية (container) للمحتوى التمهيدي أو مجموعة من الروابط الملاحية (navigational links). ❌

ب. يحدد عنصر "ديڢ" (div) تذييلًا (footer) للمستند أو القسم (section). ❌

ج. يحدد "ديڢ" (div) محتوى الصفحة الرئيسية ويجب أن يكون فريدًا (unique). ❌

د. عنصر "ديڢ" (div) ليس له معنى دلالي (not semantic). ✅

أي مما يلي هو بناء الجملة الصحيح لعنصر "ديڢ" (div)؟

أ. <divEl/> المحتوى يذهب هنا <divEl> ❌

ب. <div/> المحتوى يذهب هنا <div> ✅

ج. <divElement/> المحتوى يذهب هنا <divElement> ❌

د. <divGroup/> المحتوى يذهب هنا <divGroup> ❌

أي من عناصر اتش.تي.إم.إل (HTML) التالية يستخدم عادة لتجميع المحتوى في أقسام (sections) مميزة؟

أ. section ✅

ب. aside ❌

ج. nav ❌

د. h1 ❌

ب. ما هي المعرفات (IDs) والفئات (Classes)، ومتى يجب عليك استخدامها؟

تضيف سمة "اي.دي" (id) معرفًا فريدًا إلى عنصر اتش.تي.إم.إل (html).

فيما يلي مثال لعنصر (h1) مع معرف العنوان (id of title):

الكود :

code 

<h1 id="title">صفحة مراجعة الفيلم</h1>

معاينة :

صفحة مراجعة الفيلم

يمكنك الرجوع إلى مُعرِّف العنوان (id of title) داخل "جافاسكريبت" (JavaScript) أو "سي.اس.اس" (CSS).

إليك مثال "سي.اس.اس" (CSS) يُشير إلى مُعرِّف العنوان لتغيير لون (color) النص إلى الأحمر (red):

الكود :

اتش.تي.إم.إل (HTML):

code 

<!DOCTYPE html>

<html lang="ar" dir="rtl">

  <head>

    <meta charset="utf-8" />

    <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0" />

    <title>مثال لصفحة المراجعة</title>

    <link rel="stylesheet" href="./styles.css" />

  </head>

  <body>

    <h1 id="title">صفحة مراجعة الفيلم</h1>

  </body>

</html>

سي.اس.اس (CSS):

code 

#title {
	color: red;
}

معاينة :

صفحة مراجعة الفيلم

يُشير رمز التجزئة (#) الموجود أمام العنوان إلى رغبتك في استهداف مُعرّف (id) بهذه القيمة. يجب عدم استخدام أسماء المُعرّفات (IDs) أكثر من مرة، ويجب أن تكون فريدة (unique) دائمًا. تجدر الإشارة أيضًا إلى أنه لا يمكن أن تحتوي قيم المُعرّفات (id values) على مسافات (spaces).

فيما يلي مثال لتطبيق الكلمات "ماين" (main) و"هيادينغ" (heading) على قيمة سمة "اي.دي" (id):

code 

<h1 id="main heading">"ماين هيادينغ"</h1>

سوف ترى المتصفحات (Browsers) هذه المساحة (space) كجزء من المعرف (id) مما سيؤدي إلى مشكلات غير مرغوب فيها عندما يتعلق الأمر بالتصميم والكتابة النصية. يجب أن تحتوي قيم سمة المعرف (id) فقط على أحرف (letters) وأرقام (digits) وشرطات سفلية (underscores) وشرطات (dashes).

على النقيض من سمة "اي.دي" (id)، لا يلزم أن تكون قيمة سمة "كلاس" (class) فريدة ويمكن أن تحتوي على مسافات (spaces).

فيما يلي مثال لتطبيق فئة (class) تسمى "بوكس" (box) على عنصر "ديڢ" (div).

code 

<div class="box"></div>

إذا أردتَ إضافة أسماء فئات (class) متعددة إلى عنصر، يمكنكَ ذلك بفصل الأسماء بمسافة (space).

إليكَ مثال مُحدّث لتطبيق فئات متعددة (class) على عنصر "ديڢ" (div).

code 

<div class="box red-box"></div>

فيما يلي مثال آخر لتطبيق فئات (classes) متعددة على عناصر "ديڢ" (div) متعددة.

الكود :

اتش.تي.إم.إل (HTML):

code 

<!DOCTYPE html>

<html lang="ar" dir="rtl">

  <head>

    <meta charset="utf-8" />

    <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0" />

    <title>مثال لصفحة المراجعة</title>

    <link rel="stylesheet" href="./styles.css" />

  </head>

  <body>

	<div class="box red-box"></div>
	<div class="box blue-box"></div>
	<div class="box red-box"></div>
	<div class="box blue-box"></div>

  </body>

</html>

سي.اس.اس (CSS):

code 

.box {
  width: 100px;
  height: 100px;
}

.red-box {
  background-color: red;
}

.blue-box {
  background-color: blue;
}

معاينة :

باختصار، متى يُنصح باستخدام مُعرِّف (id) بدلاً من فئة (class)؟ يُفضَّل استخدام الفئات (classes) عند تطبيق مجموعة من الأنماط (styles) على عناصر متعددة. إذا كنت ترغب في استهداف عنصر مُحدَّد، يُفضَّل استخدام المُعرِّف (id) لأن قيم (value) هذه العناصر يجب أن تكون فريدة (unique).

أسئلة :

متى يجب عليك استخدام معرف (id) بدلاً من فئة (class)؟

أ. استخدم فئة (class) عندما تريد معرفًا فريدًا ينطبق فقط على عنصر واحد. ❌

ب. استخدم معرفًا (id) عندما تحتاج إلى معرف فريد لعنصر معين، واستخدم فئة (class) عندما تريد تطبيق الأنماط أو السلوك على عناصر متعددة. ✅

ج. استخدم معرفًا (id) عندما تريد تصميم عناصر متعددة بشكل متسق عبر أجزاء مختلفة من صفحتك على الويب. ❌

د. استخدم معرفًا (id) عندما تريد تطبيق أنماط (styles) يمكن تجاوزها بسهولة بواسطة أنماط أخرى في "سي.اس.اس" (CSS) الخاص بك. ❌

ماذا يحدث إذا استخدمت نفس المعرف (id) أكثر من مرة في اتش.تي.إم.إل (HTML) الخاص بك؟

أ. قد يؤدي ذلك إلى نتائج غير مرغوب فيها ومشكلات عند محاولة تطبيق الأنماط أو استهداف عنصر في "جاڢاسكريبت" (JavaScript). ✅

ب. سيتعطل البرنامج. ❌

ج. لن يحدث شيء. ❌

د. ستظهر رسالة تنبيه (alert) منبثقة في نافذة المتصفح (window). ❌

أي مما يلي ليس قيمة صحيحة لسمة المعرف (id)؟

أ. "id="heading ❌

ب. "id="main-heading ❌

ج. "id="main ❌

د. "id="main heading ✅

ج. ما هي كيانات اتش.تي.إم.إل (HTML Entities)، وما هي بعض الأمثلة الشائعة؟

كيان اتش.إم.إل (html)، أو مرجع الحرف (character reference)، هو مجموعة من الأحرف المستخدمة لتمثيل حرف محجوز (reserved character) في اتش.إم.إل (html).

لنفترض أنك تريد عرض النص "هذا عنصر (<img/>)" على الشاشة. إذا استخدمت الكود الحالي في المحرر، فلن تظهر النتيجة المطلوبة. حتى لو أضفت سمتي "اس.ار.سي" (src) و"التْ" (alt) إلى المثال، فستظهر صورة في منتصف الفقرة. هذه ليست النتيجة المطلوبة.

المثال :

الكود :

code 

<p> <img/> هذا عنصر </p>

معاينة :

هذا عنصر

عندما يرى مُحلِّل اتش.تي.إم.إل (HTML parser) رمز "أقل من" (>) متبوعًا باسم وسم اتش.تي.إم.إل (HTML tag)، يُفسِّر ذلك على أنه عنصر اتش.تي.إم.إل (html). ولهذا السبب، لا تحصل على النتيجة المطلوبة "هذا عنصر (<img/>)" على الشاشة.

لإصلاح هذه المشكلة، يمكنك استخدام كيانات اتش.تي.إم.إل (HTML entities).

إليك مثال مُحدّث باستخدام كيانات اتش.تي.إم.إل (HTML entities) الصحيحة لرمزي "أصغر من" (<) و"أكبر من" (>). الآن، سترى عنصر (<img/>) على الشاشة.

المثال :

الكود :

code 

<p> &lt;img/&gt; هذا عنصر </p>

معاينة :

هذا عنصر <img/>

تُعرف هذه الأنواع من مراجع الأحرف (character references) بمراجع الأحرف المُسمّاة (named character references). تبدأ المراجع المُسمّاة بعلامة العطف (&) وتنتهي بفاصلة منقوطة (;). باستخدام مرجع حرف مُسمّى (named character reference)، لن يخلط مُحلل اتش.تي.إم.إل (HTML parser) بينه وبين عنصر اتش.تي.إم.إل (HTML element) فعلي.

نوع آخر من مراجع الأحرف (character references) هو المرجع الرقمي العشري (the decimal numeric reference). يبدأ هذا المرجع بعلامة (&) ورمز (#)، متبوعًا برقم عشري واحد أو أكثر، متبوعًا بفاصلة منقوطة (;).

فيما يلي مثال لاستخدام المرجع الرقمي العشري للرمز (<).

الكود :

code 

&#60;

معاينة :

آخر نوع من المراجع الرقمية هو المراجع السداسية عشرية (the hexadecimal numeric reference). يبدأ هذا المرجع بعلامة (&) ورمز (#) وحرف (x). ثم يتبعه رقم سداسي عشري واحد أو أكثر من أرقام "اس.كـي" (ASCII hex digits)، وينتهي بفاصلة منقوطة (;).

فيما يلي مثال لاستخدام المرجع الرقمي السداسي عشر(the hexadecimal numeric reference) للرمز (<).

الكود :

code 

&#x3C;

معاينة :

أسئلة :

ما هو كيان اتش.تي.إم.إل "مرجع الحرف" (character reference)؟

أ. مجموعة من خطوط جوجل (Google fonts). ❌

ب. مجموعة من الصور والتعليقات التوضيحية. ❌

ج. مجموعة من الأحرف تُستخدم لتمثيل أكواد "جاڢاسكريبت" (JavaScript). ❌

د. مجموعة من الأحرف تُستخدم لتمثيل حرف محجوز في اتش.تي.إل.إل (HTML). ✅

ما هي أنواع مراجع الحرف (character references) الثلاثة؟

أ. مراجع أحرف رقمية مسماة (Named)، رومانية (Roman) وسادسة عشرية(Hexadecimal numeric). ❌

ب. مراجع الأحرف الثمانية (Octal)، المسماة (Named) والثنائية (Binary). ❌

ج. مراجع أحرف مُسمّاة (Named)، عشرية (Decimal numeric) وسداسية عشرية(Hexadecimal numeric). ✅

د. مراجع أحرف غير متماثلة (Asymmetric)، عشرية (Decimal numeric) وسداسية عشرية (Hexadecimal numeric). ❌

أيٌّ مما يلي هو الصيغة الصحيحة لمرجع حرف مُسمّى (named character reference)؟

✅ & .أ

❌ ;amp; .ب

❌ &amp>> .ج

❌ && .د

د. ما هو دور عنصر "سكريبت" (Script) في اتش.تي.إم.إل (HTML)، وكيف يمكن استخدامه للارتباط بملفات "الجافاسكريبت" (JavaScript) الخارجية؟

يُستخدم عنصر النص البرمجي"سكريبت" (script) لتضمين شيفرة (embed) قابلة للتنفيذ. يستخدمه معظم المطورين (developers) لتنفيذ شيفرة "جاڢاسكريبت" (JavaScript). يُستخدم "الجافاسكريبت" (JavaScript) لإضافة المزيد من التفاعل إلى صفحات الويب (web pages). من الأمثلة الشائعة على استخدام "جافاسكريبت" (JavaScript) الألعاب التفاعلية (interactive games)، وشرائح الصور (image sliders)، والنماذج الديناميكية (dynamic forms) التي تتحقق من صحة مدخلات المستخدم في الوقت الحقيقي (in real-time).

فيما يلي مثال لاستخدام عنصر النص البرمجي "سكريبت" (script) في مستند اتش.تي.إم.إل (HTML).

الكود :

code 

<body>

  <script>

     alert("مرحبا بك في عالم اتش.تي.إم.إل");

  </script>

</body>

معاينة :

💡 انقر على الزر أدناه لتشغيل "الجافاسكريبت" (JavaScript):

على الرغم من أنه يمكنك من الناحية الفنية كتابة كل كود "جاڢاسكريبت" (JavaScript) الخاص بك داخل علامات البرنامج النصي "سكريبت" (script)، إلا أنه من الأفضل بدلاً من ذلك الارتباط بملف "جاڢاسكريبت" خارجي (external JavaScript file).

فيما يلي مثال لاستخدام عنصر البرنامج النصي "سكريبت" (script) للارتباط بملف "جاڢاسكريبت" خارجي (link to an external JavaScript file):

الكود :

code 

<script src="path-to-javascript-file.js"></script>

تُستخدم سمة "اس.ار.سي" (src) هنا لتحديد موقع ملف "جاڢاسكريبت" الخارجي (external JavaScript file). "اس.ار.سي" (src) تعني "المصدر" (source). لا يُنصح بوضع جميع أكواد "الجاڢاسكريبت" (JavaScript) داخل مستند اتش.تي.إم.إل (HTML document) نظرًا لفصل الاهتمامات. فصل الاهتمامات هو مبدأ تصميمي (design principle)، حيث تُقسّم برامجك إلى أقسام منفصلة، بحيث يُعالج كل قسم اهتمامًا منفصلًا. في هذه الحالة، نريد فصل شيفرة "الجاڢاسكريبت" (JavaScript code) عن شيفرة اتش.تي.إم.إل (HTML code).

أسئلة :

ما هي الخاصية المستخدمة للارتباط بملف "جاڢاسكريبت" خارجي (external JavaScript file)؟

أ. سمة "ديڢ" (div) ❌

ب. سمة "ديفر" (defer) ❌

ج. سمة "اسينك" (async) ❌

د. سمة "اس.ار.سي" (src) ✅

ما هو فصل الاهتمامات؟

أ. يتعلق الأمر بضمان أن يكون لكل فرد في الفريق مسؤولياته الخاصة الواضحة. ❌

ب. مبدأ تصميمي (design principe) يقضي بفصل برامجك إلى أقسام منفصلة، بحيث يتناول كل قسم منها مشكلةً منفصلة. ✅

ج. عملية دمج جميع جوانب البرنامج في وحدة واحدة لتبسيط العمل ❌

د. يتضمن هذا المبدأ تقسيم المهام بين أعضاء الفريق دون مراعاة تداخلها أو تأثيرها على بعضها البعض. ❌

أي مما يلي هو الصيغة الصحيحة للربط بملف "جاڢاسكريپت" خارجي (external JavaScript file)؟

❌ <script div="path-to-javascript-file.js"></script> .أ

❌ <script alt="path-to-javascript-file.js"></script> .ب

✅ <script src="path-to-javascript-file.js"></script> .ج

❌ <script defer="path-to-javascript-file.js"></script> .د