الدرس الثالث عشر - تاجات متنوعة

الأساسيات - الألوان - الخطوط - الفقرات والقوائم - الصور والرسومات - اللينكات - الجداول1 - الجداول2 - الإطارات1 - الإطارات2 - الإطارات3 - الإطارات4 - تاجات متنوعة - الخرائط الصورية - النماذج1 - النماذج2 - التاجات الخاصة - الويب واللغة العربية - الميتا تاج - المراجع

 

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

---

أترى هذا الخط الذي فصلت به هذه الفقرة عن الفقرة السابقة؟ إنه يسمى بلغة HTML بالمسطرة الأفقية Horizontal Rule وتستطيع إدراجه لتقسيم صفحتك بكتابة التاج <HR> فقط لا غير. أكتب:

<HR>

ليظهر لديك هذا الخط:

---

لكن هذا ليس كل شيء. لأنك تستطيع تحديد سُمك هذا الخط إذا أضفت له الخاصية SIZE وأتبعتها برقم يمثل هذا السُمك مثلاً:

‎<HR SIZE="5">‎

---

‎<HR SIZE="1">‎

---

‎<HR SIZE="10">‎

---

كذلك يمكنك تحديد عرض الخط باستخدام الخاصية WIDTH والتي من الممكن أن تأخذ قيمة مطلقة أو نسبية

‎<HR WIDTH="80%">‎

---

‎<HR WIDTH="400">‎

---

‎<HR SIZE="5" WIDTH="60%">‎

---

ومن الخصائص الأخرى لهذا الخط خاصية المحاذاه ALIGN والتي تأخذ القيم center, left, right

‎<HR WIDTH="80%" ALIGN="center">‎

---

‎<HR WIDTH="400" ALIGN="left">‎

---

‎<HR SIZE="5" WIDTH="60%" ALIGN="right">‎

---

وكما تلاحظ فإن هذا الخط يكتسب مظهراً غائراً ثلاثي الأبعاد وإذا أردت خطاً عادياً غير غائر فقم بإضافة الخاصية NOSHADE

<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE>

---

أما إذا كان لون هذا الخط لا يعجبك، فما من مشكلة إذ أنك تستطيع اختيار اللون الذي يعحبك من خلال الخاصية COLOR

<HR SIZE="5" WIDTH="60%" ALIGN="center" COLOR="#FF0000" NOSHADE>

---

---

التاج التالي في هذه المجموعة هو تاج الملاحظات ‎<!-- ... -->‎ ونستخدمه عند الحاجة لكتابة بعض الملاحظات الخاصة أو العبارات التوضيحية ضمن الملف والتي يقصد أن لا تظهر عند استعراض هذا الملف في المتصفح.

‎This is line one<BR>‎
‎<!-- This is line two --><BR>‎
‎and, this is line three<BR>‎

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

This is line one

and, this is line three

---

من المؤكد أنك تعرف التاج <BR> والذي يقوم بالتحكم في نهايات الأسطر (أي أنه ينهي السطر الحالي بحيث يظهر النص الذي يليه في سطر جديد). فهل تعلم أنه يوجد خاصية لهذا التاج وهي CLEAR؟ لكي تتوضح لك طبيعة عمل هذه الخاصية، قم بمراجعة ما ذكرناه في الدرس الخامس عن الصور والرسومات، واستخدام الخاصية ALIGN التي تحدد موقع هذه الصور على الصفحة. حسناً، لقد إتفقنا في حينه على أن القيمة right توجه الصورة إلى يمين الصفحة وأن النص الذي يليها يظهر ملتفاً بعدة أسطر على الجهة اليسرى. وكذلك الأمر (بصورة معكوسة) عند استخدام القيمة left. وحتى لو استخدمنا القيمة bottom أو لم نقم بإضافة الخاصية ALIGN أصلاً، فسوف نجد أن النص الذي يليها يظهر بمحاذاة الحافة السفلى للصورة. يتلخص عمل الخاصية CLEAR في منع النص من الإلتفاف على أي من جانبي الصورة. وهي تأخذ القيم right التي تمنع ظهور النص إلاّ عند بداية الهامش الأيمن الفارغ بعد الصورة (أي بمنتهى البساطة تمنع ظهور النص والتفافه على الجهة اليسرى للصورة... أليست هذه العبارة أسهل للفهم؟!!) وبالتالي فإن هذه القيمة تستخدم عندما تكون قيمة ALIGN للصورة هي right.

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

منطق معكوس... أليس كذلك؟ على أية حال إذا كنت تكرة هذه التعقيدات وتحب الطرق المختصرة مثلي، فاستخدم القيمة all التي تمنع الإلتفاف من جميع الجوانب.

ما رأيك أن نقتبس بعض الأمثلة من الدرس الخامس لنشاهد كيف تعمل مع إضافة هذه الخاصية؟ وسوف أدرج هذه الأمثلة كما هي نصاً وحرفاً أما الإضافات فهي المميزة باللون الأحمر

RIGHT أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة. ‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎ ‎<BR CLEAR="right">‎ فإذا أضفنا التاج <BR> مع الخاصية ‎CLEAR="right"‎ لوجدنا أنها منعت النص من الإلتفاف

والآن لنجرب استخدام القيمة left مع هذا المثال نفسه

RIGHT أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة. ‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎ ‎<BR CLEAR="left">‎ نلاحظ أن لا فائدة من استخدام التاج <BR> مع الخاصية ‎CLEAR="left"‎ فكل ما فعلته هو إضافة سطر فارغ أعلى النص

حسناً لنستخدم القيمة left في مكانها الصحيح، أي مع المحاذاة left

LEFT هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة. ‎<IMG SRC="image.jpg" ALIGN="LEFT">‎ ‎<BR CLEAR="left">‎ الآن تعمل هذه القيمة كما يجب (لا شيء أفضل من وضع التاج المناسب في المكان المناسب!)

وأترك لك المجال لكي تجرب القيمة all بنفسك

---

من القواعد الإفتراضية للمتصفحات أن الأسطر في كل فقرة تلتف وتنقسم بصورة تلقائية حسب إستبانة الشاشة وعرض نافذة المتصفح. (هذه نعرفها من الدرس الأول). لكن لنقل أننا نريد من أحد الأسطر أن لا ينقسم مهما كان مقدار الإستبانة وعرض النافذة.
حسناً، كل ما علينا فعله هو وضع هذا السطر ضمن التاجات

<NOBR> ... <‎/NOBR>

وهي إختصار لـِ NO BReak أي (لا إنقسام).

 

 Tweet  

 

 

أخي الكريم أرجوك لا تتردد في التواصل معي إذا كان هناك أي أسئلة
سواء عن طريق البريد الإلكتروني
mohamed@rushdy.net

أو بزيارة صفحتي علي الفيس بوك .. ولا تنساني من الليك
rushdy.net on facebook

 

الأساسيات - الألوان - الخطوط - الفقرات والقوائم - الصور والرسومات - اللينكات - الجداول1 - الجداول2 - الإطارات1 - الإطارات2 - الإطارات3 - الإطارات4 - تاجات متنوعة - الخرائط الصورية - النماذج1 - النماذج2 - التاجات الخاصة - الويب واللغة العربية - الميتا تاج - المراجع