لغة النص المترابط (HTML)

 

ما هي لغة النص المترابط HTML

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

بالطبع، يُمكنك الاستعانة بالعديد من الأدوات البرمجية مثل لغة HTML (أي لغة النص المترابط HyperText Markup Language) بإصداراتها المختلفة، أو الاستعانة بأحد التطبيقات مثل مايكروسوفت فرونت بيج
(Microsoft
FrontPage).

ولغة النص المترابط هي لغة برمجية تُستَخدَم لبناء صفحات الويب، وتتكوَّن هذه اللغة من نصوص (texts)، ورموز (tags) تحيط بعناصر الوثيقة (document elements) وتحدِّدها، وتبيِّن هذه اللغة للبرنامج المستعرِض ما ينبغي عمله عند النقر على رابطة معيَّنة وتنشيطها.

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

 

 

عناصر بناء وثيقة HTML

هي عناصر مطلوبة في الوثائق التي تعتمد لغة النصّ المترابط HTML.
وجميع العناصر التالية ضرورية للتأكّد من مطابقة الوثيقة لأي معيار
HTML:

<HTML>……</HTML>

<HEAD>……</HEAD>

<BODY>……</BODY>

وسنعرِّج فيما يلي على هذه العناصر وبعض العناصر الأخرى في لغة HTML.

 

 

عنصر <HTML>

هذا العنصر هو الذي يُعرِّف الوثيقة على أنها وثيقة تحتوي عناصر HTML، وهو يقوم بدور السور الذي يُحيط ببقيّة الوثيقة بما في ذلك جميع العناصر الأخرى. ويتمّ استخدام هذا العنصر بمثابة بداية لوثيقة HTML ، وهو يدلّ على أن هذه الوثيقة تُلبّي معايير HTML. وتكون الصياغة كما يلي:

<HTML>

بقية الوثيقة تأتي هنا

</HTML>



عنصر العنوان <TITLE>

 

يجب أن يكون لأي وثيقة HTML عنصر عنوان (title element) يكون اسما لها، ويُعبِّر عنها بطريقة مفهومة، ويُمكن استخدامه في قوائم History واستخدامه بمثابة علامة مميِّزة للنوافذ التي تعرض الوثيقة. ولا تظهر هذه العناوين عادة في نصّ الوثيقة نفسها، وفي الغالب، فإن المستعرِضات تُظهِر النصّ الموجود في عنصر العنوان في شريط العنوان (title bar) في نافذة المستعرِض.

 

عنصر رأس الوثيقة <HEAD>


يتكوَّن رأس وثيقة HTML من مجموعة غير مرتَّبة من المعلومات المتعلِّقة بالوثيقة، ومن المفروض أن لا يكون هنالك أي تأثير مباشر لعنصر <HEAD>...</HEAD> في شكل الوثيقة عند ظهورها.

عنصر جسم الوثيقة <BODY>


يتضمن جسم الوثيقة (document body)- كما يوحي اسمه- كلّ النصّ وجميع الصُوَر التي تشكِّل الوثيقة جنبا إلى جنب مع جميع عناصر HTML التي تضبط الوثيقة. ويكون ذلك وفق الصياغة التالية:

<BODY>

بقيّة الوثيقة تأتي هنا

</BODY>

ومن الممكن التحكّم بألوان الوثيقة وخلفيّتها عن طريق تحديد مجموعة من السِمات ( مفردها سِمة attribute) في صياغة عنصر <BODY>. وفي الصياغة الخاصة بالعناصر المتعدِّدة السِمات، يجب أن يكون هنالك فراغ (space) بين كل سِمة وأخرى. وعلى كلّ حال، فإنه ينبغي عليك معرفة أن معظم المستعرِضات تزوِّد المستخدِم بوسائل لطمس الألوان (color over-ride) ومنع تحميل الصُوَر والرسومات.

ومن سِمات هذا العنصر:

أ – سمة الخلفية (BACKGROUND)
يُمكن استخدام سِمة الخلفية background للإشارة إلى ملفّ صورة (image file) يُمكن وضعه على شكل بلاطات متراصّة في خلفية نافذة المستعرِض. وإذا كانت الصياغة بالطريقة التالية:<BODY BACKGROUND=”imagename.gif”> بقية الوثيقة تأتي هنا <BODY> فإن ذلك يعني وضع صُوَر أو نصوص الوثيقة على خلفية تتشكَّل من الصورة التي يضمّها ملف (imagename.gif) بحيث تكون هذه الصورة على شكل بلاطات متراصّة تغطّي المساحة التي تراها، أي بطريقة تشبه كثيرا الطريقة التي تُستَخدَم بها الصّوَر النُقْطية (bitmaps) على شكل ورق الجُدران في ويندوز (Windows Wallpaper). ويدعم معظَم المستعرِضات هذه السِمة التي تُتيح استخدام ملفات صُوَر بصِيَغ GIF و JPG لتكون خلفية لوثائق HTML، وجدير بالذكر هنا أن المستعرِض إنترنت إكسبلورر يدعم أيضا الملفات ذات الصيغة BMP بالإضافة إلى الصيغتين المذكورتين آنفا.

بسمة لون الخلفية (BGCOLOR)
تُتيح هذه السِمة اختيار لون خلفية الوثيقة، حيث تكون الصياغة على النحو التالي:

<BODY BGCOLOR=”#rrggbb”> بقية الوثيقة تأتي هنا </BODY>

 

 

عنصر جسم الوثيقة <BODY>

هذا العنصر هو المغلِّف (wrapper) الرئيس لجميع السمات التي يضمّها الجدول، حيث يتمّ إغفال جميع السمات الأخرى التي لا تكون مغلَّفة بالعنصر <TABLE>…</TABLE>.

ويتضمَّن العنصر <TABLE> السِمات التالية:

أ – سمة الحدود (BORDER)
يُمكن
استخدام هذه السِمة للتحكّم بحدود الجدول وإعدادها لتظهر بالشكل المطلوب في الوثيقة. وإذا كانت هذه السِمة موجودة، فإنه سيتمّ رسم حدّ يُحيط بخانات الجدول. وينبغي القول إن سُمك وشكل هذا الحدّ المفتَرَض سلفا (default) يختلف من مستعرِض إلى آخر. وإذا لم تكن هذه السِمة موجودة فلا يتمّ عرض أي حدود، ولكن شكل الجدول سيظهر مرتَّبا كما لو كانت الحدود موجودة ( أي تكون هنالك فراغات متروكة للحدود). ومن الممكن أيضا إعطاء قيمة محدَّدة لِسُمك الحدود على الشكل التالي:

BORDER="value"

بحيث تحدِّد هذه القيمة سُمك الحدود التي ستظهر محيطة بخلايا الجدول. وبوسعك وضع هذه القيمة بمقدار صفر (0) ممّا يعني إلغاء مساحات الفراغ التي حجزها المستعرِض لرسم الحدود ( أي كما في حالة اختيار عدم رسم حدود وهي تكافئ حالة عدم وجود السِمة).

ب – سمة حواشي الجدول (CELLPADDING)
السِمة CELLPADDING هي التي تُعبِّر عن حواشي الجدول ( أي مساحة الفراغ الخالية بين حدود خلية الجدول والبيانات التي تضمّها هذه الخلية). والقيمة المفتَرضَة سلفا هي 1. ومن الممكن إعطاء قيمة محدّدة لحواشي الجدول كما يلي:

CELLPADDING=”value”

ج – سمة الفراغات بين خلايا الجدول (CELLSPACING)
السِمة
CELLSPACING هي التي تُعبِّر عن مساحة الفراغ المطلوب تركها بين خلية وأخرى في الجدول. والقيمة المفتَرَضة سلفا هي 2. ومن الممكن إعطاء قيمة محددة لهذه السمة كما يلي:

CELLSPACING=”value”

وإذا قُمت بصياغة العبارة على النحو التالي:

<TABLE BORDER=”0” CELLSPACING=”0” CELLPADDING=”0”>

فإن الجدول سيحتل أقل مساحة ممكنة.

د – سمة عرض الجدول (WIDTH)
إذا استخدمت هذه السِمة، فإنها تُحدِّد بدقّة عرض (width) الجدول مقدَّرا بالنقاط الضوئية أو البكسلات (pixels)، أو تُحدِّد عرض الجدول بنسبة معيَّنة من عرض النافذة التي يعرضها المستعرِض. وتكون الصياغة كما يلي:

WIDTH=”value or percent”

هـ - سمة طول الجدول (HEIGHT)
إذا استخدمت هذه السِمة، فإنها تُحدِّد بدقّة طول (height) الجدول مقدَّرا بالنقاط الضوئية (البكسلات)، أو تُحدِّد طول الجدول بنسبة معيَّنة من النافذة التي يعرضها المستعرِض. وتكون الصياغة كالتالي:

HEIGHT=”value or percent”

و – سمة المحاذاة الجانبية ALIGN=”left|right
تدعم بعض المستعرِضات- ومنها إنترنت إكسبلورر ونافيغيتر- السِمة ALIGN الخاصة بالعنصر <TABLE>. وتُتيح هذه السمة تحديد محاذاة الجدول سواءً على الجهة اليُسرى أم اليُمنى من الصفحة، ممّا يسمح بانسياب النصّ بالشكل الملائم حول الجدول.

ز – سمة المحاذاة العمودية VALIGN=”top|bottom|center
يدعم المستعرِضان إنترنت إكسبلورر ونيتسكيب هذه السِمة التي تُستخدَم لتحديد المحاذاة العمودية للنصّ المعروض في خلايا الجدول. والقيمة المفتَرضَة سلفا التي يتمّ استخدامها في حالة عدم تحديد قيمة معيَّنة لهذه السِمة هي المحاذاة الوسطية
(center-aligned).

ح – سمة لون الخلفية (BGCOLOR)
يدعم
المستعرِضان إنترنت إكسبلورر ونيتسكيب استخدام هذه السِمة، وهي سِمة مدعومة أيضا في العنصر <BODY> . وتُتيح هذه السِمة تحديد لون خلفية الجدول، سواءً أكان ذلك عن طريق اختيار أسماء معيَّنة للألوان أم عن طريق ثلاثية الألوان
(
أحمر وأخضر وأزرق rrggbbtriplet). وتكون الصياغة كما يلي:

BGCOLOR=”#rrggbb|colourname

ط – سمة لون الحدود (BORDERCOLOR)
يدعم
إنترنت إكسبلورر هذه السِمة التي تُحدِّد لون حدود الجدول. ومن الممكن استخدام أي اسم من أسماء الألوان المعرَّفة سلفا، كما يُمكن أيضا استخدام أي لون من ضمن ثلاثية الألوان rrggbb. ومن الضروري جدا أن تكون سِمة BORDER موجودة في عنصر <TABLE> الرئيس كي تتمّ عملية تلوين الحدود. وتكون الصياغة كما يلي:

BORDERCOLOR=”#rrggbb|colourname

ي – سمة لون الحدود الفاتح (BORDERCOLORLIGHT)
يُتيح إنترنت إكسبلورر استخدام السِمة BORDERCOLORLIGHT من أجل تحديد اللون الفاتح لإظهاره على حدود الجداول الثلاثية الأبعاد. وهذه السِمة مضادة للسِمة BORDERCOLORDARK. ومن الممكن استخدام أي اسم من أسماء الألوان المعرَّفة سلفا، كما يُمكن أيضا استخدام أي لون من ضمن ثُلاثية الألوان rrggbb. ومن الضروري أن تكون السِمة BORDER موجودة في عنصر <TABLE> الرئيس كي تتمّ عملية تلوين الحدود. وتكون الصياغة كما يلي:

BORDERCOLORLIGHT=”#rrggbb|colourname

ك – سمة لون الحدود الغامق (BORDERCOLORDARK)
يُتيح
إنترنت إكسبلورر استخدام السِمة BORDERCOLORDARK من أجل تحديد اللون الغامق لإظهاره على حدود الجداول الثلاثية الأبعاد. وهذه السِمة مضادة للسِمة BORDERCOLORLIGHT. ومن الممكن استخدام أي اسم من أسماء الألوان المعرَّفة سلفا، كما يُمكن أيضا استخدام أي لون من ضمن ثُلاثية الألوان rrggbb. ومن الضروري أن تكون السِمة BORDER موجودة في عنصر <TABLE> الرئيس كي تتمّ عملية تلوين الحدود. وتكون الصياغة كما يلي:

BORDERCOLORDARK=”#rrggbb|colourname

ل – سمة إدراج صورة في خلفية الجدول BACKGROUND=”URL of image”

يدعم المستعرِضان إنترنت إكسبلورر ونيتسكيب إدراج الصُوَر في عنصر <TABLE>. وإذا تمّ استخدام هذه السِمة في عنصر <TABLE>، فإن ملفات الصُوَر ذات الصِيَغ المدعومة يُمكن أن تُستَخدَم بمثابة صورة خلفية للجدول.