الدرس السادس: المزيد من العناصر
الدرس السادس: المزيد من العناصر

هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال:

كود PHP:
         <html>        <head>       <title>My  website</title>       </head>        <body>        <h1>A Heading</h1>       <p>texttext text,  text</p>       <h2>Subhead</h2>       <p>text,  text texttext</p>       </body>            </html
ما التالي؟

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

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


كود PHP:
     This should be stronger emphasis
بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small:
مثال 2:

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


كود PHP:
     This should be in small
هل أستطيع استخدام عدة عناصر في نفس الوقت؟

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

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


كود PHP:
    <em><small>Emphasise small text</em></small
وجه الاختلاف في المثال الأول يكمن في أننا أغلقنا أولاً الوسم الذي قمنا بافتتاحه آخراً، بمعنى آخر وسم البداية الأول يغلق آخراً، هكذا لا نربك أنفسنا أو المتصفح.
المزيد من العناصر!

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


كود PHP:
         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:

كود PHP:
         <hr /> 
سيظهر بهذا الشكل في متصفحك


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


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

كود PHP:
         <ul>       <li>list item</li>        <li>Another list item</li>     </ul
سيظهر بهذا الشكل في متصفحك


كود PHP:
     A list itemAnother list item 
مثال 8:

كود PHP:
         <ol>       <li>First list item</li>        <li>Second list item</li>     </ol
سيظهر بهذا الشكل في متصفحك

كود PHP:
     First list itemSecond list item 
هل هذا كل شيء؟

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

كود PHP:
         <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
الدرس السادس: المزيد من العناصر
الدرس السادس: المزيد من العناصرالدرس السادس: المزيد من العناصر
الدرس السادس: المزيد من العناصر