تنسيق الصفحة

1- ( (الخط الأفقيhorizontal rules :

وسم إدراج خطا أفقيا بامتداد عرض الصفحة ويكون الخط دائما في سطر مستقل

صيغته هي :

< HR width = " " size = " " align = " " color = " " noshade >

ويتضح لنا من الصيغة سمات وسم الخط الأفقي وهي :

· width

ويمكن بها التحكم بعرض الخط الأفقي بطريقتين هما :

1) بان تكون قيمة السمة بالنسبة المئوية حيث تكون نسبة عرض الخط للصفحة وهو الأفضل( % العدد ) .

2) بان تكون القيمة بالبكسل ( عدد – وحدة قياسه البكسل ) .

· size

للتحكم بحجم الخط الأفقي وقيمه من الواحد إلى الستة ( 1 – 6 ) .

· align

هذه السمة لتحديد موقع الخط الأفقي في السطر حيث أن له ثلاث قيم هي : left , center , right .

· color

لتغيير لون الخط الأفقي وقيمتها تكتب بطريقتين أما باسم اللون أو بالقيمة الست عشرية للون .

· noshade

يظهر الخط الأفقي بشكل طبيعي ككائنات 3D – أي بظل للخط – ويمكن إزالة الظل بهذه السمة .

مثال :

<hr color="#000080" width="50%" noshade size="3">

2- paragraph ( فقرة النص ):

وسم بدء فقرة جديدة هو ولا يحتاج لوسم إغلاق صيغته :

 …# ..

وله سمتان هما :

أ – align

ويقوم بتنسيق الفقرة وله أربعة قيم هي :

1] left : لمحاذة الفقرة لليسار

2] center : لتوسيط الفقرة

3] right : لمحاذاة الفقرة لليمين

4] justify : لضبط الفقرة بعرض الصفحة

ب – dir

للتحكم باتجاه الفقرة وله قيمتين هما :

1] rtl : right to left ( من اليمين لليسار ) .

2] ltr : left to right ( من اليسار لليمين ) .

3- line break ( قفزة سطر ):

وسم ينتج عنه قفزة سطر وتبدأ الكتابة في السطر التالي ويمكن إدراج عدة اسطر فارغة بعدة وسوم منه وليس له وسم نهاية,

وصيغته هي : وتكون في نهاية الفقرة المراد القفز من بعدها للسطر التالي .

وله وسمان آخران هما :

 وهي لقفزة السطر عند نهاية سطر الصفحة أي الالتفاف عند نهاية السطر .
 وهي لمنع قفزة السطر حتى عند نهاية السطر .

مثال :

تعريف عن المدرسة الالكترونية

  ظهر مفهوم المدرسة الالكترونية كأساس لتطوير التعليم العام

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

و كذلك بين المدارس بعضها البعض وارتكازا على تكنولوجيا المعلومات و الاتصالات لتحديث العملية التعليمية و وسائل الشرح و التربية و بالتالي تخريج أجيال أكثر
مهارة و احتراف . 
 مزايا المدرسة الالكترونية 
     و يحتوي مفهوم المدرسة الالكترونية على المزايا التالية :
 

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

4- quotation (الاقتباس):

ويقوم بتنسيق النص المقتبس المحصور بين وسميه حيث يقوم بزيادة الهوامش وتوسيط النص

وصيغته هي : <Blockquote>….text…..</Blockquote>

مثال :

<blockquote>
أسم ولي الأمر :  
<input type="text" name="name2" size="20" tabindex="12">
البريد الالكتروني :  
<input type="text" name="email2" size="20" tabindex="13" dir="ltr">
العنوان ( البلد - المدينة - ص.ب ) :
<input type="text" name="address2" size="20" tabindex="14">
رقم الهاتف ( محمول ) :  
<input type="text" name="mobill2" size="20" tabindex="15">
صورة من البطاقة الشخصية :  
<input type="file" name="pic3" size="20" tabindex="16">
</blockquote>

5- قواعد القوائم ( basic listings ) :

في جميع القوائم يمكن عمل قوائم متداخلة .

· قائمة غير مرتبة ( un ordered list ) :

صيغته :

<ul type =# >

<li type = # > …text

</ul>

من الصيغة يتضح لنا أن للقائمة غير المرتبة وسمين هما: <ul> وهو يحدد بداية القائمة أما الوسم <li> فيجعل النص الذي يلي الوسم فقرة من القائمة وكل وسم يحدد فقرة واحدة للقائمة الواحدة فإن أدرجت خمسة وسوم الفقرة تحت وسم القائمة فتكون القائمة الواحدة مكونة من خمسة فقرات و للوسمين سمة واحدة مشتركة هي type وتعطي أشكال لكل فقرة في القائمة وتستخدم هذه السمة في أحدى الوسمين <ul> <li> وليس كلاهما فإذا استخدما في الوسم <ul> فيتم إدراج الشكل في كل فقرات القائمة أما إذا استخدمه السمة في الوسم <li> فان الشكل يدرج في هذه الفقرة فقط من القائمة أي إن القائمة ستكون ذو تعداد نقطي وقيم هذه السمة هي :

disk , circle , square .

مثال :

<ul>
<li>قران كريم 
<ul>
<li>تجويد 
</li>
<li>علوم القران 
</li>
<li>تلاوة 
</li>
<li>حفظ وتفسير 
</li>
</ul>

· قائمة مرتبة ( ordered list ) :

صيغته :

<ol type = # start = $ >

<li type = # >

</ol>

من الصيغة يتضح لنا إن للقائمة المرتبة وسمين هما: <ol> وهو يحدد بداية القائمة أما الوسم <li> فيجعل النص الذي يلي الوسم فقرة من القائمة وكل وسم يحدد فقرة واحدة للقائمة الواحدة و للوسمين سمة واحدة مشتركة هي type وتعطي ترتيبا أبجدي أو رقمي لكل فقرة في القائمة وتستخدم هذه السمة في أحدى الوسمين <ol> <li> وليس كلاهما فإذا استخدما في الوسم <ol> فيكون الترتيب في كل فقرات القائمة أما إذا استخدمت السمة في الوسم <li> فان نوع الترتيب المختار سيطبق على هذه الفقرة فقط من القائمة وباقي الفقرات فيكون ترتيبها تلقائيا وقيم هذه السمة هي : A , a , I , i , 1 ,……. = # .

أما السمة start فهي تحدد بداية التعداد الحرفي أو الرقمي على حد سواء ......

مثال :

<ol>
<li>الدرس الاول</li>
<li>الدرس الثاني</li>
<li>الدرس الثالث</li>
<li>الدرس الرابع</li>
<li>الدرس الخامس</li>
<li>الدرس السادس</li>
<li>الدرس السابع</li>
<li>الدرس الثامن</li>
<li>الدرس التاسع</li>
<li>الدرس العاشر</li>
</ol>

· قائمة تعريف ( definition list ) :

صيغته :

<dl compact > بداية القائمة

<dt> الكلمة او المصطلح

<dd> التعريف

<dt>

<dd>

</dl> نهاية القائمة

الوسم <dl > يحدد بداية قائمة التعريفات وله سمة compact وهذه السمة تجعل الكلمة وتعريفها في سطر واحد مع مسافة بين الكلمة وتعريفها .

6- تحريك النصوص ( scrolling text ) :

الصيغة العامة :

< marquee direction = " " behavior = " " loop = " " width = " "

scrollamount =" " Scrolldelay = " " align = " " bgcolor = " " height =" "

vspace = " " hspace = " " > ………… TXET …….. </ marquee >

وسمي تحريك النص هو < marquee >…….text ……. </ marquee >

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

· Direction ( الاتجاه ) : تحدد أتجاه حركة النص ولها قيمتين هما :

· right : يحرك النص باتجاه اليمين<

· left : يحرك النص باتجاه اليسار

· Behavior ( السلوك ) : تحدد سلوك الحركة ولها 3 قيم هي :

· scrol : إلتفاف

· slide : إنزلاق

· alternate : تعاقب أو تناوب

· Loop ( الحلقة ) : لتكرار الحركة ولها قيمتين أما عدد التكرار او infinite أي تكرار لا نهائي .

· Width ( العرض ) : قيمتها عدد يحدد مسافة بدء الحركة أو عرض الخلفية الملونه وقيمتها يكون عدد بالنسبة (% )

· Scrollamount ( مقدار الالتفاف ) : وتعطي ظل لحركة النص وقيمتها عدد .

· Scrolldelay ( تاخير الالتفاف ) : تاخر سرعة الحركة وقيمتها عدد ويشترط ان تكون قيمتها اصغر من قيمة مقدار الالتفاف .

· Align ( التنسيق ) : لتنسيق النص الذي يكتب بعد النص المتحرك ولها 3 قيم هي : top, middle, bottom

· Bgcolor ( لون الخلفية ) : لتحديد لون لخلفية للنص المتحرك وقيمتها تحدد بطريقتين أما بكتابة اسم اللون او بالقيمة الستعشرية .

· Height ( الارتفاع ) : لتحديد حجم ارتفاع الخلفية الملونة للنص المتحرك وقيمتها pixel number .

· Vspace ( المسافة العمودية ) : لتحديد المسافة العمودية للنص المتحرك وقيمتها pixel number .

· Hspace ( المسافة الافقية ) : لتحديد المسافة الأفقية للنص المتحرك وقيمتها pixel number .

مثال

<marquee behavior=scroll direction=left bgcolor=#66CCFF loop=infinite width=50 scrollamount=5 scrolldelay=2>
   كمبيوتر</td></marquee>

7- إظهار النص performatted text

· الوسم < per > …</per>

يقوم بتنسيق النص بحسب الطريقة التي تكتبها وبنمط mono space باستثناء النصوص المحصورة بين وسوم أخرى ( لا تلغي تاثير الوسوم الداخلة فيه ).

مثال :

<pre>الفصل الدراسي الاول</pre>

· الوسم <listing> …</listing>

يقوم بتنسيق النص بحسب الطريقة التي تكتبها وبنمط mono space ويجعل الخط بنمط واحد

· الوسم < xmp> …</xmp>

يقوم بتنسيق النص بحسب الطريقة التي تكتبها وبنمط mono space ويطبع أي وسم يكتب داخلة .