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

admin 2018-09-01 Қысқаша

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

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

 

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

<61> <sup>

Сипаттамасы

Қаріпті жоғарғы индекс ретінде көрсетеді. Қаріп мұндай кезде мәтіннің базалық сызық бойынан жоғары және кішірейтілген мөлшерде көрінеді. 

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Тег SUP</title>  
  6.  </head>  
  7.  <body>  
  8.   
  9.   <p><b>Великая теорема Ферма</b></p>  
  10.   <p><i><sup><small>n</small></sup> + Y <sup><small>n</small></sup>   
  11.    = Z <sup><small>n</small></sup></i></p>  
  12.   <p>где n - целое число > 2</p>  
  13.   
  14.  </body>  
  15. </html>  

 

 

Мысалға:


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

 

 

<62> <table>

Сипаттамасы

Элемент <table> кестенің мазмұнын анықтайтын элементтердің контейнері ретінде белгілі. Кез келген кесте жол мен ұяшықтардан тұрады. Оларды <tr> мен <td> тегтері арқылы береді. <table>-дың ішінде келесі элементтерді қолдануға рұқсат етіледі: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> және <tr>. 

Шегі көрінбейтін кестелер веб-парақшаларды жасау кезінде ұзақ уақыт бойы қолданылып келді. Олар құжатты модульді бөлшектерге бөліп тұратын. Кестені осылай қолдану көптеген сайттарда болды. Қазір оның орнына әлдеқайда заманауи беттеу тәсілі жетті.  

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Таблица размеров обуви</title>  
  6.  </head>  
  7.  <body>  
  8.   <table border="1">  
  9.    <caption>Таблица размеров обуви</caption>  
  10.    <tr>  
  11.     <th>Россия</th>  
  12.     <th>Великобритания</th>  
  13.     <th>Европа</th>  
  14.     <th>Длина ступни, см</th>  
  15.    </tr>  
  16.    <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>  
  17.    <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>  
  18.    <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>  
  19.    <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>  
  20.    <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>  
  21.    <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>  
  22.    <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>  
  23.    <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>  
  24.    <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>  
  25.    <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>  
  26.    <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>  
  27.    <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>  
  28.    <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>  
  29.    <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>  
  30.    <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>  
  31.    <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>  
  32.    <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>  
  33.    <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>  
  34.    <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>  
  35.    <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>  
  36.    <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>  
  37.   </table>  
  38.  </body>  
  39. </html>  

 

Мысалға:


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

 

 

<63>  <tbody>

Сипаттамасы

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

<table> контейнерінің ішінде бірнеше <tbody> тегін қолдануға болады. Жолды топтаудың басқа да түрлері бар - <tfoot> және <thead>, бұлардың бірде бірі <tbody> элементімен қиылыспауы тиіс. 

 

 

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>Тег TBODY</title>  
  7.  </head>  
  8.  <body>  
  9.   
  10.   <table width="600" border="1">  
  11.    <tbody align="right">  
  12.     <tr>  
  13.      <td>Ячейка 1</td>  
  14.      <td>Ячейка 2</td>   
  15.     </tr>   
  16.    </tbody>  
  17.   </table>   
  18.   
  19.  </body>  
  20.  </html>  

 

Мысалға:


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

 

 

 <64> <td>

Сипаттамасы

Кестенің бір ұяшығын жасауға арналған. <td> тегі міндетті түрде <tr> контейнерінің ішінде орналасу керек. Ал ол өз кезегінде <table> тегінің ішінде орналасқан.

 

 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>Тег TD</title>  
  7.  </head>  
  8.  <body>  
  9.   
  10.   <table border="1" cellpadding="7" cellspacing="0">  
  11.    <tr>  
  12.      <td colspan="2" bgcolor="#D3EDF6" align="center">Ячейка 1</td>  
  13.    </tr>  
  14.    <tr>  
  15.      <td valign="top" align="center">Ячейка 2</td>  
  16.      <td width="98%" valign="top">Ячейка 3</td>  
  17.    </tr>  
  18.   </table>   
  19.   
  20.  </body>  
  21. </html>  

 

 Мысалға:


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

 

 

 <65> <textarea>

Сипаттамасы

<textarea> қыры - мәтіннің бірнеше жолын сыйдыруға болатын пішіннің элементі. <input> тегіне қарағанда мәтіннің шетінде жоларалық тасымал жасауға рұқсат етілген. Олар серверден ақпаратты жібергенде де сақталып тұрады. 

<textarea> және </textarea> тегтерінің арасында кез келген мәтінді орналастырсаңыз, бұлар мәтіннің шетінде көрініп тұрады.

 

 Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Тег TEXTAREA</title>  
  6.  </head>  
  7.  <body>  
  8.   
  9.   <form action="textarea1.php" method="post">  
  10.     <p><b>Введите ваш отзыв:</b></p>  
  11.     <p><textarea rows="10" cols="45" name="text"></textarea></p>  
  12.     <p><input type="submit" value="Отправить"></p>  
  13.   </form>  
  14.   
  15.  </body>  
  16. </html>  

 

Мысалға:

 


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

 

 

<66> <tfoot>

Сипаттамасы

Элемент <tfoot> - кестенің төменгі жағында ұсынылған бір не бірнеше жолды сақтауға арналған. <tfoot> тегі бастапқы кодта <tbody> тегіне дейін анықталып қоюы керек. Браузерлер оны кестенің ең төменгі жағында көрсетіп тұрады. 

Кестенің аумағында тек бір <tfoot> элементін қолдануға рұқсат етіледі.

 

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>Тег TFOOT</title>  
  7.  </head>  
  8.  <body>  
  9.   
  10.   <table width="600">  
  11.    <tfoot align="center" style="background: #ffc">  
  12.     <tr>  
  13.      <td>Ячейка 1, расположенная в TFOOT</td>  
  14.      <td>Ячейка 2, расположенная в TFOOT</td>   
  15.     </tr>   
  16.    </tfoot>  
  17.   
  18.    <tbody align="right" style="background: silver">  
  19.     <tr>  
  20.      <td>Ячейка 3, расположенная в TBODY</td>  
  21.      <td>Ячейка 4, расположенная в TBODY</td>   
  22.     </tr>   
  23.    </tbody>  
  24.   </table>  
  25.   
  26.  </body>  
  27. </html>  

 

Мысалға:


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

 

 

 

 

 <67> <th>

 

Сипаттамасы

Тег <th> кестенің тақырыптық болып табылатын бір ұяшығын жасауға арналған. Мұндай ұяшықтағы мәтінді браузер әдетте не қалың қаріппен, не ортаға шығарып жазады. <th> тегі <tr> контейнердің ішіне орналасу керек. Ол <table> тегінің ішінде орналасуы тиіс. 

 

 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>Тег TH</title>  
  7.   <style type="text/css">  
  8.     table {  
  9.      border-collapse: collapse; /* Отображать двойные линии как одинарные */  
  10.     }  
  11.     th {  
  12.      background: #ccc; /* Цвет фона */  
  13.      text-align: left; /* Выравнивание по левому краю */  
  14.     }  
  15.     td, th {  
  16.      border: 1px solid #800; /* Параметры границы */  
  17.      padding: 4px; /* Поля в ячейках */  
  18.     }   
  19.   </style>  
  20.  </head>  
  21.  <body>  
  22.   
  23.   <table width="100%" cellspacing="0" border="1">  
  24.    <tr>  
  25.     <th>Браузер</th>  
  26.     <th colspan="3">Internet Explorer</th>  
  27.     <th colspan="3">Opera</th>  
  28.     <th colspan="2">Firefox</th>  
  29.    </tr>  
  30.    <tr>  
  31.     <th>Версия</th>  
  32.     <td>5.5</td>  
  33.     <td>6.0</td>   
  34.     <td>7.0</td>  
  35.     <td>7.0</td>  
  36.     <td>8.0</td>  
  37.     <td>9.0</td>  
  38.     <td>1.0</td>  
  39.     <td>2.0</td>  
  40.    </tr>  
  41.    <tr>  
  42.     <th>Поддерживается</th>  
  43.     <td>Да</td>  
  44.     <td>Да</td>  
  45.     <td>Да</td>  
  46.     <td>Да</td>  
  47.     <td>Да</td>  
  48.     <td>Да</td>  
  49.     <td>Да</td>  
  50.     <td>Да</td>  
  51.    </tr>  
  52.   </table>  
  53.   
  54.  </body>  
  55. </html>  

 

 

 Мысалға:


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

 

 

 <68> <thead>

Сипаттамасы

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

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Тег THEAD</title>  
  6.  </head>  
  7.  <body>  
  8.   
  9.   <table style="width: 600px;">  
  10.    <thead style="background: #fc0">  
  11.     <tr>  
  12.      <td> ... </td>  
  13.      <td> ... </td>   
  14.     </tr>   
  15.    </thead>  
  16.    <tbody style="background: #ccc">  
  17.     <tr>  
  18.      <td> ... </td>  
  19.      <td> ... </td>   
  20.     </tr>   
  21.    </tbody>  
  22.   </table>  
  23.   
  24.  </body>  
  25. </html>  

 

Мысалға:


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

 

 

<69> <time>

Сипаттамасы

<time> тегінің ішіне мәтінді не мерзім, уақыт ретінде, не екеуін қосып көрсетеді. Дәл <time> контейнерінің ішінде көрсетіледі. Немесе  datetime атрибуты арқылы беріледі. 

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>time</title>  
  6.   <style>  
  7.    time { background: #f0f0f0; }  
  8.   </style>  
  9.  </head>   
  10.  <body>  
  11.   <article>  
  12.    <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p>  
  13.    <p><time>1960-08-19</time> первый полет собак в космос.</p>  
  14.    <p><time>1961-04-12</time> первый полет человека в космос.</p>  
  15.    <p><time>1963-06-16</time> первый полет женщины-космонавта.</p>  
  16.    <p><time>1969-07-21</time> высадка человека на Луну.</p>  
  17.   </article>  
  18.  </body>   
  19. </html>  

 

Мысалға:


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

 

 

<70> <title>

Сипаттамасы

Құжаттың тақырыбын анықтайды. <title> элементі құжаттың бір бөлігі емес, ол веб-парақшада тікелей көрсетілмейді. Windows операциялық жүйесінде тақырыптың мәтіні браузер терезесінің сол жақ жоғарғы бұрышында көрсетіледі. Бір құжатқа тек бір ғана <title> тегін қолдануға болады. Оны <head> контейнеріне орналастыру керек.

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <title>Esten Tech</title>  
  5.  </head>   
  6.  <body>  
  7.   
  8.   <p>...</p>  
  9.   
  10.  </body>  
  11. </html>  

 

 Мысалға:


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

 

 

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

 

Жарнама орны

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

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

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

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