الخصائص (Attributes) في HTML بطريقة بسيطة وواضحة جدًا - تطوير الويب

في الدروس السابقة تعلمنا أهم الوسوم الأساسية المستخدمة في لغة HTML لبناء صفحات المواقع الإلكترونية ، والآن سنفهم كيفية التحكم بهذه الوسوم ونجعلها تعمل كما نريد وذلك باستخدام الخصائص attributes التي لابد من استخدامها لجعل مظهر وتنسيق صفحة الموقع الالكتروني يظهر كما نريد.

هذا الدرس جدا مهم ، فهو مدخلك الحقيقي الى لغة CSS لكن سنتطرق اليه سريعا في هذا الدرس .

تخيّل أن الوسم (Tag) هو السيارة، والخصائص (Attributes) هي المفتاح + البنزين + لون السيارة + السرعة القصوى + حتى لوحة الأرقام!

بدون خصائص → الوسم موجود لكن "مشلول"
مع الخصائص → الوسم يشتغل بذكاء ويصير قوي جدًا!

ما هي الخصائص (Attributes)؟ 🏷️

الخاصية أو الخصيصة attribute هي معلومة إضافية تُكتب داخل وسم الافتتاح، وتتكون دائمًا من:

<اسم_الوسم/> المحتوى < "قيمة"=خصيصةاسم_الوسم>

🔑

اسم الخصيصة

مثل: src, href, class, id

علامة يساوي

ممنوع نسيانها!

القيمة بين علامتي تنصيص

حتى لو رقم، لازم تنصيص

أهم 15 خصيصة في HTML (ستحتاجهم في كل صفحة الكترونية)

الخصيصة	لأي وسم؟	مثال	وظيفتها باختصار
class	كل الوسوم	`"class="btn red`	للتنسيق بـ CSS (أهم خصيصة!)
id	كل الوسوم (فريد)	`"id="header`	معرّف فريد للجافاسكربت و CSS
src	img, video, audio, script	`"src="photo.jpg`	مكان الملف
alt	img, area	`"قطة جميلة"=alt`	نص بديل + سيو + ذوي الإعاقة
href	a, link	`href="https://google.com"=href`	الرابط اللي يروح له
target	a, form	`"target="_blank`	_blank = تبويب جديد
style	كل الوسوم	`";style="color:red`	تنسيق مباشر (للتجربة)
title	معظم الوسوم	`"تلميح"=title`	نص يظهر عند التمرير
width & height	img, video, table...	`"width="500`	العرض والارتفاع (بكسل)
lang	html	`"lang="ar`	لغة الصفحة
dir	html أو أي وسم	`"dir="rtl`	اتجاه الكتابة
placeholder	input, textarea	`"اكتب اسمك"=placeholder`	نص تلميح داخل الحقل
type	input, button	`"type="submit`	نوع الحقل أو الزر
name	input, form	`"name="email`	اسم الحقل للخادم
disabled	input, button...	`disabled`	تعطيل العنصر (بدون قيمة)

قبل استخدام الخصائص vs بعد استخدام الخصائص

بدون خصائص (ضعيف جدًا)

انظر الى المثال التالي لم نستخدم الخصائص في كتابة أكواد ال html لذلك الصورة لن تكون موجودة لاننا لم نسخدم الخاصية التي تخبرنا بمكان الصورة وأيضا الرابط لن ينقلنا الى اي مكان لاننا لم نستخدم الخاصية التي تخبرنا اين نضهب عند الضغط على الرابط . ايضا نص القطعة غير منسق لعدم وجود خاصية تنسيق الخط

<img>
<a>اضغط هنا</a>
<p>نص عادي</p>

مع الخصائص (قوي 100%)

بينما بالمثال التالي تم استخدام الخصائص لذلك ستظهر الصفحة بشكل واضح وجميل ومرتب ، تم استخدام الخصائص التالية:

خاصية src لعرض مكان الصورة ( موقع تخزين الصورة حتى يتمكن المتصفحة من جلبها وعرضها بالمتصفح)
خاصية alt وهي التي تعرض رسالة نصية عن الصورة المستخدمة وذلك في حال تعذر الوصول للصورة اما لحذفها او لأي مشكلة أخرى.
خاصية href ,وهي تستخدم مع الروابط ونذكر بها عنوان الصفحة المطلوب الانتقال اليها
خاصية target وهي التي نستخدمها لتحديد اذا كان الانتقال للصفحة الاخرى بنفس الصفحة الحالية او فتح تبويب جديد بالمتصفح.
خاصية class وهي التي نستخدمها لتنسيق الصفحة . سيتم شرحها بالتفصيل في دورة CSS

<img src="cat.jpg" alt="قطة"
     width="400" class="myclass">

<a href="https://youtube.com" target="_blank" class="btn">
  شاهد الفيديو
</a>

<p class="myclass2" title="فقرة مهمة">
  نص منسق وجميل
</p>

تمرين اليوم: اكتب لي هذه العناصر مع كل الخصائص الصحيحة!

1. صورة شخصية كاملة المواصفات

 <img src="my-photo.jpg"
alt="صورة أحمد الشخصية"
width="300"
height="300"
class="myclass"
title="أحمد - مطور ويب">

2. رابط يفتح في تبويب جديد مع تنسيق

<a href="https://github.com/ahmed"
target="_blank"
class="myclass">
  حسابي على جيت هب
</a>

مهمتك الآن:

افتح محرر النصوص
اكتب صفحة HTML كاملة
استخدم 10 خصائص على الأقل من اللي فوق
افتحها في المتصفح… واستمتع بالنتيجة!

خلاصة الدرس في ٦ نقاط ذهبية

الخصائص تُكتب في وسم الافتتاح فقط

class و id هما الأهم للـ CSS

دائمًا ضع alt للصور

القيم دائمًا بين علامتي تنصيص

يمكنك وضع أكثر من class

الخصائص تحول الوسم من عادي إلى خارق!

الدرس القادم: الجداول والنماذج في HTML

سنتعلم كيف نبني جداول بيانات ونماذج تسجيل/اتصال حقيقية!