HTML тізімдері

15 Желтоқсан 2014

Тізімдер дегеніміз таңбалардан не сандардан басталатын, өзара бірі-бірімен қандай да бір байланыста болатын сөздердің немесе сөйлемдердің жиынтығы.

Олар әртүрлі деректерді реттеп және бір жүйеге келтіруге мүмкіндік беріп қана қоймай, оларды сайт оқырмандарына көрнекті және қолайлы түрде ұсынуға көмектеседі.

Тізімдер көбінесе меню навигациясын жасауда кең қолданылады.|

HTML таңбаланған тізім.

Таңбаланған тізім дегеніміз элементерінің алдында қандай да бір таңба тұратын тізім.Үнсіздік бойынша ол таңба боялған  дөңгелек болып келеді.

Ол тізім HTML тегтерінің бірі <ul></ul> дердің арасына орналасады.Ал тізімнің әр элементі  <li> </li> тегтерімен шектеледі.Мысалы:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таңбаланған тізім</title>
 </head>
 <body>
   <hr>
   <ul>
     <li>Қыс</li>
     <li>Көктем</li>
     <li>Жаз</li>
     <li>Күз</li>
   </ul>
 </body>
</html>


Енді осы берілген HTML кодын көшіріп алып, php файлы ретінде бұрынғы сабақтарымда үйреткендей, ДЕНВЕРДЕ жүктеп жіберсеңіз келесі нәтижені көресіздер:

 


Таңбалар 3 түрден тұрады: дөңгелек(үнсіздік бойынша), шеңбер және квадрат.Ал енді осы түрлерді белгілеу үшін HTML тегі <ul> - дің атрибуты "type" қолданылады.Ол үшін төмендегі кестеге көз салайық:


HTML коды Тізімнің түрлері Мысал
<ul type="disc">
<li>...</li>
</ul>
Таңбасы дөңгелек түріндегі тізім
  • Қыс
  • Көктем
  • Жаз
  • Күз
<ul type="circle">
<li>...</li>
</ul>
Таңбасы шеңбер түріндегі тізім
  • Қыс
  • Көктем
  • Жаз
  • Күз
<ul type="square">              
<li>...</li>
</ul>
Таңбасы квадрат түріндегі тізім
  • Қыс
  • Көктем
  • Жаз
  • Күз

HTML нөмірленген тізім.

Нөмірленген тізім дегеніміз рет саны жазылған элементтер жиынтығы болып табылады.

Мұндай тізімді жасау үшін HTML дің жұптасқан тегтері <ol></ol> пайдаланылады және нөмірлердің түрлері осы тегтің атрибутына байланысты болады.

Ал бұл тізімнің әрбір элементі <li></li> тегтерінің ортасына орналасады.

Егер <ol> тегінің атрибутында ештеңе жазылмаса, онда үнсіздік бойынша тізім нөмірлері араб сандарымен өрнектеледі:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Нөмірленген тізім</title>
 </head>
 <body>
   <hr>
   <ol>
     <li>Қыс</li>
     <li>Көктем</li>
     <li>Жаз</li>
     <li>Күз</li>
   </ol>
   <hr>
 </body>
</html>


Осы кодты "tizim.php" деп сақтап, денверден қарағанда оның түрі мынадай болады:



Нөмірленген тізім элементерінің нөмірлерінің түрі <ol> тегінің атрибуты "type" арқылы белгіленеді:

HTML коды Тізімнің түрлері Мысал
<ol type="1">
<li>...</li>
</ol>
Араб сандары 1. Астана
2. Алматы
3. Атырау
<ol type="A">
<li>...</li>
</ol>
Латын әліппесінің бас әріптері A. Астана
B. Алматы
C. Атырау
<ol type="a">
<li>...</li>
</ol>
Латын әліппесінің кіші әріптері a. Астана
b. Алматы
c. Атырау
<ol type="I">
<li>...</li>
</ol>
Жоғарғы регистрдегі Рим сандары I. Астана
II. Алматы
III. Атырау
<ol type="i">
<li>...</li>
</ol>
Төменгі регистрдегі Рим сандары i. Астана
ii. Алматы
iii. Атырау


Ал егер нөмірленген тізімді белгілі бір саннан бастау қажет болса, онда <ol> тегінің атрибуты "start" қолданылады:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Нөмірленген тізім</title>
 </head>
 <body>
   <hr>
   <ol type="1" start="3">
     <li>Сәрсенбі</li>
     <li>Бейсенбі</li>
     <li>Жұма</li>
     <li>Сенбі</li>
     <li>Жексенбі</li>
   </ol>
 </body>
</html>


Енді бұл файлды денвер арқылы тамашалауға болады:


HTML Анықтамалар тізімі.

Анықтамалар тізімі 2 элементтен тұрады - терминнен және оның анықтамасынан.

Тізімнің өзі жұптасқан HTML тегтері <dl></dl> арқылы, ал термин жұптасқан <dt></dt> тегтері арқылы, оның анықтамасы жұптасқан <dd></dd> тегтері арқылы сипатталады.

Анықтамалар тізімі көбінесе термин атаулары, сөздіктер, анықтамалар үшін қолданылады.Мысалы:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>HTML тақырыптары</title>
 </head>
 <body>
   <dl>
     <dt>Сілтемелер</dt>
         <dd>Сілтемелер web-парақшаларын жасағанда қолданылатын <br>
		  ең көп таралған әрекет-амалдардың бірі.
		 </dd>
     <dt>Тізімдер</dt>
         <dd>Тізімдер дегеніміз таңбалардан не сандардан басталатын, өзара<br>
	      бірі-бірімен қандай да бір байланыста болатын сөздердің немесе<br>
 	       сөйлемдердің жиынтығы.</dd>
    </dl>
 </body>
</html>


Енді Денвер арқылы осы кодтың нәтижесін көрелік:


Көп сатылы немесе бірінің ішіне бірі орналасқан тізімдер.

Кей кезде тізім элементерінің өзінің ішінде тізім жасауға тура келеді.Міне, осындай тізімдерді көп сатылы болмаса бірі-бірінің ішіне орналасқан тізімдер деп атайды.Мысалы:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Көп сатылы тізім</title>
 </head>
 <body>
   <hr>
   <ul>
      <li>Еуропа
	  <ol>
             <li>Англия</li>
             <li>Франция</li>
             <li>Германия</li>
	     <li>.......</li>
          </ol>
     </li>
     <li>Орталық Азия
	 <ol>
	    <li>Қазахстан</li>
            <li>Қырғызстан</li>
            <li>Өзбекстан</li>
	    <li>.......</li>
	 </ol>
     </li>
	<li>Қиыр Шығыс</li>
 </body>
</html>


Енді осы кодтың нәтижесін көрейік:


Егер мақала көңіліңізден шықса, онда онымен төмендегі түйме арқылы достарыңызбен бөлісіңіз

Пікірлер