دورة تعليم لغة HTML : الدرس الرابع
المزيد من العناصر :
اليوم في هذا الدرس سوف نتعرف على المزيد من عناصر هذه اللغه الرائعه :
هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال :
هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال :
<html>
<head>
<title>My website</title>
<head/>
<body>
<h1>A Heading</h1>
<p>text, text text, text</p>
<h2>Subhead</h2>
<p>text, text text, text</p>
<body/>
<html/>
حان الوقت الآن لتعلم سبعة عناصر جديدة.
بنفس الطريقة التي تؤكد فيها على نص معين عندما تضعه بين وسم البداية <em> و وسم الإغلاق <em/>, يمكنك أن تضيف تأكيداً أقوى باستخدام وسم البداية <strong> و وسم الإغلاق<strong/>.
بنفس الطريقة التي تؤكد فيها على نص معين عندما تضعه بين وسم البداية <em> و وسم الإغلاق <em/>, يمكنك أن تضيف تأكيداً أقوى باستخدام وسم البداية <strong> و وسم الإغلاق<strong/>.
<strong>This should be stronger emphasis.</strong>
و عند استعمال الوسم strong يعطينا هذا الناتج :
. This should be stronger emphasis
بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small :
<small>This should be in small.</small>
و سيظهر النص بهذا الشكل :
This should be in small
هل أستطيع استخدام عدة عناصر في نفس الوقت ؟
بإمكانك استخدام عدة عناصرة بسهولة في نفس الوقت، لكن تجنب تداخل العناصر. يمكن توضيح ذلك بهذا المثال :
مثال :
إذا أردت التأكيد على نص صغير الحجم يجب أن تفعل ذلك بهذه الطريقة :
<em><small>Emphasized small text</small></em>
وليس بهذه الطريقة :
<em><small>Emphasize small text</em></small>
وجه الاختلاف في المثال الأول يكمن في أننا أغلقنا أولاً الوسم الذي قمنا بافتتاحه آخراً، بمعنى آخر وسم البداية الأول يغلق آخراً، هكذا لا نربك أنفسنا أو المتصفح .
المزيد من العناصر!
المزيد من العناصر!
كما ذكرنا في الدرس الثالث هناك عناصر تستخدم وسم البداية ووسم الإغلاق في نفس الوقت. هذه يسمونها العناصر الفارغة وهي عناصر غير مرتبطة بالنص بأي طريقة، بل هي معزولة، كمثال لمثل هذه العناصر هناك الوسم </ br> الذي يجبر النص على الظهور في سطر جديد :
Some text<br /> and some more text in a new line
سيظهر بهذا الشكل في متصفحك :
Some text
and some more text in a new line
لاحظ أن الوسم كتب بطريقة يختصر فيها وسم البداية ووسم الإغلاق بوضع مسافة وشرطة أمامية في نهايته: </ br> .
عنصر آخر مشابه يحوي وسم البداية والإغلاق في نفس الوقت هو </ hr> الذي يستخدم في رسم خط أفقي، حرفي "hr" يعنيان "horizontal rule":
مثال :
</ hr>
و هنا سيعطينا خط فاصل
هناك عناصر أخرى تحتاج إلى وسمي البداية والإغلاق - كما هو حال معظم العناصر - مثل ul و ol و li . هذه العناصر تستخدم عندما تريد إنشاء القوائم.
هناك عناصر أخرى تحتاج إلى وسمي البداية والإغلاق - كما هو حال معظم العناصر - مثل ul و ol و li . هذه العناصر تستخدم عندما تريد إنشاء القوائم.
ul هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة .
ol فهي اختصار "ordered list" أو قائمة مرتبة فهو يضع رقماً لكل بند في القائمة .
ولكي نضع البنود في القائمة علينا أن نستخدم الوسم li أو "list item". هل أصبحت بالحيرة.
شاهد هذا المثال :
<ul>
<li> A list item </li>
<li> Another list item </li>
<ul/>
و سيظهر بهذا الشكل في متصفحك :
- A list item
- Another list item
مثال :
<ol>
<li> First list item </li>
<li> Second list item </li>
<ol/>
و سيظهر في متصفحك بهذا الشكل :
- First list item
- Second list item
هل هذا كل شيء ؟
نعم هذا كل شيء، ومرة أخرى، قم بعمل تجارب بنفسك وجرب العناصر السبعة التي تعلمتها في هذا الدرس :
<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>
دورة تعليم لغة HTML : الدرس الرابع
0 التعليقات :
إرسال تعليق