كما قلنا في مبادئ HTML أن الوسمان <BR> و <P> يجعلان المستعرض يبدأ سطراً جديداً. وقد بينا الفرق بينهما. ولكن الوسم <P> له عدة سمات. فبإمكانك أن تجعل الفقرة على اليمين وفي الوسط وعلى اليسار. وذلك باستخدام السمة ALIGN.كما يمكنك أن تجعل النص في الوسط باستخدام الوسم <CENTER>. لنجري هذا الإختبار لنتعرف على كلا الوسمين أكثر:-
<HTML alt=rtl>
<HEAD>
<TITLE>إختبار تنسيق فقرةTITLE>
<BODY>
<P ALIGN="right">هذا الفقرة على يمين الصفحة.P>
<P ALIGN="center">هذه الفقرة في منتصف الصفحة.P>
<P ALIGN="left">هذه الفقرة على يسار الصفحة.P>
<CENTER>هذا النص في الوسط أيضاً ولكن بوسم آخرCENTER>
BODY>
HTML> |
سيكون الناتج ما يلي:-
هذه الفقرة على يمين الصفحة. هذه الفقرة في منتصف الصفحة. هذه الفقرة على يسار الصفحة.
هذا النص في الوسط أيضاً ولكن بوسم آخر |
لنبدأ الآن التكلم عن وسم آخر. ألا وهو وسم الخط الأفقي<HR> الذي ينشئ خطاً أفقياً على عرض الصفحة. أنظر إلى هذا الخط ..
تستطيع أن تضع الخط أعلاه بمجرد كتابة الوسم <HR> . دعنا الآن نغير خصائص هذا الخط. همممم ... لنعمل على توسيع عرض هذا الخط بنسبة 8 بكسل. ولتوسيعه أكتب الأمر التالي:-
<HR SIZE="8">سيكون الناتج كالأتي:
ولكن لونه خافت. لنلونه بلون آخر. مثلاً بالأحمر. أكتب الأمر التالي:-
<HR SIZE="8" COLOR="red">سيكون الناتج كالأتي:
أن لون الخط لم يتغير لماذا؟. إذا لم يتغير لون الخط.. فهذا يعني أنك تستعمل مستعرض Netscape.لأن نتسكايب لا يغير لون الخط الأفقي.
عظيم.. ولكن هذا الخط يبدو كبيراً. أريد أن أصغر حجمه بحيث يأخذ 50% من الصفحة. أكتب الأمر الآتي:-
<HR SIZE="8" COLOR="red" WIDTH="50%">سيكون الناتج كالآتي:-
أريده أن يكون على جهة اليمين . أكتب الأمر الآتي :-
<HR SIZE="8" COLOR="red" WIDTH="50%" ALIGN="right">سيكون الناتج كالآتي:-
الآن يمكنك أن تغير كل مواصفات هذا الخط ولا أعتقد أنك بحاجة إلى أمثلة أكثر .. صح؟
لنأتي إلى وسوم أخرى. الوسوم <H1> , <H2> , <H3>, <H4>, <H5>, <H6>. هذه الوسوم تجعل النص عريضاً وكبيراً حسب الرقم. وكلما كان الرقم أصغر كلما كان النص أكبر.ووظيفته كوظيفة عناوين الصحف Heading.. لنجري هذا الإختبار:-
<HTML alt=rtl>
<HEAD>
<TITLE>إختبارTITLE>
HEAD>
<BODY>
<H1>النمط الأول
<H2>النمط الثاني
<H3>النمط الثالث
<H4>النمط الرابع
<H5>النمط الخامس
<H6>النمط السادس
BODY>
HTML> |
سيكون الناتج ما يلي:-
النمط الأول
النمط الثاني
النمط الثالث
النمط الرابع
النمط الخامس
النمط السادس
|
أعتقد أنك فهمت ما تعنيه تلك الوسوم. فالمثال واضح جداً. لنذهب لزيارة وسم آخر.. الوسم <UL>. وهو وسم تشييد اللوائح... أنا لم أفهم ماذا تقصد بتشييد اللوائح! هل هي ألواح خشبية؟! حسناً.. لنجري هذا الإختبار للتعرف عليه. ولا تخف فهو من النوع الذي لا يعض.
<HTML alt=rtl>
<HEAD>
<TITLE>تشييد اللوائحTITLE>
HEAD>
<BODY>
<UL>
<LI>اللائحة الأولى
<LI>اللائحة الثانية
<UL>
<LI>اللائحة الأولى من اللائحة الثانية
<LI>اللائحة الثانية من اللائحة الثانية
UL>
<LI>اللائحة الثالثة
UL>
BODY>
HTML> |
الناتج كالتالي :-
اللائحة الثالثة
هل عرفت الآن معنى اللوائح؟ لاحظ أنك بعد أن تكتب الوسم <UL> لابد أن تفتح وسم <LI> ثم نص اللائحة. وإذا أردت أن تفتح لائحة داخل لائحة لابد أن تكتب الوسم <UL> مرة أخرى ثم وسم <LI> وبعد ذلك نص اللائحة. وإذا أردت غلق اللائحة أكتب الوسم <UL/>.أوه .. أعتقد أن مخك ومخي قد تصدعا من كلمة لائحة. لنشرب فنجان قهوة.
أنت تشرب قهوتك على مهل.. حسناً سأتحدث عن الجداول بينما أنت تشرب قهوتك. الجداول تساعدك في تنظيم وترتيب وتنسيق النصوص والقواعد. هل تستخدم مايكروسوفت وورد؟ هل استخدمت الجداول فيه؟ يمكنك تنسيق الجداول في إنترنت كتنسيق الجداول في وورد أو إكسل. والوسم الخاص بالجداول هو <TABLE>. وإذا أردت فتح صف أكتب الوسم <TR> إختصار Table Row أي صف الجدول. وكلما كتبت الوسم <TD> إختصارTable Data أي بيانات جدول يبدأ عمود جديد. أخيراً انتهيت من قهوتك. لنبدأ بمثال للجدول.
<HTML dir=rtl>
<HEAD>
<TITLE>مثال للجداولTITLE>
HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>الصف الأول العمود الأول
<TD>الصف الأول العمود الثاني
TR>
<TR>
<TD>الصف الثاني العمود الأول
<TD>الصف الثاني العمود الثاني
TR>
TABLE>
BODY>
HTML> |
الناتج كالتالي :-
| الصف الأول العمود الأول |
الصف الأول العمود الثاني |
| الصف الثاني العمود الأول |
الصف الثاني العمود الثاني |
|
إن السمة BORDER تجعل عرض إطار الجدول قيمته 1. يمكنك زيادة عرضه كيفما شئت. وإذا أردت إخفائه .. دع قيمته صفر.
الرئيسية
أحدث الصور
التسجيل
موضوع: تعلم html الدرس الثاني _ تنسيق الأسطر 
الثلاثاء سبتمبر 15, 2009 11:00 pm
