Tuesday, February 12, 2013

كيفية تغيير نوع وحجم ولون الخط

السلام عليكم 
درسنا لهذا اليوم هو كيفية تغيير نوع الخط ، وحجمه ولونه :

حيث يفيدنا في كتابة النصوص داخل الصفحة 
نبدا اولا بالوسم وهو font 

1- استعمال الوسم في تغيير نوع الخط :

ووسم نوع الخط هو face اي نكتب font face
نكتب الكود هكذا :

1
2
3
<font face ="arial">مدونة لنرتقي </font>
<font face ="Andalus">مدونة لنرتقي </font>
<font face ="tahoma">مدونة لنرتقي </font>

ونلاحظ في الكود انه يتكون من :
font وهو وسم الخط 
face وهو وسم تحديد نوعا الخط 
arial ,tahoma ... هي انواع الخطوط 

حيث نكتب 
<font face ="tahoma">
بعدها نكتب النص 
ثم نغلق الوسم </font>

نضع الكود السابق كمثال :
والنتيجة :











ملاحظة : لايمكن ان نضع خط لا يوجد في الجهاز ولو وضعنا هذا سيقوم الجهاز بوضع الخط الافتراضي اوتوماتيكيا 
كما يمكننا ان نضع عدة انواع من الخطوط في ترتيب 
هكذا مثلا :

1
<font face ="Arial, tahoma, andalus">مدونة لنرتقي </font>

وهنا اخترنا arial هو الاول فاذنا لم بكن هذا الخط عند الشخص الذي يشاهد الصفحة اوتوماتيكيا يتحول الى نوعا الخط الموالي وهكذا ..

2- استعمال الوسم في تغيير حجم الخط :

وسم حجم الخط هو size اي نكتب font size 
نكتب الكود هكذا حيث ان يكون من 1 الى 7 لمراعاة الحجم الافتراضي للمتصفح 

1
2
3
4
5
6
7
8
<font size="1">مدونة لنرتقي </font>
<font size="2">مدونة لنرتقي </font>
<font size="3">مدونة لنرتقي </font>
<font size="4">مدونة لنرتقي </font>
<font size="5">مدونة لنرتقي </font>
<font size="6">مدونة لنرتقي </font>
<font size="7">مدونة لنرتقي </font>

والنتيجة 
















3- استعمال الوسم في تغيير لون الخط :

وسم اللون هو color اي نكتب font color




1
2
3
<font color="red">مدونة لنرتقي </font>
<font color="green">مدونة لنرتقي </font>
ويمكن كتابة كود اللون كالذي نراه في برامج التصميم مثلا لون برتقالي رمزه هكذاf5b509 #
فنكتب الكود هكذا :


1
2
<font color="#f5b509">مدونة لنرتقي </font>


وهذه النتيجة باللون الاحمر 











____________________________

والان نقوم بجمع نوع وحجم ولون الخط معا :
هذا هو الكود

1
2
<font face="arail" color="green" size="7" >مدونة لنرتقي </font>

والنتيجة :


















اذا اعجبك الموضوع لاتبخل باعجاب 
الى هنا اودعكم الى درس اخر ان شاء الله










0 comments

Post a Comment