مدخل الى لغة html (خواص عناصر HTML)
استكمالاً
لحديثنا المتواصل عن HTML كأحد أهم لغات برمجة المواقع٬ نتواصل معكم اليوم
بإذن الله.
تكلمنا في تدوينتين سابقتين عن ما يسمى بعناصر HTML٬ واليوم بإذن الله نتحدث عن خواص تلك العناصر.
تكلمنا في تدوينتين سابقتين عن ما يسمى بعناصر HTML٬ واليوم بإذن الله نتحدث عن خواص تلك العناصر.
يمكنك
مراجعة الموضوعين السابقين لتمام الاستيعاب بإذن الله :
خواص عناصر HTML :
كل عناصر HTML
لها خواص افتراضية " default attributes " بحيث لو تم إنشاء
عنصر من تلك العناصر فإنه يأخذ تلك الخواص تلقائياً.
ماذا لو أردنا تغيير خاصية من تلك الخواص أثناء التصميم؟
ماذا لو أردنا تغيير خاصية من تلك الخواص أثناء التصميم؟
ماذا لو
أردنا إضافة معلومات أو خواص إضافية لتلك العناصر؟
الحل في درسنا اليوم بإذن الله.
الحل في درسنا اليوم بإذن الله.
ما هي صيغة خواص عناصر HTML ؟ وأين يتم وضعها ؟
تأخذ خواص
العناصر في HTML تلك الصيغة : name="value"
حيث أن :
* " name " : تأخذ اسم الخاصية.
حيث أن :
* " name " : تأخذ اسم الخاصية.
* " value " : تأخذ قيمة الخاصية.
وتوضع تلك
الخواص بداخل وسم البداية للعنصر.
خاصية " lang " :
يمكن
التعبير عن لغة وثيقة HTML عن طريق خاصية " lang " والتي يتم وضعها
بداخل الوسم : <html>
وتبرز أهمية ذلك في ضرورة تعرف محركات البحث على لغة الوثيقة التي تقوم بعرضها.
وتبرز أهمية ذلك في ضرورة تعرف محركات البحث على لغة الوثيقة التي تقوم بعرضها.
مثال لذلك
:
<!DOCTYPE html><html lang="ar-EG"><body>...</body></html>
* لاحظ أولاً أن الخاصية تم وضعها بداخل وسم البداية - كما ذكرنا - للعنصر <html> .
* لاحظ معي : أن الحرفين الأولين " ar " يعبران عن اللغة -
وهي هنا العربية. وفي حالة وجود أكثر من لهجة يتم استخدام حرفين آخرين " EG
" - وتعني المصرية.
* يمكنك
التعبير عن لغة الوثيقة كاللغة الانجليزية باللهجتين البريطانية " British English " أو الأمريكية " American
English
" بنفس الطريقة هكذا :
<html lang="en-BR">أو<html lang="en-US">
خاصية " title " :
هذه
الخاصية يتم استخدامها عند إرادة التلميح بمعنى أو عنوان معين عن شئ ما٬ وعند
المرور بالماوس على هذا الشئ يظهر هذا المعنى أو العنوان على هيئة تلميح.
ويتم استخدام هذه الخاصية داخل العنصر <p> .
ويتم استخدام هذه الخاصية داخل العنصر <p> .
مثال :
تأمل معي الكود التالي :
<p title="الحث على إتقان العمل">قال رسول الله صلى الله عليه وسلم : إن الله يحب إذا عمل أحدكم عملاً أن يتقنه</p>
هذا الكود عبارة عن فقرة <p> لحديث نبوي شريف يحث على إتقان العمل٬ وعند الإشارة أو
المرور بالماوس على هذه الفقرة يظهر هذه الجملة كتلميح : " الحث على إتقان
العمل " كما بالصورة التالية :
قال رسول الله صلى الله عليه وسلم : إن الله يحب إذا عمل أحدكم عملاً أن يتقنه
خاصية " href " :
يتم
استخدام خاصية <href> مع الروابط٬ ويتم التعبير عن الروابط في لغة HTML
بالوسم <a> هكذا :
لاحظ استخدام خاصية " href " في ذكر عنوان الرابط المراد الوصول إليه.
مثال :
وفي المثال السابق النتيجة تظهر كرابط باسم " مثال لرابط " - وهي الكلمة المذكورة في المثال بالأعلى والتي تظهر للمتصفح ويمكنك استبدالها بما تريد - وعند النقر عليه بالماوس يقودك إلى عنوان الرابط المراد الوصول إليه والمذكور في المثال وهو رابط مدونتنا ويظهر كما يلي :
<a href="مثال لرابط<"عنوان الرابط</a>
لاحظ استخدام خاصية " href " في ذكر عنوان الرابط المراد الوصول إليه.
مثال :
<a href="http://profit-tech.blogspot.com">مثال لرابط</a>
وفي المثال السابق النتيجة تظهر كرابط باسم " مثال لرابط " - وهي الكلمة المذكورة في المثال بالأعلى والتي تظهر للمتصفح ويمكنك استبدالها بما تريد - وعند النقر عليه بالماوس يقودك إلى عنوان الرابط المراد الوصول إليه والمذكور في المثال وهو رابط مدونتنا ويظهر كما يلي :
خاصية " src " في الصور :
يتم تعريف
الصور في لغة HTML بالعنصر <img> .
ويمكن
تعريف رابط أو مصدر الصورة " source " بالخاصية " src " كما يلي :
<img src="مصدر الصورة">
مثال لذلك :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif9ieLB_wziDNEco7s4PyABaknMQ2Qmc51ulx4rTPPUNz2AoJGMsM07lO8WjLp6ZaW9S8GIpIRP16wjoz7Fbs9M8t9U6pyVOPfF2Y6oqPTSVpnOIfx9W1lqix6nyCymVqn8NS_Kkz9xBPp/s260/Logo3.png">
وتكون النتيجة كما يلي :
خاصية " width " و " height " في الصور :
يمكنك ضبط
أحجام الصور في لغة HTML عن طريق خاصيتي العرض " width
" والارتفاع " height " هكذا :
حيث أن : "x" : هو عرض الصورة و " y " : هو ارتفاع الصورة.
<img src="رابط الصورة" width="x" height="y">
حيث أن : "x" : هو عرض الصورة و " y " : هو ارتفاع الصورة.
مثال لذلك :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif9ieLB_wziDNEco7s4PyABaknMQ2Qmc51ulx4rTPPUNz2AoJGMsM07lO8WjLp6ZaW9S8GIpIRP16wjoz7Fbs9M8t9U6pyVOPfF2Y6oqPTSVpnOIfx9W1lqix6nyCymVqn8NS_Kkz9xBPp/s260/Logo3.png" width="260" height="144">
* مع ملاحظة أن العرض والارتفاع هنا بالبيكسيل " pixel ".
وسنتطرق بإذن الله للمزيد من التفاصيل عن الصور والعنصر <img> لاحقاً في دروسنا القادمة.
خاصية " alt " في الصور :
يتم
استخدام خاصية "alt" لعرض نص بديل للصورة " alternative
text "
في حالة تعذر عرضها نتيجة ضعف اتصال الانترنت أو كتابة رابط غير صحيح للصورة أو
غيره من الأسباب.
ويتم التعبير عن هذه الخاصية هكذا :
مثال لذلك :
وتكون النتيجة هكذا :
ويتم التعبير عن هذه الخاصية هكذا :
<img src="رابط الصورة" alt="النص البديل" width="العرض" height="الارتفاع">
مثال لذلك :
<img src="https://lh3.googleusercontent.com/SNn/Logo3.png" alt="لوجو مدونة فن الربح" width="260" height="144">
وتكون النتيجة هكذا :
استخدام الأحرف الصغيرة في كتابة خواص عناصر HTML :
HTML5 لا تشترط استخدام الأحرف
الصغيرة في كتابة أسماء خواص العناصر في HTML.
فمثلاً : خاصية " title " يمكن كتابتها بالأحرف الكبيرة " TITLE " أو الصغيرة " title ".
لكن رابطة الشبكة العالمية " WC3 " تنصح باستخدام الحروف الصغيرة في HTML وما شابهها مثل XHTML .
فمثلاً : خاصية " title " يمكن كتابتها بالأحرف الكبيرة " TITLE " أو الصغيرة " title ".
لكن رابطة الشبكة العالمية " WC3 " تنصح باستخدام الحروف الصغيرة في HTML وما شابهها مثل XHTML .
ضرورة استخدام أقواس الاقتباس للتعبير عن قيم خواص عناصر HTML :
HTML5 لا تشترط استخدام أقواس
الاقتباس حول قيم عناصر HTML هكذا : "value"name=
.
فمثلاً : خاصية href التي تم شرحها بالأعلى تكتب هكذا - لاحظ الأقواس حول عنوان الرابط " " :
فمثلاً : خاصية href التي تم شرحها بالأعلى تكتب هكذا - لاحظ الأقواس حول عنوان الرابط " " :
<a href="http://profit-tech.blogspot.com">
ويمكن كتابتها بدون أقواس اقتباس - كما يلي :
<a href=http://profit-tech.blogspot.com>
لكن رابطة الشبكة العالمية " WC3 " تنصح باستخدام أقواس الاقتباس في HTML وما شابهها مثل XHTML .
كذلك من الأهمية بمكان القول بضرورة استخدام أقواس الاقتباس في خواص عناصر HTML في بعض الحالات كمثال :
<p title=مدونة فن الربح>مدونة فن الربح مدونة تهدف للتعريف بطرق الربح عن طريق جوجل أدسنس وتطوير منصة بلوجر</p>
والنتيجة تكون هكذا :
مدونة فن الربح مدونة تهدف للتعريف بطرق الربح عن طريق جوجل أدسنس وتطوير منصة بلوجر
في نتيجة المثال السابق لو أشرت بالماوس على الفقرة المكتوبة سيظهر لك تلميح " مدونة " مع أن المفترض أن يظهر لك تلميح " مدونة فن الربح " حسب المثال بالأعلى.
ما حدث هو أن المتصفح ترجم التلميح على أنه أول كلمة فقط في الخاصية " title " بسبب وجود مسافة بين كلمات الخاصية٬ لكن لو تم وضع قيمة الخاصية " title " بين قوسي اقتباس لاعتبر كل ما بين قوسي الاقتباس - طال أم قصر - تلميحاً للفقرة و لظهر التلميح كاملاً " مدونة فن الربح " - كما بالمثال التالي :
<p title="مدونة فن الربح">مدونة فن الربح مدونة تهدف للتعريف بطرق الربح عن طريق جوجل أدسنس وتطوير منصة بلوجر</p>
والنتيجة ستكون هكذا :
مدونة فن الربح مدونة تهدف للتعريف بطرق الربح عن طريق جوجل أدسنس وتطوير منصة بلوجر
لاحظ ظهور التلميح كاملاً " مدونة فن الربح " عند المرور بالماوس فوق الفقرة بالمثال بالأعلى بعكس المثال السابق له٬ لذلك وجب استخدام قوسي الاقتباس للتعبير عن قيمة خواص عناص HTML تفادياً لأخطاء مثل هذه وغيرها مما قد لا يخطر لك على بالٍ.
أقواس الاقتباس الزوجية أم الفردية ؟
استخدام
أقواس الاقتباس الزوجية " " حول
قيم خواص عناصر HTML هي الأكثر شيوعاً٬ وإن كان استخدام أقواس
الاقتباس الفردية ' ' جائزاً هكذا :
<p title="مدونة فن الربح">
أو<p title='مدونة فن الربح'>
لكن في بعض المواقف عندما يكون هناك أقواس اقتباس زوجية في قيم عناصر HTML نفسها٬ فإنه يتحتم علينا استخدام أقواس الاقتباس الفردية.
مثال لذلك :
<p title='فتح "سيف الله" بلاد فارس'>أو هكذا<p title="فتح 'سيف الله' بلاد فارس">
لاحظ استخدام أقواس الاقتباس بالتبادل وهي جائزة في الحالتين.
وسنحاول بإذن الله التعرض لبعض خواص عناصر HTML الأخرى التي لم نأت على ذكرها في درسنا اليوم في دروس قادمة تباعاً.
أضف تعليق