ابحث فى المدونة

أحدث المواضيع

تعلم و احترف HTML فى 14  يوم

اليوم الثالث
الخطوط
 
كما ختمنا فى اليوم السابق باننا سنتحدث اليوم عن الخطوط .    راجع صفحتنا السابقة التى عملنا فيها على مدار اليومين السابقين . لم نقم باى تعامل مع الخطوط و اشكالها و تركنا الامر الى الاعدادات الافتراضية لمتصفح الانترنت و هى خط عادى , نوعه Times New Roman و حجمه 3
 
لنبدأ بتغيير هذا.
 الوسم الاول الخاص بالخطوط هو  
<font>.......................</font>        

و هو يقوم بالتحكم فى الخطوط من حيث النوع و الحجم و اللون و له الخصائص التالية : 
: Face
وتقوم هذه الخاصية بتحديد نوع الخط المراد استخدامه و يمكن اختيار اكثر من نوع تحسبا فى حالة عدم وجود الخط المحدد فى جهاز متصفح الموقع يتم اعتماد الخط الثانى ..... و هكذا.
<font  face="times new roman,modem,......">
.......................
</font>
و لا تنسى كتابة اسماء الخطوط صحيحة .
 Color:
اما هذه الخاصية فتحدد لون الخط  و بنفس مبادئ تحديد الالوان التى تحدثنا عنها مسبقا.
<font color="#4553df">
..........................
</font>
Size:
و هذه لتحديد حجم الخط و هناك 7 احجام للخط فقط 
و يوجد طريقتين لتحديد الخط :
اولهما :
<font size="5">
I choose my text size
</font>     
تعالوا نجربها على الاحجام من 1 الى 7 بالترتيب هنجد النتيجة كالاتى:
  
اما الثانى فهو نسبى حيث تكتب الارقام من 1 الى 6 مرفقة اما بعلامة + او -  .
<font  size="+4">
...............
</font> 
ما يحدث هنا هو تكبير (+) او تصغير (-) جحم الخط بمقدار الرقم المكتوب و ذلك بالنسبة للخط الافتراضى (3) وحتى فى الاسلوب النسبى لا نستطيع الحصول على اكثر من 7 احجام 
مثال توضيحى على ما سبق :
<body>
<font face="time new roman" color="red" size="5">  
My goal 
</font> 
<font  face="arial" color="blue" size="5">
is learning
</font>
<font face="courier" color="yellow" size="6">
HTML
</font>
</body>
وستكون النتيجة :

والان ننتقل الى الوسم الثانى وهو <Basefont> ويستخدم لتحديد نوع الخط و لونه وحجمه للصفحة كلها
<basefont  name="times new roman" color="red" size="5">
وله نفس خصائص font ما عدا نوع الخط يطلق عليه name بدلا من face .
و هناك وسم اخر يستخدم لتمييز العناوين Headings فى صفحات الانترنت و هى :
<Hn>............. </Hn>  
و n هو رقم بين1 و 6 يحدد مستوى العنوان 
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

نأتى الان الى مجموعة من الوسوم التى تضيف تأثيرات خاصة
وفيما يلى الوسوم الخاصة متبوعة بمثال عليهم
* الخط الاسود العريض :  
<B>........................</B>
<strong>...............</strong>
*الخط المائل Italic
<I>..........................</I>
<em>....................</em>
*الخط المسطر Underlined
<U>........................</U>
*الخط المرتفع  ٍSuperscript  
<sup>....................</sup>
*الخط المنخفض ٍ Subscript
<sub>....................</sub>
*الخط الكبير Big
<big>.....................</big>
*الخط الصغير ٍ Small
<Small>.............</Small>
*خط يعترضه خط Strike line
<strike>..............</strike>
*خط الالة الكاتبة  Teletype
 <TT>.....................</TT>
وهذا مثال يضم كل الوسوم الخاصة :
<body>
<B>bold text</B>
<strong>Strong text</strong>
<I>Italic text</I>
<em>Emphasized</em>
<u>underlined text</u>
<sup>superscript text</sup>
<sub>subscript text</sub>
<big>big text </big>
<small>small text </small>
<strike>strike text</strike>
<tt>teletype text</tt>
</body>

اذا اردت استخدام اكثر من وسم بمعنى النص يكون اسود عريض ومائل و تحته خط مثال على ذلك :
<body>
<b>
<i>
<u>
This text is bold, italic, underline 
</u>
</i>
</b>
</body>

و بذلك نكون قد انتهينا من الخطوط و فى اليوم التالى نبدأ فى موضوع جديد وهو الفقرات والقوائم .

0 comments:

data: commentLabel/
Related Posts Plugin for WordPress, Blogger...