أ. ما الدور الذي يلعبه اتش.تي.إم.إل 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://openarabtech.github.io/HTMLverse/basic/assets/running-cats.jpg">
	

معاينة :

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

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

code 

<img src="https://openarabtech.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://openarabtech.github.io/HTMLverse/" target="__blank">تصفح موقع عالم اتش.تي.إم.إل</a>
		

معاينة :

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

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

مثال :

code 

<img src="https://openarabtech.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 وكيفية استخدامها بفعالية في مشاريع تطوير الويب الخاصة بك.