استثمر للحياة

برمجة و تصميم و تطوير المواقع

القوائم Lists في HTML

حجم الخط

استثمر للحياة

القوائم  Lists  :من المفاهيم المفيدة لتنسيق صفحة HTML ان نضع بها قوائم مرتبة . سواء كانت مرقمة
أو غير مرقمة ............. تابع الموضوع


 القوائم غير المرقمة <ul> ..... <ul/>

مثال بسيط

<html>
<body>
<h4>تحب تشرب ايه :</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

تنفيذه

investolife

 

 كيفية وضع علامات مختلفة للقوائم

مثال

<ul type="disc">
 <li>شاي</li>
 <li>قهوة</li>
 <li>حاجة ساقع</li>
 
</ul>  

<h4>Circle bullets list:</h4>
<ul type="circle">
 <li>شاي</li>
 <li>قهوة</li>
 <li>حاجة ساقع</li>
</ul>  

<h4>Square bullets list:</h4>
<ul type="square">
<li>شاي</li>
 <li>قهوة</li>
 <li>حاجة ساقع</li>
</ul>  

شاهد المثال

 

 القائمة مرقمة <ol> ..... <ol/>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

مثال

<html>
<body>

<h4>Numbered list:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Letters list:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase letters list:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Roman numbers list:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>

شاهد المثال

 

 القوائم المتداخلة

مثال

<ul>
  <li>قهوة</li>
  <li>شاى
    <ul>
    <li>شاى صعيدي</li>
    <li>شاى اخضر</li>
    </ul>
  </li>
  <li>لمون خلاط</li>
</ul>

تنفيذه

investolife


شرحه


investolife

 

 القوائم المتداخلة أكثر

مثال

<ul>
  <li>قهوة</li>
  <li>شاى
    <ul>
    <li>شاي صعيدي</li>
    <li>شاي اخضر
      <ul>
      <li>صيني</li>
      <li>افريقي</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>زبادي خلاط</li>
</ul>

تنفيذه

investolife


شرحه


investolife

 

 القوائم ذات التعريف  لاحظ اننا نستخدم  الوسوم <dl>  للقائمة <dt> للعنصر <ddللتعريف

 

<html>
<body>

<h4>القوائم ذات التعريف:</h4>
<dl>
  <dt>الشاي</dt>
  <dd>مشروب منتشر فى الوطن العربي</dd>
  <dt>القهوة العربية</dt>
  <dd>مشروب من البن الاخضر</dd>
</dl>

</body>
</html>

تنفيذه

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

 

الجداول في HTLM
راجع اكواد الالوان
تعلم CSS

استثمر للحياة   investolife القوائم Lists HTML

استثمر للحياة   investolife القوائم Lists HTML

 

 


 

اعلان تجاري
اعلان 468