- •Теги тела документа
- •Html-формы Из истории языка
- •1. Элементы языка html
- •2. Структура html-документа
- •Элемент Style
- •3. Теги тела документа
- •Теги управления разметкой
- •Списки в html
- •Комментарии
- •Гипертекстовые ссылки
- •Графика в html.
- •Средства описания таблиц в html
- •4. Html-формы Формы используются в www для передачи информации от клиента к серверу. Задание формы — тег form
- •Атрибут cols
- •Новые элементы в html5 формах
- •Новые атрибуты в html5 формах
- •Выбор даты
2. Структура html-документа
Элемент <!doctype>. Информация о версии языка.
В качестве первого элемента HTML документа рекомендуется использовать элемент <!doctype>, в котором размещается информацию об используемой версии языка, чтобы браузер, отображающий HTML-документ, мог учесть особенности или ограничения этой версии.
Этот элемент имеет только открывающий тег <!doctype>, который начинается восклицательным знаком. В версии HTML5 єтот єлемент записівается следующим образом
<!doctype html>
Элемент <html>
Вторым элементом страницы является элементнт <html>. Этот элемент служит признаком того, что перед нами Web-страница, или HTML-документ.
Правило записи (синтаксис): элемент является контейнером. Открывающий тег — <html>, закрывающий — </html>. Оба тега могут отсутствовать. Однако их использование является правилом хорошего тона. Все остальные элементы, кроме <!doctype>> помещаются внутрь контейнера <html >... </html> и служат его контентом.
В контейнере <html> … </html> содержится сам HTML-документ, состоящий из двух частей – заголовка, хранящегося в контейнере <head>…</head> и тела документа, хранящегося в контейнере <body>…</body>. Заголовок содержит служебную информацию и не отображается браузером. В теле документа (<body>) располагается основное содержание документа.
Таким образом, HTML - документ должен иметь следующую структуру
<html>
<head>
служебная неотображаемая информация...
</head>
<body>
...воспроизводимое содержание документа...
</body>
</html>
Элемент <head>
Элемент <head> определяет заголовок документа. Он предназначен для представления необходимой браузеру служебной информации. Информация, заключенная в тэги, находящиеся внутри раздела HEAD (кроме названия документа, описываемого с помощью тэга <TITLE>), не отображается на экране.
В заголовке допускается использование следующих тегов
<title>, <meta>, <base>, <link>, <script>, <style>
Элемент <title>
Элемент <title> определяет название документа. Текст заключенные между тегами <title> и </title> является названием документа, єнот текст отображается в верхней части окна браузера. Если элемент <title> отсутствует, то в верхней части окна браузера отображается URI документа.
Элемент <meta>
Метатеги используются для хранения служебной информации предназначенной для браузеров и поисковых систем.
Атрибуты тега <meta>
charset - Задает кодировку документа. (<meta charset="utf-8">
content -Устанавливает значение атрибута, заданного с помощью name или http-equiv.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
http-equiv - Предназначен для конвертирования метатега в заголовок HTTP.
Значеними атрибута http-equiv могут быть:
Content-Type - тип кодировки документа.
Например, <meta http-equiv="Content-Type" content="text/html; charset=utf-8">)
Expires - устанавливает дату и время, после которой информация в документе будет считаться устаревшей.
<meta http-equiv="expires" content="Sun, 01 Jan 2013 07:01:00 GMT">
Pragma - способ кэширования документа.
Refresh -Загрузить другой документ в текущее окно браузера.
<meta http-equiv="refresh" content="5; URL=http://www.htmlbook.ru">
Браузер, получив эту запись, будет ожидать 5 секунд, а затем загрузит новую страницу, указанную в параметре URL, в данном случае это переход на сайт htmlbook.ru.
Этот метатег позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.
Name - Имя метатега, также косвенно устанавливает его предназначение.
Ниже приведены некоторые допустимые аргументы параметра name.
author – имя автора документа;
description – описание текущего документа;
keywords - список ключевых слов, встречающихся на странице.
Строка
<meta name="description" content="Это тестовая страница." />
определяет описание текущего документа.
Строка
<meta name="keywords" content="HTML, CSS, DTD, теги" />
определяет список ключевых слов, встречающихся на странице.
Строка
<meta name="robots" content="index, follow" />
определяет режим индексирования страницы поисковыми роботами.
Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Поисковые системы проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.
description
Большинство поисковых серверов отображают содержимое поля description (пример 1) при выводе результатов поиска. Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице, которые, как правило, оказываются не очень-то и в тему.
Пример
<metaname="description"content="Сайт обHTMLи создании сайтов">
keywords
Этот метатег был предназначен для описания ключевых слов, встречающихся на странице. Но в результате действий людей, желающих попасть в верхние строчки поисковых систем любыми средствами, теперь дискредитирован. Поэтому многие поисковики пропускают этот параметр.
Пример
<metaname="Keywords"content="HTML,META, метатег, тег, поисковая система">
Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.
Рекомендации по использованию метатегов:
не включайте ключевые слова, которые не содержатся на ваших страницах;
не повторяйте ключевые слова;
используйте метатеги по их прямому назначению;
делайте описание и список ключевых слов различными для каждой страницы сайта с учетом содержимого.
Элемент <LINK> устанавливает связь с внешним документом ( файл со стилями или со шрифтами). Тег <LINK> размещается всегда внутри контейнера <HEAD> и не создает "видимую" ссылку.
<link type="text/css" href="reset.css" rel="Stylesheet" />
<link type="text/css" href="main.css" rel="Stylesheet" />
Атрибуты тега <LINK>
href – путь к файлу, на который делается ссылка (URL), в качестве значения принимается полный или относительный путь к файлу;
rel – атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка, чтобы браузер знал, как использовать подключаемый документ.
Значения атрибута:
stylesheet – определяет, что подключаемый файл хранит таблицу стилей (CSS);
application/rss+xml – файл в формате XML для описания ленты новостей, анонсов статей.
type – сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.
Аргументы – имена MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.
media – определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько аргументов через запятую. Аргументы:
all – все устройства;
screen (значение по умолчанию) – экран монитора;
print – печатающее устройство вроде принтера;
projection – проектор;
braille – устройства, основанные на системе Брайля, которые предназначены для слепых людей;
speech – речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.