HTML وسم الصورة،وسوم القوائم، وسوم الجداول الدرس الثاني

: وسم الصورة.
الشكل العام لوسم الصورة هو كالتالي:
<img src="images/name.jpg" width="50" height="75" border="2" align="center">
الكود السابق يقوم بإدراج الصورة التي اسمها name.jpg الموجودة في المجلد images المحددة بالعرض 50 و الارتفاع 75, و يجعل لها إطار بعرض 2, و تتوسط الجزء التي هي ضمنه.
يمكن جعل الصورة تشكل ارتباط ما, وذلك بإدراج وسمها ضمن وسمي الارتباط, كما في المثال التالي:
<a href="page1.html" >
<img src="images/name.jpg" width="50" height="75" border="2" align="center">
</a>
الآن أصبحت الصورة name.jpg تشكل ارتباطاً و بالنقر عليه ننتقل إلى الصفحة Page1.html.

1-6: وسوم القوائم(التعداد الرقمي و النقطي).
و تستخدم هذه الوسوم لجعل مجموعة من الأسماء أو البيانات منسقة ضمن قائمة, فمثلاً القوائم الرقمية لها الشكل التالي:
<OL type="1">
<Li>Number1
<Li>Number2
<Li>Number3
<Li>Number4
</OL>
الوسوم السابقة لها الخرج:
1. Number1
2. Number2
3. Number3
4. Number4
حيث حددت الخاصة type نمط الترقيم (قد يكون:a,A,i,1,……).
أما القوائم النقطية فلها الشكل التالي:
<UL type="circle">
<Li>Number1
<Li>Number2
<Li>Number3
<Li>Number4
</UL>
الوسوم السابقة لها الخرج:
o Number1
o Number2
o Number3
o Number4
حيث حددت الخاصة type نمط التنقيط (قد يكون:circle, square,…..).

1-7: وسوم الجداول.
الشكل العام لوسم الجدول هو كما يلي:
<table…………>
<tr…..>………………………………………………بداية السطر
<td…..>هنا بيانات الخلية</td>
<td…..> هنا بيانات الخلية</td>
</tr>…………………………………………………نهاية السطر


<tr….>………………………………………………بداية السطر
<td…..>هنا بيانات الخلية</td>
<td…..> هنا بيانات الخلية</td>
</tr>…………………………………………………نهاية السطر
……………………….
……………………….
</table>
حيث:
1. الزوج <table>…..</table> يحددان بداية و نهاية الجدول.
2. الزوج <tr>…..</tr> يحددان بداية و نهاية سطر (صف أفقي)من الجدول.
3. الزوج <td>….</td> يحددان بداية و نهاية خلية ضمن الصف.
تتضمن الأجزاء <table>,<tr>,<td> عادة مجموعة من محددات الجدول مثل عرض حد الجدول و الخلايا و نمط الخط ضمن الجدول و لونه ونمطه ولون تعبة الخلايا و العرض لكل خلية و اتجاه الخلية و عدة محددات أخرى تؤمنها محررات الـ HTML.

نورت نادر