CIT / LabRab06
.pdf
1
Лабораторная работа №6
Создание WEB-страниц с помощью языка HTML5
Цель работы: научиться создавать HTML-документы с использованием новых элементов, присущих языку разметки HTML5.
1 СТРУКТУРА HTML-ДОКУМЕНТА
HTML5 – новое поколение языка разметки интернет страниц. С момента выхода рекомендации HTML 4.01 прошло уже более 10 лет (1999 год). Спецификация HTML5 на данный момент еще находится на стадии разработки. Несмотря на это, большинство наиболее популярных интернет браузеров уже частично поддерживают нововведения HTML5. Эту функциональность поддерживают далеко не все браузеры и пока еще не в полном объеме. Сегодня мы можем рассчитывать на то, что в той или иной степени HTML5 поддерживают
Opera, Chrome, Firefox, Safari и Internet Explorer.
1.1 Информация о версии языка. Элемент <!DOCTYPE>
DOCTYPE-объявление располагается в самом начале кода HTML-документа и необходимо для переключения браузера в режим соответствия стандартам. Только в этом режиме можно рассчитывать на единообразное отображение HTML-страницы в разных браузерах.
В HTML 4.01 существуют 3 различных типа документа, в HTML5 существует только один, поэтому DOCTYPE-объявление в нем выглядит так:
<!DOCTYPE html>
Без DOCTYPE браузеры отображают страницу в режиме совместимости со старыми браузерами — вплоть до имитации их ошибок. Кроме того, современные возможности доступны только в режиме соответствия стандартам. Следует всегда снабжать HTMLдокументы DOCTYPE-объявлением.
Пример 1.1. Структура элементарного WEB-документа HTML5
<!DOCTYPE html> <html>
<head>
<title>!DOCTYPE</title>
<meta charset="windows-1251"> </head>
<body>
<p>Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). В HTML 5
используется только один вариант DOCTYPE: <b><!DOCTYPE html></b>, который в свою очередь необязателен и может быть пропущен.</p>
</body>
</html>
В данном примере также использован тег <meta> с атрибутом charset, который явно указывает кодировку HTML-документа, чтобы не было необходимости определять кодировку браузеру, так как иногда может определиться неверная кодировка и текст страницы будет невозможно прочитать.
1.2 Структура документа
Как известно в HTML5 появились новые элементы для секционирования документа. Использование этой разметки не предоставляет никаких мгновенных преимуществ. Главным плюсом такой разметки является то, что она помогает ботам поисковиков лучше контент сайта
2
понимать.
В первую очередь выделим группу новых элементов разметки страницы, которых в явном виде ранее не было. К ним относятся тег <article> - статья, заметка, новость и т.д.; <header> - заголовок статьи или верхний колонтитул <footer> - нижний колонтитул и <section> - раздел или глава статьи. Отдельного внимания в этом контексте заслуживает элемент <nav>, поскольку он создан для того, чтобы выделить блок с основными навигационными ссылками на вашей странице. Возможно, поисковые машины будут как-то иначе относиться к подобным ссылкам. Ниже приведена сводная таблица с новыми тегами HTML5, которые добавляют разметке смысловой оттенок.
Тег |
Краткое описание |
<article> Статья, новость, заметка, комментарий или любой другой вид отдельной публикации. Тег article объединяет информацию, относящуюся к одной теме или вопросу. Один элемент article может включать в себя другие элементы article (пример ниже).
<aside> Ремарка, отступление. Тег aside также может быть использован для выделения части текста, не относящейся к основному содержанию страницы, например, для размещения рекламных объявлений.
<detail> 
Раскрываемый по требованию блок детализации сведений. <figcaption> Подпись рисунка. Тег figcaption используется внутри тега figure.
<figure> Рисунок с подписью. Данный элемент должен содержать изображение img и
подпись figcaption.
<footer> Нижний колонтитул. Тег footer имеет смысл также размещать внутри тега article для указания автора статьи или заметки.
<header> Заголовок страницы или введение к статье. При размещении внутри тега article в тег header можно включить заголовок, краткое описание публикации и ссылки на связанные материалы.
<hgroup> 
Группировка заголовков h1 - h6 в многоуровневый заголовок.
<mark> Пометка. Тег mark имеет смысла использовать, если вам необходимо выделить часть текста другим стилем и сослаться на него из другого места документа.
<nav> 
Блок навигационных ссылок.
<section> Раздел страницы, глава статьи. При размещении внутри статьи (тег article) может интерпретироваться, как отдельная ее глава.
Есть ряд советов по использованию новых структурных тегов HTML5, с которыми трудно спорить, поскольку смысл их очевиден. Вот некоторые из них:
•Не стоит использовать тег header только для того, чтобы разместить в нем один тег заголовка h1 - h6 точно также, как не нужно запихивать внутрь тегов-заголовков ничего кроме текста самих заголовков. Так делать не стоит:
<header>
<h1>Название сайта</h1> </header>
•Не стоит использовать тег hgroup для создания групп заголовков из одного элемента. Каждый отдельно взятый элемент от h1 до h6 и так сам себе заголовок. Вот пример, как делать не нужно:
<hgroup>
<h1>Название сайта</h1> </hgroup>
•Не стоит добавлять элементы section внутрь других элементов, если они будут включать в себя все основное содержание этих элементов. Вот пример лишнего элемента section:
<article>
3
<section>
<p>Текст комментария</p> </section>
<footer> <small>Опубликовано...</small>
</footer>
</article>
•Не нужно понимать смысл элемента article буквально. Это не только статья, но и любая форма представления законченной мысли. Именно по этой причине комментарии к статье в приведенном ниже примере также выделены в отдельные блоки article.
•Используйте структурные теги HTML5, только если уверены, что они помогут поисковым машинам больше узнать о семантике вашей разметки. Если тег не несет отдельного смысла, а добавлен только лишь для "красоты", то результат его добавления - это "лишний вес" вашей страницы.
Пример 1.2. Семантическая разметка документа
<!DOCTYPE html> <html>
<head>
<title>Элементы семантической разметки</title> <meta charset="windows-1251">
</head>
<body>
<header>
<h1>Название сайта</h1> <p>Описание сайта</p> <nav>
<a href="#">Главная</a> <a href="#">Статьи</a> <a href="#">Новости</a> <a href="#">Ссылки</a> <a href="#">Контакты</a>
</nav>
</header>
<article>
<header>
<h2>Название статьи</h2>
<p>Краткое описание о чем статья</p> <figure>
<img src="m/html5.png" width="128px" height="128px"
title="HTML5">
<figcaption>Логотип HTML5</figcaption> </figure>
</header>
<section>
<h3>Глава 1. Название</h3> <p>Основной текст...</p>
</section>
<section>
<h3>Глава 2. Название</h3> <p>Основной текст...</p>
</section>
<section> <h3>Комментарии</h3> <article>
<p>Текст комментария</p> <footer>
<small>Опубликовано [автор комментария], [время публикации
комментария]</small>
</footer>
</article>
</section>
<footer>
4
<p>Всего комментариев: [xxx], Опубликовано [автор статьи], [время публикации статьи]</p>
</footer>
</article>
<footer>
<nav>
<a href="#">Сходная по тематике статья 1</a> <a href="#">Сходная по тематике статья 2</a>
</nav>
<p align="center">Название ресурса. Все права защищены © 2013.</p> </footer>
</body>
</html>
Как видим из скриншота, видимых отличий от обычной разметки страницы нет.
2 Структурирование и разметка контента
2.1 Новые элементы форм
HTML5 обещает новые типы элементов <input>, контролирующих ввод интернет адреса, адреса электронной почты, числовых значений, даты, времени, цвета и т.п. Если браузер поддерживает не все новые типы элементов, то те, с которыми он еще не умеет работать, будут выглядеть как обычные поля для ввода текста.
Пример 2.1. Пользовательские элементы управления
<!DOCTYPE html> <html>
<head>
<title>Пользовательские элементы управления</title> <meta charset="windows-1251">
5
</head>
<body>
<form>
Текст: <input type="text"/><br/> Поиск: <input type="seatch"/><br/> Телефон: <input type="tel"/><br/>
URL: <input type="url" value="zntu.edu.ua"/><br/>
E-Mail: <input type="email" value="@domain.ru"/><br/><br/> Дата и время: <input type="datetime"/><br/>
Дата: <input type="date"/><br/> Месяц: <input type="month"/><br/> Неделя: <input type="week"/><br/> Время: <input type="time"/><br/>
Дата и время (местное): <input type="datetime-local"/><br/> Целое число: <input type="number" id="num" min="-100" max="100"
step="10" value="10" onChange="document.getElementById('ran').value=this.value"/><br/>
Число из интервала: <input type="range" id="ran" min="-100" max="100" step="5" value="10" onChange="document.getElementById('num').value=this.value"/></font><br/>
Цвет: <input type="color"/><br/>
<input type="submit" value="Подтвердить"/> </form>
</body> |
|
</html> |
|
Если |
значение адреса не соответствует формату url, то после нажатия кнопки |
“ Подтвердить” |
браузер предпримет попытку его исправить. Если он этого сделать не сможет, то |
выведет сообщение об ошибке. Если значение электронной почты не соответствует формату email, то после нажатия “ Подтвердить” браузер либо исправит адрес, либо сообщит об ошибке ввода.
6
2.2 Визуализация числовых величин
Элемент <meter> представляет числовую величину в виде шкалы с возможностью указания интервалов ниже нормы low и выше нормы high, а также оптимальной величины optimum.
Элемент <progress> визуализирует процесс выполнения. Можно указать только максимальное max и текущее value значение.
Пример 2.2. Визуализация числовых величин
<!DOCTYPE html> <html>
<head>
<title>Визуализация числовых величин</title> <meta charset="windows-1251">
</head>
<body onLoad="window.setInterval(function() { var e=document.getElementById('pbar'); if (e.value<100) e.value++; else e.value=0; }, 100)">
<meter min="-50" low="-10" high="30" max="50" value="-15" title="градусы"></meter><br/>
<meter min="-50" low="-10" high="30" max="50" value="20" optimum="20" title="снова градусы"></meter><br/>
<meter min="-50" low="-10" high="30" max="50" value="35" title="все те же градусы"></meter><br/>
<progress id="pbar" max="100" value="0"></progress> </body>
</html>
В данном примере также показано, как динамически изменять значение прогрессбара с помощью Javascript. После того, как страница загружена, срабатывает событие элемента body onLoad, в котором некоторой функции устанавливается временной интервал, по истечении которого выполняется её код. Сам код функции довольно прост — он увеличивает значение атрибута value на единицу, а когда значение достигает 100 — обнуляет. В результате мы наблюдаем анимацию последней строки прогресса.
2.3 Редактирование содержимого веб-страницы
Теперь с помощью определения атрибута contenteditable можно сделать редактируемым отдельные элементы разметки, например, блоки с текстом, списки и т.п. С помощью атрибута designmode можно сделать редактируемым всю страницу. Такая функциональность может быть полезна для организации обратной связи с владельцем ресурса, например, для заполнения и отправки ему заявления, заказа или чего-нибудь еще в этом роде. Вы создаете html страницу бланка в его первоначальном виде и отдаете пользователю для заполнения. После заполнения пользователь подтверждает введенные данные, и отредактированный документ отправляется на сервер. Пример редактируемой разметки приведен ниже:
7
Пример 2.3. Атрибут contenteditable
<!DOCTYPE html> <html>
<head>
<title>Атрибут contenteditable</title> <meta charset="windows-1251">
</head>
<body>
<div style="border: 2px dashed #777; padding: 8px; width:512px" contenteditable>
<p>Содержимое данного блока можно редактировать, поскольку для него определен атрибут <i>contenteditable</i>:</p>
<code><div contenteditable="true"></code>
<p>В ходе редактирования ячеек таблицы ширина колонок и высота строчек изменяется автоматически.</p>
<table style="border: 1px solid #777;">
<tr><th>Колонка 1</th><th>Колонка 2</th><th>Колонка 3</th></tr> <tr><td>Ячейка 11</td><td>Ячейка 12</td><td>Ячейка 13</td></tr> <tr><td>Ячейка 21</td><td>Ячейка 22</td><td>Ячейка 23</td></tr>
</table>
<p>Для ввода нового элемента списка нажмите [Enter].</p> <ul>
<li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li>
</ul>
<p><small>После добавления нового элемента в список <ol> нумерация будет обновлена автоматически.</small></p>
<ol>
<li>Элемент нумерованного списка 1</li> <li>Элемент нумерованного списка 2</li> <li>Элемент нумерованного списка 3</li>
</ol>
</div>
</body>
</html>
В данном примере блок <div> представлен в виде поля ввода. Его содержимое можно добавлять, менять, удалять, форматировать (средства браузера обычно позволяют сделать выделенный текст в таком поле ввода жирным сочетанием клавиш Ctrl-B, наклонным — Ctrl-I, подчеркнутым — Ctrl-U).
8
2.4 Локальное хранилище данных
Хранилище HTML5 позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже. Идея напоминает кукисы, но хранилище предназначено для сохранения гораздо большего объема информации. Кукисы ограничены в размерах, и ваш браузер каждый раз посылает веб-серверу запрос новой страницы (если на это есть время и позволяет полоса пропускания). Хранилище HTML5 остается на вашем компьютере, и сайты могут обращаться к нему через JavaScript после загрузки веб-страницы.
Пример 2.4. Использование локального хранилища
<!DOCTYPE html> <html>
<head>
<title>Локальное хранилище</title> <meta charset="windows-1251">
</head>
<body>
<div id="editfield" style="border: 2px dashed #777; padding: 8px; width:512px" contenteditable>
Пример текста, который можно сохранить на вашем компьютере. </div>
<button type="button" onClick="sessionStorage.setItem('editdata', document.getElementById('editfield').innerHTML);
alert('Данные сохранены.')">Сохранить</button> <button type="button"
onClick="document.getElementById('editfield').innerHTML='Восстановленный текст: '+sessionStorage.getItem('editdata');
alert('Данные восстановлены.')">Восстановить</button> </body>
</html>
Метод sessionStorage.setItem(id, data) предназначен для сохранения данных data в хранилище с идентификатором id. После чего, с помощью метода sessionStorage.getItem(id) сохраненные данные можно считать.
2.5 Управление историей
API истории HTML5 представляет собой стандартизированный способ манипулировать историей браузера с помощью скрипта. Часть этого API — навигация по истории — была доступна в предыдущих версиях HTML, например, вызов window.history.length вернет “ длину предыстории”, а вызовы window.history.back(), window.history.forward() или window.history.go(stepCount) осуществят соответствующие переходы.
Новая часть в HTML5 - это способ добавления записей в историю браузера и
9
реагирование на удаление этих записей из стека, когда пользователь нажимает кнопку браузера «Назад». Это означает, что URL может продолжать выполнять свою работу как уникальный идентификатор для текущего ресурса, даже в нагруженных скриптами приложениях, которые не всегда полностью обновляют страницу.
Далее небольшой пример:
Пример 2.5. Управление историей просмотра страниц
<!DOCTYPE html> <html>
<head>
<title>Управление историей просмотра страниц</title> <meta charset="windows-1251">
</head>
<script type="text/javascript">
<!--
function updatelen() {
document.getElementById("len").innerHTML = window.history.length;
}
function gotourl() {
history.pushState({}, event.target.textContent, event.target.href); updatelen();
return event.preventDefault();
}
function init() {
window.addEventListener("popstate", function(e) { updatelen();
});
}
-->
</script>
<body onLoad="init()">
<p>Длина истории: <span id="len"></span> страниц.</p>
<p>Навигация по истории: <button onClick="window.history.go(-2)">назад на 2 страницы</button>, <button onClick="window.history.back()">назад</button> и <button onClick="window.history.forward()">вперед</button>.</p>
<p>Перейти на <a href="lab2_5.htm" onClick="return gotourl()">главную</a>
страницу.<br/>
Перейти на <a href="second.htm" onClick="return gotourl()">вторую</a>
страницу.<br/>
Перейти на <a href="third.htm" onClick="return gotourl()">третью</a>
страницу.</p> </body>
</html>
При переходе по каждой из трех ссылок, приведенных в примере, страница не будет перезагружена заново, но при этом адрес страницы в строке браузера изменится на тот, на который указывает соответствующая ссылка, а также увеличится значение длины истории.
При нажатии на каждую из трех ссылок срабатывает функция gotourl(), целями которой является установка нового адреса в истории страницы, считывание счетчика длины истории и вывод его в элемент страницы.
За добавление нового адреса в историю просмотра страниц отвечает метод history.pushState(data, title, url). Параметр data представляет собой объект, который связывается с состоянием страницы в истории, title – заголовок страницы, url – новый адрес страницы.
Также в примере демонстрировалось предотвращение перехода на страницу, указанную в атрибуте href ссылки. Для этого применялся метод event.preventDefault().
10
2.6 Обмен сообщениями между страницами
Если ваша страница содержит элементы <iframe> или всплывающие окна, которые загружают содержимое других страниц: не только страниц вашего сайта, но и страниц с абсолютно другого домена, то с внедрением рекомендаций HTML5 появится возможность обмениваться с такими окнами сообщениями. Страница, отправляющая сообщение делает это с использованием вызова функции window.postMessage(message, target), а страница, принимающая сообщение должна содержать обработчик события "onmessage", где она уже должна обработать текст сообщения event.data, если действительно является его адресатом – соответствует значению event.origin. До появления этого механизма, возможности общаться различным интернет ресурсам на стороне клиенте не было. Пример простейшей реализации общения двух страниц посредствам нового механизма сообщений HTML5 приведен далее.
Пример 2.6.а. Страница-отправитель сообщения
<!DOCTYPE html> <html>
<head>
<title>Обмен сообщениями между страницами. Страница-отправитель</title> <meta charset="windows-1251">
</head>
<script type="text/javascript">
<!--
popup = null;
function sendMessage() {
var message = document.getElementById('message').innerHTML; var target = document.getElementById('target');
if (popup) { popup.postMessage(message, "*");
} else {
target.contentWindow.postMessage(message, "*");
}
return false;
}
-->
</script>
<body>
<form id="form" onSubmit="return sendMessage()">
<div id="message" style="border: 2px solid #777; width:256px; padding:8px;" contenteditable>Текст сообщения</div>
<input type="submit"/> </form><br/>