BY A7MED ABD EL SALAM

The_Eagle20300@yahoo.com

مبادئHTML

نبذةتاريخية حول لغة
الـ

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

أساسيات الوسوم (الأوامر):
هي عبارة عن مجرد ملف نصي عادييكتب في أي برنامج نصي (على سيبلالمثال NotePad) ويحفظ بصيغة HTML أوHTM , ويحتوي هذا المستند على شفراتخاصة تسمى

على سبيلالمثال :

لكتابة

** قبلكل شيء إفتح أي برنامج كتابة لديك علىسبيل المثال برنامج

<HTML dir=rtl>
        <HEAD>
        <TITLE>صفحة        إختبار</TITLE>
        </HEAD>
        <BODY>
        مرحباً بكم في عالم الإنترنت
        </BODY>
        </HTML>

إحفظالملف بأي إسم ولكن بصيغة

وسومHTML الحيوية :
الوسمالأول <HTML dir=rtl> يشير للمستعرض أنَّالمواد التي تليه يجب معالجتهاباستعمال قواعد التركيب النحوي ..والبنيويالذي تفرضه لغة HTML ، و

وسومالترويسة :
يشيرالوسمان .. <HEAD> و <

وسومالجسم :
المنطقةالتالية المبينة في السرد محصورةبالوسمين <BODY> و <

سيكونالناتج في المستعرض كالتالي:-

مرحباً بكم في عالم الإنترنت

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

<HTML dir="rtl">
        <HEAD>
        <TITLE>صفحة إختبار</TITLE>
        </HEAD>
        <BODY>
        هذا يريك <B>نصاً عريضاً</B>
        هذا يريك <I>نصاً مائلاً</I>
        هذا يريك <U>خطاً تحت النص</U>
        <FONT COLOR="blue">هذا يريك كيفية        تغيير لون الخط</FONT>
        <FONT SIZE="5">هذا يريك كيفية        تغيير حجم الخط</FONT>
        <FONT FACE="Tahoma">هذا يريك كيفية        تغيير نوع الخط</FONT>

السطرانالأولان في الجسم يحتويان على وسميتنسيق أحرف أساسيين ، لجعل النص أسودعريضاً ومائلاً. في السطر الأول ،يحيط الوسمان <B> و <

يمكنك استعمالالوسم <FONT> لإعداد تنسيق نصيأكثر تعقيداً. يدعم هذا الوسم عدةسمات (attributes) متنوعة ، منها السمة

يبيّن الوسم<FONT

يتضمن الوسم<FONT

يستعمل الوسم<FONT

سيكون الناتجفي المستعرض كالتالي :-

هذا يريك نصاً عريضاً هذا يريك نصاً مائلاً هذا يريك خطاً تحت النص هذا يريك كيفية تغيير لون الخط هذا يريك كيفية تغيير حجم الخط هذا يريك كيفية تغيير نوع الخط

يمكن وسم واحدأن يكون له عدة سمات. مثلاً الإعدادالتالي للوسم <FONT> ينتج نصاً أزرق كبيرمكتوب بالخط Times

يمكنك كتابةالسمات في أي ترتيب تريده لتحقيق نفسالنتيجة.

قد تتفاجأ بأنتعلم أن المستعرض يعالج أسطر HTMLالمستقلة في المثال السابق كأنها سطرمتواصل من النص يلتف فقط عندما يصلإلى حافة إطاره. ولكن هناك وسوم تجعلهيبدأ سطراً جديداً مثل <

<HTML dir=rtl>
        <HEAD>
        <TITLE>صفحة        إختبار</TITLE>
        </HEAD>
        <BODY>
        مرحباً بكم في عالم الإنترنت
        <BR>
        لا يوجد فاصل أسطر إضافي أعلى        هذا النص.
        <P>
        يوجد فاصل أسطر إضافي أعلى هذا        النص.
        </BODY>
        </HTML>

سيكون الناتجفي المستعرض كالتالي:-

مرحباً بكم في عالم الإنترنت
لا يوجد فاصل أسطر إضافي أعلى هذا النص.

يوجد فاصل أسطر إضافي أعلى هذا النص.

تنسيقالأسطر

كما قلنافي مبادئHTML أن الوسمان<BR

<HTML alt=rtl>
<HEAD>
<TITLE>إختبار تنسيق فقرة</TITLE>
<BODY>
<P ALIGN="right">هذا الفقرة على يمين الصفحة.</P>
<P ALIGN="center">هذه الفقرة في منتصف الصفحة.</P>
<P ALIGN="left">هذه الفقرة على يسار الصفحة.</P>
<CENTER>هذا النص في الوسط أيضاً ولكن بوسم آخر</CENTER>
</BODY>
</HTML>

سيكونالناتج ما يلي:-

هذه الفقرة على يمين الصفحة.

هذه الفقرة في منتصف الصفحة.

هذه الفقرة على يسار الصفحة.

هذا النص في الوسط أيضاً ولكن بوسم آخر

لنبدأ الآنالتكلم عن وسم آخر. ألا وهو وسم الخطالأفقي<HR> الذيينشئ خطاً أفقياً على عرض الصفحة.أنظر إلى هذا الخط ..

تستطيع أنتضع الخط أعلاه بمجرد كتابة الوسم <

سيكونالناتج كالأتي:

ولكن لونهخافت. لنلونه بلون آخر. مثلاً بالأحمر.أكتب الأمر التالي:-

سيكونالناتج كالأتي:

أن لونالخط لم يتغير لماذا؟. إذا لم يتغيرلون الخط.. فهذا يعني أنك تستعملمستعرض Netscape.لأن نتسكايب لا يغير لونالخط الأفقي.

عظيم.. ولكنهذا الخط يبدو كبيراً. أريد أن أصغرحجمه بحيث يأخذ 50% من الصفحة. أكتبالأمر الآتي:-

سيكونالناتج كالآتي:-

أريده أنيكون على جهة اليمين . أكتب الأمرالآتي :-

سيكونالناتج كالآتي:-

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

لنأتي إلىوسوم أخرى. الوسوم <H1>, <H2

<HTML alt=rtl>
<HEAD>
<TITLE>إختبار</TITLE>
</HEAD>
<BODY>
<H1>النمط الأول
<H2>النمط الثاني
<H3>النمط الثالث
<H4>النمط الرابع
<H5>النمط الخامس
<H6>النمط السادس
</BODY>
</HTML>

سيكونالناتج ما يلي:-

النمط الأول

النمط الثاني

النمط الثالث

النمط الرابع

النمط الخامس

النمط السادس

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

<HTML alt=rtl>
<HEAD>
<TITLE>تشييد اللوائح</TITLE>
</HEAD>
<BODY>
<UL>
<LI>اللائحة الأولى
<LI>اللائحة الثانية
<UL>
<LI>اللائحة الأولى من اللائحة الثانية
<LI>اللائحة الثانية من اللائحة الثانية
</UL>
<LI>اللائحة الثالثة
</UL>
</BODY>
</HTML>

الناتجكالتالي :-

اللائحة الأولى
اللائحة الثانية
- اللائحة الأولى من اللائحة الثانية
- اللائحة الثانية من اللائحة الثانية
اللائحة الثالثة

هل عرفتالآن معنى اللوائح؟ لاحظ أنك بعد أنتكتب الوسم <UL> لابدأن تفتح وسم <LI> ثمنص اللائحة. وإذا أردت أن تفتح لائحةداخل لائحة لابد أن تكتب الوسم <

أنت تشربقهوتك على مهل.. حسناً سأتحدث عنالجداول بينما أنت تشرب قهوتك.الجداول تساعدك في تنظيم وترتيبوتنسيق النصوص والقواعد. هل تستخدممايكروسوفت وورد؟ هل استخدمتالجداول فيه؟ يمكنك تنسيق الجداول فيإنترنت كتنسيق الجداول في وورد أوإكسل. والوسم الخاص بالجداول هو <

<HTML dir=rtl>
<HEAD>
<TITLE>مثال للجداول</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>الصف الأول العمود الأول
<TD>الصف الأول العمود الثاني
</TR>
<TR>
<TD>الصف الثاني العمود الأول
<TD>الصف الثاني العمود الثاني
</TR>
</TABLE>
</BODY>
</HTML>

الناتجكالتالي :-

الصف الأول العمود الأول	الصف الأول العمود الثاني
الصف الثاني العمود الأول	الصف الثاني العمود الثاني

إن السمة

الروابط

الوسم الخاص بالروابطهو <

<A HREF="MyLink.html"> هذه الجملة ستكون مربوطة بالملف </A>

سيكونالناتج كالتالي :-

هذه الجملة مربوطة بالملف

فعند النقر على الجملة، سيؤدي ذلك إلى فتح الملف MyLink.htm فيالمستعرض. لنربط الآن صورة ألا وهي

سيكونالناتج كالتالي :-

عندالنقر على الصورة .. سيؤدي ذلك لفتحالملف MyLink.html.ولكن هذه الصورة يحوطهاإطار أزرق ،

القيمة

لنجري الآنهذا الإختبار للتعرف على الروابطأكثر:-

<HTML DIR="rtl">
<HEAD>
<TITLE>إختبار الروابط</TITLE>
</HEAD>
<BODY>
إضغط
<A HREF="MyLink.html">
هنا
</A>
لفتح الملف. أو إضغط الصورة.
<A HREF="MyLink.html"> <IMG SRC="MyPicture.jpg" BORDER="0"></A>
</BODY>
</HTML>

سيكونالناتج كالتالي :-

إضغط هنا لفتح الملف. أو إضغط الصورة.

ماذا لو أردت أن تجعلالإرتباط بريد إلكتروني؟ لنفترض أنكتريد أن تربط الكلمة "

في المستعرض عندماتنقر على كلمة (بريد)سيتم تشغيل أحد برامج البريد كـ (

بريد

الرسوم

الوسمالخاص بالرسوم هو <

سيكونالناتج كالآتتي :-

هذا السطريعرض الصورة MyPicture.jpg

سيكون الناتج كالتالي:-

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

سيكون الناتج كالتالي:-

تستطيعوضع إسم لهذه الصورة إذا مررت الفأرةفوقها باستخدام السمة

سيكون الناتج ما يلي :-

الباب القديم

لاحظ أنك إذا مررتالفأرة فوق الصورة فسيعرض لك إسمالصورة "البابالقديم".

ماذا لو أردت أن تجعلخلفية الصفحة MyPicture.jpg؟ أكتب هذاالسطر :-

<BODY BACKGROUND="MyPicture.jpg">

سيكون الناتج ما يلي :

روابطكثيرة في صورة واحدة

هل سبق وأن شاهدت موقع يعرض لكصورة واحدة وعند الضغط على أي جهة منالصورة تنفتح صفحة مختلفة عن الجهاتالأخرى؟

إذا كانت الإجابة لا..فإليك هذا المثال:-
‎‎ ‎ ‎‎ ‎‎‎‎ ‎‎

لاحظ أنك عند الضغط علىالأمير، فأن الصفحة ستنتقل إلى مجلةينابيع المعرفة. وعند الضغط علىالسلطان، فأنه سيفتح موقع داونلود.وعند الضغط على وجه الأميرة، فإنموقع أين سيفتح. كان ذلك باستخدام وسم<MAP> وكان تخطيط الصورة كالتالي :-

تقسيم الصفحة

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

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

وسم تقسيم الصفحةهو <

لنفترض أنك تريد تقسيمالصفحة إلى ثلاثة أقسام، قسم

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

<FRAMESETROWS="

ومعنى هذا أن التقسيم سيكونأفقي ROWS.القسم العلوي سيأخذ 50بكسل الباقي "*"سيأخذه القسم السفلي.
- حسناً. هل أبدأ بالتقسيم العمودي؟

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

<FRAMESRC="

نأتي الآن إلى تقسيم القسمالسفلي من التقسيم الأفقي. وسيكونبالتأكيد عمودي، القسم الأيسر للعرضوالقسم الأيمن للقائمة الرئيسيةوالتي ستأخذ 150بكسل، وبدلاً من ROWSاستخدم COLSاختصار Columnsأي أعمدة أكتب التالي:-

<FRAMESETCOLS="

- حسناً هل هذا كل شيء؟

كلا .. بقي آخر خطوة من التقسيم.وهي أن القسم الأيسر سيكون للعرض main.htmlوالقسم الأيمن سيكون للقائمةالرئيسية menu.html. وذلك بكتابة التالي.

- بعض المتصفحات لا تقبل تقسيمالصفحة. فما العمل؟

يمكنك استخدام الوسم <

مثلاً. أكتب الآتي.

<NOFRAME>
المتصفحلديك لا يقبل تقسيم الصفحات.
</NOFRAME>

ها قد انتهينا من التقسيم و"

- ولكن يا أخ أحمد هل يمكنككتابة الكود من البداية إلى النهاية؟

حسناً...

<HTML>
<HEAD>
<TITLE>تقسيم الصفحة</TITLE>
</HEAD>
<FRAMESET ROWS="50,*">
<FRAME SRC="ad.html">
<FRAMESET COLS="*,150">
<FRAME SRC="main.html">
<FRAME SRC="menu.html">
</FRAMESET>
</FRAMESET>
<NOFRAME>
المتصفح لديك لا يقبل تقسيم الصفحات.
</NOFRAME>
</HTML>

<الوسائط المتعددة

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

لنفترض أنك تريد أنتجعل لصفحتك خلفية صوتية، وأن إسمملف الموسيقى هو Music.mid. أكتب ما يلي :-

لاحظ أننا وضعنا السطرالثاني بين الوسمين <

كمايمكنك عرض عناصر التحكم بالموسيقىعلى الصفحة باستخدام الوسم <

الرجاء الضغط على Stop لإيقاف الموسيقى التلقائية لهذا الموقع. لكي يتسنّى لك الإستماع لهذه الموسيقى.

الناتج كالتالي :-

هذا المتصفح لا يدعم تقنية تشغيل الموسيقى على الصفحات. جرِّب مايكروسوفت إكسبلورر 5. يمكنك تنزيل هذا البرنامج من الموقع التالي : http://www.microsoft.com/ie

كما يمكنك التحكمبارتفاع وعرض العناصر بواسطةالسمتين WIDTHو HEIGHT

الناتج كالتالي:-

ويمكنك أيضاً أنتجعلها تبدأ فور تنزيل الصفحةباستخدام السمة AUTOSTARTكالتالي:-

LEARN HTML

النمط الأول

النمط الثاني

النمط الثالث

النمط الرابع

النمط الخامس

النمط السادس