الاثنين، 23 يوليو 2012

الدرس الخامس: ماذا تعلمنا حتى الآن وماذا بعد ذلك؟


الدرس الخامس: ماذا تعلمنا حتى الآن وماذا بعد ذلك؟

إبدأ دائماً بالقالب الذي قمنا بإنشاءه في الدرس السابق:



في قسم رأس الصفحة اكتب دائماً العنوان: <title>عنوان صفحتك</title>. لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح:
العنوان يعرض في المتصفح
العنوان بشكل خاص مهم لأنه يستخدم في محركات البحث - مثل غوغل - لأرشفة موقعك وإظهاره في نتائج البحث.
العنوان يعرض في غوغل
في جسم الصفحة اكتب محتويات صفحتك، وأنت تعرف الآن بعض أهم العناصر:



تذكر أن الطريقة الوحيد لتعلم HTML هي بالتجربة والخطأ، لكن لا تقلق، لا يمكنك بأي طريقة أن تدمر حاسوبك أو الإنترنت! لذلك استمر في التجربة، هذه هي أفضل طريقة لاكتساب الخبرة.

ماذا يعني هذا؟

لا أحد يتقن تطوير المواقع بتعلم الأمثلة فقط في هذا الدرس، فهذا الدرس هو مجرد بداية بسيطة لفهم مكونات المواقع، ولكي تقوم بإنشاء موقع جيد عليك أن تستخدم المكونات بأسلوب جديد وإبداعي.
لذلك قم بتجربة ما تعلمته حتى الآن
هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال:



ما التالي؟

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



سيظهر بهذا الشكل في المتصفح:
This should be stronger emphasis.
بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small:
مثال 2:



سيظهر بهذا الشكل في متصفحك
This should be in small.

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

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



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



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

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

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



سيظهر بهذا الشكل في متصفحك
Some text
and some more text in a new line
لاحظ أن الوسم كتب بطريقة يختصر فيها وسم البداية ووسم الإغلاق بوضع مسافة وشرطة أمامية في نهايته: <br />.
عنصر آخر مشابه يحوي وسم البداية والإغلاق في نفس الوقت هو <hr /> الذي يستخدم في رسم خط أفقي، حرفي "hr" يعنيان "horizontal rule":
مثال 5:



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




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



سيظهر بهذا الشكل في متصفحك
  • A list item
  • Another list item
مثال 8:



سيظهر بهذا الشكل في متصفحك
  1. First list item
  2. Second list item

هل هذا كل شيء؟

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



ليست هناك تعليقات:

إرسال تعليق