إنشاء القوائم Creating Lists:
القوائم لها استخدامات متعددة في اضافة النصوص لمحتوي صفحات الويب وعلي حسب نوع المحتوي يتم اختيار نوع القائمة المناسبة له.
القوائم المرقمة Ordered List :
وهي القوائم التي تحتوي علي عناصر مرتبة او سلسلة من الخطوات المترتبة علي بعضها البعض او سلسلة من الاحداث. كسلسلة مثلا تظهر طريقة طهي وجبة معينة.
ويوجد مجموعتان من الوسوم اللازمة لإنشاء القائمة الاولي هي <ol></ol> وهي المسئولة عن تحديد بداية ونهاية القائمة ، والثانية وهي <li></li> وهي المسئولة عن تعريف كل عنصر في القائمة. والوضع الافتراضي للمتصفح هو ان يقوم بعرض عناصر كل سلسلة علي حسب ترتيبها المذكور في ملف ال HTML. ويوجد خاصيتان لوسم بداية او تحديد نوع القائمة <ol> وهما (type) و (start) وتأخذ الخاصية الاولي قيمة تحدد نوع نظام ترتيب العناصر مثل الرقم 1 او الحرف A او الحرف a أو الحرف i والخاصية الثانية تأخذ قيمة تقوم بتحديد بدء تسلسل السلسلة من أي رقم كأن تبدء السلسلة مثلا الرقم 4.
مثال :
|
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="content-type" content="text/html;
charset=UTF-8" />
<!-- يجب وضع عنوان الصفحة
أولا قبل أن تنساه -->
<title> القوائم المرتبة
</title>
</head>
<body>
<ol
type="A">
<li>
الخطوة الاولي
</li>
<li>
الخطوة الثانية
</li>
</ol>
<p>
لكي تحصل علي كذا يجب ان تبدا من الخطوة الرابعة
من سلسلة الخطوات وهذا تذكير بها
</p>
<ol
start="4">
<li>
الخطوة الرابعة
</li>
<li>
الخطوة الخامسة
</li>
<li>
الخطوة السادسة
</li>
</ol>
</body>
</html>
|
القوائم غير المرقمة Unordered List:
وهي تستخدم لتحديد مجموعة معينة من العناصر والتي ترتبط ببعضها البعض ولكن ترتيب هذه العناصرغير ذي صلة مثل ذلك انها قد تستخدم مثلا في وصف بعض طرق الدفع الممكنة عند الشراء من مكان معين (دفع نقدي – بشيك – تحويل بريدي) . ونفس الشيء ويوجد مجموعتان من الوسوم اللازمة لإنشاء القائمة الاولي هي <ul></ul> وهي المسئولة عن تحديد بداية ونهاية القائمة ، والثانية وهي <li></li> وهي المسئولة عن تعريف كل عنصر في القائمة. والوضع الافتراضي للمتصفح هو ان يقوم بعرض عناصر كل سلسلة علي حسب ترتيبها المذكور في ملف ال HTML. ويوجد خاصية لوسم بداية او تحديد نوع القائمة <ul> وهي (type) وتأخذ هذه الخاصية قيمة تحدد شكل الايقونه التي تظهر بجوار كل عنصر من عناصر القائمة مثل (circle) دائره و (disc) قرص و (square) مربع.
مثال:
|
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="content-type" content="text/html;
charset=UTF-8" />
<!-- يجب وضع عنوان الصفحة
أولا قبل أن تنساه -->
<title> القوائم الغير مرتبة
</title>
</head>
<body>
<p>
طرق الدفع المتاحة لمعرض المبيعات
</p>
<ul
type="circle">
<li>
الدفع كاش
</li>
<li>
الدفع بشيك
</li>
<li>
الدفع ببطاقات الائتمان
</li>
</ul>
</body>
</html>
|
قوائم التعريف Definition List:
هي قائمة من العناصر مع تعريف لكل عنصر. وهي تتكون من ثلاث مجموعات من العناصر الأولي وسم <dl></dl> وهو الوسم الذي يحدد قائمة التعري وكذلك بدايتها ونهايتها، والثانية هي <dt> </dt> وهي المسئولة عن تحديد العنصر في القائمة والثالثة هي <dd></dd> هي المسئولة عن وصف العنصر في القائمة وتستخدم المجموعتين الثانية والثالثة بالتزامن مع بعضهما البعض.
مثال:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
<!-- يجب وضع عنوان الصفحة أولا قبل أن تنساه -->
<title> قوائم التعريف </title>
</head>
<body>
<h1>قائمة التعريف </h1>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
|
القوائم المتداخلة Nested Lists:
وهي قوائم تنتمي في طبيعتها للثلاث أنواع السابقة ولكن يتم دمجها داخل بعضها لتكوين تنسيق معين حسب محتوي كل صفحة علي سبيل المثال فهرس احد الكتاب كما هو موضح في المثال التالي.
خاصية محاذاة اتجاه النصوص Direction:
وهي خاصية نحتاجها خصوصا عند إضافة نصوص اللغات التي تتجه عند كتابتها من اليمين إلي اليسار مثل اللغة العربية. وتكتب داخل الوسم بهذا الاسم (dir=" ") وتأخذ قيمتين قيمة اتجاه النص من اليمين إلي اليسار وهي "rtl" وقيمة اتجاه النص من اليسار إلي اليمين وهي "ltr". كما يمكن وضع هذه الخاصية في اي وسم من الوسوم التي تحتوي النصوص داخل الصفحة ولا يستلزم الامر وضعها فقط داخل وسم <html dir="rtl"> ونلاحظ انها أيضا من الخواص الوراثية أي التي تورث تأثيرها لكل أبنائها من الوسوم كما في هذا المثال ولا يستلزم لنا ان نعكس إتجاه النصوص داخل الصفحة إلا عندما نضيف نفس الخاصية ولكن بالقيمة المختلفة والتي تعني الاتجاه من اليسار إلي اليمين وسيوضح ايضا المثال التالي تأثير هذا الوسم مع اللغة العربية.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html dir="rtl">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
<!-- يجب وضع عنوان الصفحة أولا قبل أن تنساه -->
<title> قوائم التعريف </title>
</head>
<body>
<h1>فهرس الكتاب </h1>
<ol
type="i">
<li>القسم الاول
<ol>
<li>الفصل الاول</li>
<li>الفصل الثاني</li>
</ol>
</li>
<li>القسم الثاني
<ol
start="3">
<li>الفصل الثالث</li>
<li>الفصل الرابع</li>
</ol>
</li>
<li>القسم الثالث
<ol
start="5">
<li>الفصل الخامس</li>
<li>الفصل السادس</li>
</ol>
</li>
<li>الفهرس</li>
</ol>
</body>
</html>
|
ليست هناك تعليقات:
إرسال تعليق