دورة لغة HTML : الدرس الرابع الفقرات والقوائم

السلام عليكم ورحمة الله وبركاته وكل عام وانتم بخير اهلاً بكم الى درس جديد من دورة HTML وسنتعلم اليوم ترتيب وتنسيق الصفحات بشكل عام ان شاءالله
صحیح أن استخدامك للألوان والرسومات في الصفحة یضفي علیھا نوعاً من الحیویة، وأن الخطوط تعطي صفحتك رونقاً وجمالاً. لكنك إن لم تھتم بترتیب صفحتك أو تقضي بعض الوقت في تنسیق ھیكلھا العام وتنظیم فقراتھا وقوائمھا، فإنه من الصعب علیك لحصول على صفحة ویب ناجحة. فالترتیب ھو الخطوة الأولى لجذب اھتمام الزائر أو القارئ لصفحتك وتسھل علیه فھم الخطوط العریضة للصفحة.
للتذكير هناك بعض الوسوم المهمة التي تعرفنا عليها سابقاً وهي اولاً الوسم < P > الذي يقوم بانهاء الفقرة. وثانياً الوسم < BR > الذي يقوم بانهاء السطر الحالي وبدء سطر جديد.

لقد تعلمنا سابقاً ان الوسم < P > هو وسم مفرد لكن يمكن استخدامه كوسم مزدوج ( < P >...< P/ > ) وفي هذه الحالة يصبح بإمكاننا استخدامه لتحديد اتجاه الفقرة واتجاه النص فيها
وسنستحدم معه الخصائص DIR ،ALIGN.

الخاصية ALIGN تحدد محاذات الفقرة وهي تأخذ القيم (LEFT,RIGHT,CENTER) وسأوضحها لكم ببعض الامثلة

مــثـــال:
ـــــــــ
المثال الاول

المثال الثاني

المثال الثالث والأخير

وايضاً يوجد وسوم اخرى نستخدمها لتنسيق الفقرات وهي الوسوم < BLOCKQUOTE > ... < BLOCKQUOTE/ > (وسوم الفقرات المقتبسة), ووظيفتها تمييز الفقرة او النص من خلال ادراج مسافة اضافية على الهامشين الايمن والايسر لها.
والحقیقة أنك تستطیع وضع عدة وسوم معاً إذا أردت إدراج ھوامش أكبر. كما في المثال التالي:

طبعاً لا يقتصر استخدام هذان الوسمان على الفقرات المقتبسة فانا استخدمها في موقعي في بداية ونهاية كل صفحاته ليكون النص بعيداً عن حاشية الصفحة ولا يكون ملاصقاً لها فيكون اجمل.

والآن تأمل ھذا الشكل وحاول أن تستنتج كیف قمت بإعداده...!؟

.
ربما توصلت إلى أني استخدمت عدداً كبیراً من وسوم الفراغات &;nbsp ونھایة
السطر< BR >.
حسناً، إستنتاجك لا بأس به ولكنه لیس دقیقاً فأنا لم أستخدم أیاً من ھذه الوسوم ھنا.
بل كل ما فعلته بعد إعداد ھذا الشكل ھو وضعه ضمن:
< PRE > ... < /PRE >
وھما اختصار لكلمة Preformated أي المنسق مسبقاً. وبالفعل فقد احتفظ ھذا الشكل بالتنسیق المسبق الذي تم إعداده به. لكن تم تحویل الخط إلى خط موحد المسافات (راجع الدرس السابق) ولو لم أقم بوضعه ضمن ھذه الوسوم لكانت النتیجة كالتالي:
A B C D E F G H I J K L M N O P Q R S T
لاحظ أن ھذا الوسم یستخدم مع الفقرات التي لا نحتاج فیھا إلى تنسیقات متعددة للخطوط أو الألوان. بل فقط مع الفقرات العادیة موحدة الخط والتنسیقات.
ــــــــــــــــــــــــــ
الــقــوائــم
ــــــــــــــــــــــــــ
تحتوي لغة HTML على مجموعة من الوسوم الخاصة بتنظیم البیانات في قوائم وباستخدام عدة خیارات. وھناك نوعین من القوائم:
1-أولھما المتسلسلة Lists Ordered.
والیك المثال التالي علیھا
أسماء بعض المدن

القدس
1. 
   عمان
   
2. 
   بيروت
   
3. 
   دمشق
   
4. 
   الرياض
   
5. 
   

... 2-وثانیھما القوائم غیر المتسلسلة Unordered Lists وھذا مثال علیھا: أسماء بعض الدول:

الاردن
• 
  فلسطين
  
• 
  سوريا
  
• 
  لبنان
  
• 
  السعودية
  
• 
  

........ عند التعامل مع القوائم بنوعیھما نحتاج إلى وسوم خاصة بتحدید بدایة ونھایة القائمة ووسوم تحدد بنود ھذه القائمة. بالنسبة للقوائم المتسلسلة نستخدم الوسوم: < OL > ... < OL/ > ــــــــــــــ أما بالنسبة للقوائم غیر المتسلسلة فنستخدم < /UL > ... < UL > ــــــــــــــ إذن عندما قمت بإنشاء القوائم السابقة استخدمت الأوسام التالیة:

عمان< LI > القدس< LI > دمشق< LI > بيروت< LI> الرياض< LI >

.. < UL > < LI > الأردن فلسطين< LI > سوريا< LI > بيروت< LI > السعودية< LI > .... والخاصیة الوحیدة التي تستخدم مع ھذه الوسوم ھي TYPE ووظیفتھا تحدید شكل الرمز الظاھر مع بنود القائمة، وعادة تستخدم مع وسوم بدایة القوائم

أو
وبذلك نحدد رمزاً واحداً لكل القائمة. ولكن نستطیع استخدامھا أیضاً مع وسم البنود < LI > لإعطاء تحكم أكبر في مظھر القائمة من خلال تحدید رمز مختلف لكل بند. عند وضعھا ضمن تعریف القوائم المتسلسلة تأخذ القیم: A, a, I, i التي تغیر رموز الترقیم من الأرقام العادیة الإفتراضیة (والتي رمزھا 1) إلى ترقیم باستخدام الأحرف اللاتینیة الكبیرة أو الصغیرة، أو باستخدام الأرقام الرومانیة كما ترى في الجدول التالي:

والحدیث عن ھذه الخاصیة یقودني إلى الحدیث عن مسألة مھمة في لغة HTML وھي مسألة الوسوم والخصائص المحددة بمتصفح معین دون غیره أي التي تعمل مع أحد المتصفحات ولا تعمل مع غیره. والسبب في ذلك أن ھذه الخاصیة تستخدم أیضاً مع القوائم غیر المتسلسلة، لكن لیس بصورة مطلقة...كیف؟ أنت ترى أن الرمز الموجود عند كل بند في القائمة ھو عبارة عن نقطة سوداء یطلق علیھا اسم Disc وھي المعرفة ضمناً في خاصیة TYPE.لكن ھناك رموز أخرى یمكن إظھارھا وھي المربع square، والدائرة المفرغة circle وتعرف بالشكل التالي:

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

ھناك نوع خاص من القوائم یدعى قوائم الشرح أو التعریفات Definition Lists وكما یدل الإسم تستخدم عندما نرید إدراج قائمة من المصطلحات یتبع كل واحد منھا شرح أو تعلیق.

HTML

Hyper Text Markup Language


WWW

World Wide Web


FTP

File Transport Protocol


GIF

Graphical Interchange Format
www.dinaro.com/vb3
60


JPG, JPEG

Joint Photographic Experts Group


ونحتاج لإنشاء ھذه القوائم إلى ثلاثة وسوم: الأول < DL > ... < DL/ > لتعریف بدایة ونھایة القائمة. والثاني < DT > ویوضع قبل كل مصطلح لتحدیده، وھو وسم مفرد. ما الثالث فھو < DD > وھو وسم الشرح أو التعلیق وھو أیضا مفرد. ـــــــــــــــــــــــــ الى هنا ينتهي هذا الدرس والى اللقاء الى درس جديد والسلام عليكم ورحمة الله وبركاته
Tweet

مواضيع ذات صلة
دورة لغة HTML : الدرس الرابع الفقرات والقوائم
4/ 5
Oleh Ahmed alqaisi
Ahmed alqaisi تمّ النشر بـ 9:34 ص أضف تعليق