الدرس السادس: المزيد من العناصر
3 مشترك
العرب الشامل :: الدروس :: دروس البرمجة :: دروس Html
صفحة 1 من اصل 1
الدرس السادس: المزيد من العناصر
الدرس السادس: المزيد من العناصر
هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال:
حان الوقت الآن لتعلم سبعة عناصر جديدة.
بنفس الطريقة التي تؤكد فيها على نص معين عندما تضعه بين وسم البداية <em> ووسم الإغلاق </em>, يمكنك أن تضيف تأكيداً أقوى باستخدام وسم البداية <strong> ووسم الإغلاق </strong>.مثال 01 :
مثال 02 :
<small>هذه الكتابة يجب أن تكون أصغر</small>
ستظهر بالشكل التالي في المتصفح :
هل أستطيع استخدام عدة عناصر في نفس الوقت؟
بإمكانك استخدام عدة عناصرة بسهولة في نفس الوقت، لكن تجنب تداخل العناصر. يمكن توضيح ذلك بهذا المثال:
مثال 03 :
إذا أردت التأكيد على نص صغير الحجم يجب أن تفعل ذلك بهذه الطريقة:
بافتتاحه آخراً، بمعنى آخر وسم البداية الأول يغلق آخراً، هكذا لا نربك
أنفسنا أو المتصفح.
المزيد من العناصر!
كما ذكرنا في الدرس الثالث هناك عناصر تستخدم وسم البداية ووسم الإغلاق في نفس الوقت. هذه يسمونها العناصر الفارغة وهي عناصر غير مرتبطة بالنص بأي طريقة، بل هي معزولة، كمثال لمثل هذه العناصر هناك الوسم <br /> الذي يجبر النص على الظهور في سطر جديد:
مثال 04 :
عنصر آخر مشابه يحوي وسم البداية والإغلاق في نفس الوقت هو <hr /> الذي يستخدم في رسم خط أفقي، حرفي "hr" يعنيان "horizontal rule":مثال 05 :
- كما هو حال معظم العناصر - مثل ul وol وli. هذه العناصر تستخدم عندما تريد إنشاء القوائم.
ul هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة، أما
ol فهي اختصار "ordered list" أو قائمة مرتبة فهو يضع رقماً
لكل بند في القائمة، ولكي نضع البنود في القائمة علينا
أن نستخدم الوسم li أو "list item"، هل أصبحت بالحيرة، شاهد هذا المثال:
مثال 07 :
مثال 08 :
نعم هذا كل شيء، ومرة أخرى، قم بعمل تجارب بنفسك وجرب العناصر السبعة التي تعلمتها في هذا الدرس:
هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال:
- الكود:
<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>.مثال 01 :
- الكود:
<strong>هذه الكتابة تنبغي أن تكون أضخم</strong>
بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small:هذه الكتابة تنبغي أن تكون أضخم
مثال 02 :
<small>هذه الكتابة يجب أن تكون أصغر</small>
ستظهر بالشكل التالي في المتصفح :
هذه الكتابة يجب أن تكون أصغر
هل أستطيع استخدام عدة عناصر في نفس الوقت؟
بإمكانك استخدام عدة عناصرة بسهولة في نفس الوقت، لكن تجنب تداخل العناصر. يمكن توضيح ذلك بهذا المثال:
مثال 03 :
إذا أردت التأكيد على نص صغير الحجم يجب أن تفعل ذلك بهذه الطريقة:
- الكود:
<em><small>كتابة صغيرة مائلة</small></em>
- الكود:
<em><small>Emphasise small text</em></small>
بافتتاحه آخراً، بمعنى آخر وسم البداية الأول يغلق آخراً، هكذا لا نربك
أنفسنا أو المتصفح.
المزيد من العناصر!
كما ذكرنا في الدرس الثالث هناك عناصر تستخدم وسم البداية ووسم الإغلاق في نفس الوقت. هذه يسمونها العناصر الفارغة وهي عناصر غير مرتبطة بالنص بأي طريقة، بل هي معزولة، كمثال لمثل هذه العناصر هناك الوسم <br /> الذي يجبر النص على الظهور في سطر جديد:
مثال 04 :
- الكود:
كتابة<br /> و كتابة أخرى في خط جديد
لاحظ أن الوسم كتب بطريقة يختصر فيها وسم البداية ووسم الإغلاق بوضع مسافة وشرطة أمامية في نهايته: <br />.كتابة
و كتابة أخرى في خط جديد
عنصر آخر مشابه يحوي وسم البداية والإغلاق في نفس الوقت هو <hr /> الذي يستخدم في رسم خط أفقي، حرفي "hr" يعنيان "horizontal rule":مثال 05 :
- الكود:
<hr />
هناك عناصر أخرى تحتاج إلى وسمي البداية والإغلاق____________________________________________________________________________
- كما هو حال معظم العناصر - مثل ul وol وli. هذه العناصر تستخدم عندما تريد إنشاء القوائم.
ul هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة، أما
ol فهي اختصار "ordered list" أو قائمة مرتبة فهو يضع رقماً
لكل بند في القائمة، ولكي نضع البنود في القائمة علينا
أن نستخدم الوسم li أو "list item"، هل أصبحت بالحيرة، شاهد هذا المثال:
مثال 07 :
- الكود:
<ul>
<li>بند</li>
<li>بند آخر</li>
</ul>
- بند
- بند آخر
مثال 08 :
- الكود:
<ol>
<li>بند مرقم 1</li>
<li>بند مرقم 2</li>
</ol>
هل هذا كل شيء؟
- بند
- بند آخر
نعم هذا كل شيء، ومرة أخرى، قم بعمل تجارب بنفسك وجرب العناصر السبعة التي تعلمتها في هذا الدرس:
- الكود:
<strong>كتابة عريضة</strong>
<small>كتابة صغبرة</small>
<br />عودة إلى السطر
<hr /> خط أفقي فاصل
<ul>قائمة</ul>
<ol>لائحة مرقمة</ol>
<li>لائحة منقطة بود</li>
Arbchamel- المدير العام - Admin
- عدد المساهمات : 40
التقييم : 3
تاريخ التسجيل : 06/06/2011
العمر : 29
W@nderfulness- مشرفة عامة - Pb Moderator
- عدد المساهمات : 30
التقييم : 17
تاريخ التسجيل : 07/06/2011
العمر : 31
الموقع : Arbchamel.yoo7.com
simo- عدد المساهمات : 3
التقييم : 0
تاريخ التسجيل : 15/09/2011
مواضيع مماثلة
» الدرس الثالث: العناصر والوسوم
» الدرس السابع: الخصائص
» الدرس الأول: لنبدأ
» الدرس الثاني: ما هي HTML؟
» الدرس الرابع: إنشاء موقعك الأول
» الدرس السابع: الخصائص
» الدرس الأول: لنبدأ
» الدرس الثاني: ما هي HTML؟
» الدرس الرابع: إنشاء موقعك الأول
العرب الشامل :: الدروس :: دروس البرمجة :: دروس Html
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
2011-09-15, 18:55 من طرف simo
» تحميل فوتوفلتر استوديو Photofilter studio X
2011-09-15, 18:55 من طرف simo
» الدرس السادس: المزيد من العناصر
2011-09-15, 18:51 من طرف simo
» الدرس السابع: الخصائص
2011-07-20, 13:36 من طرف Arbchamel
» قاموس عربي إنجليزي و العكس لجميع الموبايلات
2011-07-02, 04:30 من طرف Hamza
» برنامج مميز لتحكم في التلفاز عن طريق الايفون
2011-07-02, 04:20 من طرف Hamza
» كن ذاتك - Be yourself
2011-06-24, 12:34 من طرف عود الريحان
» برنامج وضع الخلفيات الرائع و تعديل الصور PhotoShine
2011-06-22, 14:00 من طرف master cheng
» فجر طاقتك الكامنة في الأوقات الصعبة
2011-06-22, 00:37 من طرف Arbchamel