القائمة الرئيسية

الصفحات

آخر الأخبار

تعلم لغة البرمجة للمبتدئين لغة html الدرس (10)

 شرح القوائم Lists بجميع أنواعها في لغة HTML:

  • القوائم غير المرتبة (1)

تستخدم القوائم الغير مرتبة في لغة البرمجة HTML لعمل نقاط سوداء اثناء عملية الكتابة و يستخدم الورسم<ul> لعمل القوائم غير المرتبة في لغة البرمجة HTML  و التي تظهر بلمتصفح على شكل نقاط سوداء

</head>     <h2>القوائم غير المرتبة</h2>     <Ul>عمل نقطة سوداء <li>Html</li>قوائم     <li>Css</li>     <li>Javascript</li>     <li>jQuery</li> </ul>
  • القوائم غير المرتبة (2)
تستخدم القوائم الغير مرتبة في لغة البرمجة HTML لعمل نقاط سوداء اثناء عملية الكتابة و يستخدم الورسم<ul> لعمل القوائم غير المرتبة في لغة البرمجة HTML  و التي تظهر بلمتصفح على شكل نقاط سوداء
و عند إدخال قائمة  الورسم<ul> في لغة HTML في قائمة<ul> يصبح لدينا قائمة رئيسية داخلها قائمة أخرى
<h2> القوائم غير المرتبة </h2>     <Ul>عمل نقطة سوداء <li>Html</li>قوائم <li>Css</li> <li>Javascript <ul>قائمة غير مرتبة على شكل نقاط متفرعة من النقاط الأساسية     <li>jQuery</li>     <li>Mod Tools</li>     <li>Dojo</li> </ul> </li>     </ul>

  • قوائم المرتبة (1)

تستخدم القوائم المرتبة  في لغة البرمجة HTML لعمل أرقام كما في المثال أسفل و لها خواص إضافية و يستخدم الوسم <ol> 
<h2>القوائم المرتبة 1</h2>     <ol>عمل أرقام مرتبة         <li>Htmlتعلم</li>قوائم <li>Cssتعلم</li> <li>Javascriptتعلم</li> <li>PHPتعلم</li>     </ol>
القوائم كما تظهر في المتصفح 
html القوائم1
html القوائم1 

  • القوائم المرتبة (2)

تستخدم القوائم المرتبة  في لغة البرمجة HTML لعمل حروف كما في المثال أسفل و لها خواص إضافية و يستخدم الوسم <ol> ولوضع الحروف في قائمة HTML نستخدم "type="A

<h2>القوائم المرتبة 2</h2>     <ol type="A">عمل حروف مرتبة <li>Htmlتعلم</li>قوائم <li>Cssتعلم</li> <li>Javascriptتعلم</li> <li>PHPتعلم</li>     </ol>

  • القوائم المرتبة (3)

تستخدم القوائم المرتبة  في لغة البرمجة HTML   لبدأ العمل لبداية عد القائمة من رقم معين  كما في المثال أسفل و لها خواص إضافية و يستخدم الوسم <ol> ولوضع الأرقام  في قائمة HTML نستخدم "start="5 لبدأ العد من الرقم خمسة و تستطيع إختيار أي يرقم
<h2>القوائم المرتبة 3</h2>     <ol start="5">لبداية عد القائمة من رقم معين <li>Htmlتعلم</li>قوائم <li>Cssتعلم</li> <li>Javascriptتعلم</li> <li>PHPتعلم</li>     </ol>

  • القوائم المرتبة (4)

تستخدم القوائم المرتبة  في لغة البرمجة HTML   لبدأ العمل لبداية عد القائمة بطريقة العد التنازلي من رقم معين  كما في المثال أسفل و لها خواص إضافية و يستخدم الوسم <ol> ولوضع الأرقام بطريقة العد التنازلي  في قائمة HTML نستخدم "reversed="5 
<h2>القوائم المرتبة 4</h2>     <ol reversed="5">عرض القوائم بطريقة العد التنازلي <li>Htmlتعلم</li>قوائم <li>Cssتعلم</li> <li>Javascriptتعلم</li> <li>PHPتعلم</li>     </ol>

  • القوائم المرتبة (5)

تستخدم القوائم المرتبة  في لغة البرمجة HTML   لبدأ العمل لبداية عد القائمة  من رقم معين  كما في المثال أسفل و لها خواص إضافية  مثل قائمة فرعية غير مرتبة داخل قائمة مرتبة داخل وسم <ol>  نضع الورسم<ul>
<h2>القوائم المرتبة 5</h2> <ol> <li>Htmlتعلم     <ul>قائمة فرعية غير مرتبة داخل قائمة مرتبة     <li>Html 4.0</li>     <li>Html 5</li>     </ul> </li> <li>Cssتعلم</li> <li>Javascriptتعلم</li> <li>PHPتعلم</li> </ol>
القوائم كما تظهر في المتصفح 
html القوائم في
html القوائم في 

  • قوائم الوصف

تستخدم قوائم الوصف في لغة HTML إلا أن أخر فترة أصبح إستخدامها قليل جداً لكنها لا تزال مستخدمة كما تساعدك في تنسيق الموقع كما في المسال في الاسفل 
<h2>قوائم الوصف</h2>     <dl>         <dt>Html</dt>العنوان الموصوف <dd>Alimne</dd>مميزات <dd>Yas</dd> <dd>go</dd>         <dt>Css</dt> <dd>لغة سهلة</dd> <dd>بسيطة </dd> <dd>مميزة</dd>     </dl>
html قوائم الوصف
html قوائم الوصف


و للقوائم أستخدامات عديدة و خاصة أنه يؤثر على ("Search Engine Optimization") أو ما يطلق عليه ب SEO السي يو لان إذا كان الموقع منسق و و مريح للعين هذا الشيء يجذب القراء لاتمام القراءة داخل موقعك
القوائم مميزة جداً حيث أنه يؤثر أيضاً على Google Analytics و نسبة القبول في قوقل أدسنس تزداد (من وجهة نظري)
و هكذا نكون قد تعلمنا كل ما يخصالقوائم في لغة HTML وفي النهاية إترك لنا تعليق لنستمر في المزيد إن شاء الله .
reaction:

تعليقات