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

ماذا تحتاج لاختيار الصفحات التي تكتبها؟

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

كيف يمكنك أن تتطلع على الصفحات التي يكتبها الآخرون؟

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

مم تتكون صفحة الإنترنت؟

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

صيغة أوامر HTML

معظم أوامر HTML تتكون من أمر تكتبه في النقطة التي ترغب فيها في ابتداء مفعول ذلك الأمر ونفس الأمر مع زيادة الشرطة المائلة لإنهاء مفعوله.  مثلاً لو أردنا أن تظهر الجملة في المربع التالي متوسطة في المربع فسنكتب أمر التوسيط <center> في بداية الفقرة ونفس الأمر مع زيادة الشرطة المائلة في نهاية الفقرة (أي </center>).

<center>ستظهر هذه الفقرة في وسط المربع</center>

وعندما تشاهدها على المتصفح فستظهر بهذا الشكل:

ستظهر هذه الفقرة في وسط المربع

هناك بعض الأوامر التي لها أمر افتتاح ولا تتطلب أمر إغلاق مثل أمر <BR> الذي يستخدم للانتقال لسطر جديد مع البقاء في نفس الفقرة.  وكما قد لاحظت أنه يمكنك كتابة أوامر HTML بالحروف الصغيرة كما في المثال الأول أو بالحروف الكبيرة كما في المثال الثاني أو خليط من الإثنين وسنحاول في هذا الدليل استخدام الحروف الكبيرة لأوامر HTML والحروف الصغيرة لغير ذلك إن احتجنا إليها.

الهيكل العام لصفحة الإنترنت

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

كما ذكرنا سابقاً فإن معظم الأوامر تتكون من أمر لبدء مفعول الأمر وأمر لإنهاء مفعوله.  أمرا <HTML> و </HTML> ضروريان لكي يعرف المتصفح أن هذه الصفحة هي صفحة إنترنت وليست مجرد صفحة تحتوي على بيانات.  كذلك لابد من وجود أمري  <BODY> و  </BODY>.  أما أمرا <HEAD>  و </HEAD>  فيمكن الاستغناء عنهما في حالة عدم كتابة أوامر هناك وإن كنا ننصحك بإدراجهما في كل صفحة.  كذلك يمكنك أن تشاهد أن أوامر <HTML> و </HTML> محاذية لليسار بينما حركنا الأوامر الأخرى لليمين قليلاً وهذا ليس ضروري ولكنها طريقة ستساعدك على تتبع أماكن هذه الأوامر وخاصة عندما تطول محتويات الصفحة وتكثر أوامر HTML فيها.

 

وضع عنوان للصفحة

قلنا سابقاً بأن العنوان الذي تختاره لصفحتك - وهذا غير العنوان الذي يراه الزوار في بداية محتويات الصفحة وإنما هو العنوان الذي يظهر في أعلى شاشة المتصفح - هو لتعريف الزوار بالصفحة وكذلك لاستخدام برامج البحث في الإنترنت حيث أن هذه البرامج تأخذ عناوين الصفحات وتظهر للباحث ولهذا فحاول أن تجعل العنوان يدل فعلاً على محتوى الصفحة.  وعنوان الصفحة يظهر بين أمري <HEAD> و </HEAD> كما هو مبين في المربع التالي:

لاحظ أننا كتبنا أمري <TITLE> و </TITLE> في نفس السطر وهذا أيضا ليس ضروريا حيث أنه يمكنك أن تكتب كل أمر في سطر.

 

أوامر التمييز

هناك ثلاثة أوامر ستحتاج لها كثيراً وهي تُظهِر جزءاً من النص مميزاً عن غيره.  فمثلاً يمكنك أن تظهر كلمة أو فقرة بخط داكن أو مائل أو مخطط.  أمر التغميق هو <B> وبالطبع أمر </B> في النهاية.  أما أمر الميلان فهو <I> وأمر التخطيط هو <U>.  هذه الأوامر موضحة في المربع التالي:

وستظهر هذه الفقرة في المتصفح بالشكل التالي:

تلاحظ أنه يمكنك استخدام أكثر من أمر في نفس الوقت للحصول على شكل معين وعليك دائماً أن تستحضر في ذهنك أن تبدأ بأمر الإفتتاح قبل الجزء الذي تريد لذلك الأمر أن يؤثر فيه وتنهي بأمر الإغلاق بعد انتهاء الجزء الذي تريد لذلك الأمر أن يؤثر فيه.  كذلك لاحظ أننا قمنا بترتيب أوامر الإغلاق بعكس ترتيبها في أوامر الإفتتاح وهذه طريقة ضرورية في بعض الأحيان ولكنها قبل كل شئ ستسهل عليك تتبع الأوامر التي تستخدمها.

أمر تعريف الفقرات

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

 

لو أدخلت هاتين الفقرتين في صفحتك فسيظهران كما في المربع التالي:

 

 

 

أوامر التنسيق

ستحتاج في بعض الأحيان إلى تجعل بعض الفقرات منسقة من اليمين وبعضها منسقة من اليسار وبعضها في الوسط.  كل هذه المتطلبات متوفرة في أمر الفقرات <P> بالاضافة إلى أمر <CENTER> الذي يمكن استخدامه لتوسيط فقرات معينة.  يجب أن تفهم هنا أن أوامر التنسيق تنطبق على الفقرات فقط وليس على أجزاء منها لأنك متى أدخلت أمر <P> لابتداء تنسيق جديد فإن المتصفح يعتبر ذلك ابتداءاً لفقرة جديدة.  كذلك يجب أن تلاحظ أن أمر<CENTER>  يمكن أن يستخدم لتوسيط أي عدد من الفقرات في نفس الوقت كما هو موضح في المربع التالي:

 

لاحظ أننا نحتاج إلى استخدام الأمر <P> لتوزيع الفقرات.  ستظهر هذه الفقرات بالشكل التالي:

 

 

أما لمحاذاة الفقرات من اليمين أو اليسار أو الوسط فنستخدم الأمر <P> وذلك بإضافة الملحق ALIGN=”RIGHT” أو ALIGN=”LEFT”  أو ALIGN=”CENTER”  للأمر  <P>  نفسه كما في المثال التالي:

 

 

لاحظ أننا لا نحتاج إلا إلى الأمر </p>  لإنهاء الفقرة.  كذلك لاحظ أننا كتبنا كلمات الاتجاه ضمن حاصلتين وهو غير مطلوب ولكنه مفضل.   ستظهر هذه الفقرات منسقة كما في المربع التالي:

 

 

 

تحديد اتجاه عرض البيانات

أوامر التنسيق التي تكلمنا عنها في الفقرة السابقة تعنى فقط بتنسيق البيانات في كل فقرة ولكنها لا تعنى بتحديد اتجاه عرض تلك البيانات.  ورغم أننا لا نحتاج إلى أوامر تحديد اتجاه عرض البيانات إلا أننا لاحظنا أن بعض الرموز كالنقة والفاصلة التي تستخدم في ثنايا النصوص العربية قد لا تظهر متناسقة مع النص نفسه والسبب أن المتصفح يعتبر اتجاه العرض لجميع الفقرات من اليسار لليمين مالم تحدد أنت غير ذلك.  ويمكن تحديد اتجاه العرض باستخدام الملحق   DIR=”RTL” لتعيين أن اتجاه النص هو من اليمين لليسار والملحق   DIR=”LTR” لتعيين أن اتجاه النص هو من اليسار لليمين.  ويمكن إضافة هذين الملحقين إلى كثير من الأوامر كما سنوضح ذلك كل في مكانه.  إلى الآن فقد تكلمنا عن أمرين يمكن إضافة هذين الملحقين إليهما وهما   <BODY> و <P>.  يمكنك تحديد اتجاه العرض للصفحة كلها وذلك بإدراج إحدى الملحقين ضمن الأمر <BODY> كما في المربع الآتي:

 

 

أما في حالة الرغبة في تحديد اتجاه العرض في فقرة بعينها فيمكن إضافة إحدى الملحقين إلى الأمر <P> كما في المثال التالي:

 

 

ستظهر هذه الفقرات بالشكل التالي: