دورة تعلم لغة HTML (الدرس السادس )

دورة تعلم لغة HTML

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

والصلاة والسلام على اشرف الخلق والمرسلين

اما بعد.

تعلم لغةHTML

هذة الدورة مكونة من أكثر من درس

 

الدرس الأول 

الدرس الثانى 

الدرس الثالث 

الدرس الرابع

الدرس الخامس 

الدرس السادس 

الدرس السابع

الدرس الثامن

الدرس التاسع

أضغط على رقم الدرس للأنتقال الية

تعليم لغةHTML

الدرس السادس 

حان الوقت الآن لتعلم سبعة عناصر جديدة. بنفس الطريقة التي تؤكد فيها على نص معين عندما تضعه بين وسم البداية <em> ووسم الإغلاق </em>, يمكنك أن تضيف تأكيداً أقوى باستخدام وسم البداية <strong> ووسم الإغلاق </strong>.
كود بلغة HTML:
<strong>هذا النص سيكون سميكا</strong>

سيظهر بهذا الشكل في المتصفح:

هذا النص سيكون سميكا

بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small:
كود بلغة HTML:
<small>هذا النص سيكون صغيرا</small>
سيظهر بهذا الشكل:

هذا النص سيكون صغيرا

هل أستطيع استخدام عدة عناصر في نفس الوقت؟

بإمكانك استخدام عدة عناصرة بسهولة في نفس الوقت، لكن تجنب تداخل العناصر. يمكن توضيح ذلك بهذا المثال:

إذا أردت التأكيد على نص صغير الحجم يجب أن تفعل ذلك بهذه الطريقة:
كود بلغة HTML:
<em><small>Emphasised small text</small></em>

وليس بهذه الطريقة:
كود بلغة HTML:
<em><small>Emphasise small text</em></small>

وجه الاختلاف في المثال الأول يكمن في أننا أغلقنا أولاً الوسم الذي قمنا بافتتاحه آخراً، بمعنى آخر وسم البداية الأول يغلق آخراً، هكذا لا نربك أنفسنا أو المتصفح.

المزيد من العناصر!

كما ذكرنا في الدرس الثالث هناك عناصر تستخدم وسم البداية ووسم الإغلاق في نفس الوقت. هذه يسمونها العناصر الفارغة وهي عناصر غير مرتبطة بالنص بأي طريقة، بل هي معزولة، كمثال لمثل هذه العناصر هناك الوسم <br /> الذي يجبر النص على الظهور في سطر جديد:

كود بلغة HTML:
Some text<br /> and some more text in a new line

سيظهر بهذا الشكل:

Some text
and some more text in a new line

 
لاحظ أن الوسم كتب بطريقة يختصر فيها وسم البداية ووسم الإغلاق بوضع مسافة وشرطة أمامية في نهايته: <br />.

هناك عناصر أخرى تحتاج إلى وسمي البداية والإغلاق - كما هو حال معظم العناصر - مثل ul وol وli. هذه العناصر تستخدم عندما تريد إنشاء القوائم.

ul هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة، أما ol فهي اختصار "ordered list" أو قائمة مرتبة فهو يضع رقماً لكل بند في القائمة، ولكي نضع البنود في القائمة علينا أن نستخدم الوسم li أو "list item"، هل أصبحت بالحيرة، شاهد هذا المثال:
كود بلغة HTML:
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>

سيظهر بهذا الشكل في متصفحك

A list item
Another list item

 
كود بلغة HTML:
<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>


سيظهر بهذا الشكل في متصفحك

First list item
Second list item

هل هذا كل شيء؟

نعم هذا كل شيء، ومرة أخرى، قم بعمل تجارب بنفسك وجرب العناصر السبعة التي تعلمتها في هذا الدرس:
كود بلغة HTML:
<strong>Stronger emphasis</strong>
<small>Small text</small>
<br /> Line shift
<hr /> Horizontal line
<ul>List</ul>
<ol>Ordered list</ol>
<li>List item</li>
 

.................................................................