Введение[править]
HTML (Hyper Text Markup Language, расшифровывается как язык разметки гипертекстовых страниц) — каркас всех современных сайтов.HTML является языком разметки, но не языком программирования. Под языком разметки понимается набор символов созданный с целью передачи информации о строении текста. Это значит, что в отличии от языков программирования, язык разметки только управляет «внешним видом» текста для конечного пользователя.
Мы ранее сказали, что будем рассказывать об HTML5. Чем отличается стандарт HTML5 от предыдущих HTML? Существует такая организация W3C (World Wide Web Consortium). Суть её работы хорошо выражена в их лозунге «Leading the Web to Its Full Potential…» («Приведём всемирную паутину к лидерству, раскрыв все её возможности»). И когда они говорят, что в будущем браузеры не будут поддерживать старые версии HTML, то оно наверняка так и будет — в данный момент, почти все браузеры придерживаются единого стандарта, который разрабатывает W3C, а именно — HTML5.
Когда W3C создавали стандарт HTML, в нём не предусматривалось тегов для форматирования гипертекста — теги показывали только структуру документа, например:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>
Это заголовок.
</h1>
<p>
Это абзац.
</p>
</body>
</html>
Но потом разработчики браузеров начали добавлять в HTML свои теги, которые им нравились. Например:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<marquee>
Бегущую строку, умеет отображать только IE.
</marquee>
</body>
</html>
Вскоре, количество тегов сильно разрослось.
Также нежелательно было появление в стандарте HTML 3.2 тега (он нужен для изменения цвета, шрифта и размера текста). Представьте себе, что нужно написать страницу, где все заголовки красные. И приходится помимо тегов в заголовке писать ещё тег шрифта с атрибутом цвета.
С HTML4 разделяются форматирование документа и его структура. Теперь в HTML-странице сохраняются только структура страницы (разноуровневые заголовки, абзацы, цитаты, списки), а всё, что относится к форматированию, описывается в CSS. Это удобно, поскольку позволяет быстро менять оформление всего сайта изменением только файла со стилем, и, кроме того, уменьшает длину кода, который нужно написать.
В HTML5 же, была предпринята попытка стандартизации: многие привычные теги (в том числе и выше названный ) осуждаются, все оформление рекомендуется использовать в отдельном CSS-файле, появились новые семантические теги, функции для которых будут добавлены в будущем.
Формы
| Тег | Описание |
|---|---|
| Создает интерактивную кнопку. | |
| Представляет набор предварительно определенных параметров для элемента. | |
| Определяет диалоговое окно или подокно. | |
| Задает набор связанных полей формы. | |
| Определяет HTML-форму для ввода пользователем. | |
| Определяет элемент управления вводом. | |
| Представляет элемент управления для создания пары открытого и закрытого ключей. | |
| Определяет метку для элемента управления. | |
| Определяет заголовок для элемента. | |
| Представляет скалярное измерение в известном диапазоне. | |
| Определяет группу связанных параметров в списке выбора. | |
| Определяет параметр в списке выбора. | |
| Определяет список выбора в форме. | |
| Определяет элемент управления вводом многострочного текста (текстовая область). |
Понятие семантики
Из школьного курса русского языка вы должно быть помните, что семантика — раздел лингвистики, изучающий смысловое значение единиц языка. Так вот, в HTML — то же самое, только единицами языка являются не буквы, а html-теги. Некоторые из них со смыслом, некоторые нет, и в этой статье я расскажу как раз о смысловых — тех, без которых сайт сегодня представить нельзя.
Семантические теги помогают:
- Сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей работать с вашим сайтом.
- Чтобы сайт был выше в поисковиках. Поисковики не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Представление информации структурировано[править]
Спискиправить
Списки в HTML бывают трёх видов: упорядоченные (ordered list) <ol>, неупорядоченные (unordered list) <ul> , и списки определений (definition list) <dl> . Элементы двух первых списков задаются тегом <li> (list item). Элементом списка может быть любой текст, картинки, абзацы, а также другие списки. Например, упорядоченный список задают так:
<ol>
<li> Раз </li>
<li> Два </li>
<li> Три </li>
</ol>
Выглядит это так:
- Раз
- Два
- Три
Список определений не является списком элементов. Это список терминов и определений терминов. Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>:
<dl>
<dt>элемент 1</dt>
<dd>описание элемента 1</dd>
<dt>элемент 2</dt>
<dd>описание элемента 2</dd>
</dl>
Таблицыправить
Таблицы удобно задавать с помощью HTML, так как в HTML можно делать вложенные элементы. Таблица также состоит из вложенных элементов. Таблица (<table>) состоит из строк (<tr> — table row), каждая из которых также состоит из ячеек (<td> — table data). А внутри ячейки может быть уже все что угодно. Даже еще одна таблица. Выглядит это так:
| Строка 1 Столбец 1 | Строка 1 Столбец 2 | Строка 1 Столбец 3 |
| Строка 2 Столбец 1 | Строка 2 Столбец 2 | Строка 2 Столбец 3 |
| Строка 3 Столбец 1 | Строка 3 Столбец 2 | Строка 3 Столбец 3 |
<table border="1"> <tr> <td> Строка 1 Столбец 1 </td> <td> Строка 1 Столбец 2 </td> <td> Строка 1 Столбец 3 </td></tr> <tr> <td> Строка 2 Столбец 1 </td> <td> Строка 2 Столбец 2 </td> <td> Строка 2 Столбец 3 </td></tr> <tr> <td> Строка 3 Столбец 1 </td> <td> Строка 3 Столбец 2 </td> <td> Строка 3 Столбец 3 </td></tr> </table>
По умолчанию таблицы отображаются без границ. То есть границы невидимы. Это иногда полезно, но иногда мы хотим, чтобы границы были видны. Для этого задают значение атрибута border. Он задаёт толщину границ таблицы. (Правда только внешних). Если его значение ноль, то границы не отображаются.
Иногда надо назвать столбцы или строки, используют ячейку заголовка. Для этого вместо тега <td> пишут <th>. Выглядит это так:
| Столбец 1 | Столбец 2 | |
|---|---|---|
| Строка 1 | Строка 1 Столбец 1 | Строка 1 Столбец 2 |
| Строка 2 | Строка 2 Столбец 1 | Строка 2 Столбец 2 |
А пишется вот так:
<table border="1"> <tr><td></td> <th> Столбец 1 </th> <th> Столбец 2 </th> </tr> <tr> <th> Строка 1 </th> <td> Строка 1 Столбец 1 </td> <td> Строка 1 Столбец 2 </td> </tr> <tr> <th> Строка 2 </th> <td> Строка 2 Столбец 1 </td> <td> Строка 2 Столбец 2 </td> </tr> </table>
Стоит заметить, что такой способ лучше чем писать содержимое ячейки в тегах <b> или <strong>. И не только потому, что так короче. А и потому, что потом можно будет применить к заголовкам таблицы отдельные стили.
Некоторые браузеры не отображают пустые ячейки (то есть не обводят их рамкой). Можете посмотреть что делает ваш, в предыдущем примере верхняя левая ячейка пуста. Чтобы обмануть браузер и заставить его отображать ячейку будто там что-то есть, мы можем положить туда невидимый символ -. Это символ несокрушимого пропуска (Non Breakable SPace). Назвали его несокрушимым оттого, что слова, разделённые таким пропуском, переносятся на следующую строку только вместе.
Ячейки таблицы можно объединять. Делается это с помощью атрибутов colspan и rowspan тега <td>. colspan указывает на сколько колонок будет данная ячейка, а rowspan — на сколько строк. Такой код:
<table border="1"> <tr><td colspan="2"> Строка 1 Столбец 1 растягивается на два вправо </td> <td> Строка 1 Столбец 3 </td></tr> <tr><td> Строка 2 Столбец 1</td> <td rowspan="2"> Строка 2 Столбец 2 растягивается на 2 вниз </td> <td> Строка 2 Столбец 3 </td></tr> <tr><td> Строка 3 Столбец 1 </td><td> Строка 3 Столбец 3 </td></tr> </table>
Даёт такой результат:
| Строка 1 Столбец 1 растягивается на два вправо | Строка 1 Столбец 3 | |
| Строка 2 Столбец 1 | Строка 2 Столбец 2 растягивается на 2 вниз | Строка 2 Столбец 3 |
| Строка 3 Столбец 1 | Строка 3 Столбец 3 |
Кроме строк таблица может иметь заголовок. Тег <caption> предназначен для создания заголовка к таблице и может размещаться только в середине тега <TABLE>, причём сразу после открывающего тега. Такой заголовок представляет собой текст, который по умолчанию отображается перед таблицей и описывает её.
Также можно выделить строки таблицы в группы, с различным функциональным назначением и назначить им разные стили. Ой как мне не терпится уже дойти до стилей. Но по порядку. Можно выделить заголовочный часть <thead>, основную часть <tbody> и итог <tfoot>.
Прочие семантические теги
Time
Элемент служит для разметки дат, времени или периода времени: в содержимое тега идёт формат для человека, а в атрибут версия для машин — поисковому роботу точно понравится.
Запись в коде:
Элемент добавляет тексту внутри смысловой акцент(курсив).
Запись в коде:
Strong
Элемент добавляет обернутому в него слову или фразе очень высокую важность. Он может использоваться для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального
Запись в коде:
Mark
Элемент выделяет или подсвечивает важный фрагмент текста. По умолчанию браузеры добавляют желтый фоновый цвет #ffff00 (yellow), похожий на выделение канцелярским маркером.
Запись mark в коде:
Ins
Элемент используется для отображения добавленного контента. Например, нового пункта в списке дел или новой части кода.
Запись ins в коде:
Del
Элемент используется для отображения удаленного контента. Например, выполненного пункта в списке дел или удалённой части кода.
Запись в коде:
Элемент используется для вывода аббревиатур и акронимов.
Запись в коде:
Элемент позволяет выводить подстрочный текст, например, в химических формулах: H2O.
Запись в коде:
Элемент позволяет выводить надстрочный текст, например, в математических уравнениях: c2 = a2 + b2.
Запись в коде:
Var
Элемент используется для отображения переменных в математических выражениях и программном коде: x = 2y + 6.
Запись в коде:
Data
Элемент позволяет хранить в своем содержимом данные в формате, понятном человеку, а в атрибуте «value` — в формате, понятном машинам.
Запись в коде:
Элемент обозначает пользовательский ввод: с клавиатуры, голосом, указателем или другим образом.
Запись в коде:
Cite
Элемент используется для указания источников цитат, названий художественных произведений или объектов искусства.
Запись в коде:
Ссылки[править]
Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст, является гиперссылка. Гиперссылки создаются с помощью тега <a> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
Ссылка
</title>
</head>
<body>
Здесь можно найти материалы о web-дизайне: <a href="http://ru.wikibooks.org/wiki/HTML">ru.wikibooks.org</a>.
</body>
</html>
Теперь на странице надпись ru.wikibooks.org станет гиперссылкой.
Обычно страницы в интернете не сидят одиноко. Они размещаются группами, которые называются узлами. Сайт — это по моему определению набор страниц и других файлов, которые имеют общую часть URL. Например, все страницы, начинающиеся на http://www.microsoft.com, принадлежат одному сайту одной маленькой компьютерной фирмы. Далее следует символ «/», и адрес продолжается.
Можно сделать у себя на компьютере маленькую модель сайта. Для этого нужно создать новый каталог, в котором будем размещать файлы. Затем в каталоге разместить файл index.htm. Если есть какая-то ссылка на ваш сайт, без указания, какой конкретно файл загружать, то будет загружен именно index.htm. Далее мы можем создать ещё одну папку внутри нашей. Пусть она называется subdir. Если в ней разместить файл index.htm, то для перехода к нему нужно будет написать: «www.ваш_сайт.com/subdir/».
Например, если вы певец и хотите поделиться своими песнями с другими, вы можете положить в папку с сайтом файл track1.mp3, а в файле index.htm написать:
<html> <head> <title>Моя музыка</title> </head> <body> Я только что записал новый трек. Вы можете <a href="track1.mp3">скачать его здесь.</a> </body> </html>
Если файлы находятся в одном каталоге, то в атрибуте href достаточно написать название файла, чтобы сделать ссылку. Если же мы имеем файлы «site/1.htm» и «site/subdir/2.htm», то чтобы с первого сделать ссылку на второй, а со второго на первый, надо написать href =»subdir/2.htm» и href =»../1.htm» соответственно. Такие адреса называются относительными. Две точки означают «тот каталог что выше». Относительные адреса хороши тем, что когда мы переименовываем папку «site» или меняем хостинг их не нужно менять.
Но этим возможности тега <a> не исчерпываются. a — сокращенно от anchor — что значит якорь. С помощью тега <a> можно ставить в гипертекстовом документе якоря, или проще говоря закладки, позволяющие переходить в определённое место документа. Это особенно полезно, когда документ большой, и нужно быстро переходить в нём к нужному разделу. Для этого существует атрибут id.
Чтобы долго не объяснять снова приведу пример:
<html> <head> <title>Моя музыка</title> </head> <body> <h1> Содержание</h1> <a href="#part1"><h2>Часть 1</h2></a> <a href="#part2"><h2>Часть 2</h2></a> <a href="#part3"><h2>Часть 3</h2></a> <h1 id="part1">Часть 1</h1> <p> Много текста </p> <h1 id="part2">Часть 2</h1> <p>Много текста</p> <h1 id="part3"> Часть 3</h1> <p>Много текста</p> </body> </html>
Когда мы делаем гиперпереходы в пределах одной страницы, то в атрибуте href просто пишем знак («#») и название закладки (то что написано в атрибуте id). А когда делаем переход на закладку в другой странице, то сначала пишем адрес страницы, затем добавляем знак («#») и название закладки. Когда случайно делается переход на закладку, которой не существует, ничего страшного не происходит. Мы просто попадаем в начало страницы, как при обычном переходе.
Чаще страницы загружаются в том окне, где вы щёлкнули ссылку. Но мы можем выбрать место, где будут загружаться страницы. Для этого в теге <a> существует атрибут target. Он может принимать значения _blank, если нам нужно загружать страницу в новом окне, _self, если нам ничего менять не нужно (оно и так загружается в том окне где щёлкнули), _parent, если мы хотим забрать из окна фрейма и открыть страницу на всё окно.
Элементы оформления[править]
Подведём чертуправить
Иногда вы что-то пишете, пишете, и вдруг чувствуете что нужно подвести черту.
Делается это просто как новая строка: <hr /> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.
Картинкиправить
До этого момента мы прочитали очень много текста о тексте. Конечно — текст важнейшая часть любой страницы (если конечно это не страница какой-либо галереи), но сплошной текст штука довольно скучная. Иллюстрированный текст выглядит намного лучше. Для вставки в текст изображения используют тег <img>. Его атрибут src задаёт источник (source) — файл, в котором содержится картинка. Этот тег одинарный, поэтому закрывающий тег не нужен.
Иногда картинки не отображаются. Это происходит по разным причинам. Тем не менее, нужно чтобы пользователь и в таких случаях знал, что вы хотели ему показать. Для этого картинки имеют атрибут alt. Он задает текст, который отображается на месте картинки в тех случаях, когда сама картинка недоступна.
Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:
<!DOCTYPE html>
<html>
<head>
<title>
Картинки
</title>
<meta charset="utf-8" />
</head>
<body>
<img src="image.jpg" alt="Маленькая картинка" title="Маленькая картинка" width="100" height="100">
<br/>
<img src="image.jpg" alt="Велика картинка" title="Велика картинка" width="400" height="400">
<br />
<img src="image.jpg" alt="Широка картинка" title="Широка картинка" width="100%" height="400">
<br/>
</body>
</html>
Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.
Картыправить
Изображение можно разделить на области различной формы, каждая из которых может ссылаться в другое место. Для этого с помощью тега <map> задают карту. Атрибут id идентифицирует карту и используется для связи с картинкой. Чтобы картинку назначить в качестве карты, используется атрибут usemap (в котором мы должны записать id карты). Внутри тега карты содержатся теги областей, которые задаются тегами <area>. Опять же, этот тег одинарный, и хочет чтобы его правильно закрывали. Атрибут href задаёт адрес ссылки, атрибут nohref, если назначить ему значение true, исключает зону с карты. Атрибут shape задает форму области: rect — прямоугольная, circle — круг, и poly — для многоугольника.
<!DOCTYPE html>
<html>
<head>
<title>
Карта планет
</title>
<meta>
</head>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
Основная структура страницы
Как выглядит основная структура html-страницы
Header
Элемент используется для создания шапки всего сайта или шапки отдельных компонентов. Шапка сайта — это блок с вводной информацией, в ней обычно находятся такие элементы как: логотип, меню, кнопки соцсетей, строка поиска и другие ключевые элементы.Чаще всего шапка располагается вверху страницы.
Запись в коде:
Как выглядит header на сайте (желтый цвет)
Довольно часто встречаются случаи когда в помещают контент идущий сразу после шапки (выделенный голубым цветом элемент на скриншоте выше), но правильнее будет поместить его в тег , обернув тегом с классом «hero» Тултип: Так часто называют первую секцию сайта, которую пользователь видит сразу при загрузке страницы .
Main
В элемент помещают главное содержимое — то, которое больше нигде не повторяется на сайте. В элемент main помещаются теги section — разделы сайта. Соответственно, второстепенные элементы сюда не входят: шапка сайта, подвал, боковые панели, ссылки навигации, информация об авторских правах, логотипы сайта, как правило, остаются вне контейнера .
Запись в коде:
Вспомним header из нашего примера, так вот контент идущий после шапки сайта уже будет обернут в тег (кроме footer-а):
Section
Элемент создает блок обертку для разделов сайта — например, цели проекта, функции продукта, партнеры, команда. Тег , как правило, помещается в .
Хороший пример использования — разделение книги на главы, ведь название главы описывает ее содержание. Также одна глава, без остальных, воспринимается вырванной из контекста. То же самое с контентом главной страницы. Смысловые разделы составляют содержание страницы, но сами по себе, в отрыве от страницы, эти «секции» жить не могут и теряют смысл.
Запись в коде:
Как выглядит section на сайте (желтый цвет)
Footer
Элемент создает нижнюю часть страницы или блока — «подвал». Обычно здесь находятся контакты, ссылки на разделы сайта, копирайт. В подвале мы чаще всего видим название компании, правовую информацию, ссылки на соцсети и другие контакты.
Запись в коде:
Как выглядит footer на сайте (желтый цвет)
Aside
Элемент размечает блок с дополнительным содержимым (sidebar). Он может не иметь отношения к главному () контенту сайта. Часто используется для боковой колонки на сайте, в которой может помещаться разделы сайта, реклама и т.д.
Запись в коде:
Как выглядит aside на сайте (желтый цвет)
Как мы можем заметить, не всегда бывает один.
Встроенное содержимое
| Тег | Описание |
|---|---|
| Устаревший Встраивает Java-апплет (мини-приложения Java) на страницу. Вместо этого используйте . | |
| Определяет определенную область на карте изображения. | |
| Встраивает звук или аудиопоток в документ HTML. | |
| Определяет область в документе, которую можно использовать для рисования графики на лету с помощью сценариев (обычно JavaScript). | |
| Встраивает внешнее приложение, обычно мультимедийный контент, такой как аудио или видео, в документ HTML. | |
| Определяет заголовок или легенду для рисунка. | |
| Представляет собой рисунок, показанный как часть документа. | |
| Устаревший Определяет отдельный фрейм в наборе фреймов. | |
| Устаревший Определяет набор фреймов или другой набор фреймов. | |
| Отображает URL-адрес во встроенном фрейме. | |
| Представляет изображение. | |
| Определяет карту изображений на стороне клиента. | |
| Устаревший Определяет альтернативное содержимое, отображаемое в браузерах, не поддерживающих фреймы. | |
| Определяет внедренный объект. | |
| Определяет параметр для объекта или элемента апплета. | |
| Определяет контейнер для нескольких источников изображений. | |
| Определяет альтернативные медиаресурсы для таких медиаэлементов, как или . | |
| Встраивайте содержимое SVG (масштабируемая векторная графика) в документ HTML. | |
| Представляет время и / или дату. | |
| Определяет текстовые дорожки для таких мультимедийных элементов, как или . | |
| Встраивает видеоконтент в HTML-документ. |
Семантическая начинка
Выше мы разобрались несколько элементов, которые составляют каркас страницы. Теперь же дополним наши знания начинкой.
Каркас страницы вместе с начинкой
Nav
Элемент — это контейнер в котором находятся ссылки навигации по сайту, важно отметить что будет не уместен для элементов переключения контента на сайте. Запись в коде:
Запись в коде:
Зачастую навигацию располагают в тегах header и footer, обозначим nav у header из примера выше:
Article
Элемент — законченный и самодостаточный раздел документа, описывающий какую-то сущность: товар, карточку пользователя, рекламный баннер, виджет. То есть, может переиспользовать на других сайтах без смысловой потери.
Запись в коде:
Возможные примеры тега article на разных сайтах (независимо от того, как они сделаны на реальных страницах):
Пример элемента articleПример элемента article на сайте М.ВидеоПример элемента article на сайте OzonПример элемента article на сайте Яндекса
Собираем инструменты[править]
Текстовый редакторправить
Первым делом, нам понадобится текстовый редактор. Текстовый редактор есть на каждом компьютере
Важно заметить: нам нужна программа для редактирования текстовых файлов, а не документов (то есть ни в коем случае нельзя использовать текстовые препроцессоры по типу Microsoft Word). Обычно стандартного «Блокнота» Windows достаточно, но есть текстовые редакторы, которые лучше приспособлены к написанию HTML-страниц
Неплохие редакторы Notepad ++, Brackets, Atom, Sublime Text в которых хорошо писать не только HTML, CSS, но и ещё несколько десятков других языков программирования и разметки. У них есть несколько удобных функций,таких как подсветка синтаксиса, которая позволяет выявлять ошибки прямо во время их создания, автоматическое дополнение тегов, что позволит сэкономить время на написание кода и многое другое.
Браузерправить
О браузере также стоит сказать несколько слов. Все советуют держать у себя на компьютере набор браузеров: Firefox, Opera, Chrome, Safari и просматривать свои страницы во всех сразу. Правда, функции тегов в разных браузерах отличаются не сильно (а с введением HTML5 — различий в тегах нет). Поэтому учиться можно просматривая свои страницы в одном из них, а уже когда пишете что-то большее — посмотрите, не имеется ли слишком критических различий во всех других. Тем не менее, в современных и наиболее популярных браузерах Firefox и Chrome различия настолько незначительны и касаются в основном старых тегов.
Пример использования
Предположим (для примера), что совещание было назначено на 10:00 31 декабря 2016 года, но обстоятельства поменялись и совещание было решено перенести на 11:00 того же числа.
Допустим, что был издан определённый приказ о переносе совещания и данные изменения необходимо отобразить на сайте. Для этого мы и воспользуемся тегом <del>, благодаря которому мы перечеркнем предыдущее время.
Кроме того, атрибутом datetime укажем дату и время, когда текст был удален, а атрибутом cite укажем почему это изменение было сделано (ссылка на приказ).
Конечный пользователь, который будет просматривать сайт не увидит влияние этих атрибутов, но информация, которая была указана в элементе <del> может быть использована в статистических целях, либо в информационных системах учета.
<!DOCTYPE html> <html> <head> <title>Пример использования атрибутов cite и datetime HTML тега <del></title> </head> <body> <p>Совещание состоится 31 декабря 2016 года в <del cite = "prikaz.html" datetime = "2016-12-30T12:00:00+03:00">10:00</del> 11:00.</p> </body> </html>
Пример использования атрибутов cite и datetime HTML тега <del> (причина и время удаления текста)
Часто тег <del> применяется совместно с тегом <ins>, который предназначен для того, чтобы указать текст, который был вставлен в документ.
Предположим (для примера), что вышла новая версия программного продукта (десятая версия сменяется одиннадцатой) о чем свидетельствует
информация опубликованная на определённом известном ресурсе. Ваша задача отобразить это на своем сайте.
Для этого мы воспользуемся тегом <del>, благодаря которому мы перечеркнем информацию о предыдущей версии программного продукта (десятая),
а тегом <ins> мы вставим информацию о новой версии(одиннадцатой).
Кроме того, атрибутом datetime укажем дату и время, когда текст был вставлен, а атрибутом cite укажем почему текст был вставлен (ссылка на информацию о выходе новой версии).
Конечный пользователь, который будет просматривать сайт не увидит влияние этих атрибутов, но информация, которая была указана в элементе <ins> может быть использована в статистических целях, либо в информационных системах учета.
<!DOCTYPE html> <html> <head> <title>Пример использования атрибутов cite и datetime HTML тега <ins></title> </head> <body> <p>Текущая версия программного продукта <del>десятая</del> <ins cite = "http://somesite.com/info.html" datetime = "2016-05-30T10:00:00+03:00">одиннадцатая</ins>.</p> </body> </html>
Пример использования тега <del> совместно с <ins> (удаление и вставка текста в документ).
Аудио[править]
bgsoundправить
Этот тег нестандартный и не входит в спецификации. Поддерживается только IE. Вместо него рекомендуется использовать тег .
Тег указывает на музыкальный файл, который будет проигрываться на веб-странице при её открытии. Звук, время звучания музыки и другие характеристики указываются с помощью параметров тега, а также могут управляться при помощи скриптов. Этот тег должен размещаться только в середине тега .
Чтобы указать файл, который будет проигрываться, нужно написать так:
<bgsound src="Example.mid" loop="3" volume="-1000" balance="3000">
Параметры:
- src указывает путь к музыкальному файлу.
- loop устанавливает, сколько раз будет проигрываться музыка. По умолчанию проиграется 1 раз.
- volume задаёт громкость звучания музыки на странице. По умолчанию — 0. Громкость — целое число от −10000 до 0. Ноль — максимальный уровень. Чем больше значение этого параметра, тем тише звучит музыка.
- balance регулирует громкость звучания в левой и правой колонках.
audioправить
В HTML5 добавили новый тег .
Вот как он выглядит:
<!DOCTYPE html>
<html>
<head>
<title>
Очень красивая мелодия!
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<audio controls="controls">
<source src="music1.mp3" type="audio/mpeg" />
<source src="music2.mp3" type="audio/ogg; codecs=vorbis" />
</audio>
</body>
</html>
Обращаем ваше внимание на непонятный тег .
Дело в том, что браузеры не поддерживают все форматы музыки и порой приходится перекодировать вашу музыку в другие типы аудио, чтобы мелодия корректно отображалась в основных браузерах.
Подробно про атрибуты тега :
- autoplay — звук начинает играть сразу после загрузки страницы.
- controls — добавляет панель управления к аудиофайлу.
- loop — повторяет воспроизведение звука с начала после его завершения.
- preload — используется для загрузки файла вместе с загрузкой веб-страницы.
- src — указывает путь к воспроизводимому файлу (только если не использовался тег <source />).