http://www.traidnt.net/vb/images/img...14/04/3045.jpg

سنتناول في هذا الدرس مجموعة من أشهر وأهم الوسوم (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


النتيجة
http://www.traidnt.net/vb/images/img...14/04/3308.jpg
http://www.traidnt.net/vb/images/img...14/04/2590.png
وسم الفقرات Paragraphs Tag



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


This is another paragraph.


النتيجة
http://www.traidnt.net/vb/images/img...14/04/3309.jpg
http://www.traidnt.net/vb/images/img...14/04/2590.png
وسم الروابط Links Tag


وهو الوسم الذي تعرضنا له في أول الدرس عند الكلام عن السمات Attributes
رمز Code:
Boraqsoft
النتيجة
http://www.traidnt.net/vb/images/img...14/04/3310.jpg
ملحوظة: لاحظ أنه عند كتابة رابط إنترنت فلابد من كتابة الرابط بشكل كامل فلابد من وجود //:http أولا (وهي اختصار HyperText Transfer Protocol) ثم تبدأ في كتابة الرابط بالشكل المعتاد الذي غالبا يبدأ بـ www
http://www.traidnt.net/vb/images/img...14/04/2590.png
وسم الصور Images Tag


وهو من الوسوم الفارغة التي لا تحتوي على وسم إغلاق
ووظيفته عرض الصور في صفحة الويب ، وهو يحتوي على عدة سمات (Attributes) أشهرها:
src
وهي اختصار لكلمة source (وتعني: المصدر) ووظيفتها الدلالة على رابط مكان الصورة المراد عرضها ، فإذا كان مكان الصورة على موقع آخر ؛ فيجب كتابة رابط الصورة كاملاً بما فيه //:http كما في المثال التالي:
رمز Code:
http://www.boraqsoft.com/logo_old.jpg
أما إذا كانت الصورة موجودة بنفس الموقع ؛ فيكفي كتابة مسارها الموجود بأحد المجلدات داخل الموقع ، فإذا افترضنا أن الصورة موجودة داخل مجلد يسمى images وكان اسم الصورة mylogo وامتدادها jpg. فإن الكود سيكون كالتالي:
رمز Code:
http://www.traidnt.net/vb/images/mylogo.jpg
http://www.traidnt.net/vb/images/img...14/04/2590.png
alt
وهي اختصار لكلمة alternate (وتعني: بديل) ووظيفتها إظهار نص بديل للصورة في حالة عدم ظهور الصورة لأي سبب من الأسباب
مثال:
رمز Code:
http://www.traidnt.net/vb/images/mylogo.jpg
http://www.traidnt.net/vb/images/img...14/04/2590.png
title
وتعني العنوان ، ووظيفتها إظهار وصف توضيحي للصورة عند الوقوف بمؤشر الماوس على الصورة
مثال:
رمز Code:
http://www.traidnt.net/vb/images/mylogo.jpg
http://www.traidnt.net/vb/images/img...14/04/2590.png
width & height
وهما السمتان الخاصتان بتحديد أبعاد الصورة طولا وعرضا بمقياس البكسل pixel
مثال:
رمز Code:
http://www.traidnt.net/vb/images/mylogo.jpg
وعند تطبيق جميع السمات السابقة



رمز Code:
http://www.traidnt.net/vb/images/mylogo.jpg
ستكون النتيجة
http://www.traidnt.net/vb/images/img...14/04/3311.jpg

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