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