سنتناول في هذا الدرس مجموعة من أشهر وأهم الوسوم (Tags) الشائعة الاستخدام ، لكن دعونا نتطرق أولا إلى تعريف السمات أو Attributes
فالسمات (Attributes) عبارة عن أكواد تضيف معلومات جديدة إلى الوسوم (Tags) وتعطيها أوامر معينة
مثال للتوضيح
رمز Code:
Boraqsoft
فالوسم هو الوسم الخاص بإنشاء الروابط (links) ولكن هذا الوسم يلزمه بعض السمات الإضافية لتوضيح عنوان هذا الرابط وبالتالي فالسمة href (وهي اختصار Hyperlink Reference أي مرجع الرابط) تشير إلى عنوان الرابط الذي هو http://www.boraqsoft.com
ملحوظة: يجب أن يتبع السمة علامة = ثم علامتي تنصيص مزدوج (Double style quotes) " " وبينهما تكون قيمة (Value) هذه السمة
ملحوظة: السمات (Attributes) تكون دائما داخل وسم البداية

بعد أن تعرفنا على السمات (Attributes) دعونا نتعرف على أهم الوسوم (Tags) الشائعة الاستخدام بطريقة مختصرة وسريعة حتى نتناولهم بشيء من التفصيل في الدروس القادمة

وسوم العناوين Headings Tags
<h2> <h3> <h4> <h5> <h6>

وهي عبارة عن 6 وسوم لكتابة عناوين مميزة أو رؤوس للفقرات ، وهي ذات فائدة عظيمة لأرشفة محركات البحث لصفحات الموقع لتحسين نتيجة ظهور موقعك في الصفحات الأولى على جوجل والذي يحبها بشكل خاص

الوسم الأول وهو الحجم الأكبر على الإطلاق
رمز Code:
<h1>Heading 1 text test


الوسم الثاني وهو الحجم الأصغر من الأول
رمز Code:
Heading 2 text test


الوسم الثالث وهو الحجم الأصغر من الثاني
رمز Code:
Heading 3 text test


الوسم الرابع وهو الحجم الأصغر من الثالث
رمز Code:
Heading 4 text test


الوسم الخامس وهو الحجم الأصغر من الرابع
رمز Code:
Heading 5 text test


الوسم السادس والأخير وهو الحجم الأصغر على الإطلاق
رمز Code:
Heading 6 text test


النتيجة


وسم الفقرات Paragraphs Tag



وهو الوسم الخاص بكتابة فقرة جديدة لكل مجموعة من النصوص
رمز Code:
This is a paragraph.


This is another paragraph.


النتيجة


وسم الروابط Links Tag


وهو الوسم الذي تعرضنا له في أول الدرس عند الكلام عن السمات Attributes
رمز Code:
Boraqsoft

النتيجة

ملحوظة: لاحظ أنه عند كتابة رابط إنترنت فلابد من كتابة الرابط بشكل كامل فلابد من وجود //:http أولا (وهي اختصار HyperText Transfer Protocol) ثم تبدأ في كتابة الرابط بالشكل المعتاد الذي غالبا يبدأ بـ www

وسم الصور Images Tag


وهو من الوسوم الفارغة التي لا تحتوي على وسم إغلاق
ووظيفته عرض الصور في صفحة الويب ، وهو يحتوي على عدة سمات (Attributes) أشهرها:
src
وهي اختصار لكلمة source (وتعني: المصدر) ووظيفتها الدلالة على رابط مكان الصورة المراد عرضها ، فإذا كان مكان الصورة على موقع آخر ؛ فيجب كتابة رابط الصورة كاملاً بما فيه //:http كما في المثال التالي:
رمز Code:

أما إذا كانت الصورة موجودة بنفس الموقع ؛ فيكفي كتابة مسارها الموجود بأحد المجلدات داخل الموقع ، فإذا افترضنا أن الصورة موجودة داخل مجلد يسمى images وكان اسم الصورة mylogo وامتدادها jpg. فإن الكود سيكون كالتالي:
رمز Code:


alt
وهي اختصار لكلمة alternate (وتعني: بديل) ووظيفتها إظهار نص بديل للصورة في حالة عدم ظهور الصورة لأي سبب من الأسباب
مثال:
رمز Code:


title
وتعني العنوان ، ووظيفتها إظهار وصف توضيحي للصورة عند الوقوف بمؤشر الماوس على الصورة
مثال:
رمز Code:


width & height
وهما السمتان الخاصتان بتحديد أبعاد الصورة طولا وعرضا بمقياس البكسل pixel
مثال:
رمز Code:

وعند تطبيق جميع السمات السابقة



رمز Code:

ستكون النتيجة


والآن جاء دورك لتقم بتجربة هذه الوسوم بنفسك وتخبرنا بالنتيجة !