HTML - الدرس الثاني التعامل مع الخطوط

بسم الله الرحمن الرحيم

التعامل مع الخطوط :
تنسيق الخط بشكل عريض مائل منخفض مرتفع ...

- الوسم <b>  </b> لجعل الخط عريض - bold .
- الوسم <strong>  </strong> جعل الخط يبدوا أقوى أو أكثر وضوحاً من الذي حوله .
- الوسم <i>  </i> لجعل الخط مائل - italic .
- الوسم <em>  </em> لجعل الخط مؤكد أو أكثر شدة - emphasized .
- الوسم <code>  </code> جعل الخط (كود) مخرجات كمبيوتر .
- الوسم  جعل الخط منخفض - subscript .
- الوسم  - جعل الخط مرتفع - superscript .
مثال :

<p><b>khaled bold</b></p>

<p><strong>khaled strong</strong></p>

<p><i>khaled italic</i></p>

<p><em>khaled emphasized</em></p>

<p><code>khaled computer output</code></p>

<p>khaled ^superscript text</p>

<p>khaled _subscript text</p>

السيطرة على الفواصل والأسطر والفراغات في الخط ...
- الوسم <pre> </pre> يمكنك من التحكم بالاسطر والفراغات والفواصل .
  لو أردنا كتابة معادلة رياضية أو كود على أكثر من سطر فإننا نستخدم هذا الوسم, مثال :

  <pre>

with pre

for i = 1 to 5

     print i

next i

</pre>

without pre

for i = 1 to 10

     print i

next i

كما نلاحظ في المثال السابق وضعنا كود بين الوسم <pre> </pre>  وظهر بشكل منسق أما الكود الثاني تم وضعه بدون الوسم وقد ظهر بشكل غير منسق وعلى سطر واحد فقط .

وضع خط تحت كلمة أو في منتصف الكلمة أو علامة تحديد ...

- الوسم <del>  </del> لوضع خط في منتصف الكلمة (يتوسط حذف) .

- الوسم <ins>  </ins> لوضع خط تحت الكلمة (تسطير) .

- الوسم <mark>  </mark> لوضع علامة او تحديد نص (تحديد) .

- الوسم <q>  </q> لوضع علامة اقتباس على النص "اقتباس" .
   مثال :

<p><del> khaled del </del></p>

<p><ins> khaled ins </ins></p>

<p><mark> khaled mark </mark></p>

<p><q> khaled quotation </q> </p>

إنشاء قوائم نصية ...
- الوسم <ol>  <‎/ol> لانشاء قوائم مع تعداد رقمي لكل قائمة بإضافة <LI> .
- الوسم <ul>  <‎/ul> لانشاء قوائم نقطية لكل قائمة بإضافة <LI> .
  مثال :

<ol> 

 <li> khaled </li>

 <li>Tech-Secu</li>

 <li>fb.h4cK3r5y573m</li>

</ol>

<ul> 

 <li>khaled </li>

 <li>Tech-Secu</li>

</ul>

- ويمكن تعديل التعداد الرقمي في الوسم <ol>  <‎/ol> الى أحرف انجليزية أو الى أحرف لاتينية بـ :
‎<ol type="i">‎ لصنع قائمة أحرف لاتينية صغيرة .
<ol type="I"> لصنع قائمة أحرف لاتينية كبيرة .
<ol type="a"> لصنع قائمة بتعداد أحرف انجليزية صغيرة .
<ol type="A"> لصنع قائمة بتععداد أحرف انجليزية كبيرة .
- ويمكن تعديل التعداد النقطي في الوسم <ul>  <‎/ul>  الى دوائر ,مربعات بوضع الوسم :
<ul type="circle"> لصنع قائمة نقطية بشكل دائرة .
<ul type="square"> لصنع قائمة نقطية بشكل مربع .
 مثال :

<ol type="i">
 <li> khaled </li>
 <li>Tech-Secu</li>
</ol>
<ol type="I">
 <li> khaled </li>
 <li>fb.h4cK3r5y573m</li>
</ol>
<ol type="a"> 
 <li> khaled </li>
 <li>Tech-Secu</li>
</ol>
<ol type="A"> 
 <li> khaled </li>
 <li>fb.h4cK3r5y573m</li>
</ol>
<ul type="circle">
 <li>khaled </li>
 <li>Tech-Secu</li>
</ul>
<ul type="square">
 <li>khaled </li>
 <li>fb.h4cK3r5y573m</li>
</ul>









أما لبدء تعداد نقطي من رقم اكبر من 1 مثلاً الرقم 5 نستخدم الوسم :
<ol start="5">
اذا اعجبك الدرس يمكن ببساطة حفظه على جهازك من متصفح جوجل كروم بالضغط 
على ctrl+p وسيتم حفظه على جهازك بصيغة pdf .

الدرس الثالث