Естен Ербол : HTML5 Тег білімдері - 3

admin 2018-08-11 Қысқаша

Естен Ербол : HTML5 Тег білімдері - 3...

Сайттағы барлық жобалар тегін қолданысқа берілген, жоба авторы Естен Ербол

 

HTML5 Тег білімдері - 3

<21> <li>

Сипаттамасы

Тег <li> тізімнің жеке элементін көрсетеді. <ul> немесе <ol> сыртқы тегтер тізімнің түрін анықтайды – маркировкаланған немесе нөмірленген. 

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Тег LI</title>  
  6.  </head>  
  7.  <body>  
  8.   
  9.   <ul>  
  10.    <li>Бірінші</li>  
  11.    <li>Екінші</li>  
  12.    <li>Үшінші</li>  
  13.   </ul>  
  14.   
  15.  </body>  
  16. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

 <22> <link>

Сипаттамасы

Сыртқы құжатпен байланысты орнатады. Файлды стильдермен немесе қаріптермен байланыстырғандай. <a> тегіне қарағанда<link> тегі <head> конттейнерінің ішінде орналасады, сілтеме жасамайды.

 

<23> <main>

Сипаттамасы

Элемент <main> негізгі құжат мазмұнын анықтайды. Мазмұны ерекше болуы тиіс. Онда түрге қатысты блоктар болмауы керек. Мәселен, сайттың шапкасы, сайт асты , навигациясы, жиегіндегі панель, іздеу түрі және т.б..

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>main</title>  
  6.  </head>   
  7.  <body>  
  8.   <h1>Следы невиданных зверей</h1>  
  9.   <main>  
  10.     История о том, как возле столовой появились загадочные розовые   
  11.     следы с шестью пальцами, и почему это случилось.   
  12.   </main>  
  13.  </body>   
  14. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

<24> <map>

Сипаттамасы

Тег <map>карт-бейне саласындағы белсенділікті анықтайтын <area> элементтері үшін контейнер боп қызмет етеді. Мұндай саланы бейнедегі көзге көрінбес аумақтары анықтайды. Олар HTML-құжатқа сілтеме жасап отырады. <map>тегін пайдаланудың басты мақсаты - <img>тегін клиенттің карта-бейнесімен байланыстыру. Бұл байланыс usemap атрибуты беретін <img> тегі мен name атрибуты орнататын <map> тегінде бірегей идентификатор қолдану үшін керек.  

 

<25> <marquee>

Сипаттамасы

Тег <marquee> беттегі жылжымалы жолақты жасайды. Негізінде <marquee> контейнерінің мазмұны жолақпен шектелмейді, ол веб-парақшаның барлық элементін – бейнені, мәтінді, кестені, пішін элементін көшіруге мүмкіндік туғызады. Көшіруді тек көлденең емес, тікелей жасауға болады. Ондай кезде қозғалыс жасалатын саланың мөлшері көрсетіледі. 

Бастапқыда <marquee> тегі тек Internet Explorer браузері үшін жасалған. Алайда заманауи браузерлердің жаңаша нұсқалары оны қабылдап, қолданып отырады.

 

Code:

Esten Tech
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.  <head>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <title>Тег MARQUEE</title>  
  6.  </head>  
  7.  <body>  
  8.   
  9.   <marquee behavior="alternate" direction="left" bgcolor="#ffcc00">  
  10.     Esten Tech  
  11.   </marquee>  
  12.   
  13.  </body>  
  14. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

 <26> <mark>

Сипаттамасы

Тег <mark> мәтінді арнайы белгілеп отырады. Мұндай мәтіннің қарапайым мәтіннен еш айырмасы жоқ. Алайда оның түрін стильдің көмегімен өзгертуге болады. Chrome және Firefox браузерлерінде мәтіннің фон түрі <mark> тегінің ішінде сары түспен белгіленеді. 

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>mark</title>  
  6.   <style>  
  7.    mark {  
  8.     background: #ffec82;  
  9.     padding: 0 3px;  
  10.     border: 1px dashed #333;  
  11.    }  
  12.   </style>  
  13.  </head>  
  14.  <body>  
  15.   <header>  
  16.     <h1>Следы невиданных зверей</h1>  
  17.   </header>  
  18.   <article>  
  19.     История о том, как возле столовой появились загадочные розовые  
  20.     следы с <mark>шестью пальцами</mark>, и почему это случилось.  
  21.   </article>  
  22.  </body>  
  23. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

<27> <menu>

Сипаттамасы

Тег <menu> мәзір тарауларындағы тізімді көрсетуге арналған.<menu> контейнерінің ішіндегі <ol>және<ul> тегтері сияқты бұл тізім <li> тегінің көмегімен қалыптасады.   

HTML4-те <menu> тегі қолданыстан шықты. Оның орнына <ul> тегін қолдану кеңес етілді. HTML5-ке <menu> тегі қайтадан қосылды. Бірақ басқа сапада жүзеге асады. Енді ол <command>тегіне контейнер ретінде және мәзір жасауға көмектеседі. 

 

Code:

Esten Tech
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
  2.   "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4.  <head>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.   <title>Тег MENU</title>  
  7.  </head>  
  8.  <body>  
  9.   <p><strong>Esten Tech:</strong></p>  
  10.   <menu>  
  11.    <li>Esten Tech -1</li>  
  12.    <li>Esten Tech -2</li>  
  13.    <li>Esten Tech -3</li>  
  14.    <li>Esten Tech -4</li>  
  15.    <li>Esten Tech -5</li>  
  16.   </menu>  
  17.  </body>  
  18. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

 

 <28> <meta>

 

Сипаттамасы

<meta> браузерлерге және іздеу жүйесіне арналған ақпаратты сақтайтын метатегтерді анықтайды. Мәселен, іздеу жүйелерінің механизмі сайттарды, негізгі сөздерді, басқа да ақпараттарды сипаттау үшін метатегтерге жүгінеді. Бірден артық метатег қолдануға рұқсат етіледі. Олардың барлығы <head> контейнерінде сақтаулы. Әдетте кез келген метатегтің атрибуты «аты-мағынасы» деген жұпқа негізделеді. Оларды content, name немесе http-equiv деген сөздермен анықтайды. 

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <title>Тег META</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="GENERATOR" content="Microsoft FrontPage 4.0">  
  7.   <meta name="ProgId" content="FrontPage.Editor.Document">  
  8.  </head>  
  9.  <body>  
  10.   <p>...</p>  
  11.  </body>  
  12. </html>  

 

 Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

 <29> <meter>

Сипаттамасы

Белгілі бір диапазонға мағынаны шығарып көрсетіп тұрады. Көбінесе сандары бар мағынаны көрсетеді. Мысалы, іздеудің санын, сұйықтықтың көлемін, қысымның артуын деген сияқты. 

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>meter</title>  
  6.  </head>  
  7.  <body>  
  8.   <p>Температура воды</p>  
  9.   <meter value="0" max="100" low="10" high="60">Низкая</meter>  
  10.   <meter value="30" max="100" low="10" high="60">Нормальная</meter>  
  11.   <meter value="80" max="100" low="10" high="60">Горячая</meter>  
  12.   <meter value="100" max="100">Кипяток</meter>  
  13.  </body>  
  14. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

 <30> <nav>

Сипаттамасы

Тег <nav> сайт бойынша навигацияны беріп отырады. Егер парақшада бірнеше сілтемелер бөлімдері болса, онда <nav>-ты әдетте басқы сілтемелерге енгізеді. Құжатта бірнеше <nav> тегін қолдануға болады. <nav>-ты <address>-тің ішіне енгізуге болмайды.

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>nav</title>  
  6.  </head>   
  7.  <body>  
  8.   <header>  
  9.     <h1>Авторлық сайт</h1>  
  10.   </header>  
  11.   <nav><a href="http://www.esten.kz">Санат</a> | <a href="http://www.esten.kz">Санат</a> |  
  12.        <a href="http://www.esten.kz">Санат</a> | <a href="http://www.esten.kz4.html">Санат</a></nav>  
  13.   <article>  
  14.     <h2>Авторлық сайт</h2>  
  15.   </article>  
  16.  </body>   
  17. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

 <31> <noembed>

Сипаттамасы

Тег <noembed> веб-парақшадағы ақпаратты көрсетуге бағытталған. Егер браузер плагинді ашып тұрса. Басқа кезде <noembed> контейнерінің мазмұны қабылданбайды.  

Плагин дегеніміз браузерге қосылатын бағдарламалық модуль, ол браузердің мүмкіндігін ұлғайтады. Мәселен, плагин деп Flash, QuickTimeVR, VRML және т.б. қолдайтындығын айтуға болады.

 

Code:

Esten Tech
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   
  2.   "http://www.w3.org/TR/html4/strict.dtd">  
  3. <html>  
  4.  <head>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.   <title>Тег NOEMBED</title>  
  7.  </head>  
  8.  <body>    
  9.   
  10.    <embed src="https://youtu.be/25s9jDoL8uI" width="400" height="300"   
  11.    type="application/x-shockwave-flash"   
  12.    pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>  
  13.   
  14.    <noembed>Браузер не поддерживает работу с плагинами</noembed>  
  15.   
  16.  </body>  
  17. </html>  

 

 Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

Дайындаған: Естен Ербол

Жарнама орны

Esten TechЕстен Ербол : HTML5 Тег білімдері - 3

Барлық құқықтар қорғалған

IETF - Ресми түрде интернет қоғамның бір бөлшегі
Естен Ербол : HTML5 Тег білімдері - 4

Ұқсас тақырыптар