المدرب المحترف

السلام عليكم زائرنا الكريم،،،
تشرفنا بزيارتك لنا ونتمنى انضمامكم واذا غادرت المنتدى، تأكد اننا سفتقدك كثيراً
مدير المنتدى
المدرب المحترف

تدريب وتطوير، كمبيوتر، لغات برمجة، دورات صيانة، ميكروسوفت اوفيس، icdl، فوتوشوب، ديزاين، تصميم، لوجو، تعليم، دورات اونلاين، دورات فيديو

تنبيه: المنتدى في مرحلة الاعداد والتطوير وننتظر مشاركة الزوار والاصدقاء بالمواضيع المفيدة من جميع انحاء الدول العربية
يمكن للاعضاء فقط نشر اعلاناتكم مجاناً بدون اي رسوم، مراسلة الادارة وكتابة نص الاعلان
ارسل نص الاعلان مع اضافة بيانات التواصل الخاص بك، على ايميل مدير المنتدى او ارسلها كرساله شخصية للمدير معنونة ب" اعلان" وبعد مراجعتها يتم النشر فورا

المواضيع الأخيرة

» الدرس التاسع: الصور
الأحد أكتوبر 16, 2011 2:52 pm من طرف Admin

» الدرس الثامن: الروابط
الأحد أكتوبر 16, 2011 2:30 pm من طرف Admin

» الدرس السابع: الخصائص
الأحد أكتوبر 16, 2011 2:28 pm من طرف Admin

» الدرس السادس: المزيد من العناصر
الأحد أكتوبر 16, 2011 2:25 pm من طرف Admin

» الدرس الخامس: جرب بنفسك
السبت أكتوبر 15, 2011 10:03 pm من طرف Admin

» الدرس الرابع: إنشاء موقعك
السبت أكتوبر 15, 2011 9:31 pm من طرف Admin

» مجموعة من سكريبتات للمواقع والمدونات والمنتديات
السبت أكتوبر 15, 2011 6:24 pm من طرف Admin

» الدرس الثالث: العناصر والوسوم
السبت أكتوبر 15, 2011 6:15 pm من طرف Admin

» ما هى HTML؟
السبت أكتوبر 15, 2011 6:10 pm من طرف Admin


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

    شاطر

    Admin
    Admin

    عدد المساهمات : 18
    تاريخ التسجيل : 22/04/2010

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

    مُساهمة من طرف Admin في الأحد أكتوبر 16, 2011 2:25 pm

    جرب الاتي بنفسك واستعرض النتائج من خلال صفحة الويب ...
    <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:
    مثال 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>


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

    A list item
    Another list item
    مثال 8:


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

      الوقت/التاريخ الآن هو الإثنين ديسمبر 10, 2018 9:32 pm