Web-технологии

Кейно Павел Петрович

pavel@mati.ru

Лекция 6

Верстка на HTML5

Зарождение стандарта

Существующие технологии имеют определённые ограничения — плагины нужно устанавливать дополнительно, при этом они могут не работать, как Flash на iPhone и iPad, далеко не всё умеет и JavaScript.

Обеспокоенные медленным ходом работ разработчики браузеров Safari, Firefox и Opera основали свою собственную организацию WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по разработке гипертекстовых приложений Интернета).

Новые возможности HTML5

Новые возможности стандарта

Официально стандарт HTML5 ещё не завершен, но современные браузеры уже умеют частично с ним работать. Вот что поддерживает новый стандарт:

Доктайп

Любой код разметки начинается с доктайпа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. Также доктайп переводит браузер в один из возможных режимов: стандартный, почти стандартный и режим совместимости. В HTML5 нет подобных делений, доктайп один единственный и при его наличии браузер работает в стандартном режиме:

<!DOCTYPE html>

Кодировка документа

Новый способ указания кодировки:

<meta charset="utf-8">

Но допустим и старый:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Пример кода

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример страницы</title>
    <style> p {color: navy;} </style>
  </head>
<body>
  <p>Страница на HTML5</p>
</body>
</html>

Новые теги

В HTML5 для структуры кода введено несколько новых тегов: <article>, <aside>, <footer>, <header>, <nav>, которые заменяют в некоторых случаях привычный <div>.

Задание отображение элемента HTML5 для устаревших браузеров

<style>
  header, aside, details, figcaption, figure, footer,
  header, hgroup, menu, nav, section {
    display: block;
    }
</style>

Создание элемента HTML5 для IE6, IE7

<!--[if lt IE 9]>-->
<script>
    var e = ("article,aside,figcaption,figure,footer,header,
    hgroup,nav,section,time").split(',');
    for (var i = 0; i < e.length; i++) {
      document.createElement(e[i]);
      }
</script>
<!--[endif]-->

Скрипт для IE

<!--[if lt IE 9]>-->
<script src="http://mati.su/js/html5.js">
</script>
<!--[endif]-->

Итого

Дружеские отношения

HTML5 разделяет отношения ссылок на две категории: которые могут быть созданы с помощью тега <link>ссылки на внешние ресурсы для расширения текущего документа и гипертекстовые ссылки на другие документы.

Поведение ссылки на внешние ресурсы зависит от отношения, которое определено для соответствующего типа ссылки.

Чаще всего отношения ссылок видны в теге <link> раздела <head>. Некоторые отношения также могут быть использованы для тега <a>, но это встречается довольно редко, даже когда допускается.

Отношение rel="stylesheet"

<link rel="stylesheet" href="style/style-original.css"
type="text/css">

Это наиболее встречаемое отношение ссылок в мире (в буквальном смысле). Строка <link rel="stylesheet"> указывает на CSS-правила, которые хранятся в отдельном файле. В HTML5 можно убрать атрибут type.

Отношение rel="alternate"

<link rel="alternate" type="application/rss+xml"
title="Фид моего блога" href="/feed/">

<link rel="alternate"> в сочетании с типом RSS или Atom в атрибуте type позволяет то, что называется «автоматическое обнаружение канала». Это позволяет собирать фид читалками (вроде Google Reader) для получения с сайта последних новостей.

В HTML5 с помощью данного отношения и атрибута hreflang можно указывать на копии страницы на других языках.

Отношение rel="author"

rel="author" используется для ссылки на страницу с информацией об авторе. Это может быть  почтовый адрес. Обычно это ссылка на контактную информацию или страницу «Об авторе».

<link rel="author" href="http://keyno.com">

или

<link rel="author" href="pavel@mati.ru">

Другие отношения

Отношение rel="icon" указывает на значок сайта (favicon).

Пример:

<link rel="shortcut icon" href="/favicon.ico">

Отношение rel="nofollow" указывает, что ссылка не одобрена автором страницы. Пример:

<a href="http://somespamsite.org" rel="nofollow">

Новые семантические элементы в HTML5

<section> — определяет основной документ или раздел приложения. В данном контексте это тематическая группировка содержания, как правило, с заголовком. Например, разделами могут быть главы, вкладки в диалоговом окне и т.д.

<nav> — представляет собой раздел навигационных ссылок, содержащий ссылки на другие страницы. Не все группы ссылок должны заключаться в тег <nav> — только разделы, состоящие из основных блоков навигации.

<article> — задает компонент страницы, предназначенный для самостоятельного распространения или повторного использования. Это может быть сообщение форума, журнальная или газетная статья, запись в блоге и т.д.

Новые семантические элементы в HTML5

<aside> — представляет раздел страницы, имеющий косвенное отношение к содержанию и который можно отделить от контента. В полиграфии такие участки часто выделяют плашкой. Тег <aside> может быть использован для вывода цитат, боковых панелей, рекламы, навигации через <nav> и т.д.

<header> — представляет собой группу из вступительных или навигационных средств. Элемент <header> обычно содержит заголовок раздела (теги <h1><h6>), но это не обязательно. <header> также может быть использован для обертывания раздела содержания, формы поиска, или соответствующих логотипов.

Новые семантические элементы в HTML5

<footer> — задает нижний колонтитул для раздела содержания или подвал для страницы. Элемент <footer> обычно содержит информацию о разделе, такую как: имя автора, ссылки на соответствующие документы, авторские данные и тому подобное. Колонтитулы не обязательно должны выводиться в конце раздела, как это обычно делается.

<time> — представляет собой либо время в 24-часовом формате, либо точную дату, которую при желании можно совмещать со временем и указанием часового пояса.

<mark> — помечает фрагмент документа или выделяет его в справочных целях.

Статьи

<div class="entry">
  <p class="post-date">Октябрь 22, 2009</p>
  <h2>
    <a href="#" rel="bookmark" title="ссылка на этот пост">
      День путешествия
    </a>
  </h2>
...
</div>
<article>
  <header>
    <p class="post-date">Октябрь 22, 2009</p>
    <h2>
      <a href="#" rel="bookmark" title="ссылка на этот пост">
        День путешествия
      </a>
    </h2>
  </header>
...
</article>

Дата и время

<time datetime="2009-10-22">Октябрь 22, 2009</time>

У элемента <time> две части:

Значение Формат Пример
Год ГГГГ 2012
Месяц и год ГГГГ-ММ 2012-12
Полная дата ГГГГ-ММ-ДД 2012-12-23
Дата и время с минутами ГГГГ-ММ-ДДТчч:мм 2004-07-24T18:18
Дата и время с секундами ГГГГ-ММ-ДДТчч:мм:сс 2004-07-24T18:18:18
Дата и время с часовым поясом ГГГГ-ММ-ДДТчч:мм:сс±чч:мм 2004-07-24T18:18:18+04:00

Дата и время

<article>
  <header>
    <time datetime="2009-10-22">Октябрь 22, 2009</time>
    <h2>
      <a href="#" rel="bookmark" title="ссылка на этот пост">
        День путешествия
      </a>
    </h2>
  </header>
...
</article>

Навигация

<div id="nav">
  <ul>
    <li>главная</li>
	<li>блог</li>
	<li>галерея</li>
	<li>обо мне</li>
  </ul>
</div>
<nav>
  <ul>
    <li>главная</li>
	<li>блог</li>
	<li>галерея</li>
	<li>обо мне</li>
  </ul>
</nav>

Подвал

<div id="footer">
    <p>§</p>
    <p>© 2009 <a href="#">Марк Пилгрим</a></p>
</div>
<footer>
    <p>§</p>
    <p>© 2009 <a href="#">Марк Пилгрим</a></p>
</footer>

Лабораторная работа №7

Переверстать все страницы сайта на HTML5 с использованием соответствующих семантических элементов <article>, <section>, <aside>, <nav>, <main>, <header>, <footer> и т.д.

Создать для сайта favicon.ico, используя «дружеские отношения».

Сверстать страницу с использованием тегов <audio> и <video>.

Обеспечить обратную совместимость со старыми версиями браузеров.

Разработка: Викулин Максим