تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5

دورة تعلم HTML درس 5 - دراسة المزيد من العناصر

#1
تعلم المزيد من عناصر HTML

[صورة مرفقة: Html-tags-icon.png]

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

سنتطرق الأن للمزيد من العناصر لكن قبل ذلك هل قمت بإنشاء المزيد من الصفحات بنفسك؟ فإن لم تفعل فإليك هذا المثال للتذكير و التعود على هيكل  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> و سنرى هذا في المثال التالي:

المثال الأول:
كود :
<strong>This should be stronger emphasis.</strong>

و سيظهر في المتصفح بهذا الشكل:
This should be stronger emphasis.

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

المثال الثاني:
كود :
<small>This should be in small.</small>

و سيظهر في المتصفح بهذا الشكل:
This should be in small.


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

المثال الثالث:

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

و ليس بهذه الطريقة:
كود :
<em><small>Emphasise 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 هي اختصار "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


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


التنقل السريع :


مستخدمين يتصفحوا هذا الموضوع: 1 ضيف