تنظيم المحتوى

تمييز الخط

آخر تحيين: 04-01-2015

الرّوابط الفقرات


لنواصل مسيرتنا في التعامل مع الخط . لا مجال للتهاون و الإستسلام ، بعد أن قطعتم أشواطاً مهمة ، و بدأت الأمور تبدو أكثر و ضوحاً .إذ تعرّفتم على العديد من الوُسوم ، و سترون المزيد منها مع مرور الوقت و التقدّم في الدّروس . لا تقلق إذا كانت ذاكرتك مثقوبة ، ولا تستطيع تذكرها جميعا . في نهاية المطاف ، مع تكرار استعمالها ، ستتمكنون من حفظها دون أن تَشعُروا .
و لأسهل عليكم الأمور ،ستجدون في الجزء الأخير من الدروس لائحة بجميع الوُسوم التي سترونها ، في هذه السلسلة . ، في انتظار ذلك ، حتى لا نتيه ،لنعد و نكمل تعارفنا مع أفراد عائلة الوُسوم .

إعطاء الأهمية للنص : <strong> و <em>

حتّى نضفي أهمية على كلمة معينة ، جملة أو مقطع من نصِّنا : سنستعمل بعض الوُسوم حسب الأهيمة
- إذا كانت الأهمية صغيرة نستعمل وسم <em> </em> ، جرّبوا هذه الشيفرة

<p>  
  By the river Piedra <em> I sat down and wept </em>. There is a legend that everything...
</p>
مشاهدة النتيجة

- إذا كانت الأهمية كبيرة نستعمل وسم <strong> </strong> ، و كلمة strong تعني : قوي ، جربوا هذه الشيفرة

<p>  
  By the river Piedra <strong> I sat down and wept </strong>. There is a legend that everything...
</p>
مشاهدة النتيجة

إبراز النص : <mark>

- لإبراز كلمة أو جملة من النص نستعمل وسم <mark> ... </mark> ، مبدئيا يقوم أغلب المتصفحين بتلوين خلفية النص الموسوم بالأصفر و يمكننا طبعا تغيير هذا التّصرّف باستعمال CSS عندما نتعرّف عن كثب بهذه اللغة .مثال :

<p>لغة <mark> HTML5 </mark> تستخدم لتطوير مواقع الويب</p>
مشاهدة النتيجة

تصغير الخط : <small>

لتصغير حجم الخط نستعمل الوسم small ،
لنأخذ عنوان h1 على سبيل المثال ، و نحاول تصغيره :

<h1> عنوان h1 عادي </h1>
<h1><small> عنوان h1 مصغّر </small></h1>
مشاهدة النتيجة

وسوم أخرى

و نختتم ببعض الوسوم قليلة الإستعمال مثلا و سمي sup و sub
- الوسم الأول :<sup> ... </sup> نضيف بواسطته مؤشراً أعلى الكلمة أو الرقم : مثلا : SportTV أو 102
- الوسم الثاني : <sub> ... </sub> نضيف بواسطته مؤشراً أسفل الكلمة أو الرقم : مثلا : Xy+4

<p>
  المثال 1 : 
     شاهدت على قناة Sport<sup>TV</sup> مقابلة رائعة في كرة القدم <br> 
  المثال 2: 
     100 = 10<sup>2</sup> .  <br>
  المثال 3 :
         X<sub>y+4</sub> =  X<sub>16</sub> . ما هي قيمة "y" ? 
</p>
 
مشاهدة النتيجة

وبهذا نكون أنهينا هذا الدّرس ، و هذا لا يعني أننا أحطنا بكل ما يتعلق بالوُسوم أو تنظيم الخط ، المهم أنكم تقدمتم كثيراً ، و استأنستم بلغة جديدة كان البعض منكم لا يعرف منها إلاّ الإسم . لا ضير إن غابت عنكم أشياء في الدروس السابقة فيمكنكم العودة إليها و مراجعتها ، في نهاية المطاف ، الأمر يتعلق بالإستفادة و إتقان هذه اللغة ، وليس الإسراع لرؤية كل شيء دون أخذ أيّ شيء . كما أنصحكم بالتطبيق ، لا تعتمدوا فقط على القراءة .
إذا واجهتم أية صعوبة ، أو كان لديكم أي استفسار أو توضيح أو تصحيح ... لا تترددوا في طرح ذلك في المنتدى المخصص للغة HTML