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

admin 2018-06-04 Қысқаша

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

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

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

<11> <i>

Сипаттамасы

Қаріптің крусивті сұлбасын орнатады. Бұл тегті мәтіннің қалыбын анықтайтын басқа тегтермен араластырып қолдануға болады.

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>Тег I</title>  
  7.  </head>  
  8.  <body>  
  9.   
  10.   <p><b><i>Lorem ipsum dolor sit amet</i></b></p>  
  11.   <p><i>Lorem</i> ipsum dolor sit amet, consectetuer adipiscing elit,   
  12.   sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat   
  13.   volutpat. <i>Ut</i> wisis enim ad minim veniam, quis nostrud exerci   
  14.   tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
  15.   
  16.  </body>  
  17. </html>  

 

Мысалға:


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

 

 

 12.<img>

Сипаттамасы

Тег<img>веб-парақшадағы GIF, JPEG немесе PNG форматындағы суреттерді көрсетуге арналған. Суреті бар файлдың мекен-жайы src атрибумен беріледі. Егер қатты қажет боп бара жатса, суретті басқа файлға сілтеме ретінде қолдануға болады. Ол үшін <img> тегін <a> контейнеріне салады. Сол кезде суреттің айналасында жиектеме пайда болады. Оны border="0" атрибутынтег<img>-ге енгізіп алып тастауғада болады. 

Суреттер карт-суреттер ретінде де қолданылады. Ондай кезде сурет сілтеме ретінде белсенді болып көрінеді. Мұндай картаның сыртында кәдімгі суреттен еш айырма болмайды. Алайда сол сурет көзге көрінбейтін әр түрлі пішіндерге бөлінуі мүмкін. Онда әрбір бөлігі сілтеме боп тұрады. 

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Тег IMG</title>  
  6.  </head>  
  7.  <body>   
  8.   
  9.   <p><a href="http://www.esten.kz"><img src="http://www.esten.kz/skin/esten_vi/images/logo.png"   
  10.   width="189" height="255" alt="lorem"></a>  
  11.   Esten Tech...</p>  
  12.   
  13.  </body>  
  14. </html>  

 

Мысалға:


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

 

 

13.<ins>

Сипаттамасы

Тег <ins>құжаттың жаңа нұсқасына қосылған мәтінді бөліп тұратын элементі. Мұндай форматтау құжатқа қандай өзгерістер енгенін көрсетіп тұрады. 

Браузерлер әдетте <ins> контейнеріндегі мәтіннің астын сызып көрсетеді.

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Тег INS</title>  
  6.  </head>  
  7.  <body>   
  8.   
  9.  <p>Заметим, что схожий результат с Firefox показывает и браузер   
  10.   Opera, но, как видно на рис. 1, в последующих версиях <del>этот   
  11.   недостаток был устранен</del> <ins>подход разработчиков этого   
  12.   браузера был изменен</ins>.</p>   
  13.   
  14.  </body>  
  15. </html>  

 

 Мысалға:


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

 

 

14. <isindex>

Сипаттамасы

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

Спецификациясына қарасақ, <isindex>-ті <head> контейнерінің ішіне орналастыру керек. Бірақ браузерлер <isindex>-ті айқын көрсетіп тұрады. Тіпті ол кодтың басқа жерінде тұрса да анықтап алады. Тегтің өзі мәтіндік жол ретінде  көрінеді. Жоғарыдан және төмен жағынан сызықтар қосылады, оларды <hr> арқылы қосады. 

 

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.   <isindex prompt="Искать текст: ">  
  6.   <title>Тег ISINDEX</title>  
  7.  </head>  
  8.  <body>  
  9.   <p>Подъемы на бицепс штанги применяют только после создания начальных объемов сгибателей плеча;   
  10.   причем эти объемы должны иметь правильную, естественно-округлую форму с выраженной пиковостью и   
  11.   достаточной экскурсией сокращения.</p>   
  12.  </body>  
  13. </html>  

 

 

Мысалға:


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

 

 

15.<kbd>

Сипаттамасы

Тег <kbd> пернетақтамен терілген мәтінді белгілеу үшін немесе перененің атын белгілеу үшін қолданылады. Браузерлер әдетте мәтінді <kbd>контейнерінде монокеңейтілген қаріппен белгілейді.

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Тег KBD</title>  
  6.   <style>  
  7.    kbd {  
  8.     font-weight: bold; /* Жирное начертание */  
  9.    }  
  10.   </style>  
  11.  </head>  
  12.  <body>  
  13.   
  14.   <p>Для быстрого закрашивания выделенной области цветом переднего плана   
  15.     используйте комбинацию клавиш <kbd><Alt>+<Backspace></kbd>   
  16.     или <kbd><Alt>+<Delete></kbd>.   
  17.     Для закрашивания выделенной области фоновым цветом   
  18.     воспользуйтесь комбинацией   
  19.     <kbd><Ctrl>+<Backspace></kbd> или   
  20.     <kbd><Ctrl>+<Delete></kbd>.</p>  
  21.   
  22.  </body>  
  23. </html>  

 

Мысалға:


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

 

 

16.<keygen>

Сипаттамасы

Қос кілттің генерациясы үшін пайдаланылады – жабық және ашық. Пішін серверге кеткенде жабық кілт меншікті компьютерде сақталынады, ал ашық кілті пішінмен бірге сақтаулы болады. Кілттер ақпаратты шифрлау үшін және шифрдан ашу үшін қажет. Цифрлік қол қоюды жасау үшін және тексеру үшін керек.

 

 

17.<label>

Сипаттамасы

Тег <label> нақты бір белгі арасындағы байланысты көрсетеді. Әдетте мәтін, не пішін (<input>, <select>, <textarea>)элементі арасында. Мұндай байланыс мәтінге курсорды тигізу арқылы пішін элементтерінің мағынасын өзгерту үшін қажет. Оның үстіне <label>-дің көмегімен пернетақтада пернелерді орнатуға болады. Сілтемелер арқылы өткен сияқты, белсенді элементке өтіп кетуге болады. 

Нысан мен белгіні байланыстырудың екі тәсілі бар. Біріншісі, id идентификаторын пішіннің ішінде қолданады. Оның атын <label> тегінің for атрибуты ретінде атайды. Екінші тәсіл кезінде пішін элементі <label> контейнерінің ішіне орналастырылады. 

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Тег LABEL</title>  
  6.  </head>  
  7.  <body>  
  8.   <form action="handler.php">  
  9.    <p><b>Lorem ipsum dolor sit amet...</b></p>  
  10.    <p><input type="checkbox" id="check1"><label for="check1">Lorem</label><Br>  
  11.    <input type="checkbox" id="check2"><label for="check2">Ipsum</label><Br>  
  12.    <input type="checkbox" id="check3"><label for="check3">Dolor</label><Br>  
  13.    <input type="checkbox" id="check4"><label for="check4">Sit amet</label></p>  
  14.   </form>   
  15.  </body>  
  16. </html>  

 

 Мысалға:


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

 

 

 18.<legend>

Сипаттамасы

Тег <legend> пішіннің бір топ элементтерінің тақырыбын жасауға қолданылады.<fieldset> тегі арқылы анықталады. Браузерде бір топ элементті жиектеме арқылы белгілейді. <legend> контейнерінің ішінде орналасатын мәтін осы жиектеменің ішіне кірігеді. 

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Тег LEGEND</title>  
  6.  </head>  
  7.  <body>    
  8.   
  9.   <fieldset>  
  10.    <legend>Работа со временем</legend>  
  11.    <p><input type="checkbox"> создание пунктуальности (никогда не   
  12.     будете никуда опаздывать);<Br>  
  13.     <input type="checkbox"> излечение от пунктуальности (никогда   
  14.     никуда не будете торопиться);<Br>  
  15.     <input type="checkbox"> изменение восприятия времени и часов.</p>  
  16.    </fieldset>  
  17.   
  18.  </body>  
  19. </html>  

 

Мысалға:


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

 

 

 

<19> Қосымша

2.JPG

Code:

c_2.JPG

 

<20> Қосымша

3.JPG
Code:
 
c_3.JPG
 
 
Дайындаған: Естен Ербол

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

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

W3C - Ғаламторға арналған стандарттарды қалыптастырушылар
HTML5 логотипі

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