https://dl-web.dropbox.com/get/WebDe...0supj-Ktn3hL5g
سنتناول في هذا الدرس مجموعة من أشهر وأهم الوسوم (Tags) الشائعة الاستخدام ، لكن دعونا نتطرق أولا إلى تعريف السمات أو Attributes
فالسمات (Attributes) عبارة عن أكواد تضيف معلومات جديدة إلى الوسوم (Tags) وتعطيها أوامر معينة
مثال للتوضيح
كود:
<a href="http://www.nilemotors.net">Nilemotors Forums</a>
فالوسم
<a> هو الوسم الخاص بإنشاء الروابط (links) ولكن هذا الوسم يلزمه بعض السمات الإضافية لتوضيح عنوان هذا الرابط وبالتالي فالسمة
href (وهي اختصار
Hyperlink
Reference أي مرجع الرابط) تشير إلى عنوان الرابط الذي هو
http://www.nilemotors.net
ملحوظة: يجب أن يتبع السمة علامة
= ثم علامتي تنصيص مزدوج (Double style quotes)
" " وبينهما تكون قيمة (Value) هذه السمة
ملحوظة: السمات (Attributes) تكون دائما داخل وسم البداية
بعد أن تعرفنا على السمات (Attributes) دعونا نتعرف على أهم الوسوم (Tags) الشائعة الاستخدام بطريقة مختصرة وسريعة حتى نتناولهم بشيء من التفصيل في الدروس القادمة
وسوم العناوين Headings Tags <h1> <h2> <h3> <h4> <h5> <h6>
وهي عبارة عن 6 وسوم لكتابة عناوين مميزة أو رؤوس للفقرات
الوسم الأول وهو الحجم الأكبر على الإطلاق
كود:
<h1>Heading 1 text test</h1>
الوسم الثاني وهو الحجم الأصغر من الأول
كود:
<h2>Heading 2 text test</h2>
الوسم الثالث وهو الحجم الأصغر من الثاني
كود:
<h3>Heading 3 text test</h3>
الوسم الرابع وهو الحجم الأصغر من الثالث
كود:
<h4>Heading 4 text test</h4>
الوسم الخامس وهو الحجم الأصغر من الرابع
كود:
<h5>Heading 5 text test</h5>
الوسم السادس والأخير وهو الحجم الأصغر على الإطلاق
كود:
<h6>Heading 6 text test</h6>
النتيجة
https://dl-web.dropbox.com/get/WebDe...ij4fWNkDYQ7L_A https://dl-web.dropbox.com/get/WebDe...mIB-_kQ_-i3BWQ وسم الفقرات Paragraphs Tag <p>
وهو الوسم الخاص بكتابة فقرة جديدة لكل مجموعة من النصوص
كود:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
النتيجة
https://dl-web.dropbox.com/get/WebDe...cjvW5yO3s1RZTg https://dl-web.dropbox.com/get/WebDe...mIB-_kQ_-i3BWQ وسم الروابط Links Tag <a>
وهو الوسم الذي تعرضنا له في أول الدرس عند الكلام عن السمات Attributes
كود:
<a href="http://www.nilemotors.net">Nilemotors Forums</a>
النتيجة
https://dl-web.dropbox.com/get/WebDe...mey1HPvsyWFjqw
ملحوظة: لاحظ أنه عند كتابة رابط إنترنت فلابد من كتابة الرابط بشكل كامل فلابد من وجود
//:http أولا (وهي اختصار
Hyper
Text
Transfer
Protocol) ثم تبدأ في كتابة الرابط بالشكل المعتاد الذي غالبا يبدأ بـ www
https://dl-web.dropbox.com/get/WebDe...mIB-_kQ_-i3BWQ وسم الصور Images Tag <img>
وهو الوسم الخاص بعرض الصور في صفحة الويب ، والذي يحتوي على عدة سمات (Attributes) سيتم تناولها بالتفصيل في دروس قادمة إن شاء الله
كود:
<img src="http://www.boraqsoft.com/logo_old.jpg" alt="boraqsoft" title="this is boraqsoft logo" width="300" height="100" />
النتيجة
https://dl-web.dropbox.com/get/WebDe...8CwhSccIIqfH0g
والآن جاء دورك لتقم بتجربة هذه الوسوم بنفسك وتخبرنا بالنتيجة !
