دروس الإتش تي أم أل - HTML الفقرات والقوائم

دروس الإتش تي أم أل - HTML الفقرات والقوائم



الفقرات والقوائم

في هذا الدرس سوف نتعلم معا كيفية تنسيق الفقرات والقوائم

وهنالك عدة أنواع للقوائم وسوف تتعلمها الآن معنا لتختار ما يناسبك .

أولا: القوائم غير المتسلسلة
Unordered Lists

نفترض بأنك تريد أن تعدد المواد العلمية المقررة على القسم العلمي .

القسم العلمي
<ul>
<li>الفيزياء
<li>الكيمياء
<li>الأحياء
<li>الجيولوجيا
<ul/>

وهكذا سوف يظهر لنا بهذه الطريقة

القسم العلمي
- الفيزياء
- الكيمياء
- الأحياء
- الجيولوجيا

ثانيا: القوائم المتسلسلة
Ordered Lists

والآن في هذا النوع من القوائم سوف تتعلم كيفية كتابة قائمة متسلسلة كما في هذا المثال .

المواد العلمية في القسم العلمي
<ol>
<li>الفيزياء
<li>الكيمياء
<li>الأحياء
<li>الجيولوجيا
<ol/>

سوف يظهر بهذه الطريقة.

المواد العلمية في القسم العلمي
- الفيزياء
- الكيمياء
- الأحياء
- الجيولوجيا

ثالثا: قوائم التعريفات
Definition Lists

في هذا النوع من القوائم نتعلم كيفية كتابة قائمة للكلمة وتعريفها .

كما في هذا المثال :

<dl>
<dt>المواد العلمية في القسم العلمي
<dd>الفيزياء
<dd>الكيمياء
<dd>الأحياء
<dd>الجيولوجيا
<dl>

وسيكون بهذه الطريقة :

المواد العلمية في القسم العلمي
- الفيزياء
- الكيمياء
- الأحياء
- الجيولوجيا

والآن هيا معا نتعلم كيفية وضع حد فاصل بين الفقرات والجمل.

ونستخدم لهذا الشيء الوسم

<hr>

ونستطيع التحكم في حجمه بعدة طرق.

فهنالك خصائص نستطيع استعمالها مع ذلك الوسم لكي نزيد او نقلل من حجمه وهذه الخصائص هي :

width="رقم%"

نستطيع ذكر رقم مئوي ليحدد حجم الحدود .

width="رقم"

نستطيع ذكر رقم ليحدد حجم الحدود.

size="رقم"

نستطيع ذكر رقم بالبيكسل ليحدد حجم الحدود.

وأيضا تستطيع التحكم في اتجاه الحد سواء في الوسط او اليمين او اليسار بهذه الطريقة :

align="center/right/left"

وسوف أذكر لك عدة أمثلة لتتضح لك تلك الخصائص

<hr width="40%">

<hr width="41">

<hr size="4">

<hr width="50%" align="right">

لقد تعلمت مسبقا في درس الجداول كيفية تنسيق الكلمة في خلايا الجدول لتكون في الوسط أو اليمين أو اليسار

وسوف نستعمل معا نفس الوسم لكي ننسق الفقرات

والوسم هو :

<p>

مع الخاصية

Align

وهي تحدد اتجاه الفقرة وسوف اذكر لك أمثلة لكي تتضح لك كل تلك الأمور:

<p align="right"> منتديات قاسمي نت </p>

منتديات قاسمي نت

<p align="center"> منتديات قاسمي نت</p>


منتديات قاسمي نت

<p align="left">منتديات قاسمي نت<p/>