بسم الله الرحمان الرحيم
درووس تعليم الايتش ام ال html الخطوط الجزء الاول
السلام عليكم ايها الاخوة الاحبة
لكي نتحكم في الخطوط في لغة html و هذا لتنسيق صفحتنا و زيادة طابع جمالي لنوعية الخطوط و كتابتها باحجام مختلفة و انماط متناسقة على حسب ما نريد ان نراه عليه في الصفحة .
انت الان في شديد الرغبة لمعرفة وسوم الخطوط لا تكترث لذالك فهي اسهل مما تتوقع فبمجرد متابعتك لهذه الدرووس فانك تستطيع كتابة ما تريدو بالشكل الذي تريد
تابع معي هذا الشرح:
الوسم الذي نستعملله في الخط هو <font> <font/>
كم عرفنا فاننا عند فتح اي وسم لا بد من اغلاقه لا تنسى ذالك ابدا
خصائص الوسم font
font face تحدد هذه الخاصيية نوع الخط و انواع الخطوط عديدة اذكر لك البعض منها التي سوف نستعملها بكثرة
font face تحدد هذه الخاصيية نوع الخط و انواع الخطوط عديدة اذكر لك البعض منها التي سوف نستعملها بكثرة
Traditional Arabic, Arabic Transparent, Simplified Arabic
arial; courier,Times New Roman
و نستعمل face داخل الوسم font و يكتب على الشكل التالي
<FONT FACE="courier"> ... Text ... </FONT>
اعتقد انك فهمت خاصية face انها تقوم بتحديد نوع النص في الصفحة
الان سوف ننتقل الى الخاصية color وهي تقوم بتحديد لون النص في الصفحة
ونكتبها هكذا
<FONT COLOR="#FF0000">... Text.. .</FONT>
ماذا نستنتج من هذها الوسم ؟
لقد عرفنا المتصفح اننا نريد لون الخط باللون الأحمر هذا بكل سهولة كما ترى
ناتي الان الى الخاصية الثالثة وهي خاصية size
تقوم هذه الخاصية بتحديد حجم النص في الصفحة
سؤال كيف نعبر عن حجم النص ؟
ولتحديد حجم الخط نستخدم هذه الخاصية. وفقط هناك
سبعة أحجام لأي خط تستطيع المتصفحات التعرف عليها.
ونقوم بتحديد الحجم المطلوب بأسلوبين: أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين 1-7. أي أننا نختار الحجم الذي نريده مباشرة.
ونقوم بتحديد الحجم المطلوب بأسلوبين: أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين 1-7. أي أننا نختار الحجم الذي نريده مباشرة.
<FONT SIZE="4">
... Text ...
</FONT>
... Text ...
</FONT>
وإليك نماذج بأحجام
الخطوط
خط بحجم 1
خط بحجم 2
خط بحجم 3 (الخط الافتراضي)
خط بحجم 4
خط بحجم 5
خط بحجم 6
خط بحجم 7
أما الأسلوب الثاني فهو النسبي: حيث تكتب الأرقام من 1 إلى 6 مرفقة إما بإشارة + أو بإشارة -.
خط بحجم 1
خط بحجم 2
خط بحجم 3 (الخط الافتراضي)
خط بحجم 4
خط بحجم 5
خط بحجم 6
خط بحجم 7
أما الأسلوب الثاني فهو النسبي: حيث تكتب الأرقام من 1 إلى 6 مرفقة إما بإشارة + أو بإشارة -.
<FONT SIZE="+4">
... Text ...
</FONT>
... Text ...
</FONT>
وفي هذه الطريقة
فإن الأرقام 1-6 تمثل درجات التكبير (+) أو التصغير (-) للخط وذلك نسبةً إلى الحجم
الافتراضي. فمثلا الرقم +4 يعني تكبير الخط أربع درجات عن الحجم الافتراضي وهو 3،
أي أنه يصبح بالحجم 7. بالمقابل فأن الرقم -1 يعني تصغير الخط درجة واحدة أي يصبح
بالحجم 2.
ولتوضيح هذا الأسلوب، إليك هذه النماذج:
خط بحجم -3
خط بحجم -2
خط بحجم -1
خط بحجم +0 (أو -0 وهو الافتراضي)
خط بحجم +1
خط بحجم +2
خط بحجم +3
خط بحجم +4
خط بحجم +5
لاحظ أنه حتى في الأسلوب النسبي لا نستطيع الحصول على أكثر من سبعة أحجام للخطوط.
ولتوضيح هذا الأسلوب، إليك هذه النماذج:
خط بحجم -3
خط بحجم -2
خط بحجم -1
خط بحجم +0 (أو -0 وهو الافتراضي)
خط بحجم +1
خط بحجم +2
خط بحجم +3
خط بحجم +4
خط بحجم +5
لاحظ أنه حتى في الأسلوب النسبي لا نستطيع الحصول على أكثر من سبعة أحجام للخطوط.
والآن أعرف ماذا تريد أن تسأل، ستقول لقد ثبت حجم الخط على حده الأدنى عند الدرجة -2 وعلى حده الأعلى عند الدرجة +4. إذن ما الفائدة من وجود الدرجات الأخرى الأقل من -2 والأكبر من +4؟
حسنا وأنا أجيبك بسؤال آخر: ماذا لو قمنا بتغيير الحجم الافتراضي للخط في كل الصفحة إلى 1 بدلاً من 3؟ (وسوف نقوم بذلك فعلاً بعد قليل)، ألا نحتاج في هذه الحالة إلى الدرجات من +1 إلى +6 لتمثيل الأحجام الأكبر منه؟ وإذا قمنا بتحديد 7 كحجم إفتراضي ألا نحتاج إلى الدرجات من -1 إلى -6 لتمثيل الأحجام الأصغر منه؟ إذن نحن نحتاج فعلاً إلى هذه الدرجات لكي نغطي جميع الإحتمالات الواردة.
أرجو أن يكون هذا الجواب قد أقنعك :-)
.
وهذه بعض الأمثلة لتوضح لك كيفية استخدام هذا الوسم، وسوف أرفق نتيجة كل مثال بعده
مباشرة.
<FONT FACE="arial" SIZE="6"
COLOR="#FF0000">
This font is Arial, Size is 6, Color is Red
</FONT>
This font is Arial, Size is 6, Color is Red
</FONT>
This font is Arial,
Size is 6, Color is Red
<FONT FACE="arial" SIZE="+3"
COLOR="#FF0000">
This font is Arial, Size is +3, Color is Red
</FONT>
This font is Arial, Size is +3, Color is Red
</FONT>
This font is Arial,
Size is +3, Color is Red
<FONT FACE="Times New Roman"
SIZE="5" COLOR="#0000FF">
This font is Times New Roman, Size is 5, Color is Blue
</FONT>
This font is Times New Roman, Size is 5, Color is Blue
</FONT>
This
font is Times New Roman, Size is 5, Color is Blue
<FONT FACE="courier" SIZE="2"
COLOR="#800000">
This font is Courier, Size is 2, Color is Maroon
</FONT>
This font is Courier, Size is 2, Color is Maroon
</FONT>
This font is
Courier, Size is 2, Color is Maroon
<FONT FACE="Arial" SIZE="5"
COLOR="#00FF00"> This </FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is </FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi </FONT>
<FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, </FONT>
<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi </FONT>
<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, </FONT>
<FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and </FONT>
<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi </FONT>
<FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes </FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#00FFFF"> text </FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is </FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi </FONT>
<FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, </FONT>
<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi </FONT>
<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, </FONT>
<FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and </FONT>
<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi </FONT>
<FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes </FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#00FFFF"> text </FONT>
This is multi colors,
multi faces, and multi sizes text
Comments
Post a Comment