HTML начало
Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.
Создание HTML документов
Для того, чтобы создать HTML документ необходимо:
- Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
- Набрать произвольный текст и разметить его HTML тегами;
- Cохранить файл с расширением .htm или .html.
Базовый документ HTML
Ниже приведен в своей простейшей форме пример HTML-документа:
Пример HTML:
Это заголовок
Это параграф.
Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:
HTML теги
Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки . За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например имеет свой закрывающий тег , а тег в свою очередь, имеет свой закрывающий тег тег и т.д.
| Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа. |
Рассмотренный пример HTML-документа использует следующие теги:
| Название тега | Описание |
|---|---|
| Это инструкция для веб-браузера о том, на какой версии HTML написана страница. | |
| Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ | |
| Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как , и т.д. | |
| Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке. | |
| Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа. | |
| Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например , , и т.д. | |
| Этот тег представляет собой заголовок. | |
| Этот тег представляет собой абзац. |
Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).
Структура HTML-страницы
Ниже приведена визуализация структуры HTML-страницы:
HTML тег
Тег — корневой элемент HTML документа, В нем содержатся все HTML элементы, которые сообщают браузеру информацию об HTML документе. Перед тегом может находится только декларация , которая сообщает какая версия HTML используется в документе.
Прямыми дочерними элементами тега являются:
Рекомендуем использовать с тегом lang атрибут lang, который определяет язык документа. Это упрощает индексацию веб-страницы поисковиками, помогает браузерам корректно отображать национальные символы и устройствам, читающим с экрана, правильно определить произношение.
Синтаксис
Тег парный, закрывающий тег () обязателен.
Пример
html> html> head> title>Заголовок документа title> head> body> Содержимое страницы body> html>Результат
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| manifest | URL | Указывает URL адрес ресурса, где находится манифест с перечнем ресурсов, которые должны кешироваться в браузере пользователя (для возможности автономного просмотра). |
| xmlns | https://www.w3.org/1999/xhtml | Задает пространство имен XML для документа (если необходимо соответствие документа XHTML). Обязателен в XHTML. В HTML 5 можно его не использовать. |
Тег также поддерживает глобальные атрибуты и атрибуты событий.