\\ بسم الله الرحمن الرحيم //
السلام عليكم ورحمة الله وبركاته ~
حياكم الله جميعاً في درس جديد، والمعذرة على تأخري في الطرح
>> هذا إن كان هناك من يتابع أصلاً XD
اليوم ياختصار، سنتعرف على بعض الوسوم المفيدة في اللغة
لذا فلننطلق D:
وسم العناوين (Heading - h) :
يتدرج هذا الوسم من حيث الأهمية (الحجم) من <h1> إلى <h6>
بحيث يعطى الوسم <h1> للعنوان الأكثر أهمية، بينما الوسم <h6> للعنوان الأقل أهمية
مثال يوضح التدرج من <h1> إلى <h6> :
كود:<h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6>
وسم الفقرات (Paragraphs - p) :
مثال :
كود:<p>This is a paragraph</p>
وسم القوائم (Lists) :
ويشمل وسم القوائم الغير مرتبة (Unordered Lists) و القوائم المرتبة (Ordered Lists)
وقوائم أخرى لن نتطرق لذكرها اختصاراً وتبسيطاً، كما أن النوعين السابق ذكرهما هما الأكثر استخداماً
ويمكن لمن يريد الاستزادة البحث عن البقية D:
وسم القوائم الغير مرتبة (Unordered Lists - ul) :
وتتكون القائمة الواحدة من عناصر يرمز لها بالوسم (List Item) ،
ويمكن تحديد نمط معين للقائمة عن طريق
تغيير نوع النمط (list-style-type) في وسم نمط القائمة :
وهو النمط الافتراضي، إلى أحد الأنماط التالية :كود:<ul style="list-style-type:disc">
كود:<ul style="list-style-type:circle"> <ul style="list-style-type:square"> <ul style="list-style-type:none">
اكتشفوا الفرق بينها بأنفسكم XD
مثال1 :
مثال2 :كود:<ul style="list-style-type: disc"> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul>
كود:<ul <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul>
كلا المثالين سيعطي نفس النتيجة (لم ؟) D:
وسم القوائم المرتبة (Ordered Lists - ol) :
ويشمل نفس ما جاء في وسم القوائم الغير المرتبة، عدا اختلاف الأنماط إلى الأنماط التالية :
مثال1 :كود:<ol type="1"> النمط الافتراضي <ol type="A"> <ol type="a"> <ol type="I"> <ol type="i">
مثال2 :كود:<ol type="1"> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ol>
كود:<ol> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ol>
وكلا المثالين سيعطي نفس النتيجة D:
وسم الجداول (Tables - table) :
ويتكون الجدول الواحد من صفوف يرمز لها بالوسم (Table Rows - tr)
و بيانات (أعمدة) يرمز لها بالوسم (Table Data - td) ،
ويمكن الاضافة والتعديل على خواص الجدول كإضافة حواف له والتحكم في سمكها :
كود:<table border="1>
أو التحكم في حجم الجدول :
مثال:كود:<table style="width:50 %">
وسم الروابط التشعبية (HTML Links - Hyperlinks - a) :كود:<table border="2" style="width:50 %"> <tr> <td>Number</td> <td>First Name</td> <td>Last Name</td> <td>Age</td> </tr> <tr> <td>1</td> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>2</td> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> </table>
ويستخدم هذا الوسم للانتقال إلى وجهة معينة، كالانتقال من صفحة إلى أخرى
أو إلى رابط صورة .. إلخ ، عند الضغط عليه ، ويوضع رابط الوجهة في
سمة مرجع (مصدر) الارتباط التشعبي (Hyperlink Reference Attribute – href)،
بينما توضع الجملة التي ستظهر للضغط عليها
بين بداية الوسم و نهايته
وسم الصور (Images - img) :
ويتكون من سمة مصدر الصورة (Source Atteribute - scr) ،
وتوضع فيها مصدر الصورة سواء كانت مخزنة في نفس مكان الصفحة (html5.gif) ،
أو موجودة على شكل رابط: http://www.w3schools.com/html/html5.gif
وسمة النص البديل (النص المعبر عن الصورة) (Alternate Text Atteribute - atl) ،
وهو النص الذي يمكن محركات البحث من العثور على الصورة
مثال1 :
كود:<img src="html5.gif" alt="HTML5 Icon">
مثال2 :
وسم سطر جديد (Line Break - br) :
وهو وسم له بداية وليس له نهاية
مثال:
كود:<p>Name: Jon<br>Age: 20<br>Country: USA</p>
كلمة أخيرة :
المفضلات