002-01141087755 info@CodesRoots.com
تصميم مواقع وتطبيقات الموبايل والجوال-HTML-قوائم


HTML-قوائم

قوائم - HTML

تقدم HTML  الكتاب على شبكة الإنترنت ثلاث طرق لتحديد قوائم المعلومات.
يجب أن يحتوي على جميع القوائم واحد أو أكثر من عناصر القائمة.
قد تحتوي على قوائم:

- <ul> - قائمة غير مرتبة. وهذه القائمة العناصر باستخدام الرصاص العادي.
- <ol>
 - قائمة مرتبة. وهذا استخدام أنظمة مختلفة من أرقام إلى قائمة البنود الخاصة بك.
- <dl>
 - قائمة التعريف. هذا يرتب البنود الخاصة بك في بنفس الطريقة التي ترتيبها في القاموس.

قوائم غير مرتبة - HTML

قائمة غير مرتبة هي مجموعة من العناصر ذات الصلة التي ليس لها ترتيب خاص أو التسلسل.
يتم إنشاء هذه القائمة باستخدام HTML  علامه  < ul >. ويتميز كل عنصر في القائمة بالتعداد النقطى .

مثال :

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

نوع السمة

يمكنك استخدام السمة نوع <ul> لتحديد نوع التعداد النقطىالتى تريد.
افتراضيا هو القرص.
فيما يلي الخيارات الممكنة:

<ul type="square">
<ul type="disc">
<ul type="circle">

امثله :

حيث نستخدم <ul type="square">

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
   <ul type="square">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ul>
</body>
</html>

حيث نستخدم <ul type="disc"> :

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
   <ul type="disc">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ul>
</body>
</html>

حيث نستخدم <ul type="circle"> :

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
   <ul type="circle">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ul>
</body>
</html>

قوائم أمر - HTML

إذا هل هناك حاجة لوضع البنود الخاصة بك في قائمة مرقمة بدلا من تعداد نقطي اذن فقوائم امر - HTML سيتم استخدامها . 
يتم إنشاء هذه القائمة باستخدام علامه <ol> . يبدأ الترقيم في واحدة وبمقدار واحد لكل عنصر من التوالى فى قائمة الامر ذات الكلمات الدلالية مع​​​​​​​ <li>.

مثال :

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

 

 

نوع السمة

يمكنك استخدام نوع السمة ل <ol>  ككلمة دلالية لتحديد نوع الترقيم الذي تريد.
افتراضيا هو رقم.
فيما يلي الخيارات الممكنة:

<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

امثله :

حيث نستخدم  <ol type="1"> 

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="1">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>

حيث نستخدم  <ol type="I">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="I">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>
 حيث نستخدم  <ol type="i"> 
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="i">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>

حيث نستخدم  <ol type="A"> 

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="A">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>

حيث نستخدم  <ol type="a"> 

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="a">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>

انطلاقه السمه 

يمكنك استخدام السمة بداية ل <ol> كلمة دلالية لتحديد نقطة بداية الترقيم التي تحتاج إليها.
فيما يلي الخيارات الممكنة:

<ol type="1" start="4">    - Numerals starts with 4.
<ol type="I" start="4">    - Numerals starts with IV.
<ol type="i" start="4">    - Numerals starts with iv.
<ol type="a" start="4">    - Letters starts with d.
<ol type="A" start="4">    - Letters starts with D.

مثال :

حيث نستخدم  <ol type="i" start="4" >

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="i" start="4">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>

قوائم تعريف - HTML

HTML و XHTML تدعم نمط قائمة وهو ما يسمى قوائم تعريف حيث يتم سرد إدخالات كما في القاموس أو الموسوعة.
قائمة التعريفات هي الطريقة المثلى لتقديم مسرد , قائمة الشروط، أو غيرها من قوائم اسم / قيمة .

قائمة التعريف تقوم باستخدام  الثلاث علامات التالية :

<dl> - Defines the start of the list

<dt> - A term

<dd> - Term definition

</dl> - Defines the end of the list

مثال :

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

هذا وسوف تنتج عليه النتيجة التالية:

 

HTML : ترمز هذه اللغة توصيف النص التشعبي .

HTTP : هذه تعني بروتوكول نقل النص التشعبي

​​​​​​​



اعلانات
شركة تصميم مواقع وتطبيقات موبايل اتصل بنا
شركة تصميم مواقع وتطبيقات موبايل اتصل بنا

00966-506999922

متاح واتس اب - فايبر - لاين
شركة تصميم مواقع وتطبيقات موبايل

info@CodesRoots.com