درس اليوم سيكون درساً مهماً وسهلاً ان شاء الله الا وهو النصوص وطريقة التعامل معها في لغة html .
عند كتابة النصوص في الـHTML فان النصوص تأخذ شكل واحد وهو الشكل المتتابع حتى وان قمت بالكتابة في سطر جديد فان النصوص لا تظهر كما هي وانما تظهر بشكل متتال مثلا عن كتابة الكود التالي :
عند كتابة النصوص في الـHTML فان النصوص تأخذ شكل واحد وهو الشكل المتتابع حتى وان قمت بالكتابة في سطر جديد فان النصوص لا تظهر كما هي وانما تظهر بشكل متتال مثلا عن كتابة الكود التالي :
<html>
<head><title>موقع التقنية اليوم </title></head>
<body marginleft="100">
بسم الله الرحمن الرحيم # قل هو الله احد
الله الصمد
لم يلد ولم يولد
ولم يكن له كفوا احد
</body>
</html>
فان النصوص تظهر بالشكل التالي :
لذا ظهرت الحاجة لوجود وسوم وشفرات لتنسيق النصوص وسوف ندرسها ان شاء الله بقليل من التفصيل .
1- الوسم <br>
وهو يستخدم للكتابة في سطر جديد ويستخدم هذا الوسم من خلال وضعه قبل النص المراد كتابته في سطر جديد ففي المثال السابق سوف نضيف هذا الوسم لإنشاء سطور جديده بالشكل التالي :
<html>
<head><title>موقع التقنية اليوم </title></head>
<body marginleft="100">
بسم الله الرحمن الرحيم # قل هو الله احد
<br>الله الصمد
<br>لم يلد ولم يولد
<br>ولم يكن له كفوا احد
</body>
</html>
لتصبح النتيجة هكذا :
وهذا الوسم لا يحتوي على وسم نهاية .
2- الوسم </p><p>
وهذا الوسم يستخدم للكتابة في سطر جديد مع ترك سطر فارغ قبله وهو يختلف عن الوسم السابق بانه يترك سطر قبله فارغ وهو يستخدم بالطريقة التالية :
<p>النص المراد كتابته </p>
ولو استخدمناه في المثال السابق بالشكل التالي :
<html>
<head><title>موقع التقنية اليوم </title></head>
<body marginleft="100">
بسم الله الرحمن الرحيم # قل هو الله احد
<p> الله الصمد </p>
<p> لم يلد ولم يولد </p>
<p> ولم يكن له كفوا احد</p>
</body>
</html>
فستكون النتيجة بالشكل التالي :
- خصائص هذا الوسم
مع هذا الوسم سندرس خاصية المحاذاة :
خاصية المحاذاة
المحاذاة تعني اتجاه النص مثلاً الى اليمين او الى اليسار او في المنتصف ولتحديد محاذاة النص في وسم <p> سنستخدم الوسم align ضمن الوسم <p> بالطريقة التالية :
< p align="اتجاه النص"<لنص المراد كتابته </p>
ويمكن اختيار احد القيم التالية :
left : لجعل النص على اليسار ويستخدم كالتالي :
< p align="left">النص المراد كتابته </p>
right: لجعل النص على اليمين ويستخدم كالتالي :
< p align="right ">النص المراد كتابته </p>
center : لجعل النص في المنتصف ويستخدم بالشكل التالي :
< p align="center"> النص المراد كتابته </p>
سنطبق هذه الخاصية على المثال السابق ليصبح الوسم بالشكل التالي :
<html>
<head><title>موقع التقنية اليوم </title></head>
<body marginleft="100">
بسم الله الرحمن الرحيم # قل هو الله احد
<p align="center">الله الصمد </p>
<p align="right"> لم يلد ولم يولد </p>
<p align="left"> ولم يكن له كفوا احد</p>
</body>
</html>
وستكون النتيجة بالشكل التالي :
3- الوسم <pre></pre>
قلنا سابقا بان النصوص في هذه اللغة تظهر بشكل غير منسق وتحدثنا عن الوسمين السابقين اللذان يقومان بعمل سطر جديد اثناء كتابة النصوص ولكن الان سنتحدث عن وسم سيظهر ماتكتبة على المتصفح تماما كما كتبتة اثناء تصميم الصفحة وهو يستخدم بالشكل التالي
<pre>اكتب النص هنا بشكل حر وسيظهر في المتصفح كما كتبته هنا</pre>
لناخذ مثال على هذا الوسم واليك الشفرات التالية :
<html>
<head><title>موقع التقنية اليوم </title></head>
<body marginleft="100">
<pre>بسم الله الرحمن الرحيم
قل هو الله احد
الله الصمد
لم يلد ولم يولد
ولم يكن له كفوا احد </pre>
</body>
</html>
وستكون النتيحة بالشكل التالي :
لاحظ ان النص ظهر كما كتبته بين الوسمين .
4- الكتابة بخط عريض او مائل او تحته خط
سنتعرف على وسوم للكتابة بخط عريض او خط مائل او نص تحته خط واليك الوسوم الذي ستؤدي هذا العمل وهي كالتالي :
<b> نص عريض </b>
<i> نص مائل </i>
<u> نص تحته خط </u>
نطبق هذه الوسوم في صفحة جديدة كالتالي :
<html dir="rtl">
<head><title>موقع التقنية اليوم </title></head>
<body marginleft="100">
<br><b> نص عريض </b>
<br><i> نص مائل </i>
<br><u> نص تحته خط </u>
</body>
</html>
وسيكون الناتج كالتالي :
هذا ما لدينا في هذا الدرس وسنواصل التحدث عن النصوص في الدرس المقبل ان شاء الله .
الانتقال الى فهرس الدروس ...
اترك تعليقك على الموضوع