سمات لغة HTML – كيف تمنح عناصرك قوة إضافية؟

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

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

ما هي سمات HTML؟ وكيف نستخدمها؟

سمات HTML هي معلومات إضافية تُضاف إلى وسم البداية للعنصر. هذه المعلومات تصف خصائص العنصر أو تعدل سلوكه. كل سمة تتكون من اسم و قيمة، وتُكتب على النحو التالي: اسم_السمة= =”قيمة_السمة”. تُوضع السمات دائماً داخل وسم البداية للعنصر.

مثال بسيط:

<a href="https://www.google.com">اذهب إلى جوجل</a>

في هذا المثال:

<a> هو العنصر الذي يمثل رابطاً تشعبياً.

href هو اسم السمة، ويشير إلى “Hypertext Reference” (مرجع النص التشعبي ).

“https://www.google.com” هي قيمة السمة، وتحدد الوجهة التي سيذهب إليها الرابط عند النقر عليه.

اذهب إلى جوجل هو المحتوى المرئي للرابط.

قد يهمك أيضاً : ما هي أهم ميزات HTML5 للمطورين؟

بدون سمة href، فإن وسم <a> لن يكون له أي وظيفة كـ “رابط”، بل سيكون مجرد نص عادي. هذا يوضح كيف أن السمات تمنح العناصر وظائف وخصائص إضافية.

سمات لغة HTML الشائعة: تعرف على بعضها!

هناك العديد من السمات في HTML، ولكن دعونا نركز على بعض السمات الأكثر استخداماً وأهمية للمبتدئين.

1. سمة href (لإنشاء الروابط )

– تُستخدم مع: وسم <a> .

– الوظيفة: تحدد عنوان URL (المسار) للصفحة التي سيوجه إليها الرابط عند النقر عليه. إنها أساس التنقل بين صفحات الويب.

مثال :

<a href="https://www.example.com">زيارة موقع المثال</a>

– <a: بداية وسم الرابط التشعبي.

– href: اسم السمة التي تحدد وجهة الرابط.

– =”https://www.example.com”: قيمة السمة href. هنا، https://www.example.com هو العنوان الكامل للصفحة التي سيتم الانتقال إليها. هذا يسمى مسار مطلق (Absolute URL ) لأنه يشمل كل تفاصيل العنوان من البروتوكول (https:// ) واسم النطاق (www.example.com).

– >: إغلاق وسم البداية.

– زيارة موقع المثال: النص الذي سيظهر للمستخدم كـ “رابط” يمكن النقر عليه.

– </a>: وسم النهاية للرابط.

2. سمة src (لمصادر الوسائط)

– تُستخدم مع: وسوم مثل <img> (للصور)، <script> (للملفات النصية البرمجية)، <audio> (للملفات الصوتية)، <video> (لملفات الفيديو).

– الوظيفة: تحدد المسار (Source) للملف الذي سيتم تضمينه أو عرضه في الصفحة.

مثال :

<img src="images/my_image.jpg" alt="صورة توضيحية">

– <img: بداية وسم الصورة. تذكروا أن <img> هو عنصر فارغ لا يحتاج لوسم إغلاق.

– src: اسم السمة التي تحدد مصدر الصورة.

– =”images/my_image.jpg”: قيمة السمة src. هنا، images/my_image.jpg هو المسار إلى ملف الصورة. هذا يسمى مسار نسبي (Relative URL) لأنه يشير إلى مكان الصورة بالنسبة لموقع ملف HTML الحالي. إذا كان ملف HTML في نفس المجلد الذي يحتوي على مجلد images، فسيعرف المتصفح أين يجد الصورة.

– alt: اسم السمة التي تحدد نصاً بديلاً (Alternative Text) للصورة.

– =”صورة توضيحية”: قيمة السمة alt. هذا النص مهم جداً لعدة أسباب:

يظهر هذا النص إذا لم يتمكن المتصفح من تحميل الصورة (بسبب مشكلة في المسار، أو ضعف الاتصال بالإنترنت).

تستخدمه برامج قراءة الشاشة (Screen Readers) لوصف الصورة للمستخدمين ضعاف البصر أو المكفوفين، مما يجعل موقعك أكثر سهولة في الوصول (Accessible).

يساعد محركات البحث على فهم محتوى الصورة، مما يحسن من تحسين محركات البحث (SEO) لموقعك.

– >: إغلاق وسم الصورة.

الفرق بين المسار المطلق والمسار النسبي (في src و href)

المسار المطلق (Absolute URL): هو عنوان كامل يبدأ بالبروتوكول (مثل http:// أو https:// ) ويشمل اسم النطاق كاملاً. يُستخدم للإشارة إلى موارد موجودة على مواقع ويب أخرى أو عندما تريد تحديد المسار بشكل كامل بغض النظر عن موقع ملف HTML الحالي.

– مثال: https://www.google.com/images/logo.png

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

المسار النسبي (Relative URL): هو عنوان يشير إلى مورد (صورة، صفحة أخرى) بالنسبة لموقع ملف HTML الحالي. يُستخدم عادةً للموارد الموجودة داخل نفس موقع الويب.

– مثال: images/my_image.jpg (إذا كانت الصورة في مجلد images داخل نفس مجلد ملف HTML).

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

3. سمة lang (لتحديد اللغة)

– تُستخدم مع: وسم <html>.

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

مثال :

<html lang="ar">

– <html: بداية وسم HTML الجذري.

– lang: اسم السمة التي تحدد اللغة.

– =”ar”: قيمة السمة lang. هنا، ar هو رمز اللغة العربية. يمكنكم أيضاً تحديد لغة معينة مع رمز البلد، مثل lang=”en-US” للإنجليزية الأمريكية أو lang=”fr-CA” للفرنسية الكندية.

– >: إغلاق وسم البداية.

4. سمة title (للتلميحات)

– تُستخدم مع: معظم عناصر HTML.

– الوظيفة: توفر معلومات إضافية حول العنصر تظهر عادةً كتلميح (Tooltip) عند تمرير مؤشر الفأرة فوق العنصر. إنها طريقة رائعة لتقديم توضيحات قصيرة للمستخدم دون شغل مساحة دائمة على الشاشة.

مثال :

<p title="هذه فقرة توضيحية.">مرر مؤشر الفأرة فوقي!</p>

– <p: بداية وسم الفقرة.

– title: اسم السمة التي تحدد التلميح.

– =”هذه فقرة توضيحية.”: قيمة السمة title. هذا النص سيظهر عندما يضع المستخدم مؤشر الفأرة فوق الفقرة.

– >: إغلاق وسم البداية.

– مرر مؤشر الفأرة فوقي!: المحتوى المرئي للفقرة.

– </p>: وسم النهاية للفقرة.

5. سمتا width و height (للأبعاد)

– تُستخدم مع: وسوم مثل <img> و <video>.

– الوظيفة: تحدد عرض (width) وارتفاع (height) العنصر بالبكسل. تحديد هذه السمات يساعد المتصفح على حجز المساحة المناسبة للعنصر قبل تحميله بالكامل، مما يمنع حدوث “قفزات” في تخطيط الصفحة أثناء التحميل ويحسن تجربة المستخدم.

مثال :

<img src="logo.png" alt="شعار الموقع" width="150" height="75">

– <img src=”logo.png” alt=”شعار الموقع”: كما شرحنا سابقاً، هذا يحدد مصدر الصورة ونصها البديل.

– width: اسم السمة التي تحدد العرض.

– =”150″: قيمة السمة width. هنا، 150 بكسل.

– height: اسم السمة التي تحدد الارتفاع.

– =”75″: قيمة السمة height. هنا، 75 بكسل.

– >: إغلاق وسم الصورة.

6. سمة style (للتنسيق المباشر)

– تُستخدم مع: معظم عناصر HTML.

– الوظيفة: تسمح بإضافة تنسيقات CSS مباشرة إلى العنصر. على الرغم من أنها مفيدة للتنسيقات السريعة أو الاختبار، إلا أنه يُفضل عموماً استخدام ملفات CSS خارجية لتنسيق الصفحات الكبيرة والمعقدة للحفاظ على فصل الهيكل عن التنسيق.

مثال :

<p style="color: blue; font-size: 18px;">هذه فقرة باللون الأزرق وحجم خط كبير.</p>

– <p: بداية وسم الفقرة.

– style: اسم السمة التي تسمح بإضافة تنسيقات CSS.

– =”color: blue; font-size: 18px;”: قيمة السمة style. هنا، color: blue; يجعل لون النص أزرق، و font-size: 18px; يجعل حجم الخط 18 بكسل. لاحظ استخدام الفاصلة المنقوطة (;) للفصل بين خصائص CSS المختلفة.

– >: إغلاق وسم البداية.

– هذه فقرة باللون الأزرق وحجم خط كبير.: المحتوى المرئي للفقرة.

– </p>: وسم النهاية للفقرة.

نصائح عملية ومفاهيم مهمة حول سمات لغة HTML

حالة الأحرف (Case Sensitivity) في أسماء السمات وقيمها

أسماء السمات: تماماً مثل أسماء الوسوم، توصي منظمة W3C بشدة باستخدام الأحرف الصغيرة (lowercase) لأسماء السمات (مثل href، src، alt). هذا يضمن أفضل الممارسات والتوافقية.

قيم السمات: قيم السمات (مثل “https://www.google.com” أو “صورة توضيحية” ) حساسة لحالة الأحرف في معظم الحالات، خاصة عندما تكون هذه القيم مسارات لملفات أو عناوين URL. لذا، يجب كتابتها بدقة.

علامات الاقتباس حول قيم السمات

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

متى نستخدم علامات الاقتباس المفردة (‘ ‘)؟

يتم اللجوء إلى علامات الاقتباس المفردة عندما تحتوي قيمة السمة نفسها على علامات اقتباس مزدوجة. على سبيل المثال:

<button onclick='alert("مرحباً بالعالم!")'>انقر هنا</button>

هنا، قيمة السمة onclick تحتوي على نص “مرحباً بالعالم!” الذي هو نفسه محاط بعلامات اقتباس مزدوجة. لو استخدمنا علامات اقتباس مزدوجة لـ onclick، لحدث تضارب. لذا، نستخدم علامات اقتباس مفردة لتغليف القيمة الخارجية.

مثال عملي يجمع كل شيء

دعونا نطبق ما تعلمناه في مثال شامل يوضح استخدام السمات المختلفة:

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>درس سمات HTML</title>
</head>
<body>
<h1>مرحباً بكم في درس سمات HTML!</h1>
<p>في هذا الدرس، نتعلم كيف نضيف معلومات إضافية لعناصرنا.</p>
<h2>روابط مفيدة:</h2>
<p> <a href="https://www.w3.org/" title="الموقع الرسمي لمنظمة W3C" target="_blank">زيارة موقع W3C</a> <a href="/about.html">معلومات عنا</a> </p>
<h2>صورة توضيحية:</h2>
<img src="images/web_development.jpg" alt="صورة توضيحية لتطوير الويب" width="400" height="250" style="border: 2px solid blue; padding: 5px;">
<p style="color: green; font-weight: bold;">هذه فقرة منسقة باستخدام سمة style.</p>
<p>شكراً لكم على متابعة الدرس.</p>
</body>
</html>

شرح مفصل للكود:

<!DOCTYPE html>

و

<html lang="ar">

و

<head>

و

<body>

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

قد يهمك أيضاً : كيفية استخدام عناصر HTML في تصميم صفحات الويب ؟

<title>درس سمات</title>

عنوان الصفحة في المتصفح.

<h1>مرحباً بكم في درس سمات</h1>

عنوان رئيسي.

<p>في هذا الدرس، نتعلم كيف نضيف معلومات إضافية لعناصرنا.</p>

فقرة عادية.

<h2>روابط مفيدة:</h2>

عنوان فرعي.

<a href="https://www.w3.org/" title="الموقع الرسمي لمنظمة W3C" target="_blank">

زيارة موقع W3C.

href=”https://www.w3.org/”: مسار مطلق لموقع W3C.

title="الموقع الرسمي لمنظمة W3C"

تلميح يظهر عند تمرير الفأرة.

target="_blank"

سمة جديدة! هذه السمة تجعل الرابط يفتح في علامة تبويب جديدة في المتصفح. قيمة _blank هي الأكثر شيوعاً هنا.

زيارة موقع W3C: النص المرئي للرابط.

<a href="/about.html">معلومات عنا</a>:

href="/about.html"

مسار نسبي لصفحة “معلومات عنا” داخل نفس الموقع. يبدأ بـ / ليعني “من جذر الموقع”.

<h2>صورة توضيحية:</h2>

عنوان فرعي.

<img src="images/web_development.jpg" alt="صورة توضيحية لتطوير الويب" width="400" height="250" style="border: 2px solid blue; padding: 5px;">:

src="images/web_development.jpg"

مسار نسبي للصورة.

alt="صورة توضيحية لتطوير الويب"

نص بديل للصورة.

width="400"

عرض الصورة 400 بكسل.

height="250"

ارتفاع الصورة 250 بكسل.

style="border: 2px solid blue; padding: 5px;"

تنسيق مباشر للصورة، يضيف حدوداً زرقاء وحشواً داخلياً.

<p style="color: green; font-weight: bold;">هذه فقرة منسقة باستخدام سمة style.</p>

فقرة بتنسيق مباشر (لون أخضر وخط عريض ).

<p>شكراً لكم على متابعة الدرس.</p>

فقرة ختامية.

كيفية تطبيق هذا الدرس عملياً

1.إنشاء ملف HTML: افتحوا محرراً نصياً (مثل VS Code).

2.انسخوا الكود: انسخوا الكود الكامل للمثال العملي والصقوه في المحرر.

3.احفظوا الملف: احفظوا الملف باسم attributes_lesson.html وتأكدوا من اختيار امتداد .html ومن أن الترميز هو UTF-8.

4.إنشاء مجلد للصور (اختياري): إذا أردتم أن تظهر الصورة في المثال، قوموا بإنشاء مجلد باسم images في نفس المكان الذي حفظتم فيه ملف attributes_lesson.html. ضعوا أي صورة بداخله وسموها web_development.jpg.

5.افتحوا في المتصفح: انقروا نقراً مزدوجاً على الملف المحفوظ، وسيُفتح في متصفح الويب الافتراضي لديكم. ستشاهدون صفحتكم الجديدة مع الروابط والصور والتنسيقات التي أضفناها بالسمات!

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

لماذا سمات لغة HTML مهمة جداً؟

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

إن فهم كيفية استخدام السمات بشكل صحيح هو خطوة أساسية نحو بناء صفحات ويب ديناميكية، تفاعلية، وسهلة الاستخدام. تذكروا دائماً أن السمات هي “المعلومات الإضافية” التي تجعل عناصركم أكثر ذكاءً وفائدة.

استمروا في الممارسة، ولا تترددوا في استكشاف المزيد من السمات الموجودة في HTML. عالم الويب مليء بالإمكانيات، وأنتم الآن تملكون المزيد من الأدوات لاستكشافه! حظاً موفقاً في رحلتكم التعليمية!

الملخص :