أهلا وسهلا بك زائرنا الكريم في منتديات بن ناصر، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .





سلسلة دروس HTML ( الدرس السادس: المزيد من العناصر)

[CENTER][IMG]_fpclass/images_f/2/8.gif[/IMG] [IMG]_fpclass/images_f/2/13.gif[/IMG][/CENTER] الدرس السادس: المزيد من الع ..



11-11-2011 11:28 صباحا
احمد عادل
rating
الأوسمة:1
وسام عضو مميز
وسام عضو مميز
معلومات الكاتب ▼
تاريخ الإنضمام : 04-06-2011
رقم العضوية : 50
المشاركات : 218
الدولة : DZ
الجنس : ذكر
تاريخ الميلاد : 24-3-1992
قوة السمعة : 263
الدولة : الجزائر
 offline 
[CENTER]8


13
[/CENTER]

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


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

<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>.

مثال 1:

<strong>This should be stronger emphasis.</strong>

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

This should be stronger emphasis.

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

مثال 2:

<small>This should be in small.</small>

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

This should be in small.

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


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

مثال 3:

إذا أردت التأكيد على نص صغير الحجم يجب أن تفعل ذلك بهذه الطريقة:

<em><small>Emphasised small text</small></em>

وليس بهذه الطريقة:

<em><small>Emphasise small text</em></small>

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

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


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

مثال 4:

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:

<hr />

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




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

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

مثال 7:

<ul> <li>A list item</li> <li>Another list item</li> </ul>

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



    مثال 8:

    <ol> <li>First list item</li> <li>Second list item</li> </ol>

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

    1. First list item
    2. 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>


    [CENTER][frame=8]يتبع[/frame][CENTER]13
    [/CENTER]
    [/CENTER]
    منقول للفائدة




















    11-11-2011 12:12 مساء
    مشاهدة مشاركة منفردة [1]
    رشيد الوهراني
    rating
    معلومات الكاتب ▼
    تاريخ الإنضمام : 06-10-2011
    رقم العضوية : 163
    المشاركات : 348
    الدولة : الجزائر
    الجنس : ذكر
    قوة السمعة : 207
     offline 
    look/images/icons/i1.gif سلسلة دروس HTML ( الدرس السادس: المزيد من العناصر)
    شكرا على الدروس المفيدة

    تحياتي

    11-11-2011 12:14 مساء
    مشاهدة مشاركة منفردة [2]
    عيسي عبد القادر
    rating
    معلومات الكاتب ▼
    تاريخ الإنضمام : 31-10-2011
    رقم العضوية : 176
    المشاركات : 2102
    الجنس : ذكر
    الدعوات : 4
    قوة السمعة : 7859
    الدولة : الجزائر
     offline 
    look/images/icons/i1.gif سلسلة دروس HTML ( الدرس السادس: المزيد من العناصر)
    شكرا على المجهود
    توقيع :عيسي عبد القادر
    gazali

    23-01-2012 12:04 مساء
    مشاهدة مشاركة منفردة [3]
    قويدر44444
    rating
    معلومات الكاتب ▼
    تاريخ الإنضمام : 23-01-2012
    رقم العضوية : 254
    المشاركات : 123
    الجنس : ذكر
    قوة السمعة : 106
     offline 
    look/images/icons/i1.gif سلسلة دروس HTML ( الدرس السادس: المزيد من العناصر)
    شكرا لك




    الكلمات الدلالية
    سلسلة ، دروس ، HTML ، الدرس ، السادس: ، المزيد ، من ، العناصر) ،


     







    الساعة الآن 05:57 صباحا