|
نظريا :
ببساطة شديدة لكتابة أي نص عربي أو إنجليزي يتم كتابة ما نريد بين وسمي البداية والنهاية للأمر body كما يلي :
تطبيق1 :
نريد كتابة الجملة الآتية.. " Web designing is very easy "
لعمل ذلك ببساطة اكتب العبارة بين قوسي البداية والنهاية للأمر body كم يلي :
|
<html>
<head>
<title> صفحتي الأولى </title>
</head>
<body>
Web designing is very easy
</body>
</html>
|
لتكون النتيجة كما في الصورة
تطبيق2 :
نريد كتابة الجملة الآتية.. " لا إله إلا أنت سبحانك إني كنت من الظالمين "
لعمل ذلك ببساطة اكتب العبارة بين قوسي البداية والنهاية للأمر body كم يلي :
|
<html>
<head>
<title> صفحتي الأولى </title>
</head>
<body>
لا إله إلا أنت سبحانك إني كنت من الظالمين
</body>
</html>
|
لكن هناك مشكلة وهي أن النص المكتوب قد يحتاج بعض التنسيقات وخاصة النص العربي الذي ستجد محاذاته دائما نحو اليسار.
ــــــــــــــــــــــــــــــــــــــــــــــــــــــ
تنسيق النص
تنسيق النص يشمل الآتي:
- محاذاة النص
- لون النص
- حجم النص
- نوع الخط
- تأثيرات إضافية
محاذاة النص
المحاذاة الإفتراضية لأي نص - عربي أو لاتيني - هي نحو اليسار دائما.. بمعنى أنك إذا كتبت أي نص فإنك ستجده موجودا على يسار الصفحة ..ليس هذا فقط ولكنك أيضا سوف تلاحظ أن إتجاه الكتابة يكون من اليسار لليمين وليس العكس.
حل هذه المشكلة غاية في البساطة
كل ما عليك فعله هو إستخدام الأمر p ذو وسمي البداية والنهاية والذي من خلاله يمكنك تعديل محاذاة النص alignment وكذلك اتجاه الكتابة direction .
مثلا : لو أردنا كتابة جملة باللغة العربية وتعديل اتجاه الكتابة ليكون من اليمين لليسار وكذلك تعديل المحاذاة لتكون على اليمين فسوف نستخدم الكود التالي:
|
<body>
<p dir="rtl" align="right">
العربي النص
</p>
</body>
|
التفسير
تفسير الكود السابق في الجدول الآتي :
|
الرمز |
التفسير |
|
p |
هو أمر يختص بتعديل محاذاة واتجاه النص . والحرف p هو اختصار لكلمة page وهذا الأمر له وسمي بداية ونهاية |
|
dir |
هو اختصار لكلمة direction والتي تعني اتجاه . هذا الأمر وظيفته هي التحكم في اتجاه الكتابة من اليمين لليسار والعكس ويأخذ القيمتين "rtl" للكتابة من اليمين لليسار , والقيمة "ltr" للكتابة من اليسار لليمين . |
|
rtl |
وهي اختصار للعبارة right to left |
|
ltr |
وهي اختصار للعبارة left to right |
|
align |
وهي اختصار لكلمة alignment والتي تعني محاذاة.. وهي تأخذ القيم right .. left .. center . |
تطبيق3 :
نريد كتابة العبارة الآتية"إدراك العجز عن الإدراك .. إدراك " بحيث يكون اتجاه العبارة من اليمين لليسار ومحاذاة العبارة إلى اليمين .
لعمل ذلك نكتب الكود التالي بين وسمي البداية والنهاية للأمر body :
|
<html>
<head>
<title> صفحتي الأولى </title>
</head>
<body>
<p dir="rtl" align="right">
إدراك العجز عن الإدراك .. إدراك
</p>
</body>
</html>
|
لتكون النتيجة كالآتي :
تغيير اللون والحجم ونوع الخط
لتغيير لون أو حجم أو نوع الخط , نستخدم الأمر font( والذي له وسمين للبداية والنهاية ) وذلك من خلال الأوامر:
color .. للون
size .. للحجم
face .. لنوع الخط
وهذه الأوامر الثلاثة تكون داخل وسم البداية للأمر font كما في المثال :
|
<font face="نوع الخط" color=" رمز اللون" size="حجم الخط">
النص
</font>
|
تطبيق4 :
نريد كتابة العبارة التالية "اللهم اجعلنا هادين مهتدين لا ضالين ولامضلين " .. بحيث يكون الخط أندلسي , واللون أحمر وحجمه 6 بيكسل .
لعمل ذلك نستخدم الأكواد التالية
|
<html>
<head>
<title> صفحتي الأولى </title>
</head>
<body>
<p dir="rtl" align="right">
<font face="andalus" color="#EB0202" size="6">
اللهم اجعلنا هادين مهتدين لا ضالين ولامضلين
</font>
</p>
</body>
</html>
|
لتكون النتيجة كالآتي:
لمعرفة المزيد عن حجم الخط ونوعه راجع هذا الدرس
لمعرفة المزيد عن الألوان راجع هذا الدرس
تنسيقات أخرى
هنالك بعض التنسيقات الأخرى مثل:
1- الإنتقال إلى سطر جديد.
في برامج تحرير النصوص العادية ( مثل وورد وبرنامج الدفتر ) لو أنك أردت كتابة عباراتين بحيث تكون كل عبارة في سطر مستقل فإن ما تقوم به هو كتابة العبارة الأولى ثم تضغط الزر enter من لوحة المفاتيح لتكتب العبارة الثانية في السطر التالي .
أما في لغة هتمل فإنك إذا أردت فعل ذلك فإنك لن تستخدم الزر enter فذلك لن يؤثر ولن تستطيع كتابة الجملة الثانية في سطر مستقل .. لكن الحل هو استخدام الكود <br> وهو وسم بداية ليس له وسم نهاية ..
ونحن نستخدم الأمر <br> في كل مرة نريد فيها الإنتقال لسطر جديد وإذا استخدمناالأمر مرتين متتاليتين <br><br> فإنه ينتقل لسطر جديد تاركا سطر خالي بينهما أي أن استخدام الأمر <br> يعتبر كبديل للضغط على الزر enter مرة واحدة
تطبيق5 :
نريد كتابة العبارتين التاليتين كل واحدة مستقلة في سطر خاص بها.
العبارتين :
سبحان الله وبحمده
سبحان الله العظيم
لو أنك قمت بكتابة العبارتين باستخدام الزر enter كما في المثال ..
|
<html>
<head>
<title> صفحتي الأولى </title>
</head>
<body>
<p dir="rtl" align="right">
<font face="andalus" color="#EB0202" size="4">
سبحان الله وبحمده
سبحان الله العظيم
</font>
</p>
</body>
</html>
|
ستكون النتيجة على غير المرغوب كما في الصورة ..
أما لو استخدمنا الكود br كما في المثال ..
|
<html>
<head>
<title> صفحتي الأولى </title>
</head>
<body>
<p dir="rtl" align="right">
<font face="andalus" color="#EB0202" size="4">
سبحان الله وبحمده
<br>سبحان الله العظيم
</font>
</p>
</body>
</html>
|
فستكون النتيجة كما في الصورة :
لمزيد من التنسيقات المرجو التواصل معي :facebook: [email protected]
hotmail: [email protected]
|