درس جديد || وسوم مفيدة في لغة الويب [HTML] ||

\\ بسم الله الرحمن الرحيم //
السلام عليكم ورحمة الله وبركاته ~
حياكم الله جميعاً في درس جديد، والمعذرة على تأخري في الطرح
>> هذا إن كان هناك من يتابع أصلاً 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 :

كود:

<ul style="list-style-type: disc"> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul>

مثال2 :

كود:

<ul <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul>

كلا المثالين سيعطي نفس النتيجة (لم ؟) D:

وسم القوائم المرتبة (Ordered Lists - ol) :
ويشمل نفس ما جاء في وسم القوائم الغير المرتبة، عدا اختلاف الأنماط إلى الأنماط التالية :

كود:

<ol type="1"> النمط الافتراضي <ol type="A"> <ol type="a"> <ol type="I"> <ol type="i">

مثال1 :

كود:

<ol type="1"> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ol>

مثال2 :

كود:

<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 %">

مثال:

كود:

<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>

وسم الروابط التشعبية (HTML Links - Hyperlinks - a) :
ويستخدم هذا الوسم للانتقال إلى وجهة معينة، كالانتقال من صفحة إلى أخرى
أو إلى رابط صورة .. إلخ ، عند الضغط عليه ، ويوضع رابط الوجهة في
سمة مرجع (مصدر) الارتباط التشعبي (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 :

كود:

<img src="

كود:

http://www.w3schools.com/html/html5.gif" alt="HTML5 Icon">

وسم سطر جديد (Line Break - br) :
وهو وسم له بداية وليس له نهاية

مثال:

كود:

<p>Name: Jon<br>Age: 20<br>Country: USA</p>

كلمة أخيرة :

وردتني بعض التعليقات عن كون الأمر مبهماً نوعاً ما أو غير مفهوم ، أصدقكم القول أني لو كنت سمعت عن عن اللغة للمرة الأولى من خلال الموضوع ولم أكن أمت لعالم البرمجيات بصلة، لأحسست بنفس الشعور، لذا لا تتردوا بطرح كل ما يجول بخواطركم من أسئلة D:

من يرغب حقاً بالتعلم فلن يكتفي بالقراءة فقط .. بل سيقوم بالبحث غن أشياء أخرى خارج النطاق و تطبيقها

دروس سابقة: |1|
ألقاكم على خير
بحفظ الباري ~