HTML مقدمة في لغة

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

تتكون مفردات لغة Html من شيفرات تسمى TAGS أي الوسوم. و هي تستخدم بشكل أزواج و تكتب بالصيغة التالية من اليسار إلى اليمين

على سبيل المثال الوسم يستخدم لكتابة الكلمات بخط أسود عريض Bold كما في الشكل التالي:

و هناك بعض الوسوم الخاصة التي تستخدم بصورة مفردة أي بلا وسم نهاية مثل وسم نهاية السطر أو قد تستخدم بكلتا الحالتين مثل وسم الفقرة .

للبدء في كتابة ملف HTML لا نحتاج أية برامج خاصة. فقط كل ما نحتاج إليه برنامج لتحرير النصوص البسيطة و معالجتها، و برنامج المفكرة الموجود في Windows يفي بهذا الغرض. و كذلك إلى أحد متصفحات الإنترنت Netscape Navigator أو MS Internet Explorer لمعاينة الصفحات التي نقوم بإنشائها. و يجب أن يتم حفظ النص المكتوب بملف يحمل الاسم الممتد ‎.html أو ‎.htm
يوجد العديد من البرامج التي تستخدم لإنشاء صفحات Html. دون الحاجة لمعرفة هذه اللغة و تعلمها حيث يقوم المستخدم من خلالها بكتابة الصفحات و إنشائها بما تحويه من نصوص و رسومات و جداول ثم يقوم البرنامج بإنشاء الوسوم المناسبة من وراء الكواليس تلقائياً و حفظها بتنسيق html. أي أن دور المستخدم لا يتجاوز الكتابة و التصميم فقط، دون معرفته للشيفرة التي استخدمت. و بالتالي عدم قدرته على التحكم بأي وسم أو تعديل الشيفرة حسب الحاجة، إلا من خلال إعادته للتصميم الأساسي ثم الحفظ من قبل البرنامج. و هذه الطريقة و إن كانت سهله و سريعة إلا أنه لا يٌنصح باستخدامها لمن يريد معرفة هذه اللغة و التمكن منها.

الوسوم الأساسية لصفحة الويب و هي وسوم البنية Strictire tags لنأخذ الوسوم التالية:

وسم البداية	وسم النهاية
<HTML>	<‎/HTML>
<HEAD>	<‎/HEAD>
<TITLE>	<‎/TITLE>
<BODY>	<‎/BODY>

تلاحظ في الجدول السابق عدد من الوسوم كل منها يتألف من زوج من الوسوم أحدهما وسم البداية، و الآخر وسم النهاية. و يتميز وسم النهاية بوجود الرمز / . تأمل الرسم التالي، فهو يعطي فكرة عن تركيب ملف Html

تذكر دائما أن ملف Html يبدأ بالوسم <HTML> و ينتهي بالوسم <‎/HTML>.أما الوسم <HEAD> يحدد بداية المقطع و يحتوي معلومات عن الصفحة كاتبها و عنوانها و الكلمات المفتاحية المزودة من أجل محركات البحث و إلى ما هنالك و بالطبع لن يتم عرض أي من هذه المعلومات في نافذة المتصفح. كما يحتوي على العنوان الظاهر على شريط عنوان المتصفح. و هذا العنوان بدوره يحتاج لأن يوضع بين الوسمين: <TITLE> … <‎/TITLE> و بالطبع يجب كتابة الوسم <‎/HEAD> لإنهاء هذا المقطع.

الوسم <BODY> يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور و الجداول و باقي محتويات الصفحة. و يحتاج إلى وسم الإنهاء <‎/BODY>

و الآن هيا بنا نبدأ بتطبيق ما تحدثنا عنه في الأسطر السابقة بصورة عمليه... أفتح برنامج المفكرة Notepad و اكتب ما يلي:

<HTML>
<HEAD>
<TITLE>
Abdullatif Tarakji
<‎/TITLE>
<‎/HEAD>

<BODY>
Course Web Design

قم بحفظ ما قمت بكتابته في ملف و بأي اسم تشاء. لا تنسى أن الامتداد المستخدم في أسماء ملفات HTML هو htm. أو html. مثلاً أنا اخترت الاسمtest.html

ملاحظة:من الأفضل الاعتياد على ترتيب الأعمال التي نقوم بها و عليه يستحب إنشاء مجلد مستقل على القرص الصلب لحفظ الملفات به فهذا يسهل عملية استرجاع هذه الملفات سواء للعرض أو التحديث و اختر اسما للمجلد مثلاً أنا اخترت الاسم C:\htmlworks

و الآن هيا بنا نستعرض الملف الذي قمنا بإنشائه. قم بفتح متصفحك فإذا كان Netscape Navigator اختر الأمر Open File… من قائمة File. أما في MS Internet Explorer فاختر الأمر Open… من قائمة File. ثم حدد المسار الذي يوجد به الملف الذي قمنا بإنشائه. أنا قمت بتحديد المسار التالي:

C:\htmlworks\test.html و ذلك طبعاً حسب الافتراضات السابقة التي اتبعتها عند تخزين الملف. و إليك النتيجة:

هناك بعض النقاط عند كتابة صفحات الويب يجب معرفتها:

نستطيع كتابة الوسوم بالأحرف الإنجليزية الكبيرة UPPERCASE أو الأحرف الصغيرة lowercase. لذلك تستطيع الكتابة بأي شكل منهما أو حتى الكتابة بكليهما.

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

<HTML><HEAD><TITLE> Abdullatif Tarakji</TITLE></HEAD><BODY>
Course Web Design </BODY></HTML>‎

<HTML>
<HEAD> <TITLE> Abdullatif Tarakji <‎/TITLE><‎/HEAD>
<BODY>
Course Web Design
<‎/BODY>
<‎/HTML>

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

لتحديد نهاية السطر و البدء بسطر جديد نستخدم الوسم .و هو وسم نهاية السطرLine break لاحظ أن هذا الوسم مفرد، بمعنى أنه ليس له وسم نهاية.

و الآن قم بفتح ملف test الذي قمنا بإنشائه في المثال السابق، عدل الملف ليصبح بالشكل التالي

و هناك أيضا وسم الفقرات و يقوم بنفس عمل الوسم السابق بمعنى أنه ينهي السطر أو الفقرة و يبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات.

أما الفراغات نستطيع التحكم بها و بعددها باستخدام الوسم ‎ ‎ اختصار للعبارة Non Breakable Space. و يتم كتابة هذا الوسم بعدد الفراغات المطلوبه. و تذكر دائما أن هذا الوسم يجب كتابته بحروف صغيره.

<HTML>
<HEAD>
<TITLE> Abdullatif Tarakji <‎/TITLE>
<‎/HEAD>
<BODY>
Course      ‎
Abd      Web    ‎
‎  Design
<‎/BODY>
<‎/HTML>

قلنا سابقا أن الوسوم Tags تحتوي عادة على خصائص و تطلق أي خاصية Attribute على التعابير المضافة للوسوم من أجل تحديد الكيفية أو الشكل الذي تعمل به هذه الوسوم. بمعنى أن الوسم يخبر المتصفح عن العمل الذي يجب أن يقوم به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل.

يمكن تحديد لون الخلفية عن طريق خاصية BGCOLORسواء بذكر اسم اللون كما في المثال السابق الثاني أو عن طريق ذكر القيمة المقابلة لهذا اللون بنظام Hexadecimal ، بالطبع رغم دقة ذكر الاسم للون إلا أنه يعطينا مجالا محدودا إذا ما تمت مقارنته بما يمكن أن يتوفر لدينا من ألوان عن طريق ذكر القيمة الستة عشرية حيث نستطيع الاختيار بين 24 مليون لون.

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

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

‎<BODY BGCOLOR="#FFFF00"
BACKGROUND="#D661AC"
TEXT="#000066"
LINK="#FF0000"
VLINK="#000080"
ALINK="#999999" >‎
...
<‎/BODY>

وسوم الترويسة <‎Hn> Headings <‎/Hn>
يمثل حرفn مستويات الترويسة و هي من واحد و حتى ستة يمكن استخدامها لعرض نص بخط من نوع Times New Roman عريضBold مع تباعد بمقدار سطر واحد فوقه و تحته.تتراوح أحجام مستويات الترويسة عادة بشكل تنازلي من 24 نقطة حتى 8 نقاط. هذه الإعدادات غير ثابتة و إنما تعتمد على المتصفح الذي يتم عرض الصفحة فيه ، و غالبا ما تتيح جميع المتصفحات للمستخدمين إمكانية اختيار الخط و القيام بتغيير حجم جميع الخطوط و لكن حتى و إن تم تغيير الحجوم فسوف تبقى في نفس التناسب إلى بعضهما بعضا.
ليتضح لك الأمر أكثر إليك المثال التالي:

و تقبل الترويسة خاصية المحاذاة ALIGN و التي تأخذ القيم التالية:

تضع النص في الوسط	CENTER
تضع النص بمحاذاة اليمين	RIHGT
تضع النص بمحاذاة اليسار	LEFT
تقوم بضبط النص الموجود داخل وسمي الترويسة	JUSTIFY

والآن قم بفتح ملف test الذي قمنا بإنشائه سابقا، عدل الملف ليصبح بالشكل التالي:

في الأمثلة القادمة سأكتفي بذكر شفرة المثال فقط و لن أقوم بتكرار كتابة وسوم البداية ذلك أن الشرح يرتكز على متن الصفحة محتوياتها و أنت عند تطبيق هذه الأمثلة تستطيع وضعها في متن الصفحة بين وسمي <‎BODY> </BODY>

وسم الفقرة<‎p> Paragraph <‎/p>
نستطيع تحديد اتجاه الفقرة و اتجاه النص فيها و ذلك باستخدام خاصيتين هما: Align و Dir
تاخذ خاصية المحاذاة Align القيم التالية:

تضع النص في الوسط	CENTER
تضع النص بمحاذاة اليمين	RIHGT
تضع النص بمحاذاة اليسار	LEFT
تقوم بضبط النص الموجود داخل وسمي الترويسة	JUSTIFY

و تأخذ خاصية Dir و التي نستخدمها مع وسم الفقرة القيم التالية:

اتجاه النص من اليسار إلى اليمين (Left To Right)	LTR
اتجاه النص من اليمين إلى اليسار (Right To Left)	RTL

تحتاج إلى هذه الخاصية عندما تريد كتابة صفحتك باللغة العربية ، وإليك المثال التالي:

و بشكل عام يمكن استخدام الوسم <‎p> عندما يكون لدينا العديد من النصوص التي نريد تجزئتها إلى فقرات مؤشرة بوضوح، كما نستطيع استخدام الوسم <‎br> عندما نريد الحصول على أسطر مستقلة ولكنها مرتبطة ببعضها و قريبة، مثل: عنوان، قصيد، لائحة من العناصر.

ملاحظة:
1 - يمكننا إهمال وسم الإغلاق <‎/p> إذا كان النص التالي يبدأ بأحد الوسوم <‎Br> أو <‎P> أو بوسم
ترويسة Heading
2 - في الحقيقة لا يقتصر استخدام خاصية <Dir> مع وسم الفقرة و إنما يستخدم مع العديد من الوسوم .. فمثلا عندما ترغب في تصميم صفحة باللغة العربية فمن الأفضل لك استخدام هذه الخاصية مع وسم <html> لتصبح <html dir=rtl>

الأسطر الأفقية Horizontal rules
يستخدم الوسم <‎HR> لرسم سطر بلون النص الحالي و عادة هي بعمق 6 pixels مع مؤثرات ثلاثية الأبعاد 3D عبر عرض النافذة بأكملها. بمجرد أن تكتب في شفرتك <‎HR> فقط أكتب هذا الوسم وسترى خطاً كهذا

يحدد سمك هذا الخط مقدرا بالبكسل	SIZE
تحدد العرض و تأخذ قيمة مطلقة أو نسبية	WIDTH
يقوم بإلغاء الأثر ثلاثي الأبعاد ويصبح الخط عادياً	NOSHADE
تأخذ القيم التالية center , left , right	ALIGN
MS Explorerلتحديد اللون وهي تعمل فقط مع	COLOR

و الآن شاهد أثر خاصية NOSHADE عندما أضفناها لشفرة المثال الأخير:

التوسيط <‎center> </center>
جميع النصوص و الصور التي يتم إحاطتها بهذا الزوج من الوسوم يتم وضعها في مركز الصفحة أي وسط الصفحة <CENTER> This is a centered text </CENTER>