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

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

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

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

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

<61> <sup>

Сипаттамасы

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

Code:

Esten Tech

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег SUP</title>
</head>
<body>
<p><b>Великая теорема Ферма</b></p>
<p><i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup>
= Z <sup><small>n</small></sup></i></p>
<p>где n - целое число > 2</p>
</body>
</html>

Мысалға:

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

<62> <table>

Сипаттамасы

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

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

Code:

Esten Tech

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

Мысалға:

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

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

<63> <tbody>

Сипаттамасы

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

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

Code:

Esten Tech

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TBODY</title>
</head>
<body>
<table width="600" border="1">
<tbody align="right">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</tbody>
</table>
</body>
</html>

Мысалға:

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

<64> <td>

Сипаттамасы

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

Code:

Esten Tech

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TD</title>
</head>
<body>
<table border="1" cellpadding="7" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#D3EDF6" align="center">Ячейка 1</td>
</tr>
<tr>
<td valign="top" align="center">Ячейка 2</td>
<td width="98%" valign="top">Ячейка 3</td>
</tr>
</table>
</body>
</html>

Мысалға:

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

<65> <textarea>

Сипаттамасы

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

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

Code:

Esten Tech

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег TEXTAREA</title>
</head>
<body>
<form action="textarea1.php" method="post">
<p><b>Введите ваш отзыв:</b></p>
<p><textarea rows="10" cols="45" name="text"></textarea></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>

Мысалға:

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

<66> <tfoot>

Сипаттамасы

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

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

Code:

Esten Tech

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TFOOT</title>
</head>
<body>
<table width="600">
<tfoot align="center" style="background: #ffc">
<tr>
<td>Ячейка 1, расположенная в TFOOT</td>
<td>Ячейка 2, расположенная в TFOOT</td>
</tr>
</tfoot>
<tbody align="right" style="background: silver">
<tr>
<td>Ячейка 3, расположенная в TBODY</td>
<td>Ячейка 4, расположенная в TBODY</td>
</tr>
</tbody>
</table>
</body>
</html>

Мысалға:

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

<67> <th>

Сипаттамасы

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

Code:

Esten Tech

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TH</title>
<style type="text/css">
table {
border-collapse: collapse; /* Отображать двойные линии как одинарные */
}
th {
background: #ccc; /* Цвет фона */
text-align: left; /* Выравнивание по левому краю */
}
td, th {
border: 1px solid #800; /* Параметры границы */
padding: 4px; /* Поля в ячейках */
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" border="1">
<tr>
<th>Браузер</th>
<th colspan="3">Internet Explorer</th>
<th colspan="3">Opera</th>
<th colspan="2">Firefox</th>
</tr>
<tr>
<th>Версия</th>
<td>5.5</td>
<td>6.0</td>
<td>7.0</td>
<td>7.0</td>
<td>8.0</td>
<td>9.0</td>
<td>1.0</td>
<td>2.0</td>
</tr>
<tr>
<th>Поддерживается</th>
<td>Да</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
<td>Да</td>
</tr>
</table>
</body>
</html>

Мысалға:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Тег TH</title>   <style type="text/css">     table {      border-collapse: collapse; /* Отображать двойные линии как одинарные */     }     th {      background: #ccc; /* Цвет фона */      text-align: left; /* Выравнивание по левому краю */     }     td, th {      border: 1px solid #800; /* Параметры границы */      padding: 4px; /* Поля в ячейках */     }    </style>  </head>  <body>    <table width="100%" cellspacing="0" border="1">    <tr>     <th>Браузер</th>     <th colspan="3">Internet Explorer</th>     <th colspan="3">Opera</th>     <th colspan="2">Firefox</th>    </tr>    <tr>     <th>Версия</th>     <td>5.5</td>     <td>6.0</td>      <td>7.0</td>     <td>7.0</td>     <td>8.0</td>     <td>9.0</td>     <td>1.0</td>     <td>2.0</td>    </tr>    <tr>     <th>Поддерживается</th>     <td>Да</td>     <td>Да</td>     <td>Да</td>     <td>Да</td>     <td>Да</td>     <td>Да</td>     <td>Да</td>     <td>Да</td>    </tr>   </table>   </body> </html>

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

<68> <thead>

Сипаттамасы

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

Code:

Esten Tech

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег THEAD</title>
</head>
<body>
<table style="width: 600px;">
<thead style="background: #fc0">
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</thead>
<tbody style="background: #ccc">
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>
</body>
</html>

Мысалға:

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

<69> <time>

Сипаттамасы

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

Code:

Esten Tech

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

Мысалға:

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

<70> <title>

Сипаттамасы

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

Code:

Esten Tech