السلام عليكم جميعا
نتابع اليوم الحديث عن الخطوط
قم بفتح مستند جديد من ال Notepad واحفظه كما تعلمنا في الخطوة الاولى او قم بالتعديل على صفحتك السابقة من view ثم من source كما تعلمنا في الخطة الثانية ..وانا افضل مع كل اضافة عمل مستند جديد ..
قم بنسخ الكود التالي والصقه في المستند
كود HTML:
<html>
<head>
<title>my font</title>
</head>
<body bgcolor="#FFFFCC" >
<p align="center">
<font face="Tahoma" size="3" color="#CC00CC">
<b>1-welcome to my website</b><br>
<i>2-welcome to my website </i> <br>
<u>3-welcome to my website</u><br><br>
<strike>3-welcome to my website</strike><br>
</font>
</p>
</body>
</html>
انظر النتيجة داخل هذه الصفحة
http://www.freewebtown.com/jordan_am/yasminah1.html
من خلال المثال السابق نلاحظ اننا اضفنا معرّفات جديدة وهي تابعة للمعرف<font> في الجزء body
قبل ان أبدأ بالكتابة اخترت ان تكون جهة الكتابة هي التوسيط اي توسيط النص في منتصف الصفحة
ودلالتها
كود HTML:
<p align="center">
ابتدئتها بالمعرف <p> والذي قلنا عنه سابقا انه يتضمن فقرة انه يتضمن فقرة من عدة جمل وهو معرّف
حاوي يحتاج لاقفال الوسم </> راجع التمرين سابقا ولاحظ اين وضعنا علامة اقفال وسم المعرّف <p>.
ثم وضعنا بداخل الوسم نفسه امر التوسيط
alignاي ان الاصطفاف او الاتجاه (=) واشارة يساوي تعني النتيجة (center) اي التوسيط محاطة باشارتين اقتباس " " (جيد ان نعتاد على علامات الاقتباس لانها سترد معنا كثيرا فيما بعد ).
اذا نتيجة الامر محاطة بعلامتين اقتباس .
ثم فتحنا وسم جديد وكتبنا بداخله المعرف font اي الخط وهو الخاص بتنسيق الخطوط
كود HTML:
<font face="Tahoma" size="3" color="#CC00CC">
ثم ابتدئنا نختار انواع التنسيق التي نريد .. اخترنا المعرف face وهو يستخدم لتحديد نوع الخط الذي تريد ان تستعمله = النتيجة ، اخترت انا على سبيل المثال خط التاهوما tahoma بين علامتين اقتباس .
وهنا يجب ان نورد ملاحظة مهمة : هناك مجموعات خطوط اساسية بالجهاز كخط التاهوما وغيره وهناك انواع خطوط تقوم بانزالها انت على جهازك اضافية الان الخط الذي تختاره هنا ان لم يكن من الخطوط الاساسية فلن تستطيع ان تقرأه جميع الاجهزة يظهر عندك بالجهاز ولايظهر عندي بالجهاز وانما يقراه جهازي كخط عادي لانه لايوجد لدي نوع الخط هذا بالجهاز ولكن طبعا هناك طريقة لعرض الخطوط التي بجهازك وتستطيع ان تقراه كافة الاجهزة ولكنها في المراحل المتقدمة ان شاء الله التي سناتي على ذكرها وهي مرحلة اوراق الانماط او stylesheet لكن مبدئيا احرص على ان لا تقع في هذه الاشكالية .
ثم وضعت معرف size وهو معرّف حجم الخط الذي اريد = النتيجة ، بين قوسين اقتباس " " اخترت الخط حجم ثلاثة 3 .. حاول ان تعمل تدريب لاحجام الخطوط في كل مرة ممكن ان تزيد او تنقص في ارقام الاحجام .
ثم وضعت معرّف اللون color = النتيجة بين قوسين اقتباس " " قيمة اللون . ثم اغلقت الوسم > .
ابتدأت الجملة الاولى بمعرف جديد وهو معرّف<B> او ><b> وهو معرّف حاوي container tags اي يحتاج الى علامتين فتح واغلاق وهو معرّف مسؤول عن الخط العريض اي يعطي الخطم حجم عريض
كود HTML:
<b>1-welcome to my website</b><br>
لاحظ كيف ابتداناه بالمعرف الجديد <b > ثم الجملة ثم اقفلنا المعرّف </b> ثم علامة ال <br> التي تنقلني الى سطر جديد .
الجملة الثانية ابتداتها ايضا بمعرّف جديد وهو <i> وهو المسؤول عن ميلان الخط اي يعطيني جملة بخط مائل
كود HTML:
<i>2-welcome to my website </i ><br>
وينطبق عليها ما انطبق على المعرّف <b> انها معرّف حاوي ويحتاج الى اقفال .
ثم الجملة الثالثة ابتداتها بالمعرّف <u> هو المسؤول عن اعطاء خط تحت الجملة
كود HTML:
<u>3-welcome to my website</u><br>
وينطبق عليه شروط المعرّفين السابقين .
الجملة الرابعة ابتداتها بمعرف جديد ايضا وهو <strike> وهو معرف مسؤول عن الخط داخل الجملة
كود HTML:
<strike>3-welcome to my website</strike><br>
وينطبق عليه شروط المعرّفات السابقة .
وفي النهاية لاحظ معي عملية اقفال العرّفات التالية كيف ابتدئنا نقفلها :
كود HTML:
</font>
</p>
</body>
</html>
في البداية في اعلى الصفحة كتبنا المعرّف <p> ومن ثم المعرّف <font> في النهاية بعد الانتهاء من هذه الفقرة اقفلنا ال <font> اولا ثم ال<p> بالطبع لان الفونت كانت متضمنة داخل ال المعرّف <p> .