دورة HTML - الدرس السادس القوائم و تخطيط الصفحة ( lists and layouts)

سبتمبر 01, 2013

في هذا الدرس سنتعرف مع بعضنا البعض على القوائم وكيف نخطط للصفحة باستخدام لغة HTML

القوائم

القوائم تنقسم الى نوعين

القوائم المرقمة

نبدأ القائمة عن طريق الوسم <ol>
ثم نغلقه عن طريق الوسم </ol>
بين وسم البداية والنهاية نضع عناصر القائمة الخاصة بنا كالتالي

<ol>
<li>قهوة</li>
<li>حليب</li>
</ol>

قهوة
حليب

القوائم غير المرقمة

بكل بساطة نبدأ القائمة عن طريق الوسم <ul>

ثم نغلقه عن طريق الوسم </ul>
بين وسم البداية والنهاية نضع عناصر القائمة الخاصة بنا كالتالي

<ul>
<li>قهوة</li>
<li>حليب</li>
</ul>

القائمة ستظهر بهذا الشكل

قهوة
حليب

تقسيم الصفحة <div>

الوسم <div> هو عبارة عن وسم كتلة و يستخدم لتجميع العناصر و لتقسيم الصفحة
لتقسيم صفحتنا على 5 عناصر اساسية باستخدام هذا الوسم، تابعوا معنا المثال التالي

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title> dzlearning</title>
<body>
  <div id="container" style="width:500px">
    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">موقع تعلم المصدر الاول للتعلم </h1></div>
    <div id="menu" style="background-olor:#FFD700;height:200px;width:100px;float:left;">
     <b>قائمة</b><br>
     HTML<br>
     CSS<br>
     JavaScript</div>
  <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">محتوى الموقع</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © dzlearning.com</div>
</div>
</body>
</html>

شرح المثال

التسمية

أولا قمنا بوضع وسم <div> واطلقنا عليه اسم container
لما نضع id="container" فهذا يعني اننا اسمينا هكذا <div> ب container حتى يسهل علينا بعدها التعامل معه بلغة CSS

رأس الصفحة

ثم عدلنا عليه عن طريق style فأعطيناه لون للخلفية و عرض قيمته 500 بيكسل و كتبنا عليه بال <h1> موقع تعلم المصدر الاول للتعلم و بنفس الطريقة عملنا مع باقي التقسيمات

التقسيم بهذه الطريقة مفيد جدا للموقع فما علينا الا ان نقسم الموقع في البداية ثم نعمل ملف CSS و نعدل الستايل بكل سهولة و سرعة ..

و سنعمل باذن الله دورة كاملة من تصميم موقع بالفوتوشوب الى تقسيمه و توزيعه بال HTML و CSS ..

تقبلوا تحياتنا :)

لاتنسونا من صالح دعائكم ..

مدونة تعلم