Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск Добавить пост Ваши посты


+ Подписаться

В этой книге представлены основы по HTML 5. В ней рассказывается, как создавать свою графику и анимацию, а так же работа с мышкой и клавиатурой.

Скачать


Новые тэги html 5

Добавил: AlexMaster

Дата: 15.09.2016


Семантика HTML5 на уровне структуры страницы


Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение структуры страницы:
<header></header> - тег, обозначающий верхнюю часть страницы сайта шапку. Куда можно добавить картинку с названием сайта или же текст с названием и описанием сайта.
<article></ article> - тег, обрамляющий основной текст сайта, статьи, новости или любую запись на блоге.
<footer></footer> - тег, обозначающий подвал сайта. Между этими тегами можно разместить информацию об авторских правах.
Далее смотрим пример листинг 1 использования этих трех тегов.
Листинг 1.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Мой сайт</title>
<style>
footer
{
background-color: #d7d7d7;
}
</style>
</head>
<body>
<header>
<img src="header.jpg" width="1000px" height="300px">
</header>
<article>
<h2>Добро пожаловать!</h2>
<p>Рад приветствовать вас на своем сайте.</p>
</article>
<footer>
Copyright &copy Копирование материала
без разрешения автора запрещено.
</footer>

</body>
</html>

В шапке находится картинка. В article приветствие. В footer защита от копирования, которая обозначается символом &copy, а так же текст.
<nav></nav> - теги, обозначающие основное меню на сайте. В это меню могут входить категории сайта.
Например листинг 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nav</title>
</head>
<body>
<header>
<h1>Мой сайт</h1>
</header>
<nav>
<a href="nav.html">Главная</a> | <a href="#">Категория 1</a>|
<a href="#">Категория 2</a>| <a href="#">Категория 3</a>
</nav>
<article>
<h2>Добро пожаловать!</h2>
</article>
</body>
</html>

<aside></aside> - это что-то вроде боковой панели; в которой можно разместить блоки рубрики, голосование облака тегов, списки последних записей, поиск по сайту или авторизацию.
Листинг 3.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>aside</title>

<style>
aside {
background: #f0f0f0;
padding: 10px;
width: 200px;
float: right;
}
article {
margin-right: 240px;
display: block;
}
</style>
</head>
<body>
<header><h1>Мой сайт</h1></header>
<aside>
Тэги<br>
<a href="#">Моя первая запись</a>
<a href="#">Примеры</a>
<a href="#">Уроки</a>
</aside>
<article>
Моя первая запись.
<p>В этой статье я расскажу как...</p>
</article>
</body>
</html>

<section></section> - теги, оформляющие повторяющиеся части страниц. Например, ссылки статей с кратким описанием текста. Когда пользователь переходит по ссылке какой-нибудь категории, то он видит несколько ссылок с кратким описанием статей. Эти ссылки с текстом можно поместить в теги section.
Например листинг 4.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>section</title>
</head>
<body>
<section>
<h1>Статья 1</h1>
<p>Описание статьи...</p>
</section>
<section>
<h1>Статья 2</h1>
<p>Описание статьи...</p>
</section>
</body>
</html>

Структура сайта на html 5 будет выглядеть примерно так.

До html 5 верстка сайта была блочная с помощью тега div и табличная верстка с помощью тега table tr и td.

Семантика html 5 на уровне текста


Рассмотри теги, которые отвечают за семантическое разделения текста страницы.
<mark></mark> - выделяет текст, который размещен между тегами mark.
Пример листинг 5.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mark</title>
</head>
<body>
<header>
<h1>Тэг mark</h1>
</header>
<article>
<p>Элемент данного текста <mark>выделен</mark> при помощи тега "mark".</p>
</article>
</body>
</html>

<time></time> - между этими тегами указывается дата в формате YYYY-MM-DDThh:mm:ssTZD. У этого тега есть атрибуты datetime, где так же указывается дата и putdate – дата публикации документа.
Пример листинг 6.

<!DOCTYPE html>
<html>
<body>
<p><time pubdate datetime="2015-04-21">2015-04-21</time>
Был опубликован этот пост.</p>
<p>Каждые день в <time>10:00</time>
на сайт добавляется новые материал.
Следите за обновлением.</p>
</body>
</html>

<details></details> - тег отвечает за хранения информации, которая либо скрыта либо отображена. (работает на подобии спойлера)
<summary></summary> - тег отвечает за заголовок тега details. Если по нему щелкнуть, то появится текст.
Пример листинг 7.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>details</title>
</head>
<body>
<details>
<summary>Спойлер</summary>
Комментарий к статье...</details>
</body>
</html>

Дополнительные тэги языка html 5


<meter></meter> - тег предназначен для вывода индикатора шкалы. Этот тег можно использовать для отображения заполненного пространства жесткого диска или же в голосовании показывая в процентах: сколько людей выбрали тот или иной вариант.
Пример листинг 8.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>meter</title>
</head>
<body>
<p>Оцените сайт.</p>
<p><meter value="0" max="100" low="10" high="60">
(0 из 100)
</meter> Плохо </p>
<p><meter value="10" max="100" low="10" high="60">
(10 из 100)
</meter> Неплохо</p>
<p><meter value="40" max="100" low="10" high="60">
(40 из 100)
</meter> Хорошо</p>
<p><meter value="50" max="100">
(50 из 100)
</meter>Отлично</p>
</body>
</html>

<progress></progress> - тег предназначены для вывода индикатора шкалы. Его можно использовать для отображения шкалы загрузки файла на сервер.
Пример листинг 9:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>progress</title>
</head>
<body>
<p>Дождитесь загрузки файла</p>
<p><progress max="100" value="55">
Загружено на <span id="value">55</span>%
</progress> Загружено на 55 %</p>
</body>
</html>

<command/> - тег находится между тегами menu и предназначен для создания сценариев на javascript.
<menu></menu> - между этими тегами помещают тег command
Пример использования тега menu и command
Листинг 10.

<!DOCTYPE html>
<html>
<head>
<title>Тег меню</title>
<meta charset="utf-8">
</head>
<body>
<h2>Использование тега меню</h2>
<p>Тег menu создает область контекстного меню,
панели инструментов.</p>
<h3>Тег menu с вложенными тегами li</h3>
<menu>
<li>1 пункт меню</li>
<li>2 пункт меню</li>
<li>3 пункт меню</li>
</menu>
<hr>
<h3>Тег menu с вложенным тегом command</h3>
<menu>
<command type="command" label="Alert"
onclick="alert('Вы нажали на текст')"><u>Нажми на этот текст</u></command>
</menu>
</body>
</html>

<output></output> - теги предназначены для вывода работы скрипта. Например, если пользователь вводит какие-либо числа в поле input, то поле output выдаст результат суммы этих чисел.
Листинг 11

<!DOCTYPE html>
<html>
<head>
<title>Тег области вывода результатов</title>
<meta charset="utf-8">
</head>
<body>
<h1>Тег "output"</h1>
<p>Сложение двух простых чисел</p>
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
<input name="a" type="number" step="any" value="0"> +
<input name="b" type="number" step="any" value="0"> =
<output name="o"></output>
</form>
</body>
</html>

<detalist></detalist> - этот тег предназначен для вывода списка слов или каких-нибудь других данных, которые будут выводиться при наборе в текстовом поле.
Пример авто заполнение города.
Листинг 12

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>details</title>
</head>
<body>
<input name="city" list="cities" />
<datalist id="cities">
<option value="Naples" />
<option value="London" />
<option value="Berlin" />
<option value="New York" />
<option value="New York" />
<option value="Frattamaggiore" />
</datalist>
</body>
</html>

Пример выбор цвета:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>details</title>
</head>
<body>
<input type="color" list="colors" />
<datalist id="colors">
<option value="#00000"/>
<option value="#478912"/>
<option value="#FFFFFF" />
<option value="#33FF99" />
<option value="#5AC6D9" />
<option value="#573905" />
</datalist>
</body>
</html>

Пример ползунок
Листинг 14

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>details</title>
</head>
<body>
<input type="range" value="0" min="0" max="100" list="numbers" />
<datalist id="numbers">
<option value="20" />
<option value="40" />
<option value="60" />
<option value="80" />
</datalist>
</body>
</html>

<figcaption></figcaption> - теги обрамляют описание какого-либо объекта (например, изображение) которое находится между тегами figure.
<figure></figure> - этими тегами группируются объекты с описаниями. Например, изображение с описанием или товары с описанием.
Листинг 15

<!DOCTYPE html>
<html>
<head>
<title>Тег группировки объектов</title>
<meta charset="utf-8">
<style type="text/css">
figure {
border: 1px solid red;
width: 258px;
}
figure img { border: 1px dotted green; }
figcaption { border: 1px dotted blue; }
</style>
</head>
<body>
<h1>Тег "figure"</h1>
<figure>
<img src="medniy_vsadnik.jpg"
style="width: 256px; height: 256px;"
alt="медный всадник">
<figcaption>Рис 1. Медный всадник</figcaption>
</figure>
</body>
</html>

<hgroup></hgroup> - теги предназначены для группировки h* заголовков. Внутри располагаются теги от h1 до h6.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hgroup</title>
</head>
<body>
<hgroup>
<h1>Заголовок H1</h1>
<h2>Заголовок H2</h2>
</hgroup>
</body>
</html>

</keygen> - тег предназначен для формирования открытых и закрытых пар ключей, шифровки и расшифровки данных.
Листинг 17

<!DOCTYPE html>
<html>
<head>
<title>Тег генерации пары ключей</title>
<meta charset="utf-8">
</head>
<body>
<h1>Тег "keygen"</h1>
<form action="returnKey.php" method="post" enctype="multipart/form-data">
<fieldset>
<legend><b>Генератор ключей</b></legend>
<p><label>Логин: <input type="text" name="login"
placeholder="Введите логин">
</label></p>
<p><label>Шифрование: <keygen name="key"></label></p>
<p><input type="submit"> <input type="reset"></p>
</fieldset>
</form>
</body>
</html>

Файл returnKey.php.
Листинг 18.

<?php
if(!empty($_POST))
{
echo "<table border=1 cellpadding=0 cellspacing=0>
<tr><td>Логин: </td><td>$_POST[login]</td><tr>
<tr><td>Сгенерированный ключ: </td><td>$_POST[key]</td><tr>
</table>";
}
?>

<ruby></ruby> - теги обрамляют текст и аннотацию к нему.
<rt></rt> - теги, находящиеся между тегами ruby предназначены для обрамления аннотации к тексту.
<rp></rp> - теги предназначены для браузеров, которые не поддерживают теги ruby.
Пример: Листинг 19

<!DOCTYPE html>
<html>
<head>
<title>Тег текста с объяснением или произношением (аннотацией)</title>
<meta charset="utf-8">
</head>
<body>
<h1>Тег "ruby"</h1>
<p>Использование тега "ruby".</p>
<ruby>Текст<rp> (</rp><rt>Аннотация</rt><rp>) </rp></ruby>
</body>
</html>

<wbr/> - тег указывает браузеру в каком месте переносить слово, если слово не вмещается в окно браузера. В случае если этого тега не будет, то при увеличении страницы браузера, слово будет целиком переносится на новую строку. Чтобы протестировать следующий пример, создайте файл, скопируйте код. Откройте этот файл в браузере и удерживая CTRL крутите колесиком мышки, при увеличении страницы вы увидите, что там где стоит wbr часть слово перенесется на новую строку.
Листинг 20.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег WBR</title>
</head>
<body>
<p>
метоксихлор<wbr>диэтиламино<wbr>метил
<wbr>бутил<wbr>амино<wbr>акридин
</p>
</body>
</html>

Дополнительные тэги языка HTML 5.


Список новых тегов, которые улучшат ваш сайт без сторонних плагинов.
<audio></audio> - тег audio позволяет добавить на ваш сайт аудиофайл без сторонних плагинов.
<source/> - тег, в котором указывается путь к аудио и видео файлу.
Листинг 21.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
</head>
<body>
<p>Гитара</p>
<audio controls>
<source src="audio/Guitar.ogg" type="audio/ogg; codecs=vorbis">
<source src="audio/Guitar.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером.
</audio>
<a href="audio/Guitar.mp3">Скачайте музыку</a>
</body>
</html>

<video></video> - тег позволяет добавлять на ваш сайт видеофайл без сторонних библиотек.
Листинг 22

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

<canvas></canvas> - тег позволяет создавать холст, на котором можно: рисовать примитивы, загружать картинки, добавлять звук и делать анимацию. Очень полезный тег, который пригодится вам для создания игр или баннеров.
Листинг 23

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas</title>
<script>
window.onload = function()
{
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
canvas.style.background = "#444444";
context.fillStyle = "#109bfc";
context.strokeStyle = "green";
context.lineWidth = 5;
context.fillRect(100,40,100,100);
context.strokeRect(100,40,100,100);
}
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="300"></canvas>
</body>
</html>

В листинге 24 canvas создается с помощью функции createElement.
beginPath() - объявляет, что начинаем новый контур. Эта функция нужна, если вы на холсте добавляете несколько примитив или линий. Если на холсте будет добавлена только одна линия или примитив то beginPath - не нужен.
closePath() - Замыкает контур, последняя точка соединяется с первой. Текущее положение перемещается туда же.
arc() - рисует дугу, часть окружности принимает параметры x и y координаты, радиус. Следующими параметрами мы определяем саму дугу, для этого нужно выбрать две точки по диаметру этой окружности и углы от центральной точки до вашей точки будут начальными и конечными углами. Последний параметр - мы передаем направление рисования, у нас стоит false, что означает рисовать по часовой стрелки.
Листинг 24.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas</title>
</head>
<body>
<script>
var canvas, ctx;
function main()
{
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 300;
canvas.style.background = "#444444";
document.body.appendChild(canvas);

ctx.beginPath();
ctx.arc(75, 75, 70, 0, Math.PI, false);
ctx.closePath();

ctx.lineWidth = 5;
ctx.fillStyle = "#7F0037";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();

ctx.beginPath();
ctx.arc(200, 200, 75, 0, 2 * Math.PI, false);

ctx.fillStyle = "#7F0037";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = "black";
ctx.stroke();

}
main();
</script>
</body>
</html>

Скачайте.файл с исходниками.

Назад

Просмотров: 124

Оцените заметку: 1 2 3 4 5

Комментарий к этой заметки:

Добавить ваш камментарий:

Введите капчу

 

Яндекс.Метрика