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

admin 2018-08-26 ℃ Қысқаша

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

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

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

<51> <script>

Сипаттамасы

Тег <script> скрипттерді сипататуға бағытталған. Белгілі бір тілдегі мәтінге не бағдарламаға сілтеме сақтай алады. Скрипттер сыртқы файлда да сақтаулы мүмкін. Олар кез келген HTML-құжатпен байланыса алады. Мұндай тәсіл көптеген веб-парақшаларда жалпыға ортақ қызмет көрсете алады. Және олардың жүктелуін тездетеді. Себебі, сыртқы файл бірінші жүктеу кезінде кэштеледі. Содан скрипт кейінгі шақыртылудан гөрі тезірек табылады.

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>Тег SCRIPT</title>
</head>
<body>
<script type="text/javascript">
document.write ('<table width="100%" border="1">');
for (i=1; i<6; i++) {
document.writeln("<tr>");
for (j=1; j<6; j++) document.write("<td>" + i + j + "<\/td>");
document.writeln("<\/tr>");
}
document.write ("<\/table> ");
</script>
</body>
</html>

Мысалға:

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

<52> <section>

Сипаттамасы

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

Code:

Esten Tech

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>section</title>
</head>
<body>
<section>
<h1>Съёмки фильма Полипропилен</h1>
<p>История о том, как снимали фильм, где герои отдыхали на пляже,
потом пришёл антагонист, избил протагонистов, сбросил их в бассейн,
и что из этого получилось.</p>
</section>
<section>
<h1>Хороший язык</h1>
<p>История о том, как проходила студия изучения языка эсперанто,
в то время, как над ней, на веранде велась студия приколистов,
где травились анекдоты, и что из этого получилось.</p>
</section>
</body>
</html>

Мысалға:

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

<53> <select>

Сипаттамасы

Тег <select> интерфейс элементін ашылатын тізім ретінде көрсетеді. Және бір не бірнеше таңдауы бар тізім жасайды. Ақырғы түрі <select> тегінің size атрибутын қолданғанына тәуелді. Ол тізімнің биіктігін орнатады. Тізімнің кеңдігі <option> тегінде көрсетілген ең жалпақ мәтінмен анықталады. Стильдің көмегімен өзгертіп отыруға болады. Әр пункт <option> тегінің көмегімен жасалады. Ол <select> контейнеріне енгізілген болуы тиіс. Егер тізімнің ақпаратын серверге жіберу жоспарланса, <select> элементін пішіннің ішіне орнату керек. Тізімнің ақпаратына скрипттер арқылы сұраныстар туа бастаса да солай жасау керек.

Code:

Esten Tech

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег SELECT</title>
</head>
<body>
<form action="select1.php" method="post">
<p><select size="3" multiple name="hero[]">
<option disabled>Выберите героя</option>
<option value="Чебурашка">Чебурашка</option>
<option selected value="Крокодил Гена">Крокодил Гена</option>
<option value="Шапокляк">Шапокляк</option>
<option value="Крыса Лариса">Крыса Лариса</option>
</select></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>

Мысалға:

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

<54> <small>

Сипаттамасы

Тег <small> қаріптің мөлшерін кәдімгі мәтіннен гөрі бір бірлікке кемітеді. HTML-де қаріптің мөлшері 1 мен 7 деген шартты өлшем бірлік аралығында өлшенеді. Қалыпты жағдайда мәтіннің орташа мөлшері 3-ке тең. Оған <small> тегін қосып, мәтін мөлшерін бір мөлшерге кемітеді. <small> тегін енгізуді қолдану мүмкіндігі бар. Оны қолданған сайын қаріп мөлшері бір өлшем бірлікке кеми береді. Алайда 1 деген өлшем бірліктен аз бола алмайды.

Қаріптің мөлшеріне тек <font> тегінің берілген size атрибуты ғана әсер етпейді. Оған қаріптің гарнитурасын таңдау да ықпал етеді. Arial қаріпі Times қаріпіне қарағанда ірі боп келеді. Verdana қаріпі Arial-дан ірі. Қаріп пен оның мөлшерін таңдағанда осындай ерекшеліктерін ескере отырыңыз. Мәтіннің мөлшерін анық басқарып кету үшін стильдерді қолданыңыз.

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>Тег SMALL</title>
</head>
<body>
<p><big><big>Большая кошка</big></big></p>
<p>Из семейства кошачьих самая большая кошка это совсем не
<small>лев</small>, как можно было бы подумать исходя из
титула «царя зверей». А уссурийский тигр, вес которого
достигает 300 килограмм. Тигр уступает по <small>размерам</small>
и <small>весу</small> только другому наземному
хищнику, белому медведю.</p>
</body>
</html>

Мысалға:

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

<55> <span>

Сипаттамасы

Тег <span> құжаттың жол бойындағы элементтерін анықтауға арналған. <table>, <p> немесе <div> сынды блок элементтерге қарағанда <span> тегінің көмегімен ақпараттың бір бөлігін өзге тегтердің ішіне орналастыруға болады. Ол үшін жеке стиль қалыптастыруға болады.

Мысалы, қызыл жолдың ішінде (<p> тегі) түсін өзгертуге, не бірінші әріптің мөлшерін ұлғайтуға болады. Егер бастапқы және ақырғы етіп <span> тегін қосса, ол үшін мәтін стилін таңдаса бітті. Тегтің ішіндегі әр стильді ылғи сипаттай бермес үшін сыртқы стиль кестесін жасап қойса да жеткілікті. Тегке селектордың атымен қосып class немесе id атрибутын қосу керек.

Code:

Esten Tech

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег SPAN</title>
<style>
body {
font-family: Arial, sans-serif; /* Рубленый шрифт */
}
.letter {
color: red; /* Красный цвет символов */
font-size: 200%; /* Размер шрифта в процентах */
font-family: serif; /* Шрифт с засечками */
position: relative; /* Относительное позиционирование */
top: 5px; /* Сдвиг сверху */
}
</style>
</head>
<body>
<p><span class="letter">Р</span>азумные люди приспосабливаются к окружающему миру.
Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется
действиями неразумных людей.</p>
<p>Бернард Шоу</p>
</body>
</html>

Мысалға:

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

<56> <source>

Сипаттамасы

<audio> және <video> тегтері үшін дыбыстық не бейне файлдарды қосады. Жалпы атағанда мұндай файлдарды медиялық деп атайды.

Code:

Esten Tech

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>source</title>
</head>
<body>
<video width="400" height="300" controls="controls">
<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>.
</video>
</body>
</html>

<57> <strike>

Сипаттамасы

Тег <strike> мәтінді сызылған деп көрсетеді. Бұл тег <s> тегіне балама бола алады. Ол да <b>, <i> және <u> тегі секілді қысқартылып алынған. Қалай болғанда да <strike> және <s> тегтерін HTML спецификациясы қатты сынға алды. Оларыдң орнына стиль пайдалану ұсынылады.

Code:

Esten Tech

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Тег STRIKE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p><b>Список должников</b></p>
<p><strike>Чебурашка</strike><br>
<strike>Крокодил Гена</strike><br>
Шапокляк</p>
</body>
</html>

Мысалға:

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

<58> <strong>

Сипаттамасы

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

Code:

Esten Tech

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег STRONG</title>
</head>
<body>
<p><strong>Lorem ipsum dolor sit amet</strong></p>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. <strong>Ut wisis</strong> enim ad minim veniam, quis nostrud exerci
tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>

Мысалға:

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

<59> <style>

Сипаттамасы

Тег <style> - веб-парақшаның элементтерінің стилін анықтауға қолданылады. Тег <style>-ды міндетті түрде <head> контейнердің ішінде қолдану керек. Бір емес бірнеше <style> тегін қолдануға болады.

Code:

Esten Tech

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег STYLE</title>
<style type="text/css">
h1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;
}
</style>
</head>
<body>
<H1>Esten Tech</H1>
</body>
</html>

Мысалға:

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

<60> <summary>

Сипаттамасы

<details> тегінің тақырыбын көрсетеді. Сол арқылы жаю/жаймау туралы ақпаратты табуға болады. Тег <summary> міндетті түрде <details>-тың ішінде бірінші болып ұруы тиіс.

Code:

Esten Tech