كورس تعلم html مكتمل

بسم الله الرحمن الرحيم

دورة متقدمة في HTML
تأليف : mubarmej	14/9/2000

يشير الإختصار HTML إلى عبارة HyperText Markup Language أو لغة الترميز المتشعبة، وهذه اللغة هي اللغة المستخدمة في تصميم جميع صفحات الويب الإحترافية، فهل تريد أن تصمم صفحات ويب احترافية ؟ تعال الآن وشارك الركب.

مقدمة

تكتب ملفات HTML في صورة ملفات نصوص بسيطة (Plain Text)، تأخذ الإمتداد .html عادة، وتكتب في أي برنامج للنصوص البسيطة، في الويندوز استخدم Notepad، في اللينكس استخدم pico، في الماكنتوش استخدم SimpleText، جميع هذه البرامج مناسبة جدا لعمل صفحات HTML.

الأمر الآخر الذي ستحتاج إليه هو متصفح للإنترنت، ولن يكون أكثر من Internet Explorer أو Netscape Navigator أو الأثنين معا، وبما أنك الآن تتطلع على هذه الصفحة فلا بد من أنك تمتلك المتصفح أيضا، ستحتاج إلى معاينة الصفحات بالمتصفح بعد كتابها، ولأن المتصفحات تختلف من نوع إلى آخر لذا يفضل أن تقوم بمعاينة صفحتك بجميع المتصفحات الموجودة وتتأكد من أنها تظهر بشكل سليم في جميع المتصفحات، لأن الجمهور الذي سيزور صفحتك سيستخدم المتصفح الذي يفضله هو لذلك فإن عليك التأكد من أن الجمهور يستطيع رؤية الصفحة بمتصفحه أيا كان.

المشكلة التي قد تواجهك في كتابة صفحاتك هي دعم المتصفحات للغة العربية أولا، ودعمها لآخر التقنيات ثانيا، يقدم متصفح Internet Explorer من Microsoft دعما رائعا للغة العربية، ولآخر تقنيات الويب مثل HTML 4.0 و CSS و XML وغيرها، وأما متصفح Netscape Navigator فهو لا يدعم اللغة العربية بشكل جيد ولتحسين دعم اللغة العربية تحتاج إلى برنامج Sindbad من شركة صخر، وفي كل الأحوال يظل متصفح Netscape Navigator متصفحا متعبا في التصميم، لهذه الأسباب جميعا اعتمدنا متصفح Internet Explorer 5.0 كمتصفح قياسي لصفحات موقعنا، فهي تظهر بشكل رائع فيه.

ملحوظة

آخر إصدارة من متصفح Netscape Navigator هي الإصدارة 4.72 وآخر إصدارة من برنامج Sindbad هي 4.51 وقد توقفت شركة صخر عن تعريب Navigator في الآونة الأخيرة لأسباب لا أعرفها

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

تتكون ملفات HTML من قسمين :

· المحتوى : وهو ما يشاهده الجمهور في صفحتك.

· الوسوم :وهي الأجزاء التي تحدد كيف سيشاهد جمهورك المحتوى السابق، فهي تصف المحتوى من حيث التنسيق.

مثال على ذلك هذا السطر من لغة HTML ..

HTML is a <b>Great</b> Language

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

Great Language HTML is a

في المثال السابق تبدو أجزاء ملف الـ HTML واضحة، المحتوى الذي يتمثل في عبارة HTML is a Great Language، والوسوم المحاطة بعلامتي < و >، في المثال السابق استخدمنا وسما يدعى b وهو اختصار لكلمة bold (عريض)، ويأتي في صورة زوج من الوسوم، وسم للفتح ووسم للإغلاق، ويتميز وسم الإغلاق عن وسم الفتح في أنه يحتوي على علامة ( / ) قبل اسم الوسم، وسم الفتح يعني أن المتصفح يجب أن يطبق الوصف الموجود في الوسم على جميع النصوص الذي تلي الوسم وحتى يصل إلى وسم الإغلاق، مثل التشغيل والإطفاء .. وسم الفتح يشغل ميزة الخط العريض ووسم الإغلاق يطفأ هذه الميزة، وكما أن هنالك وسما للخط العريض .. هنالك وسم للخط المائل، وآخر لتغيير الخط، ووسوم أخرى للجداول والصور، جميع عناصر ملف HTML يتم إدراجها عن طريق الوسوم، وتحدد خصائصها أيضا عن طريق الوسوم.

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

HTML is a <font color="red">Great</font> Language

حيث ستبدو هكذا ..

Language HTML is a Great

في المثال السابق يتضح لنا أمر آخر، وهو أنه حتى نضبط خصائص أحد الوسوم فإننا نقوم بوضع إسم الخاصية بعد اسم الوسم بين علامتي الـ< والـ> ونفصل بين اسم الوسم والخاصية بمسافة بيضاء، وتكون الخصائص في صورة إسم="قيمة" أي إسم الخاصية ثم علامة المساواة ثم قيمة الخاصية بين أقواس الإقتباس المزدوجة، في المثال السابق قمنا بضبط الخاصية color للوسم font عند القيمة red، وإذا كان هنالك أكثر من خاصية يمكننا إضافتها أيضا في نفس المكان، بحث نفصل كل خاصية والأخرى بمسافة، مثلا ..

HTML is a <font color="red" size="+1">Great</font> Language

التي ستظهر هكذا ..

Language Great HTML is a

أمور إضافية يجب أن تعرفها عن HTML ..

· لغة HTML لا تراعي حالة الأحرف من حيث كونها كبيرة أو صغيرة، أي أنه في HTML وضع <b> لا يختلف عن <B>.

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

· بعض الوسوم تحتاج إلى وسم إغلاق وبعضها لا يحتاج إليه.

· قد وقد لا يحتوي وسم الفتح على خصائص إضافية، ولكن وسم الإغلاق لا يحتوي أبدا على هذه الخصائص.

· لغة HTML لا تراعي المسافات البيضاء، وتعتبرها جميعا مسافة واحدة، أي أن وضع مسافة واحدة بين كلمتين، يساوي وضع مسافتين، ويساوي وضع ثلاثين مسافة، ويساوي وضع سطر جديد، ويساوي وضع جدولة tab، كلها تترجم إلى مسافة.

· توضع التعليقات بين  أي أن المتصفح يتجاهل أي شيء بينهما وكأنه غير موجود.

بنية ملف HTML

يتكون ملف HTML القياسي من جزئين رئيسيين هما :

· الرأس Head : يحتوي على المعلومات الإضافية الخاصة بالمستند مثل عنوان الصفحة والكلمات المفتاحية فيها وغيرها من الأمور الخاصة بالصفحة والتي لا تعتبر من ضمن المحتوى.

· الجسم Body : وهو يحتوي على المحتوى الذي يراه المستخدم.

المثال التالي يبين كيفية تقسيم ملف HTML ..

<html>

    <head>

...

    </head>

    <body>

...

    </body>

</html>

المثال السابق صريح، ولا يحتاج إلى المزيد من التوضيح، الأجزاء التابعة للرأس توضع بين <head> و </head>، أما الأجزاء التابعة للجسم فتوضع بين الوسمين <body> و </body> .

يتم تحديد عنوان المستند الذي يظهر في شريط العنوان للمتصفح بإحاطته بـ <title> و </title>، والمكان الصحيح لوسم الـ <title> هو الرأس، حيث أن الوسم title لا يعتبر من ضمن محتوى الصفحة ولا يظهر في الصفحة، وهو يستخدم في عمليات البحث والأرشفة كما في محركات البحث، ولا يمكنك وضع وسوم تنسيق أخرى بين وسمي الـ title.

وتوجد أيضا وسوم أخرى تحدد صفات المستند تمسى وسوم meta توضع أيضا في منطقة الرأس، وسنأتي إليها في أمور إضافية في هذه الدورة.

أما باقي الوسوم فأغلبها يوضع في منطقة الجسم body.

الـخطوط و الألوان

الأنماط الأساسية

أولا العناوين وهي من ستة مستويات، العنوان الأول h1 والثاني h2 وهكذا حتى h6 ..

                                                                         <h1>Heading 1</h1>

                                                                         <h2>Heading 2</h2>

                                                                         <h3>Heading 3</h3>

                                                                         <h4>Heading 4</h4>

                                                                         <h5>Heading 5</h5>

                                                                         <h6>Heading 6</h6>

لتحديد الفقرات يتم إحاطتها بالوسم P

<p>Paragraph Text</p>

لتحديد اتجاه الفقرة استخدم الخاصية align في الوسم P

 <p align="left">Left aligned paragraph</p>

<p align="center">Centered paragraph</p>

<p align="right">Right aligned paragraph</p>

لعمل وصلة استخدم الوسم a مع الخاصية href لتحديد الوجهة، الوجهة قد تكون صفحة html وعندها يبدأ العنوان بـ http: وقد يكون عنوان موقع ftp وعندها يبدأ بـ ftp: وقد يكون بريدا إلكترونيا وعندها يبدأ بـ mailto: ،ستعرف المزيد عن المسارات عندما يأتي الحديث عن الصور في الدرس القادم، وبين وسمي الفتح والإغلاق ضع المحتويات الساخنة أو الوصلة نفسها، وهي قد تكون نصوصا أو صورا.

                                                                 <a href="http://www.microsoft.com/">Microsoft Corp.</a><br>

                                          <a href="mailto:mubarmej@hotmail.com">My E-mail</a>

يوجد أيضا استخدام آخر للوسم a باستعمال الخاصية name بدلا من href (يمكن استعمال الإثنين معا)، وبعد ذلك تستطيع أن تدرج وصلة عادية تشير إلى المكان الذي به <a name="">، وذلك بجعل خاصية href الوصلة العادية تشير إلى الإسم المحدد في name مسبوقا بعلامة #، مثال ذلك إذا أردت أن تضع وصلة تقودك إلى جزء معين من المستند الحالي، ستقوم بعمل <a name="myname"></a> في المكان المطلوب، ثم تدرج وصلة في أي مكان آخر كالتالي <a href="#myname">إسمي</a>، ويمكنك أيضا عمل ذلك عبر المستندات (من مستند إلى مستند آخر) بحيث تحدد بالضبط المكان الذي تريده من المستند الوجهة هكذا <a href="salem.html#myname">إسم سالم</a>.

يمكنك أيضا عمل وصلة إلى أعلى المستند بوضع #top في الخاصية href.

لإجبار النص على الإنتقال إلى السطر التالي استخدم <br> .

لإضافة مسافة استخدم   (لعمل أكثر من مسافة واحدة)

يمكنك استخدام الوسم pre لمنع المتصفح من تجاهل المسافات البيضاء ويحتسب المسافة مسافة والثلاث مسافات ثلاث مسافات والسطر الجديد سطرا جديدا، فقط بين الوسمين <pre> و </pre> .

يمكنك توسيط أي شيء بوضعه بين الوسمين <center> و </center>

الوسم Font

يعمل الوسم font دائما مع مجموعة من الخصائص، فهو لا يمتلك أي تأثير لوحده، وأهم خصائصه هي التي تحدد نوع الخط والتي تحدد لونه والتي تحدد حجمه.

أول خصائص الوسم font هي الخاصية face التي تحدد نوع الخط المستخدم

<font face="verdana">Verdana Text</font><br>

<font face="Courier New">Courier New Text</font>

بعد ذلك هنالك الخاصية color المستخدمة لتحديد لون الخط (أنظر إلى الألوان في الأسفل)

This is <font color="red">Red</font>
and this is <font color="blue">Blue</font>

الخاصية الثالثة هي الخاصية size وهي تحدد حجم الخط، توجد سبعة أحجام للخط، والخط الأساسي في الصفحة يأخذ أحد هذه الأحجام، وإذا أردت أن تغير حجم الخط في كلمة معينة أو جزء ما من النصوص استخدم الوسم font مع الخاصية size لزيادة حجم الخط أو إنقاصه بمقدار معين، إذا كا الخط الأساسي هو 3 فإنه يمكنك زيادة الخط 4 مرات حتى تصل إلى 7 وهو أكبر خط ويمكنك إنقاصه مرتين ليصبح 1 وهو أصغر حجم للخط، الخط الأساسي القياسي هو 3 ما لم تقم بتغييره، يتم تحديد أثر الرقم من حيث الزيادة أو النقصان بإضافة + قبل الرقم للزيادة و - قبل الرقم للنقصان، وعند الزيادة فوق الحجم 7 سيعرض المتصفح النص بالحجم 7 وكذلك عند النقصان إلى أقل من الواحد فسوف يتم إعتباره 1.

<font size="+4">Size 7</font><br>

<font size="+3">Size 6</font><br>

<font size="+2">Size 5</font><br>

<font size="+1">Size 4</font><br>

<font size="0">Size 3</font><br>

<font size="-1">Size 2</font><br>

<font size="-2">Size 1</font><br>

توجد أيضا طريقة سريعة لتكبير الخط خطوة واحدة أو تصغيره خطوة واحدة باستخدام الوسم <big> و <small>

<big>size 4</big><br>

<small>size 2</small><br>

<big><big>size 5</big></big><br>

الطرق السابقة لتغيير الخط تسمى طرقا نسبية relative لأنك تقوم بتغيير الخط بالنسبة للخط الأساسي، يمكنك أيضا تحديد الحجم الذي تريده للخط بالضبط دون الإعتماد على الخط الأساسي عن طريق الخاصية size ذاتها ولكن دون وضع إشارة + أو - مقابل الحجم المطلوب

<font size="7">Size 7</font><br>

<font size="6">Size 6</font><br>

<font size="5">Size 5</font><br>

<font size="4">Size 4</font><br>

<font size="3">Size 3</font><br>

<font size="2">Size 2</font><br>

<font size="1">Size 1</font>

يمكنك كذلك تغيير حجم الخط الأساسي في المستند وهذا سيؤثر على جميع الأماكن التي استخدمت فيها الأحجام النسبية للخطوط، ونغير الخط الأساسي باستخدام وسم يدعى <basefont> ويمكن استخدامه لتغيير حجم الخط الأساسي في المستند أو لون الخط الأساسي أو نوع الخط الأساسي، وهو لا يأخد قيم نسبية في الحجم (لا ينسب إلى نفسه)، على سبيل المثال لتغيير الخط الأساسي إلى Verdana بحجم 3 ولون أخضر نضع السطر التالي في المستند

<basefont color="Green" size="3" face="Verdana">

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

توجد أيضا وسوم أخرى للتنسيقات المختلفة، مثلا الوسم b أو strong للخط العريض والوسم i أو em للمائل ،و الوسم tt يستخدم لجعل الحروف متساوية في الحجم مثل نصوص الآلة الكاتبة

                                   <b>This</b> is Bold Text and <strong>this</strong> to!<br>

                                     but <i>This</i> is Italic Text and <em>this</em> to!<br>

                                                         And <tt>This</tt> is Typewriter Text

يوجد وسم خاص بوضع الخط الأفقي هو الوسم hr يمكنك تحديد عرض الخط بالخاصية width، حيث تأخذ width قيما مطلقة مثل 10 أو 293 وهي تحدد العرض بالبكسل، وقيما نسبية تقاس بالنسبة إلى عرض الصفحة، مثل 20% و 85%، توجد أيضا خاصية أخرى هي size تحدد ارتفاع الخط رأسيا ويأخذ قيما مطلقة صغيرة، وتوجد أيضا خاصية color لتحديد لون الخط، والخاصية noshade وهي خاصية بدون قيمة، وعند وضعها تجعل الخط يبدو مصمتا وليس منحوتا كما في الحالة القياسية

                                                                       This is the First Line

                                                                                         <hr>

                                                                     This is the Secound Line

                                                                          <hr color="Purple">

                                                                       This is the Third Line

<hr width="30%">

This is the Fourth Line

<hr noshade size="40">

يمكن أيضا استخدام بعض المتغيرات في وسم الجسم <body>، وهذه المتغيرات تستخدم في تحديد تنسيق الصفحة مثل لون خلفية الصفحة bgcolor وصورة الخلفية المتكررة background، ولون النص text ولون الوصلة الجديدة link والقديمة vlink والمحددة حاليا alink، وحاشية الصفحة العلوية topmargin والسفلية buttommargin واليسرى leftmargin واليمنى rightmargin.

                                                                                              <body alink="red" link="yellow" vlink="blue"

                                                  bgcolor="black" text="white" topmargin="0">

                                                                       This is some Text.<br>

                                                                And here are some links :<br>

                                   <a href="http://www.download.com/">Great Downloads</a><br>

                                     <a href="mailto:bgates@hotmail.com">Bill Gates!?</a><br>

                                       <a href="http://www.msn.com/">Microsft Network</a><br>

                                             <a href="http://www.hotmail.com">Free E-mail</a>

</body>

الألوان في HTML

الألوان في الكمبيوتر تنتج من خلط الألوان الأساسية الضوئية الثلاثة، وهي الأحمر والأخضر والأزرق، يأخذ كل لون من الألوان السابقة قيمة تتراوح بين 0 و 255، وهي مرتبة (أحمر،أخضر،أزرق) أو (Red,Green,Blue) أو rgb، في أي مكان نحتاج إلى أن نضع فيه لونا نقوم بوضع الجملة التالية

rgb(R,G,B)

فنضع قيمة الـR في مكانها المناسب، والـG والـB كذلك، يمكن أيضا صياغة العبارة السابقة بصورة أخرى هي الصورة الستعشرية، نقوم بوضع الأرقام السابقة بالتتالي في صورها الستعشرية، حيث أن أعلى قيمة عشرية للألوان هي 255 فإن أعلى قيمة ستعشرية لها هي ff وأقل قيمة هي 00، لذا فإن كل رقم يأخذ خانتين كالتالي .. #RRGGBB ويفضل وضع علامة # قبل الأرقام في الصيغ الستعشرية حتى تتعرف عليها جميع المتصفحات، أغلب الناس يستخدمون الصيغ الستعشرية في تكوين الألوان، يمكن الحصول على القيمة الستعشرية من القيمة العشرية باستخدام الحاسبة التي تأتي مع الـ Windows.

تستطيع بالطريقة السابقة تكوين أكثر من 16.5 مليون لون، ولكن بعض الأجهزة القديمة لم تكن تدعم أكثر من 256 لون في نفس اللحظة، لذا فقد اتفق على 216 لون سميت بألوان المتصفح الآمنة، فإذا التزم الجميع بهذه الألوان سيستطيع المتصفحون أن يستعرضوا أكثر من صفحة واحدة في نفس الوقت دون مشاكل لأن عدد الألوان التي يحتاجها المتصفح هي 216 فقط والباقي احتياطي للأمور الأخرى مثل الواجهة وغيرها.

إضافة إلى ما سبق هنالك ألوان معروفة تستخدم بكثرة، ولها أسماء معروفة وعددها حوالي 141 لون، هذه الألوان يمكنك استخدامها بوضع اسمها فقط، وهي تنتمي جميعها للوح الألوان الآمن والجدول التالي يبين أشهرها :

أمثلة للتوضيح ..

<font size="+1">

<font color="Khaki"> Sample 1 </font><br>

<font color="#0066cc"> Sample 2 </font><br>

<font color="rgb(204,112,202)"> Sample 3 </font><br>

</font>

الــصــور

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

لكي تستطيع عرض الصور في المستند يجب أن تكون الصورة من النوع jpg أو gif (أنظر تجهيز الصور للنشر على الويب).

العناوين HTML

تستخدم العناوين في HTML في الكثير من الأمور، أهمها الوصلات التشعيبية والصور، ويجب أن تعرف كيفية استخدام هذه العناوين جيدا.

هنالك نوعان من العناوين، نسبية ومطلقة، العناوين النسبية تكون بالنسبة للعنوان الحالي، فلو كنت مثلا في صفحة http://www.microsoft.com/ie/default.asp وقمت بعمل وصلة خاصية href لها تساوي download.html سيعرف المتصفح أن العنوان الذي يجب الذهاب إليه هو http://www.microsoft.com/ie/download.html، ولو كانت href تساوي download/english.html فسيتجه المتصفح إلى http://www.microsoft.com/ie/download/english.html، أي أن المتصفح يضيف السطر الموجود في href إلى الدليل الحالي، ويختلف الملف عن الدليل بأن الدليل يحتوي على الشرطة الخلفية ( / ) في آخره، في كل دليل يوجد دليل خاص، هذا الدليل الخاص يؤدي بك إلى الدليل الأب للدليل الحالي وهو الرمز ( .. ) وفي المثال السابق لو كانت href تحتوي على ../windwos.html فإن المتصفح سيتجه إلى العنوان http://www.microsoft.com/windwos.html أي أنه سيخرج من الدليل ie/ إلى الدليل الجذري / ، أما العناوين المطلقة فتتميز بأنها مسبوقة باسم البروتوكول ،مثلا العنوان http://www.ayna.com/ يعتبر عنوانا مطلقا، وليس له علاقة بالعنوان الحالي.

إدراج الصور

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

                                                               <img src="/images/sample.gif">

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

                                                                                                                           <img src="/images/sample.gif"

                                                                  width=73 height=68><br><br>

                                                                <img src="/images/sample.gif"

                                                                        width=200 height=100>

توجد أيضا الخاصية align وهي خاصية مهمة جدا في الصور، وتنبع أهميتها من كونها الطريقة الوحيدة للتحكم بكيفية عرض الصورة بالنسبة للنصوص المحيطة بها، حيث أن الصور في HTML تعتبر جزءا من النص المحيط بها تتحرك معه، وترتبط به، تأخذ align العديد من القيم فيما يلي سرد لها مع الشرح والأمثلة ..

· bottom, baseline, absbottom : وهي تعرض الصورة بحيث تكون على السطر مثل أي كلمة أخرى .

· left : وهي تعرض الصورة على يسار الفقرة ولا يكون للصورة علاقة بالسطر.

· middle, absmiddle : وهي تعرض الصورة في منتصف السطر.

· right : وهي تعرض الصورة على يمين الفقرة ولا يكون للصورة علاقة بالسطر.

· top, texttop : وهي تعرض أسفل السطر فيكون السطر أعلاها.

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

                                                         <a href="http://www.microsoft.com/">

                                                       <img src="/images/sample.gif"></a><br>

                                                         <a href="http://www.microsoft.com/">

                                            <img src="/images/sample.gif" border="0"></a><br>

                                                    <img src="/images/sample.gif" border="3">

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

توجد أيضا خاصية alt للصور، وهي تستخدم لوصف الصورة، بحيث أن النص الذي تضعه في الخاصية alt سيعرض بدلا من الصورة حتى إتماما تحميلها، وكذلك إذا لم يجد المتصفح الصورة، وهذه النصوص أيضا تظهر في مربع التلميح ToolTip عند التأشير بالفأرة على الصورة.

خرائط الصور

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

تتكون الخريطة الصورية من جزئين، الخريطة والصورة، حيث نقوم بتصميم الخريطة وإعطائها إسما، ثم نكتب هذا الإسم في خاصية usemap للصورة.

في البداية نشرح كيفية تكوين الخريطة لصورة مثل هذه الصورة

فإذا إردنا تقسيم الصورة السابقة فسيكون التقسيم (الخريطة) كالتالي

أي بحيث يشير كل حزء من الأجزاء الثلاثة إلى أحد أقسام الموقع الإفتراضي، مهمتنا الآن هي رسم الخريطة السابقة وتحديد البقع الساخنة والوصلات عليها، ويتم ذلك باستخدام الوسم map، ونحدد إسم الخريطة بالخاصية name، ونقوم بوضع الأشكال بين وسمي الفتح والإغلاق للوسم map، والأشكال تكون في صورة وسوم area مفردة، نقوم بتحديد الشكل عن طريق الخاصية shape، ثم نقوم بتحديد الوصلة بالخاصية href ونحدد إحداثيات الشكل بالخاصية coords، ويختلفكل شكل عن الآخر بطريقة كتابة إحداثياته، والأشكال ثلاثة هي :

· circle : وهو شكل الدائرة، وتكون إحداثياته عبارة عن الإحداثي السيني للمركز ثم الإحداثي الصادي للمركز ثم نصف القطر (x, y, radius).

· rect : وهو شكل المستطيل، وتكون إحداثياته عبارة عن الإحداثي السيني للركن أعلى اليسار ثم الإحداثي الصادي له ثم الإحداثي السيني للركن المقابل أدنى اليمين ثم الإحداثي الصادي له (x1, y1, x2, y2).

· poly : وهو شكل المضلع، ويمكنك باستخدامه رسم الأشكال المكونة من عدة قطع مستقيمة، وتكون إحداثياته عبارة عن الإحداثي السيني ثم الصادي للنقطة الأولى ثم الثانية وهكذا حسب ما تشاء من النقط (x1, y1, x2, y2, .. xn, yn).

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

لمعرفة الإحداثيات المطلوبة نستخدم أي برنامج للرسم مثل Adobe Photoshop أو Paint Shop Pro .

في مثالنا السابق تم حساب الإحداثيات وكانت النتيحة كالتالي :

<img src="/images/sample2.gif" usemap="#mymap">

<map name="mymap">

                                             <area shape="rect" href="http://www.jokes.com/"

                                                                         coords="6,10,67,44">

                                            <area shape="circle" href="http://www.story.com/"

                                                                          coords="121,93,27">

                                           <area shape="poly" href="http://www.download.com/"

                                                   coords="37,90,73,105,59,129,15,129,4,105">

                                                                                       </map>

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

                                   <img src="/images/sample2.gif" usemap="#mymap" border="0">

                                                                           <map name="mymap">

                                              <area shape="rect" href="http://www.jokes.com/"

 coords="6,10,67,44"

                                                                   border="0" alt="Be Happy">

                                            <area shape="circle" href="http://www.story.com/"

                                                                           coords="121,93,27"

                                                                     border="0" alt="Enjoy!">

                                          <area shape="poly" href="http://www.download.com/"

                                                    coords="37,90,73,105,59,129,15,129,4,105"

                                                             border="0" alt="Best Downloads">

                                                                                       </map>

تنظيم الـمـحتوى

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

يمكنك عمل القائم المرتبه باستخدام الوسم ol والغير مرتبة ul بحيث توضع البنود بينهما وكل بند يحدد بالوسم li، ويمكنك تحديد نوع الترقيم في القوائم المرتبة بالحروف أو بالأقام العربية أو الرومانية وغيرها عبر الخاصية type وتأخذ أحد القيم التالية :

1 : 1, 2, 3, 4, ..

a : a, b, c, d, ..

A : A, B, C, D, ..

i : i, ii, iii, iv, ..

I : I, II, III, IV, ..

وفي القوائم الغير مرتبة :

· circle :

· square :

· disc :

ويمكن وضع قائمة داخل قائمة لتشكيل المخططات الهرمية.

<ul type="circle">

<li>Pepsi

<li>Crash

<li>7 Up

</ul>

<ol type="I">

<li>Windows (85%)

<li>Linux (10%)

<li>Mac (3%)

<li>Other (2%)

</ol>

<ol>

  <li>American Companies

  <ol>

    <li>Microsoft

    <li>General Motors

  </ol>

  <li>German Companies

  <ol>

    <li>Dubian

    <li>BMW

      <ul>

        <li>6 Class

        <li>7 Class

      </ul>

  </ol>

</ol>

الجداول

تعتبر الجداول من أهم مكونات صفحات HTML، وجميع التصاميم الإحترافية تستفيد من الجداول لتصميم الصفحة وتوزيع الكائنات عليها وتشكيلها في القالب الذي يريدونه، يتم إدراج الجدول بالوسم table وداخل الجدول يجب إدراج صفوف tr وداخل الصفوف توجد البيانات td، يمكن وضع إطار للجدول بالخاصية border حيث نحدد فيه سماكة الإطار المطلوب 0 تعني دون إطار، القيمة الإفتراضية للإطار هي 0.

                                                                           <table border="1">

                                                                                         <tr>

                                                                   <td>First Row - First Data

                                                                 <td>First Row - Secound Data

                                                                                        </tr>

                                                                                         <tr>

                                                                 <td>Secound Raw - First Data

                                                               <td>Secound Raw - Secound Data

                                                                                        </tr>

                                                                                     </table>

يمكنك أيضا التحكم بالمسافة بين الخلايا بواسطة الخاصية cellspacing، والمسافة بين الحدود الداخلية للخلايا ومحتويات الخلايا بواسطة الخاصية cellpadding.

                                         <table cellspacing="10" cellpadding="20" border="1">

                                                                                         <tr>

                                                                          <td>First Cell</td>

                                                                        <td>Secound Cell</td>

                                                                                        </tr>

                                                                                     </table>

يمكن التحكم بعرض الجدول بالخاصية width وارتفاعه بالخاصية height وكلاهما يأخذ قيما مطلقة أو نسب مؤية، ويمكن استخدام هذه الخصائص في الخلايا td أيضا وعند إعطاء الخلايا قيما نسبية فإنها تحسب بالنسبة للصف الذي هي فيه.

                                                <table width="100%" height="100%" border="1">

                                                                                         <tr>

                                                      <td width="100" height="40%">First Cell

                                                   <td width="100%" height="40%">Secound Cell

                                                                                        </tr>

                                                                                         <tr>

                                                      <td width="100" height="60%">First Cell

                                                   <td width="100%" height="60%">Secound Cell

                                                                                        </tr>

                                                                                     </table>

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

                          <table border="1" background="sample.gif" width="90%" height="80%">

                                                                                         <tr>

                                                              <td bgcolor="Yellow">First Cell

                                                                             <td>Secound Cell

                                                                                        </tr>

                                                                                     </table>

يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية align ورأسيا بالخاصية valign، في الخاصية align القيمة left تعني محاذاة لليسار و rigth لليمين و center بالمنتصف و justify للضبط الكلي تجعل الأسطر مساوية في الطول، أما الخاصية valign فتأخد القيمة top للأعلى، bottom للأسفل middle للمنتصف.

                                                  <table border="1" width="90%" height="80%">

                                                                                         <tr>

                                                 <td align="right" valign="bottom">First Cell

                                                   <td align="left" valign="top">Secound Cell

                                                                                        </tr>

                                                                                     </table>

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

                                                               <table width="95%" border="1">

                                                                                         <tr>

                                                                 <td>First Table - First Cell

                                                                                         <td>

                                                                           <table border="1">

                                                                                         <tr>

                                                               <td>Secound Table - First Cell

                                                             <td>Secound Table - Secound Cell

                                                                                        </tr>

                                                                                     </table>

                                                                                        </tr>

                                                                                         <tr>

                                                                                         <td>

                                                                           <table border="1">

                                                                                         <tr>

                                                                 <td>Third Table - First Cell

                                                               <td>Third Table - Secound Cell

                                                                                        </tr>

                                                                                     </table>

                                                                <td>First Table - Fourth Cell

                                                                                        </tr>

                                                                                     </table>

يمكن أيض دمج الخلايا رأسيا بالخاصيةrawspan وأفقيا بالخاصية colspan، حيث تحدد في كل منهما عدد الخلايا التي يجب دمجها في الخلية الحالية، وتستخدم هذه الخصائص في الخلايا td.

                                                                           <table border="1">

                                                                                         <tr>

                                                       <td rowspan="2" colspan="2">First Cell

                                                                             <td>Secound Cell

                                                                               <td>Third Cell

                                                                                        </tr>

                                                                                         <tr>

                                                                  <td rowspan="3">Fourth Cell

                                                                   <td colspan="2">Fifth Cell

                                                                                        </tr>

                                                                                         <tr>

                                                                               <td>Sixth Cell

                                                                             <td>Seventh Cell

                                                                              <td>Eighth Cell

                                                                              <td>Nineth Cell

                                                                                        </tr>

                                                                                     </table>

الأطر

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

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

أول وسوم الإطارات هو الوسم frameset الذي يفتح مجموعة الإطارات، وفي هذه المجموعة يوجد عدد من وسوم الإطار frame المفردة ونضع فيها مصدر الصفحة في الخاصية src أو يمكننا وضع frameset أخرى داخل الـ frameset الأولى، ويوضع الوسم frameset خارج منطقة الجسم body دائما، نحدد في الوسم frameset إذا كنا سنقسم الصفحة أفقيا أو رأسيا، ونحدد حجم كل إطار، إذا كنا نريد تقسيم الصفحة رأسيا على شكل أعمدة نستخدم الخاصية cols ونضع فيها عرض كل إطار بحيث يفصل بين كل إطار والآخر فاصلة ( , ) وهذه الحجوم قد تكون نسبية أو مطلقة وتختلف في احتواء النسبية على علامة النسبة المؤوية، وإذا أردنا تقسيم الصفحة أفقيا نقوم بعمل نفس الشيء ولكن باستخدام الخاصية rows بدلا من cols، مثلا إذا أردنا تقسيم الصفحة رأسيا إلى ثلاثة أعمدة الأول بعرض 100 بكسل والثاني بعرض 10% من الشاشة والثالث يحتل باقي الشاشة تكون مجموعة الوسوم هكذا :

                                                                  <frameset cols="100,10%,*">

                                                                   <frame src="sample1.html">

                                                                   <frame src="sample2.html">

                                                                   <frame src="sample3.html">

                                                                                  </frameset>

وكما ذكرنا يمكنك وضع frameset آخر بدلا من أحد الإطارات frame

                                                                       <frameset rows="50,*">

                                                                   <frame src="sample1.html">

                                                                      <frameset cols="100,*">

                                                                   <frame src="sample2.html">

                                                                   <frame src="sample3.html">

                                                                                  </frameset>

                                                                                  </frameset>

يمكنك وضع أو إزالة الإطار الذي يظهر حول الألواح باستخدام الخاصية frameborder إذا ضبتها عند القيمة 0 لن يظهر الإطار و 1 يظهر الإطار، يمكنك التحكم بحجم الإطار عن طريق زيادة أو إنقاص المسافة بين الألواح وذلك عبر الخاصية framespacing فتضع فيها القيمة التي تريدها، يمكنك ضبط الخاصيتان السابقتان عند 0 لمنع المستخدم من تغيير حجم الألواح.

                                     <frameset cols="50%,*" frameborder="0" framespacing="0">

                                                                   <frame src="sample1.html">

                                                                   <frame src="sample2.html">

                                                                                  </frameset>

يمكنك التحكم في ظهور أشرطة التمرير Scroll Bars في كل إطار من الإطارات عن طريق الخاصية scrolling وهي تأخذ القيمة yes لإظهار أشرطة التمرير دائما، والقيمة no لمنع ظهورها دائما، و auto لإظهارها وقت الحاجة إليها فقط.

                                                                       <frameset rows="20,*">

                                                    <frame src="sample1.html" scrolling="no">

                                                                      <frameset cols="100,*">

                                                   <frame src="sample2.html" scrolling="yes">

                                                                   <frame src="sample3.html">

                                                                                  </frameset>

                                                                                  </frameset>

لكي تستطيع أن ترسل أوامرك ووصلاتك من لوح إلى آخر، يجب أن تقوم بتسمية أو عنونة الألواح بواسطة الخاصية name، وبعد ذلك لعمل وصلة بواسطة الوسم a استخدم الخاصية target لتحديد وجهة الوصلة، يمكنك فتح الوصلة في شاشة متصفح جديدة _blank أو فتحها في الشاشة الحالية فوق مجموعة الألواح _top أو فتحها في اللوح الحالي _self أو فتحها في اللوح الأب (في حالة ألواح داخل ألواح) _parent أو فتحها في أي لوح بوضع إسم اللوح.

                                                                  <!--    sample4.html    -->

                                                                       <a href="sample1.html"

                                                               target="_blank">Page 1</a><br>

                                                                       <a href="sample3.html"

                                                                 target="_top">Page 3</a><br>

                                                                       <a href="sample2.html"

                                                                     target="main">Page 2</a>

                                                                       <a href="sample4.html"

                                                                     target="main">Page 4</a>

                                                                       <frameset rows="20,*">

                                                                   <frame src="sample1.html">

                                                                      <frameset cols="200,*">

                                                                   <frame src="sample4.html">

                                                       <frame src="sample3.html" name="main">

                                                                                  </frameset>

                                                                                  </frameset>

إضافة إلى ما سبق، يوجد أيضا إطار من نوع خاص يكون عائما في المستند مثل الصورة، يتم إدراج هذا الإطار في أي مكان بالمستند تحت القسم body، ويقوم بعمل إطار ليعرض صفحة HTML خارجية، ووسمه هو iframe وأهم خصائصه الخاصية src التي تحدد المستند المصدر الذي يجب عرضه في الإطار، يمكنك أيضا عنونه بالخاصية name وعمل وصلات موجهة إليه تماما مثل الإطار العادي، وفيما بقي فهو مثل الإطار

يمتلك أيضا خاصية width و height لتحديد حجمة

النماذج

إرسال البيانات عبر http

عندما تريد إرسال المعلومات من متصفح الويب، إلى مزود الويب فإنك تستخدم بروتوكول http في عمل ذلك، وينص بروتكول http على أن البيانات ترسل في صورة أزواج، كل زوج عبارة عن إسم وقيمة، مثلا إذا أردت إرسال إسم المستخدم عبر بروتوكول http فإنك ترسل العبارة التالية name=mubarmej هذا يسمى زوج لأنه يتكون من جزئين، الجزء الأول هو إسم المعلومة (name)، والجزء الثاني هو المعلومة نفسها (mubarmej)، وإذا أردت أن ترسل أكثر من معلومة فإنك تفصل بين أزواج المعلومات بعلامات & فإذا أردت أن ترسل الإسم والبلد فإنك ترسل العبارة التالية name=mubarmej&country=Kuwait يمكنك أن تكتب العبارة السابقة كالتالي country=Kuwait&name=mubarmej حيث أن الترتيب ليس مهما إلى هذه الدرجة، إضافة إلى ما سبق فإن هنالك شروطا على إرسال البيانات في صورة عناوين url ولأن المعلومات عادة ما ترسل ملتصقة بهذه العناوين فإنه لا بد من تحويل سطر البيانات السابق بحيث يصبح مطابقا لمواصفات url، وأول شيء هو أنك لا تستطيع وضع المسافات، لذا فقد اتفق على أن جميع المسافات في البيانات تحول إلى إشارة ( + )، فإذا كان البلد هو United States فإن سطر البيانات سيكون name=mubarmej&country=United+States، وهنالك أيضا شروط أخرى لتحويل الرموز الغير انجليزية والكثير من الأشياء التي يتم تطبيقها على البيانات حتى تصبح جاهزة للإرسال.

تعريف

المسافات البيضاء : هي المسافات والأسطر الجديدة وعلامات الجدولة.

ينص بروتوكول http أيضا على أن البيانات ترسل بطريقتين، الأولى تسمى get والثانية تسمى post، يتم إرسال البيانات بطريقة get بصورة بسيطة جدا حيث تكون عبارة عن جزء يضاف إلى إسم البرنامج الذي سيستفيد من البيانات، مثلا إذا كان لديك برنامج يأخذ الإسم والبلد ويخزتها على المزود، وكان عنوان هذا البرنامج هو http://somewhere.com/script.cgi فإن طريقة get ستقوم فقط بعمل إضافة إلى العنوان السابقة هذه الإضافة هي عبارة عن علامة استفهام يليها سطر البيانات الذي جهزته، فيصبح إسم الصفحة http://somewhere.com/script.cgi?name=mubarmej&country=United+States ولا بد من أنك صادفت شيئا كهذا وربما أكثر تعقيدا في مربع الوجهة في متصفحك خاصة عندما تزور المواقع الضخمة وتجري عمليات البحث وغيرها، ستجد كل هذه البيانات في شريط العنوان، هذا بالنسبة لطريقة get في إرسال البيانات، أما الطريقة الثانية فهي طريقة post وفيها يتم إرسال لوحدها مع طلب الموقع ولا تظهر البيانات في شريط العنوان، تختلف الطريقتان عن بعضهما البعض في أن الطريقة get أبسط بكثير ويمكنك بسهولة استخدامها كوصلة عادية بأن تركب سطر البيانات بنفسك، ولكن post لا يمكن عملها في صورة وصلة بسهولة، حيث أنها لا تعمل إلى عن طريق النماذج ( الإثنان يعملان بشكل ممتاز بالنماذج )، لكن طريقة post أفضل من get في أنها مناسبة لإرسال كمية كبيرة من البيانات مثل نص رسالة كاملة، حيث يتعسر عرض هذه الأشياء في عنوان الموقع، كذلك البيانات والإتصالات السرية يجب أن تتم بطريقة post ( هذا لا يعني أنها آمنة للشراء عبر الويب وإنما تحتاج إلى تقنيات أخرى ).

مهمة النماذج

بعد أن عرفت كيف يتم إرسال البيانات، يجب أن تعرف مهمة النماذج في كل هذا، تعطيك النماذج واجهة سهلة لإدخال البيانات مثل مربعات النص وقوائم الإختيار ومربعات نعم/لا والأزرار، وغيرها من الأدوات، كل ما عليك فعله هو تحديد مكان البرنامج (http://somewhere.com/script.cgi) في مثالنا السابق، والطريقة التي تريد اتباعها (get أو post)، والبيانات التي تريد إرسالها، وتحدد بعض الألوان والأحجام وتصمم الحقول وتضع زر الإرسال (submit) وانتهى الأمر، كل ما على زائر الصفحة الآن هو أن يملأ بعض الحقول ويختار بعض الخيارات، ويضغط زر الإرسال فيقوم المتصفح بجمع البيانات وتحويلها وتجهيزها ثم إرسالها إلى المكان الذي حددته وحسب الطريقة التي حددتها، النماذج بالفعل هي أفضل طريقة تفاعلية في لغة HTML.

يتم إدراج النموذج بالوسم form ويتم إدراج المعلومات في صورة وسوم input مفردة، يحتوي الوسم form على مجموعة من الخواص أهمها action وفيه تحدد عنوان البرنامج الذي سيستفيد من البيانات، والخاصية الثانية هي method وفيها تحدد طريقة نقل البيانات إما post أو get، أما الوسوم input فأهم خاصية فيها هي type وتحدد فيها نوع الكائن الذي سيأخذ المعلومة من المستخدم، ويأخذ أحد القيم التالية :

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

· Button : لعمل زر، ويستفاد من الزر في عمل أي شيء.

· Checkbox : لعمل مربع اختيار، إذا تم اختياره فإنه يرسل القيمة on وإذا لم يتم اختياره فإنه لا يرسل أي معلومة.

· File : لإرسال الملفات.

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

· Image : تستخدم في الكثير من الأمور مثل الزر.

· Password : يستخدم لإرسال كلمة المرور، وهو يرسل كلمة المرور بصورة واضحة دون أية تشفير وإنما يختلف عن مربع النص العادي في أن الحروف تظهر في صورة نجوم ( * ).

· Radio : يستخدم لعمل الدوائر لكي يختار المستخدم قيمة ما من عدة خيارات.

· Reset : يستخدم لمحو محتويات النموذج وإعادته إلى الحالة الأصلية.

· Submit : يظهر في صورة زر يستخدم لإرسال المعلومات الموجودة في النموذج.

يمكنك أيضا إرسال المعلومات مع النموذج بواسطة وسمين آخرين يوضعان أيضا بين وسمي form وهذا الوسمان هما select لعمل قائمة اختيار والوسم textarea لعمل مربع نص متعدد الأسطر، وبين وسمي select نضع عدة وسوم option كل واحد منها يعبر عن بند في القائمة ويكون لكل بند قيمة معينة وترسل قيمة البند الذي تم اختياره.

ملاحظة

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

إسم البرنامج echo.pl وهو موجود في الدليل الذي به هذا الملف لذا سنقوم باستخدام المسارات النسبية ونحدد الخاصية action في تجاربنا على القيمة echo.pl دائما.

سنقوم في البداية بعمل أمثلة عامة وبعد ذلك سنركز على كل كائن من كائنات النموذج.

أنظر إلى المثال التالي :

First Name : <input type="text" name="first_name"><br>

Secound Name : <input type="text" name="secound_name"><br>

<input type="radio" name="exact"> Exact Match

<input type="radio" name="all"> All Words<br>

</form>

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

مربع النص

نقوم بوضع مربع النص كما ذكرنا سابقا، باستخدام الوسم input مع تغيير الخاصية type له إلى القيمة text، ويمكننا وضع أي محتويات ابتدائية نريدها فيه عن طريق الخاصية value له، ويمكن أيضا التحكم بحجمه عن طريق الخاصية size، لتحديد طول المربع الذي نريده.

                                                         <form action="echo.pl" method="get">

                                   Username <input type="text" size="20" name="username"><br>

                                         Email <input type="text" size="40" name="email"><br>

                             URL <input type="text" size="40" name="url" value="http://"><br>

                                                                        <input type="submit">

                                                                                      </form>

مربع الإختيار

وهو يوضع بالوسم input أيضا بتحديد الخاصية type لها عند القيمة checkbox، ويمكن بالمعلومات التي سيتم إرسالها عن طريق الإسم بالخاصية name والقيمة بالخاصية value فيمكننا مثلا أن نجعل النموذج يرسل المعلومة do=subscribe إذا قام المستخم باختيار أحد مربعات الخيار، وذلك بضبط الخاصية name له عند القيمة do والخاصية value له عن القيمة subscribe، وعند عدم اختيار مربع الخيار فلن يتم إرسال أي شيء يتعلق به.

أي أنه مثل النوع hidden إلا المستخدم هنا يحدد فقط إذا كانت المعلومة سترسل أو لا.

                                                         <form action="echo.pl" method="get">

                           <input type="checkbox" name="do" value="subscribe"> Subscribe.<br>

                                                                        <input type="submit">

                                                                                      </form>

الإختيار من متعدد

يمكنك عمل دوائر الإختيار من متعدد بواسطة وسوم input بحيث تضبط خاصيتها type عند القيمة radio، ولعمل مجموعة من الوسوم التي يجب على المستخدم اختيار أحدها قم بعمل وسم input لكل واحد منها واجعل قيمة الخاصية name متساوية فيها جميعا مع تغيير قيمة الخاصية value في كل منها، فيكون عندنا نيابة عن جميع هذه الأزرار معلومة واحدة اسمها يحدد بالقيمة name وقيمتها حسب قيمة الخاصية value للزر الذي تم اختياره.

                                                         <form action="echo.pl" action="get">

                                                                                   Age : <br>

                                       <input type="radio" name="age" value="17"> 10 - 17<br>

                                       <input type="radio" name="age" value="50"> 18 - 50<br>

                                     <input type="radio" name="age" value="100"> 51 - 100<br>

                                                                                Gender : <br>

                                         <input type="radio" name="gender" value="male"> Male

                                 <input type="radio" name="gender" value="female"> Female<br>

                                                                        <input type="submit">

                                                                                      </form>

تلاحظ من المثال السابق أنك تستطيع فقط اختيار Male أو Female من القائمة الثانية، لأنها يمتلكان نفس الإسم name.

عند تكوين القائمة نقوم أولا بوضع وسم القائمة select ونعين له خاصية name التي ستظهر في النموذج، وبعد ذلك نقوم بوضع عدة وسوم option لكل منها خاصية value وعند إرسال البيانات سيتم إرسال المعلومة التي إسمها موجود في الخاصية name من الوسم select وقيمتها موجودة في الخاصية value من الوسم option الذي تم اختياره.

                                                         <form action="echo.pl" method="get">

                                                                      <select name="country">

                                                                    <option value="kw">Kuwait

                                                                    <option value="sa">Saudia

                                                                  <option value="ua">Emirates

                                                                     <option value="qt">Qatar

                                                                   <option value="bh">Bahrain

                                                                      <option value="om">Oman

                                                                                    </select>

                                                                        <input type="submit">

                                                                                      </form>

مربع النص متعدد الأسطر

ويمسى أيضا بالمساحة النصية Textarea، وهو عبارة عن وسم textarea مزدوج ( فتح وإغلاق ) وبينهما تضع المحتويات التي تريدها أن تظهر داخل المربع، وهو يستخدم غالبا مع النماذج التي ترسل معلوماتها بالطريقة post لأنه يستخدم لإرسال كمية كبيرة من البيانات.

يمكنك التحكم في عدد الأسطر بالخاصية rows وعدد الأحرف في كل سطر بالخاصية cols ( عدد الأعمدة ).

                                                         <form action="echo.pl" method="get">

                                                 <textarea name="message" rows="6" cols="50">

                                                       This Text will appear inside the box !

WOW

                                                                              It's working :)

                                                                              </textarea><br>

                                                                        <input type="submit">

                                                                                      </form>

أمور أضافية

وسوم meta

على الرغم من أن اسمها وسوم meta إلا أنها ليست أكثر من وسم واحد هو الوسم meta !

يستخدم الوسم meta لإعطاء المزيد من المعلومات حول الصفحة، مثل وصف الصفحة والكلمات المفتاحية للصفحة وإسم مؤلف الصفحة وإسم البرنامج المستخدم لتأليف الصفحة وغيرها من المعلومات، وجميع واصفحات meta توضع في ترويسة مستند HTML أي بين وسمي head وهذا أمر طبيعي لأنها ليست جزءا من المحتوى.

تختلف واصفحات meta عن بعضها البعض بالخاصية name أو http-equiv، توجد بعض البرامج تحدد نوع الوسم meta حسب الخاصية name وبرامج أخرى حسب الخاصية http-equiv لذا فمن الأفضل وضع الإثنين.

الخاصية الثانية لوسوم meta هي الخاصية content التي تحدد محتوى المعلومة التي حددت اسمها بكل من الخاصيتين name و http-equiv.

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

content="ألعاب,برامج,صور,مقلات,دروس,دورات">

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

وكما في الطريقة السابقة يتم تحديد معلومات الصفحة بنفس الطريقة، وتأخد الخاصية name أو http-equiv أحد القيم التالية:

· keywords : لتعيين الكلمات المفتاحية للمستند مفصولة بفواصل، ومرتبة حسب أهميتها ولا يجوز التكرار.

· description : لوضع وصف بسيط للصفحة ويفضل أن لا يتعدى العشرون كلمة.

· generator : إسم البرنامج الذي استخدم لإنشاء الصفحة.

· author : إسم مؤلف الصفحة.

· content-type : لتحديد نسق البيانات وصفحة المحارف المستخدمة، لصفحات HTML العربية المكتوبة في الويندوز ضع الوسم كالتالي :

· <meta name="content-type" http-equiv="content-type"

· content="text/html; cahrset=windows-1256">

· copyright : معلومات عن حقوق طبع الصفحة.

تعريب الصفحات

تتلخص إجراءات التعريب في جزئين رئيسيين، أولا إظهار الخطوط بصورة سليمة، وثانيا إظهار الإتجاه بشكل سليم.

لإظهار الخطوط العربية بشكل سليم يجب التأكد من استخدام صفحات المحارف العربية المنتشرة حاليا وهي windows-1256، إذا كنت تكتب صفحاتك في Windows فهذه هي صفحة المحارف القياسية، ما عدا Windows 2000 فهو يستخدم صفحة المحارف العالمية الموحدة Unicode، وأما إذا كنت تكتب صفحاتك في بيئة Unix (Linux مثلا) فإن ذلك يعتمد على البرنامج الذي تستخدمه لتعريب النظام.

وفي جميع الأحوال السابقة فإنك تحتاج لضبط الوسم meta الخاص بنوع المحتوى content-type عند قيمة مناسبة.

أما تغيير اتجاه الصفحات فيتم بعدة طرق، أول طريقة هي استخدام الوسم p وضبط الخاصية align له عند القيمة right، وهي طريقة بسيطة ونافعة، ولكنها تصبح متعبة في المواقع الكبيرة وعندما تريد عمل الكثير من الجداول والتنسيقات، أما الطريقة الثانية وهي الطريقة الأفضل فهي استخدام الخاصية dir في الوسم html وضبطه عند القيمة rtl، يقوم ذلك بجعل الصفحة تتجه كليا من اليمين إلى اليسار، بحيث تصبح الفقرات تتجه من اليمين إلى اليسار، والعناوين تتجه من اليمين إلى اليسار وتصبح الخلية الأولى في الجدول هي الخلية الأولى على اليمين، وهذه الميزة متوفرة تلقائيا في متصفح Internet Explorer وهي غير متوفرة في Netscape Navigator، ولكن عند تركيب Sindbad، فإن هذه الميزة تظهر في صورة زر في على شريط العنوان حيث يحدد المستخدم الإتجاه الذي يريده يدويا ولا تؤثر الخاصية dir على الصفحة تلقائيا.

ما وراء HTML

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

أوراق الأنماط المتتالية

أوراق الأنماط المتتالية أو Casscading Style Sheet أو CSS هي تقنية تستخدم للتحكم في الكيفية التي يجب أن تظهر بها الوسوم في صفحة ويب، فمثلا العنوان الرئيسي H1 يظهر باللون الأسود وبخط عادي وطريقة عادية، ولتغييره كان لا بد من وضع وسم Font داخل كل وسم H1، فماذا لو استطعنا أن نحدد نحن كيف نريد لعنوان الصفحة الرئيسي أن يظهر، وكيف يجب أن تظهر الجداول وكيف يجب أن تظهر جميع الوسوم الأخرى في لغة HTML، الآن يمكننا عمل ذلك باستخدام تقنية CSS، وقد تم تطوير هذه التقنية على المدى الأعوام السابقة حتى وصلنا إلى النسخة الثانية من مواصفات هذه اللغة ويمكن الحصول عليها من مجمع الشبكة العنكبوتية العالمية مع مجموعة كبيرة من الوصلات والكتب والدورات : http://www.w3.org/Style/CSS/

لغة الترميز القابلة للتوسع

لغة الترميز القابلة للتوسع أو eXtensible Markup Language أو XML هي عبارة عن تقنية جديدة بحيث يتم التخلص من الوسوم القياسية ويصبح لكل شخص وسومه الخاصة به، فبد أن ظهرت تقنية CSS أصبح أمر الوسوم غير مهما، فيمكنني مثلا أن أقوم بجعل الوسم h6 الذي لا أستخدمه كثيرا يصبح وسما خاصا له لون خاص وشكل خاص أستخدمه في كتابة الملاحظات مثلا، بحيث يصبح لونها أحمرا وتكون مبروزة ببرواز جميل ولافته للنظر، وهكذا أصبح الإسم h6 لا يشير إلى شيء، فما الفائدة منه الآن !

لذا فقد ظهرت فكرة لغة الترميز القابلة للتوسع بحيث أنك تقوم بعمل الوسوم وتسميها بأي اسم تريده، وتحدد كيفية ظهور المحتوى الذي بداخل الوسم عن طريق أوراق الأنماط المتتالية، للمزيد عن XML إذهب إلى قسم XML في مجمع الويب : http://www.w3.org/XML/

لغة الجافا سكريبت

لغة الجافا سكريبت هي عبارة عن لغة برمجة محدودة، مخصصة للعمل في صفحات ويب لتوفير صفحات متغيرة ( ديناميكية )، فيمكنك عمل زر ينفذ عمليات خاصة على جهاز الزبون دون إرسال المعلومات إلى مزود ويب، وتستخدم بشكل كبير في الصفحات الشخصية في عمل الحركات والتأثيرات الفنية والحركية وقد ظهرت أخيرا العديد من المواقع التي توفر سكريبتات جاهزة ورائعة لتقوم بنقلها وإضافتها إلى موقعك بسهولة، للمزيد من المعلومات عن لغة الجافا سكريبت إذهب إلى موقع : http://javascript.internet.com/ أو موقع http://www.dynamicdrive.com/.

البرمجة جهة المزود

البرمجة جهة المزود هي طريق يتم فيها تركيب الصفحات وصنعها ديناميكيا طبقا لمواصفات متفق عليها لتبادل البيانات، وتسمى هذه المواصفات واجهة البوابات الشائعة أو Common Gateway Interface أو CGI، ويمكن كتابة البرامج بأي لغة من لغات البرمجة بشرط أن يعمل البرنامج حسب مواصفات CGI، ولكن أشهر لغات البرمجة استخداما هي لغة Perl وهي تتميز باحتوائها على العديد من الميزات ووظائف معالجة النصوص المطلوبة في عمليات إنشاء الصفحات ديناميكيا، وهي لغة عامة وليست لغة مخصصة لكتابة برامج CGI فقط، على العكس من لغة PHP الجديدة وهي لغة مخصصة كليا لعمل الصفحات الديناميكية وهي اللغة المستخدمة لجعل موقع مبرمج يظهر بمظهره الموحد والمتناسق والمترابط، وتوجد أيضا لغة ASP من مايكروسوفت أيضا ولكنها مقصورة على مزودات NT فقط ولا تعمل في مزودات UNIX الأوسع انتشارا، للمزيد من المعلومات حول Perl راجع : http://www.perl.com/ ولمعلومات حول لغة PHP راجع http://www.php.net/

ملك الويب للشروحات

القائمة الرئيسية

الصفحات