سمات HTML
HTML Attributes
توفر سمات HTML معلومات إضافية حول عناصر HTML.
- يمكن أن تحتوي جميع عناصر HTML على سمات
- توفر السمات معلومات إضافية حول العناصر
- يتم تحديد السمات دائمًا في وسم البداية
- تأتي السمات عادةً في أزواج الاسم / القيمة مثل: الاسم = "القيمة"
السمة href
The href Attribute
يحدد الوسم <a> الارتباط التشعبي. تحدد السمة href عنوان URL للصفحة التي ينتقل إليها الارتباط:
مثال
--------
<a href="https://hijaz-ar.blogspot.com">قم بزيارة مدونة الحجازالتقنية</a>
---------------------
يظهر الكود السابق بالشكل :
سوف تتعلم المزيد عن الروابط في فصل روابط HTML ان شاء الله
السمة src
The src Attribute
يستخدم وسم <img> لتضمين صورة في صفحة HTML. تحدد السمة src مسار الصورة المراد عرضها:
<img src="img_girl.jpg">
تظهر الصورة بالشكل :
هناك طريقتان لتحديد عنوان URL في سمة src:
1. URL مطلق - روابط إلى صورة خارجية مستضافة على موقع ويب آخر. مثال: src = "https://www.w3schools.com/images/img_girl.jpg".
ملاحظات: قد تكون الصور الخارجية محمية بحقوق النشر. إذا لم تحصل على إذن لاستخدامها ، فقد تكون قد انتهكت قوانين حقوق النشر. بالإضافة إلى ذلك ، لا يمكنك التحكم في الصور الخارجية ؛ يمكن إزالتها أو تغييرها فجأة.
2. URL النسبي - روابط لصورة مستضافة داخل الموقع. هنا ، لا يتضمن عنوان URL اسم المجال. إذا بدأ عنوان URL بدون شرطة مائلة ، فسيكون متعلقًا بالصفحة الحالية. مثال: src = "img_girl.jpg". إذا بدأ عنوان URL بشرطة مائلة ، فسيكون مرتبطًا بالدومين (اسم لبنطاق). مثال: src = "/ images / img_girl.jpg".
نصيحة: من الأفضل دائمًا استخدام عناوين URL النسبية. لن تفقدها إذا قمت بتغيير المجال.
سمات العرض (width) والارتفاع (height )
The width and height Attributes
يجب أن يحتوي وسم <img> أيضًا على سمات العرض والارتفاع ، والتي تحدد عرض الصورة وارتفاعها (بالبكسل):
مثال
---------
<img src="img_girl.jpg" width="500" height="600">
------------------
تظهر الصورة بالشكل
--------------
<img src="img_girl.jpg" alt="فتاة ترتدي سترة">--------------------------
الكود
--------
<img src="img_typo.jpg" alt="فتاة ترتدي سترة">
---------------------------
يظهر كالتالي
سوف تتعلم المزيد عن الصور في درس صور HTML ان شاء الله .
سمة النمط او استايل style
The style Attribute
تُستخدم سمة النمط لإضافة أنماط إلى عنصر ، مثل اللون والخط والحجم ...الخ.
مثال :
-----------
<p style="color:red;">هذه فقرة باللون الأحمر</p>
--------------------------
يظهر الكود بالشكل :
هذه فقرة باللون الأحمر
سمة اللغة lang
The lang Attribute
يجب عليك دائمًا تضمين سمة lang داخل علامة <html> للإعلان عن لغة صفحة الويب. هذا يهدف إلى مساعدة محركات البحث والمتصفحات.
يحدد المثال التالي اللغة الإنجليزية كلغة:
-----------------
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
<html lang="en">
<body>
...
</body>
</html>
-------------------------------
يمكن أيضًا إضافة رموز البلدان إلى رمز اللغة في سمة lang. لذا ، فإن أول حرفين يحددان لغة صفحة HTML ، ويحدد الحرفان الأخيران البلد.
يحدد المثال التالي اللغة الإنجليزية كلغة والولايات المتحدة هي الدولة:
----------------
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
<html lang="en-US">
<body>
...
</body>
</html>
-----------------------------
السمة title (العنوان)
The title Attribute
تحدد سمة title بعض المعلومات الإضافية حول العنصر.
سيتم عرض قيمة سمة العنوان كأداة تلميح tooltip عند تحريك الماوس فوق العنصر:
الكود
-------------
<p title="انااداة تلميح">هذه فقرة.</p>
--------------------------
هذه فقرة.
نقترح: كتابة السمات بأحرف انكليزية صغيرة دومًا (lowercase)
لا يتطلب معيار HTML كتابة السمات بأحرف صغيرة.
يمكن كتابة سمة العنوان title (وجميع السمات الأخرى) بأحرف كبيرة أو صغيرة مثل title أو TITLE.
ومع ذلك ، توصي W3C باستخدام سمات الأحرف الصغيرة في HTML ، وهناك انواع من المستندات يجب كتابة السمات فيها بأحرف صغيرة مثل XHTML.
هنا في مدونة الحجاز التقنية نكتب دوما اكواج HTML بأحرف انجليزية صغيرة
نقترح وضع قيم السمات بين اشارتي اقتباس ("") دوما
لا يتطلب معيار HTML علامات اقتباس حول قيم السمات.
ومع ذلك ، توصي W3C بعلامات اقتباس بتنسيق HTML ، ويجب استخدام الأقتباس في بعض أنواع المستندات ا مثل XHTML.
الكود التالي جيد :
------------------
<a href="https://hijaz-ar.blogspot.com/">تفضل بزيارة الحجاز التقنية </a>
------------------------------------
الكود التالي سيئ
--------------------
<a href=https://hijaz-ar.blogspot.com/>تفضل بزيارة مدونة الحجاز التقنية</a>
-----------------------------------------
في بعض الأحيان عليك استخدام الاقتباسات. لن يعرض هذا المثال سمة العنوان بشكل صحيح ، لأنها تحتوي على مسافة:
---------------
<p title=الحجاز التقنية>
-------------------------------
هنا في مدونة الحجاز التقنية ، نستخدم دائمًا علامات الاقتباس حول قيم السمات.
اقتباسات مفردة أو مزدوجة؟
علامات الاقتباس المزدوجة حول قيم السمات هي الأكثر شيوعًا في HTML ، ولكن يمكن أيضًا استخدام علامات الاقتباس المفردة.
في بعض الحالات ، عندما تحتوي قيمة السمة نفسها على علامات اقتباس مزدوجة ، من الضروري استخدام علامات الاقتباس المفردة:
--------------
<p title='سعود "منار" فهد'>
--------------------------------
او العكس
-----------------
<p title="سعود 'منار' فهد">
-----------------------------
ملخص الدرس :
- يمكن أن تحتوي جميع عناصر HTML على سمات
- تحدد سمة href لـ <a> عنوان URL للصفحة التي ينتقل إليها الارتباط
- تحدد السمة src الخاصة بـ <img> المسار إلى الصورة المراد عرضها
- توفر سمات العرض
widthوالارتفاعheightالخاصة بـ <img> معلومات عن حجم الصور - توفر سمة alt لـ <img> نصًا بديلاً للصورة
- تُستخدم سمة النمط
styleلإضافة أنماط إلى عنصر ، مثل اللون والخط والحجم والمزيد - تحدد سمة lang لوسم <html> لغة صفحة الويب
- تحدد سمة العنوان title بعض المعلومات الإضافية حول العنصر
انتهى الدرس.
ليست هناك تعليقات:
إرسال تعليق