Файл: Языки разметки гипертекста.pdf

Рассмотрим синтаксис описания страницы, которая содержит фреймы. Такая страница не содержит контейнер <BODY>… </BODY>. Вместо него используется другой контейнер:^[55]

…

</FRAMESET>

При описании размеров фреймов используются абсолютные единицы измерения (пиксели), проценты и относительные единицы. Если сделать запись:

то будет создано три вертикальных фрейма (три столбца, cols). При этом ширина крайнего левого столбца составит 150 пикселей, ширина среднего столбца составит 10% от оставшегося пространства, а третий столбец займет свободную справа площадь. Аналогично формируются горизонтальные фреймы.

Тег <FRAME> определяет свойства отдельного фрейма, на которые делится окно браузера. Этот элемент должен располагаться в контейнере <FRAMESET>, который задает способ разметки страницы на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница, определяемая с помощью параметра SRC. Хотя обязательных атрибутов у тега <FRAME> и нет, рекомендуется задавать каждому фрейму его имя через атрибут NAME.^[56]

Ниже приведен пример создания HTML-страницы с трема фреймами, где в качестве загружаемых в фреймы файлов использованы созданные ранее документы 1.html, 2.html, Table.html. Перед тегом <HTML> необходимо добавить описание типа документа (DTD) для работы с фреймами:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FRAMESET//EN"

"HTTP://WWW.W3.ORG/TR/HTML4/FRAMESET.DTD">

<HTML>

<HEAD>

<TITLE>FRAME</TITLE>

</HEAD>

</FRAMESET>

</HTML>^[57]

Вид приведенного HTML-документа с тремя фреймами в окне браузера Mozilla Firefox показан на рис. 2.4.

Рис. 2.4. Пример создания фреймов в HTML.

Фреймы позволяют создавать удобные системы навигации по сайту. Однако многие специалисты Web-дизайна рекомендуют воздержаться от широкого использования фремов.^[58]

2.2. Особенности разметки XHTML

Определение типа документа. Для документа, создаваемого с помощью языка XHTML 1.0, можно задать один из приведенных ниже вариантов дескриптора DTD:

Строгая (Strict) схема:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtmll/DTD/xhtml1-strict.dtd">

Переходная (Transitional) схема:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd">

Фреймовая (Frameset) схема:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset// EN"

"http://www.w3.org/TR/xhtmll/DTD/xhtml1-frameset.dtd">

Требования к разметке XHTML Как отмечалось в первой главе, язык XHTML предполагает соблюдение строго синтаксиса XML и имеет более жесткие требования относительно того, как должна выполняться разметка:^[59]

• Имена элементов и атрибутов следует указывать в нижнем регистре. В стандарте HTML регистр не учитывается.

• Все элементы должны быть закрыты (замкнуты). Пустые элементы закрываются добавлением слеша перед закрывающей скобкой (например, <br />, <input />).

• Значения атрибутов необходимо заключать в кавычки (например, width=”100px”). Одинарные кавычки приемлемы наравне с двойными, так как они используются повсеместно. Кроме того, не должно быть никаких лишних пробельных символов (пробелов или переводов строк) до или после значения атрибута внутри кавычек.

• Все атрибуты обязаны иметь явные значения. Формат XML (и, следовательно, XHTML) не поддерживает минимизацию атрибутов, которая практиковалась языком SGML и позволяла сводить написание некоторых атрибутов к простому указанию их значений. Таким образом, если в HTML-документе можно просто написать CHECKED, что обозначает, что элемент формы будет активен в момент загрузки страницы, то в рамках стандарта XHTML необходимо явно указать checked=”checked”.

• Правильное вложение документов строго обязательно. У некоторых элементов появились новые ограничения по вложению.

• Для вставки специальных символов следует указывать их символьную ссылку, (например, &ашр для символа &).

• В качестве идентификатора используется атрибут id, а не name.

• Сценарии должны располагаться в разделе CDATA, таким образом они будут рассматриваться как обычные текстовые символы и не станут анализироваться как разметка XML.

Приведем небольшой пример корректного XHTML-кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>XHTML</title>

</head>

<body>

</body>

</html>^[60]

Выводы по главе 2.

Таким образом, во второй главе изложены основные принципы разметки Web-документа с помощью языков HTML и XHTML. Рассмотрены различные формы задания типа документа (DTD). Приведены теги языка HTML, определяющие заголовок, тело документа, теги форматирования текста, теги для создания заголовков различных уровней, теги для создания гиперссылок, нумерованных и маркированных списков, форм (включая поля ввода, флажки, переключатели, кнопки), таблиц. Рассмотрена фреймовая форма задания структуры HTML-документа. Для большинства из перечисленных элементов представлены фрагменты кода с их использованием, а также показан вид документа в окне браузера Mozilla FireFox.

Описаны различные формы определения типа (DTD) для XHTML-документов Отмечено, что язык XHTML следует строгим правилам языка XML, в связи с этим представлены требования к разметке XHTML.

Глава 3. НОВЫЕ ВОЗМОЖНОСТИ В HTML5

3.1. Структура Web-документа в HTML5

Определение типа документа. Декларация HTML5 имеет вид:^[61]

<!DOCTYPE html>.

В языке HTML5 введен ряд новых элементов, отсутствовавших в версиях HTML и XHTML. Они приведены в таблице 1.

Таблица 1.

Новые элементы в HTML5

article	datalist	header	output	source
aside	details	hgroup	progress	summary
audio	embed	keygen	rp	time
bdi	figcaption	mark	rt	track
canvas	figure	meter	ruby	video
command	footer	nav	section	wbr

Источник: [14. , C. 225].

Помимо этого, в HTML5 добавлены новые типы ввода данных: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.

Также введен ряд новых атрибутов, в частности: contenteditable, contextmenu, draggable, dropzone, hidden, role.

В HTML5 некоторые элементы HTML 4.01 были признаны «устаревшими», так как носят презентационный характер, вышли из употребления или плохо поддерживаются браузерами. К ним относятся: acronym, applet, basefont, big, dir, font, frame, frameset, noframes, strike, tt.^[62]

Рассмотрим пример создания структуры документа с использованием новых в HTML5 элементов article, nav, header, footer, aside.

Тег <article> используется для оформления независимых работ: журнальных и газетных статей, сообщений в блогах, комментариев или других элементов, которые можно извлечь для внешнего использования. Тег <nav> задает основную навигацию на странице. Теги <header> и <footer> задают верхний и нижний колонтитулы страницы, раздела или статьи. Тег <aside> используется для оформления информации во врезках, определяет контент, косвенно связанный с окружающим содержимым.^[63]

Приведем документ, иллюстрирующий использование перечисленных выше элементов для задания структуры страницы:^[64]

<!DOCTYPE html>

<html>

<head>

<title>Структура страницы</title>

</head>

<body>

<h2>Навигация по сайту</h2>

</header>

<nav>

<a href="1.html">Списки</a> | <a href="2.html">

Формы</a> | <a href="Table.html">Таблицы</a>

</nav>

<p>Рекомендован W3C к применению в декабре 1999 года</p>

</article>

<p>Рекомендован W3C к применению в октябре 2014 года</p>

</article>

</footer>

</body>

</html>

Вид данного документа в окне браузера в окне браузера Mozilla Firefox показан на рис. 3.1.

Рис. 3.1. Пример задания структуры страницы в HTML5

3.2. Новые типы ввода данных

Во второй главе нами был рассмотрен пример создания в HTML 4.01 формы с помощью тега <form> и основных элементов управления с помощью тега <input>. В HTML5 добавлены типы ввода данных в формы путем задания новых значений атрибута type. Приведем их:^[65]

<input type=email> — создает поле для ввода адреса электронной почты; сообщает браузеру, что форма не должна быть отправлена, пока пользователь не ввел нечто, похожее на правильный адрес, то есть браузер определяет правильность его формата;^[66]

<input type=url> — создает поле для ввода URL-адреса и заставляет браузер проверять, что пользователь ввел правильный по структуре URL-адрес;

<input type=date> — создает поле для ввода даты, а также открывает доступ к встроенному в браузер виджету выбора даты;

<input type=number> — создает поле для ввода числа и заставляет браузер проверять, что пользователь ввел именно число;

<input type=range> — создает ползунок с тем, чтобы пользователь мог выбрать значение при помощи ползунка;

<input type=color> — создает поле для задания цвета, позволяет пользователю ввести значение цвета, выбрав нужный вариант в палитре.

Рассмотрим также совместное использование тега <input> и нового элемента <datalist>. Сочетание элемента <input> с атрибутом list и элементом <datalist> дает комбинированное поле — комбинацию раскрывающегося списка и текстового поля из одной строки. Оно позволяет пользователям вводить свой собственный текст, если их не устраивают предложенные в списке варианты.^[67]

Список создается внутри нового элемента <datalist>, id которого указывается в качестве значения атрибута list. Сам <datalist> не отображается, но появляется в виде значений поля, похожего на поле выбора.

Ниже приведены фрагменты кода HTML5 для создания формы, включающей перечисленные выше значения атрибута type тега <input>, а также совместное использование тега <input и элемента <datalist>.

<form>

<p>Заполните форму (все поля обязательны)</p>

</form>

<p>Выберите язык разметки:</p>

</datalist></p>

<form>

<p>Введите данные:</p>

<p>Число <input type="number"></p>

<p>Выберите значение</p>

<p>Выберите цвет <input type="color"></p>

</form>^[68]

Вид документа в окне браузера показан на рис. 3.2.

Рис. 3.2. Использование новых типов ввода данных в HTML5.

3.3. Размещение аудио- и видеоконтента на странице

В самом простом случае для размещения видео на странице в HTML5 потребуется такой код:^[69]

Расширение файла webm используется здесь, чтобы указать на формат видео, закодированного с помощью WebM.

Для предоставления пользователю возможности управлять проигрыванием видео необходимо добавить в тег <video> атрибут controls. Для задания размера видео в окне браузера, необходимо добавить в тег <video> атрибуты width и height, которые задают ширину и высоту отображаемого видео в пикселях.