القوائم

تحتوي لغة HTML على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم وباستخدام عدة خيارات، وهناك نوعين من القوائم:
1-القوائم المتسلسلة Ordered Lists:
مثل :
أسماء بعض مدن الجماهيرية:
1. طرابلس.
2. سرت.
3. بنغازي.
4. سبها.
2- القوائم الغير متسلسلة Unordered Lists:
مثل:
أسماء بعض الجامعات في الجماهيرية:
· جامعة الفاتح.
· جامعة ناصر.
· جامعة قاريونس.
عند التعامل مع القوائم بنوعيها نحتاج إلى وسوم خاصة بتحديد بداية ونهاية القائمة ووسوم تحدد بنود هذه القائمة.
بالنسبة للقوائم المتسلسلة نستخدم الوسوم

أما بالنسبة للقوائم الغير متسلسلة فنستخدم

ولتعيين كل بند من بنود القائمة نستخدم الوسم وهو وسم مفرد يكتب في بداية السطر الخاص بكل بند List Item.
مثال1:

الخاصية الوحيد التي تستخدم مع هذه الوسوم هي TYPE ووظيفتها تحديد شكل الرمز الظاهر مع بنود القائمة، وعادة تستخدم مع وسوم بداية القوائم UL,OL وبذلك نحدد رمزا واحدا لكل القائمة.
فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم (A,a,I,i ) التي تغير رموز الترقيم من الأرقام العادية الافتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية كما ترى في الجدول التالي:

أما بالنسبة للقوائم الغير متسلسلة فإن الرمز الموجود عند كل بند في القائمة هو عبارة عن نقطة سوداء Disc وهي المعرفة ضمناً في خاصية TYPE، لكن هناك رموز أخرى يمكن إظهارها وهي المربع Square والدائرة المفرغة Circle.

وهناك وسوم أخرى تستخدم لإنشاء القوائم الغير متسلسلة وبنفس الطريقة المستخدمة مع وهذه الوسوم هي:

قوائم الشرح أو التعريفاتDefinition Lists :
وهو نوع خاص من القوائم يستخدم عندما نريد إدراج قائمة من المصطلحات يتبع كل واحد منها شرح أو تعليق.
ونحتاج لإنشاء هذه القوائم إلى ثلاثة وسوم

مثال2:

تمرين 4:
قومي بتصميم صفحة بلغة HTML تحتوي على القوائم التالية:
أركان الاسلام
A. الشهادتين
B. الصلاة
C. الصيام
D. الزكاة
E. الحج لمن استطاع اليه سبيلا

بعض موديلات السيارات

• مرسيدس
  
• تويوتا
  
• كيا
  
• شفروليه
  
• مازدا
  
• هوندا
  

مع مراعاة التالي:
حفظ المستند باسم list.html
عمل عنوان للصفحة باسم القوائم.
استخدام وسم المسطرة الافقية بين كل قائمة وأخرى .

تمرين 5:
قومي بتصميم صفحة بلغة HTML تحتوي على التالي:
هل تعلم
أول مسجد بني في الإسلام هو مسجد قباء
أعلى شلال في العالم ارتفاعه 979 م
أعلى الجبال هو جبل الهملايا
اكبر دولة من ناحية السكان هي الصين
أول إنسان حاول الطيران هو من اصل عربي واسمه عباس بن فرناس
الرازي هو أول من استخدم الخيوط في الجراحة
المطلوب:
· اتجاه الصفحة من اليمين إلى اليسار
· عنوان الصفحة "هل تعلم".
· اضافة خلفية للصفحة باستخدام الخاصية background="images/bg1.gif" إلى الوسم body.
· تغيير حجم ولون الخط.
· اضافة صورة مناسبة من مجلد الصور بحجم height=320 , width=350إلى اليسار.

مجلد الصور

انقر هنا

حل تمرين 5:

انقر هنا

وسائل تنظيم الصفحة

1- وسم المسطرة الافقية :
يقوم هذا الوسم بإدراج خط يقسم الصفحة وهو وسم مفرد.
خصائصه:
أ‌- Size: لتحديد سمك الخط.
ب‌-Width : لتحديد عرض الخط وهي تأخذ قيمة مطلقة أو نسبية.
ت‌-Align: وهي لتحديد محاذاة الخط وهي تأخذ القيم Left, Center, Right.
ث‌-NOSHADE: للحصول على خط عادي غير غائر.
ج‌- Color: لتلوين خط المسطرة الافقية.

---

2- وسم الملاحظات:
يستخدم لكتابة بعض الملاحظات الخاصة أو العبارات التوضيحية ضمن الملف والتي لا تظهر عند استعراض هذا الملف في المتصفح.

وهذه هي النتيجة

This is line one



and, this is line three

3- الوسم الانتقال إلى سطر جديد BR:
خاصية Clear: تقوم هذه الخاصية في منع النص من الالتفاف على أي من جانبي الصورة، وهي تأخذ القيم :
أ‌) Right: تمنع التفاف النص على الجهة اليسرى للصورة.

ب‌) Left: تمنع التفاف النص على الجهة اليمنى للصورة.
ت‌) All: تمنع الالتفاف من جميع الجوانب.
4- الوسم NOBR :لمنع انقسام السطر مهما كان مقدار استبانة وعرض النافذة.

أنواع الملفات الرسومية

يوجد الكثير من أنواع الملفات الرسومية وتنسيقات الصور والتي تختلف من عدة نواحي منها الدقة وعدد الألوان والحجم التخزيني للملف نذكر منها نوعين فقط من هذه الملفات:
1- Jpg,Jpeg وهي اختصار لـ Joint Photographic Experts Group:
ويدعم هذا التنسيق صوراً بعيار 24بت (أي 16.7 مليون لون) وميزة هذا التنسيق تتمثل في إمكانية ضغط الصور بنسب مختلفة عند تخزينها وبالتالي الحصول على صور صغيرة الحجم نسبياً.
2- Gif وهي اختصارلـ Graphical Interchange Format:
أقصى عدد للألوان في هذا التنسيق هو 265 لون وأحجام هذا النوع من الصور كبير نسبياً مقارنة مع تنسيق Jpg ومن مميزات هذا النوع :
أ‌- القدرة على تخزين صور بخلفيات شفافة Transparent Images.
ب‌-الصور المتحركة Animated Gifs.
ملاحظات:
1- Jpg الصور الحقيقية الألوان ذات العدد الكبير من الألوان وذات الأبعاد الكبيرة.
2- Gif الصور القليلة الألوان والصغيرة الأبعاد مثل الأزرار.
3- وحدة البيكسل Pixel هي اختصار لـ Picture Element.
4- إذا كانت درجة استبانة الشاشة 640 480 فهذا يعني ان الشاشة مقسمة نظرياً إلى شبكة من 640 عمود و480 سطر، وكل خلية من هذه الشبكة تمثل بيكسل حيث كلما زادت الاستبانة كلما صغر حجم وحدة البيكسل.
5- مصطلح Thumnail يقصد به الصورة الصغيرة جدا التي عند النقر عليها يؤدي ذلك إلى عرض الصورة بحجم أكبر.

استخدام الصور

أولا: وسم عرض الصور
إن الوسم الرئيسي المستخدم لتعريف صورة ما داخل الصفحة هو IMG وهو وسم مفرد ويجب إضافة الخاصية "SRC" له لتحديد موقع واسم الصورة.

وهذه الصيغة تفترض أن الصورة موجودة في نفس الدليل الفرعي حيث يتواجد ملف HTML



حالات تواجد الصورة:
الحالة الأولى:
أن تكون الصورة موجودة في مجلد متفرع عن المجلد الموجود به ملف HTML نقوم في هذه الحالة بكتابة اسم هذا المجلد تتبعه إشارة "/" ثم اسم الصورة وامتدادها.

الحالة الثانية:
أن يكون ملف HTML موجود في مجلد ما وتكون الصورة موجودة في مجلد آخر بنفس المستوى أي أنهما مجلدين متجاورين وليسا متفرعين أحدهما عن الآخر، في هذه الحالة نكتب نقطتين (..) لتوجيه المتصفح للخروج من المجلد الفرعي الحالي حيث يتواجد ملف HTML ومن ثم الدخول إلى مجلد الصور وإحضار الصورة।

ثانياً : الخصائص التي تستخدم مع وسم الصورة

تمرين 2:
قومي بتصميم صفحة بلغةHTML تحتوي على التالي:
الفواكه
البطيخ مفيد للمصابين بالروماتيزم و مدر للبول و علاج فعال للامساك لاحتوائه على كمية كبيرة من الالياف و العصير الذي يقي من مرض التيفود.
ثمار الكرز غنية بمركبات كيميائية تعمل على خفض نسبة السكر في الدم، ويحتوي على مواد أخرى تعمل على تحسن صحة القلب وتقلل من نشوء السرطان .
المطلوب:
· اضافة عنوان للصفحة باسم "الفواكه"
· اضافة لون خلفية باستخدام خاصية
Bgcolor="color" في الوسم body
· لون الخط لكامل المستند أزرق الحجم 5.
· اضافة صورة للبطيخ على يسار النص
· اضافة صورة للكرز على يمين النص
· اضافة الخاصية Alt إلى وسم الصورة موضحة بها اسم كل فاكهة.
· اضافة حد فاصل أحمر اللون الحجم 4 بين كل فاكهة باستخدام الوسم المفرد HR
· حفظ المستند باسم fruit.html

للحصول على مجلد الصور انقر على الرابط التالي:

http://www.4shared.com/file/233645279/646ada0a/images.html

رابط الجواب:
http://www.4shared.com/file/233574060/7ea1e89a/fruit.html