أ. ما الدور الذي يلعبه اتش.تي.إم.إل (HTML) في الويب (Web)؟

اتش.تي.إم.إل (html)، يرمز إلى لغة ترميز النص الفائق، هو لغة ترميز لإنشاء صفحات الويب (Web). عندما تزور موقعًا إلكترونيًا وترى محتوى مثل الفقرات والعناوين والروابط والصور ومقاطع الفيديو؛ فهذا هو اتش.تي.إم.إل (html).

إليك مثال صغير يستخدم عناصر اتش.تي.إم.إل (html).

الكود :

code 

<h1>عنصر العنوان الرئيسي</h1>

<p>أنا عنصر فقرة.</p>
	

معاينة :

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

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

إليك نظرة أقرب على وسمات الفقرة الافتتاحية والختامية فقط:

code 

<p>

</p>
	

ما يميز وسم البداية عن وسم الإغلاق هو الشرطة المائلة الأمامية (/) الموضوعة مباشرة بعد القوس الزاوي الأيسر في وسم الإغلاق. بعض عناصر اتش.تي.إم.إل (html) لا تحتوي على وسم إغلاق. هذه تُعرف بالعناصر الفراغية.

إليك مثال على عنصر صورة وهو عنصر فارغ:

code 

<img>
	

لاحظ أن عنصر الصورة هذا ليس له وسم إغلاق ولا يحتوي على أي محتوى. العناصر الفارغة لا يمكن أن تحتوي على أي محتوى ولها وسم بدء فقط.

أحيانًا سترى عناصر فارغة تستخدم (/) قبل (<) هكذا:

code 

<img />
	

بينما يختار العديد من منسقي الأكواد مثل خاصية "بريتتيير" (Prettier) تضمين (/) في العناصر الفارغة، تشير مواصفات اتش.تي.إم.إل (html) إلى أن وجود (/) "لا يُعتبر وسم البداية وسمًا ذاتيًا الإغلاق بل إنه غير ضروري ولا يؤثر بأي شكل من الأشكال".

في تطوير الواقع العملي، سترى كلا الشكلين، لذا من المهم أن تكون على دراية بكليهما.

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

إليك مثال على عنصر صورة يحتوي على سمة "اس.ار.سي" (src).

code 

<img src="https://arabiverse.github.io/HTMLverse/basic/assets/running-cats.jpg">
	

معاينة :

تُستخدم السمة "اس.ار.سي" (src) لتحديد موقع تلك الصورة. بالنسبة لعناصر الصور، من الممارسات الجيدة تضمين سمة أخرى تُسمى السمة "ألتْ" (alt). تُستخدم السمة "ألتْ" (alt) لتوفير نص وصفي قصير للصور

إليك مثال على عنصر صورة مع سمات "اس.ار.سي" (src) و "ألتْ" (alt).

code 

<img src="https://arabiverse.github.io/HTMLverse/basic/assets/cats.jpg" alt="قطتان صغيرتان مخططان نائمَتان معًا على الأريكة.">
	

معاينة :

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

اتش.تي.إم.إل (html) يستخدم للمحتوى والبنية. "سي.اس.اس" (css) يستخدم لتصميم الصفحة. "جافاسكريبت" (javascript) يستخدم لإضافة التفاعل على صفحات الويب الخاصة بك. تشبيه جيد لذلك هو مقارنة اتش.تي.إم.إل (html) و "سي.اس.اس" (css) و "جافاسكريبت" (javascript) بمبنى مكتمل.

تمثل اتش.تي.إم.إل (html) الكتل والخرسانة والحديد التي تكوّن الجدران. إنها الأساس الذي يجعل المبنى قويًا. تمثل "سي.اس.اس" (css) التصميم الداخلي والخارجي الذي يجعل المنزل جميلاً. تمثل "جافاسكريبت" (javascript) نظام الكهرباء والمياه الذي يضمن الوصول المستمر إلى المياه والكهرباء.

ب. ما هي السمات وكيف تعمل؟

السمة هي قيمة تُوضع داخل وسم فتح عنصر اتش.تي.إم.إل (html). تُوفر السمات معلومات إضافية حول العنصر أو تُحدد كيفية عمله.

هذا هو بناء الجملة الأساسي لسمة ما:

القاعدة :

اسم السمة متبوع بعلامة يساوي (=) وقيمة بين علامتي اقتباس. يمكن أن تكون القيمة سلسلة نصية أو رقمًا، حسب السمة.

يستخدم هذا المثال الأول سمتي "اتش.ريف" (href) و "تارغيت" (target) . تُحدد سمة "اتش.ريف" (href) عنوان "للرابط" (URL) ، بينما تُحدد سمة "تارغيت" (target) مكان فتح الرابط.

المثال :

code 

<a href="https://arabiverse.github.io/HTMLverse/" target="__blank">تصفح موقع عالم اتش.تي.إم.إل</a>
		

معاينة :

بدون سمة "اتش.ريف" (href)، لن يعمل الرابط لعدم وجود عنوان (URL) للوجهة. لذا، يجب تضمين سمة "اتش.ريف" هذه لجعل الرابط فعالاً. تتيح لك خاصية تارغيت="ــبلانك" ("target="__blank) فتح الرابط في علامة تبويب جديدة بالمتصفح. ستتعلم المزيد عن سمة "تارغيت" في الدروس القادمة.

السمات المشتركة الأخرى هي السمة "اس.ار.سي" (src)، والسمة "التْ" (alt)، أو البديلة - والتي تستخدم لتحديد مصدر الصورة وتوفير نص وصفي بديل للصورة، على التوالي.

مثال

code 

<img src="https://arabiverse.github.io/HTMLverse/basic/assets/cats.jpg" alt="قطتان صغيرتان مخططان نائمَتان معًا على الأريكة.">
	

معاينة :

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

بعض السمات فريدة بعض الشيء من حيث بناء جملتها النحوية مثل السمة "شيكيد" (checked)

مثال

code 

<input type="checkbox" checked />
	

معاينة :

حاول النقر فوق مربع الاختيار في نافذة المعاينة لرؤيته يتناوب بين حالة محددة وحالة غير محددة.

في المثال التالي، لدينا عنصر "إدخال" (input) مع ضبط سمة "النوع" (type) على "مربع اختيار" (checkbox). تُستخدم المدخلات لجمع البيانات من المستخدمين، وتُحدد سمة "النوع" (type) نوع الإدخال. في هذه الحالة، يكون هذا الإدخال "مربع اختيار" (checkbox). ستتعلم المزيد عن كيفية عمل المدخلات في الدروس القادمة.

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

مثال

code 

<input type="checkbox" />
	

معاينة :

هناك العديد من السمات المنطقية الشائعة التي ستصادفها في اتش.إم.إل (html)، مثل معطل "ديزايبليد" (disabled) وللقراءة فقط "ريد.أنلي" (readonly) ومطلوب "ريكوايريد" required. تُستخدم هذه السمات لتحديد حالة العنصر، مثل ما إذا كان "معطلاً" (disabled) أو "للقراءة فقط" (readonly) أو "مطلوباً" (required).

مثال

هذا مثال على عنصر إدخال نص "مُعطّل" (disabled) افتراضيًا.

code 

<type="text" disabled />
	

معاينة :

جرّب النقر على عنصر الإدخال في نافذة المعاينة.

مثال

هذا مثال على عنصر إدخال نص غير مُعطّل افتراضيًا.

code 

<type="text" />
	

معاينة :

يجب أن يكون بإمكانك الآن النقر فوقه والكتابة داخل الحقل.

تحتوي لغة اتش.تي.إم.إل (html) على العديد من السمات التي يُمكن استخدامها لتخصيص سلوك ومظهر عناصر صفحة الويب. يُعد فهم كيفية استخدام "السمات" (attributes) أمرًا أساسيًا لإنشاء محتوى ويب تفاعلي وسهل الوصول. في الدروس القليلة القادمة، ستتعلم المزيد عن سمات اتش.تي.إم.إل (html) وكيفية استخدامها بفعالية في مشاريع تطوير الويب الخاصة بك.