دورة متقدمة في HTML الجزء 1

يشير الإختصار 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 

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

HTML is a Great Language

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


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

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


HTML is a Great Language 

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


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

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


HTML is a Great Language

أمور إضافية يجب أن تعرفها عن 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>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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

<p> Paragraph Text</p> 




Paragraph Text

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

<p align="left"> Left aligned paragraph</p> <p align="center"> Centered paragraph</p> <p align="right"> Right aligned paragraph</p>

Left aligned paragraph

Centered paragraph

Right aligned paragraph

لعمل وصلة استخدم الوسم 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>

Microsoft Corp.
My E-mail 

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

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


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

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

This is Red and this is Blue

الخاصية الثالثة هي الخاصية 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>




Size 7
Size 6
Size 5
Size 4
Size 3
Size 2
Size 1

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


<big> size 4</big> <br> <small> size 2</small> <br> <big> <big> size 5</big> </big> <br>




size 4
size 2
size 5

الطرق السابقة لتغيير الخط تسمى طرقا نسبية 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>




Size 7
Size 6
Size 5
Size 4
Size 3
Size 2
Size 1

يمكنك كذلك تغيير حجم الخط الأساسي في المستند وهذا سيؤثر على جميع الأماكن التي استخدمت فيها الأحجام النسبية للخطوط، ونغير الخط الأساسي باستخدام وسم يدعى <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




This is Bold Text and this to!
but This is Italic Text and this to!
And This 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">




This is the First Line

---

This is the Secound Line

---

This is the Third Line

---

This is the Fourth Line

---

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

<body alink="red" link="yellow" vlink="blue" 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>




This is some Text.
And here are some links :
Great Downloads
Bill Gates!?
Microsft Network
Free E-mail

الألوان في 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>




Sample 1 
Sample 2 
Sample 3 

الــصــور
يمكنك في لغة 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 : وهي تعرض الصورة بحيث تكون على السطر مثل أي كلمة أخرى .

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




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

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




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

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




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

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




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

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




توجد أيضا خاصية لوضع إطار حول الصورة هي الخاصية 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 للصورة.
في البداية نشرح كيفية تكوين الخريطة لصورة مثل هذه الصورة
<img src="/images/map1.gif">
فإذا إردنا تقسيم الصورة السابقة فسيكون التقسيم (الخريطة) كالتالي<img src="/images/map2.gif">
أي بحيث يشير كل حزء من الأجزاء الثلاثة إلى أحد أقسام الموقع الإفتراضي، مهمتنا الآن هي رسم الخريطة السابقة وتحديد البقع الساخنة والوصلات عليها، ويتم ذلك باستخدام الوسم 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/map1.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/map1.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> 


 




• Pepsi
• Crash
• 7 Up

1. Windows (85%)
2. Linux (10%)
3. Mac (3%)
4. Other (2%)

1. American Companies
   1. Microsoft
   2. General Motors
2. German Companies
   1. Dubian
   2. BMW
      • 6 Class
      • 7 Class

الجداول 
تعتبر الجداول من أهم مكونات صفحات 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> 




First Row - First Data	First Row - Secound Data
Secound Raw - First Data	Secound Raw - Secound Data

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


<table cellspacing="10" cellpadding="20" border="1"> <tr> <td>First Cell</td> <td>Secound Cell</td> </tr> </table> 




First Cell

Secound Cell

يمكن التحكم بعرض الجدول بالخاصية 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>




First Cell	Secound Cell
First Cell	Secound Cell

يمكن التحكم بلون خلفية الجدول بالخاصية 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> 




First Cell

Secound Cell

يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية 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> 




First Cell

Secound Cell

يمكن أيضا وضع جدول داخل جدول، عن طريق وضع الجدول في أحد الخلايا 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> 




First Table - First Cell	Secound Table - First Cell Secound Table - Secound Cell
Third Table - First Cell Third Table - Secound Cell	First Table - Fourth Cell

يمكن أيض دمج الخلايا رأسيا بالخاصية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> 




First Cell		Secound Cell	Third Cell
		Fourth Cell	Fifth Cell
Sixth Cell	Seventh Cell		Eighth Cell	Nineth Cell