1. الرئيسية
  2. الإحصائيات
  3. البحث
  4. جديد الدروس
  5. أخبر صديقك
  6. اتصل بنا

مدرسة هاني الطنبور » لغة HTML » الدرس السادس: المزيد من العناصر

 الدرس السادس: المزيد من العناصر  أضيف في: 19/06/2010
هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال:

CODE:
0001
0002
0003
0004
0005
0006
0007
0008
0009
0010
0011
0012
0013
<html>
<head>
My website
</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>.


مثال 1:
CODE:
0001
0002
<strong>This should be stronger emphasis.</strong>


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

This should be stronger emphasis.

بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small:


مثال 2:
CODE:
0001
0002
<small>This should be in small.</small>


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

This should be in small.

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

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

بهذا المثال:


مثال 3:


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


وليس بهذه الطريقة:
CODE:
0001
0002
<em><small>Emphasise small text</em></small>


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

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


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

كما ذكرنا في الدرس الثالث هناك عناصر تستخدم وسم البداية ووسم الإغلاق في نفس الوقت. هذه

يسمونها العناصر الفارغة وهي عناصر غير مرتبطة بالنص بأي طريقة، بل هي معزولة، كمثال لمثل

هذه العناصر هناك الوسم <br /> الذي يجبر النص على الظهور في سطر جديد:


مثال 4:
CODE:
0001
0002
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":


مثال 5:
CODE:
0001
0002
<hr />


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


--------------------------------------------------------------------------------


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


ul هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة، أما ol فهي

اختصار "ordered list" أو قائمة مرتبة فهو يضع رقماً لكل بند في القائمة، ولكي نضع البنود في

القائمة علينا أن نستخدم الوسم li أو "list item"، هل أصبحت بالحيرة، شاهد هذا المثال:


مثال 7:
CODE:
0001
0002
0003
0004
0005
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>


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

•A list item
•Another list item

مثال 8:
CODE:
0001
0002
0003
0004
0005
<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>


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

1.First list item
2.Second list item
هل هذا كل شيء؟

نعم هذا كل شيء، ومرة أخرى، قم بعمل تجارب بنفسك وجرب العناصر السبعة التي تعلمتها في هذا

الدرس:
CODE:
0001
0002
0003
0004
0005
0006
0007
0008
<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.NET

الكاتب: admin انقر هنا لمراسلة admin أنقر هنا للإنتقال إلى موقع admin إضافة للمفضلة إضافة لمفضلة Google إضافة لمفضلة Delicious إضافة لمفضلة Digg إضافة لمفضلة Facebook
خيارات الدرس : ارسل الدرس لصديق ارسل الدرس لصديق  طباعة الدرس طباعة الدرس