واصفات الوسوم وعناصر العناوين وعنصر الخط الأفقي والتعليقات

عدد مشاهدات الموضوع:


واصفات الوسوم Attributes

يتلخص كل ما قلناه سابقاً بأنَ لغة HTML تتيح لك تقديم المحتوى عبر إنشاء مجموعة من العناصر, مهمة كل عنصر من عناصر HTML عرض شيء محدد جداً في صفحتك فهناك عناصر لعرض النصوص و هناك عناصر لعرض الصور و هناك عناصر لعرض الروابط التشعبيَّة Links .. إلخ, يتم إنشاء كل عنصر من هذه العناصر بواسطة وسم خاص من وسوم HTML , و يكون لكل عنصر وسم بداية ووسم نهاية يحصران محتوى العنصر الظاىر بينهما.
يمكن تزويد بعض وسوم البداية بمجموعة من الخصائص الإضافيَّة والتي تخصّص سلوك عرض العنصر لمحتواه ويتم هذا عبر ما يعرف بالواصفات Attributes , انظر للشيفرة التالية على سبيل المثال:

 <p align="center">
 المحتوى النصي لعنصر عرض النصوص
</p> 
كما تلاحظ فقد قمنا بإضافة شيء جديد في هذه الشيفرة إلى وسم البداية الخاص بالعنصر p ألاّوهو الواصفة align التي تحدد محاذاة النص الذي سيعرضه العنصر p و أعطيناها القيمة center لعرض النص في منتصف الصفحةوعند استعراضها سيظهر النص كمايلي:
,,
حسناً, يوجد لكل وسم بداية من وسوم HTML مجموعة معروفة سلفاً من الواصفات Attributes ويوجد لكل واصفة مجموعة معروفة سلفاً من القيم التي يمكن أن يتم إسنادها إلى الواصفة, فالواصفة align هي إحدى الواصفات المعروفة سلفاً لوسم البداية <p> على سبيل المثال و القيم التي يمكن أن تسند إليها هي left لمحاذاة النص إلى اليسار أو right لمحاذاة النص إلى اليمين أو center لمحاذاة النص إلى الوسط, و سيتم بالطبع عرض واصفات كل وسم بالتفصيل عند الحديث عنه وأظن أنه لاّ داعي للقول أن الشكل العام للواصفة هو name="value"  حيث أنَ name هو اسم الواصفة و value هي القيمة المُسنَدة لتلك الواصفة و التي يجب أن توضع بين علامتي اقتباس مزدوجتين " " أوعلامتي اقتباس مفردتيف ‘ ‘ .
أظفن أنَّنا نستطيع الآن أن نبدأ بالحديث عن عناصر HTML كافةً و بالتفصيل و البداية مع عناصر العناوين Headings , و لكف قبل ذلك سنعرض جدولًّ بمجموعة من الواصفات المشتركة بين أغلب وسوم HTML هنا بدلّاً من تكرارها مع كل وسم من تلك الوسوم, و فيمايلي الجدول:

اسم الواصفة القيم الممكنة الشرح
id        اي اس فريد(غير مكرر)بالنسبة للمستند يتم استخدام هذا الّاسم للتعامل مع العنصر برمجياً باستخدا لغة Java Script أو jQuery , و لها استخدامات أخرى سيتم عرض أحدهما في فقرة الروابط الداخلية لاحقاً
dir ltr
rtl
لتحديد اتجاه القراءة, ltr تعني أن اتجاه القراءة من اليسار إلى اليمين أمَّا rtl فتعني أن اتجاه القراءة من اليمين إلى اليسار
align left
right
center
justify
لتحديد محاذاة النص
class أي اسم فئة CSS صالح لمنح كافة خصائص الفئة إلى العنصر و سيتم مناقشة هذا بالتفصيل في الدورة ب CSS3
name اي اسم فريد تستخد لتمييز العنصر برمجيّاً

عناصر العناوين Headings

 توفر لغة HTML ستَّة عناصر لعرض العناوين و هي على الترتيب: h1 و h2 و h3 و h4 وh5 و h6 حيث أن العنصر h1 هو أكبرها حجماً و العنصر h6 هو الأصغر و ما بينهما يتدرج في الحجم, و طبعاً حرف ال h هنا اختصار لكممة Heading , دعنا نجرب الشيفرة التالية على سبيل المثال:

 <html>
<head>
   <title>
        صفحى اختبار لعناصر العناوين
   </title>
</head>
 <body dir='rtl'> 
 <h1>عنصر عنوان من المستوى الأوَّل </h1> 
 <h2>عنصر عنوان من المستوى الثاني </h2> 
 <h3>عنصر عنوان من المستوى الثالث </h3>
 <h4>عنصر عنوان من المستوى الرابع </h4>
 <h5>عنصر عنوان من المستوى الخامس </h5>
 <h6>عنصر عنوان من المستوى السادس </h6> 
</body> 
</html> 
عند استعراض الصفحة السابقة في مستعرض الويب سنشاهد النتيجة التالية:
كما تلاحظ فقد قمنا بتزويد الوسم <body> بالواصفة dir و التي تحدد اتجاه قراءة جسد المستند وقمنا بإسناد القيمة rtl لها و ذلك لنجعل اتجاه القراءة من اليمين إلى اليسار right to left و هو ما يتناسب مع اللغة العربية بالطبع, و في حال أن هذه الواصفة لا تُعْطَ أية قيمة فإن القيمة الاّفتراضية لها هي ltr أي أن اتجاه القراءة الاّفتراضي من اليسارإلى اليمين.


ملحوظة: استخدام عناصر العناوين <h>   إلى من أجل عناوين الفقرات فقط, و لّا تستخدمها لجعل النص عريضاً أو كبير الحجم فهناك وسوم خاصة لهذين الغرضين.

عنصر الخط الأفقي Horizontal Line

تقدِّم  لغة HTML الوسم الخاص <hr /> لإنشاء الخطوط الأفقيَّة في الصفحة, انظر للمثال التالي:

 <html>
<head>
<title>
  صفحة اختبار لعنصر الخط الافقي
</title>
</head>
 <body dir='rtl'>
   <p>محتوى الفقرة الأولى للتجربة فقط </p>
 <hr />
   <p>محتوى الفقرة الثانية للتجربة فقط</p> 
 <hr />
   <p>محتوى الفقرة التالثة للتجربة فقط</p>
 </body> 
</html> 
تبدو الشيفرة السابقة في مستعرض الويب كمايلي:

التعليقات Comments

اعتاد المبرمجون في لغات البرمجة التقليديَّة على كتابة أسطر توضيحيَّة لا تُعالَج إذ أنها لا تعتبر جزءاً من الشيفرة, و إنَّما تستخدم فقط لتذكير المبرمج بأجزاء الشيفرة عندما يعود لتعديلها بعد فترة من الزمن, و هذه الأسطر تعرف بالتعليقات Comments , و مع أن HTML لغة وصفية كما قلت سابقاً إلّا أنها توفر آلية لكتابة التعليقات ضمن المستندات, فتقدّمِ الصيغة العامة التالية لكتابةالتعليق:

 <!-- نضع هنا اي تعليق نريد  --> 
, وإلى هنا أتركم في رعاية الله إلى حين نلقاكم في درس جديد ولمتابعة الدورة يمكنك الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد . 
المصادر /www.w3schools.com  تعلَّمHTML5 & CSS3 (م.مختار صالح)

هناك تعليقان (2):

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية