بيانات كاتب الموضوع | الدرس السادس: المزيد من العناصر HTML |
| كاتب الموضوع | رسالة |
|---|
| المعلومات | الكاتب: | | اللقب: | | الرتبه: | | | الصورة الرمزية | | | البيانات | | عدد المشاركات : | 200 |
| الإتصالات | | الحالة: | | | وسائل الإتصال: | |
| موضوع: الدرس السادس: المزيد من العناصر HTML  16/11/2014, 17:18 |
| اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي 
الدرس السادس: المزيد من العناصر
هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال:
- الكود:
-
<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>
سيظهر بهذا الشكل في متصفحك
- 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>
![]() الموضوع الأصلي : الدرس السادس: المزيد من العناصر HTML // المصدر : منتديات إجلجلي Agelgele // الكاتب:énergie
|
|
| | |
| المعلومات | الكاتب: | | اللقب: | مؤسس الموقع | الرتبه: | | | الصورة الرمزية | | | البيانات | | رسالة SMS : | الحمد لله علي كل حال | |  | |  | | العمر : | 33 | | عدد المشاركات : | 1609 |
| الإتصالات | | الحالة: | | | وسائل الإتصال: | |
| موضوع: رد: الدرس السادس: المزيد من العناصر HTML 28/11/2014, 16:12 |
| اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي
جزاك الله كل خيرا علي الموضوع
![]() الموضوع الأصلي : الدرس السادس: المزيد من العناصر HTML // المصدر : منتديات إجلجلي Agelgele // الكاتب:Ǥlamorous
|
|
| | |
| | الدرس السادس: المزيد من العناصر HTML | |
|
23/8/2017, 21:53
هام جداً: قوانين المساهمة في المواضيع. انقر هنا للمعاينة 
