В первую очередь необходимо указать тип создаваемого нами документа. В HTML5 это делается чрезвычайно просто (листинг 1.1).
Листинг 1.1. Использование элемента <doctype>
<! DOCTYPE html>
Эта строка должна идти самой первой в файле HTML, и перед ней не должно быть ни пробелов, ни пустых строк. Она активирует стандартный режим браузеров для интерпретации HTML5, когда это возможно (или игнорирует его в противном случае).
Вы можете сразу начать писать код в своем HTML-файле и постепенно добавлять в него элементы, которые мы будем изучать далее.
<html>
После объявления типа документа мы переходим к построению древовидной структуры HTML. Как всегда, в корне дерева находится элемент <html>. Внутри этого элемента помещается весь остальной код HTML (листинг 1.2).
Листинг 1.2. Использование элемента <html>
<! DOCTYPE html>
<html lang="ru">
</html>
Единственный атрибут, указания которого требует HTML5, — это атрибут lang открывающего тега <html>. Он определяет язык содержимого в создаваемом нами документе, и в данном случае мы выбрали русский — значение ru (английскому языку соответствует значение en).
ПОВТОРЯЕМ основы —
HTML — это язык разметки для построения веб-страниц.
Теги HTML представляют собой ключевые слова и атрибуты, окруженные угловыми скобками, например, <html lang="ru">.
В данном случае ключевое слово — это html, а lang — атрибут со значением ru. Большинство тегов HTML парные: один открывающий, а второй закрывающий. Содержимое находится между тегами. В нашем примере <htmllang="ru"> указывает на начало кода HTML, а </html> — на завершение кода. Сравните открывающий и закрывающий теги, и вы увидите, что закрывающий тег отличается только слешем (/) перед ключевым словом (например, </html>). Весь наш остальной код будет находиться между этими двумя тегами: <html>
… </html>.
Что касается структуры и составляющих ее элементов, HTML5 — чрезвычайно гибкий инструмент. Элемент <html> можно использовать без атрибутов или вообще не добавлять в код. Но в целях обеспечения совместимости, а также по другим причинам, которые не стоит здесь рассматривать, мы рекомендуем вам следовать некоторым базовым правилам. Мы научим вас создавать документы с использованием хорошего HTML-кода.
Значения атрибута lang для других языков вы можете найти на веб-странице: www. w3schools. com/tags/ref_language_codes. asp.
<head>
Продолжаем построение документа. HTML-код, который добавляется между тегами <html>, делится на два основных раздела. Как и в предыдущих версиях HTML, первый раздел представляет собой «голову», а второй — «тело» кода. Таким образом, нужно создать эти два раздела, используя уже знакомые элементы <head> и <body>.
Разумеется, первым идет элемент <head>, и, как и у других структурных элементов, у него есть открывающий и закрывающий теги (листинг 1.3).
Листинг 1.3. Использование элемента <head>
<! DOCTYPE html>
<html lang="ru">
<head> </head>
</html>
Сам тег по сравнению с предыдущими версиями языка не изменился, и его назначение остается таким же. Внутри тега <head> мы определяем заголовок веб-страницы, объявляем кодировку символов, добавляем общую информацию о документе и приводим ссылки на внешние файлы, содержащие стили, сценарии и даже изображения, необходимые для отображения страницы.
За исключением заголовка и некоторых значков, вся остальная информация, содержащаяся между тегами <head>, на экране обычно не отображается.
<body>
Следующий большой раздел, который является частью основной структуры документа HTML, — «тело». Это видимая часть документа, содержимое которой описывается внутри тега <body>. Данный тег также не изменился по сравнению с предыдущими версиями HTML.
Листинг 1.4. Использование элемента <body>
<! DOCTYPE html>
<html lang="ru">
<head>
</head>
<body> </body>
</html>
ПОВТОРЯЕМ ОСНОВЫ —
Пока что мы написали очень простой код, но уже с составной структурой. Смысл в том, что HTML-код — это не последовательный набор инструкций. HTML — это язык разметки, то есть набор тегов или элементов, чаще всего парных, которые можно вкладывать друг в друга (одни элементы могут целиком находиться внутри других). В первой строке кода из листинга 1.4 находится одиночный тег с определением документа, сразу за ним следует открывающий тег <html lang=»ru»>. Этот тег и закрывающий тег </html> в конце документа указывают на начало и конец HTML-кода. Между ними мы добавили теги, определяющие два важных раздела основной структуры документа: <head> и <body>. Это также парные теги. Позже в этой главе вы узнаете о других тегах, которые можно вставлять внутрь пар <head> и <body>. В результате получается древовидная структура, в корне которой находится тег <html>.
<meta>
Настало время вплотную заняться «головой» документа. Здесь было добавлено несколько изменений и новшеств, среди которых тег, определяющий кодировку символов в документе. Это тег <meta>, который указывает на то, каким образом текст должен отображаться на экране (листинг 1.5).
Листинг 1.5. Использование элемента <meta>
<! DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
В HTML5 данный элемент (как и многие другие) упрощен. Новый тег <meta> для обозначения кодировки символов стал короче. Разумеется, вы можете поменять кодировку UTF-8 на любую другую и использовать другие теги <meta>, например description или keywords, как показано в листинге 1.6.
Листинг 1.6. Добавление различных элементов <meta>
<! DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="description" content=»Это пример кода HTML5">
<meta name="keywords" content="HTML5, CSS3, DavaScript">
</head>
<body>
</body>
</html>
ПОВТОРЯЕМ основы —
В документе может быть несколько тегов <meta>, содержащих общие объявления, однако эта информация не отображается в окне браузера. Она используется только поисковыми системами и устройствами, которым требуются предварительные данные о нашем документе. Как уже говорилось, кроме заголовка и некоторых значков, никакая другая информация между тегами <head> пользователям не видна. В коде листинга 1.6 атрибут name внутри тега <meta> определяет тип тега, а в атрибуте content объявляется его значение, однако эти сведения на экран не выводятся. Чтобы побольше узнать о теге <meta>, зайдите на наш веб-сайт и просмотрите ссылки для этой главы.
В HTML5 одинарные теги не обязательно должны иметь закрывающий слеш (/), но мы все же рекомендуем использовать его для совместимости. Предыдущий пример кода можно записать, как показано в листинге 1.7.
<! DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="description" content=’Это пример" />
<meta name="keywords" content="HTML5, CSS3, JavaScript" />
</head>
<body>
</body>
</html>
<title>
Тег <title>, как и раньше, используется для определения заголовка документа (листинг 1.8), и ничего нового о нем сказать нельзя.
Листинг 1.8. Использование элемента <title>
<! DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="description" content=’Это пример HTML5">
</head>
<body>
</body>
</html>
ПОВТОРЯЕМ ОСНОВЫ —
Текст между тегами <title> представляет собой общий заголовок для создаваемого документа. Чаще всего браузеры отображают его в заголовке окна.
<link>
Еще один важный элемент, являющийся частью «головы» документа, — <link>. Он используется для подключения к документу стилей, сценариев, изображений или значков из внешних файлов. Чаще всего с помощью <link> подключают таблицу стилей из внешнего CSS-файла (листинг 1.9).
Листинг 1.9. Использование элемента <link>
<! DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="description" content=Это пример HTML5">
<link rel="stylesheet" href="mystyles. css">
</head>
<body>
</body>
</html>
Таблица стилей — это набор правил форматирования, позволяющий менять внешний вид документа, например размер и цвет текста. Без таких правил текст и другие элементы отображаются на экране с использованием стандартных стилей браузера (размер, цвет и другие характеристики устанавливаются по умолчанию). Стили представляют собой простые правила, занимающие обычно всего несколько строк кода, и их можно объявить в самом документе HTML. Как мы увидим далее, не обязательно подгружать эту информацию из внешних файлов, но использование отдельных файлов для таблиц стилей — хорошая практика. Загрузка стилей CSS из внешнего файла упрощает структуру основного документа, увеличивает скорость загрузки веб-сайта, а также позволяет воспользоваться преимуществами новых возможностей HTML5.
В HTML5 избавились от необходимости указывать тип подключаемой таблицы стилей, таким образом, атрибут type больше не используется. Теперь для внедрения файла со стилями достаточно двух атрибутов: rel и href. Название атрибута rel происходит от англ. relation (отношение), и его значение определяет, чем для нашего документа является подключаемый файл. В данном случае атрибуту rel присвоено значение stylesheet, то есть мы сообщаем браузеру, что mystyles. css — это CSS-файл со стилями, необходимыми для отображения страницы (в следующей главе мы займемся стилями CSS и научимся подключать их к документу).
С добавлением этого последнего элемента работу над «головой» документа можно считать законченной. Теперь мы можем как следует поработать над телом, где и происходит все самое интересное.
Добавить комментарий