HTML (Hyper Text Markup Language) - язык гипертекстовой разметки, который используется для создания веб-страниц. Он состоит из набора структурных и семантических элементов, которые описывают, как должны быть представлены части документа (заголовки, абзацы, списки, изображения, и т.д.) в браузере.
Версии HTML
Язык HTML был разработан британским ученым Тимом Бернерсом-Ли в 1991 году. Позже начали появляется усовершенствованные версии HTML.
| Версия | Год |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
Основные понятия в HTML
Элементы, теги и атрибуты - основные понятия в HTML.
Основной структурной единицей веб-страницы является HTML элемент, для определения которого используются HTML теги.
HTML теги
HTML теги используются для определения структуры контента на веб-странице. При помощи тегов мы размечаем контент и даем понять браузеру, как именно показывать ту или иную часть контента (к примеру, текст, изображение, гиперссылка, и т.д.). Сами теги в браузере не показываются.
HTML теги заключаются в угловые скобки < >, к примеру <html>.
Большинство тегов в HTML парные (к примеру, <p> </p>), т.е. состоят из двух частей - открывающего (< p>) и закрывающего (< /p>) тегов.
Одиночные теги не имеют закрывающего тега. Например, одиночным является тег <img/>, который используется для определения изображения.
Рассмотрим вышесказанное на примере.
Если нам нужно обозначить в HTML документе абзац (который в HTML документе является элементом), мы используем HTML тег <p>. Содержимое абзаца мы запишем между открывающим (<p>) и закрывающим (</p>) тегами.
Пример
Абзац между двумя тегами - открывающим <p> и закрывающим </p>.
HTML атрибуты
Для того, чтобы сообщить дополнительную информацию об элементе, используются HTML атрибуты. К примеру, если мы размечаем изображение тегом < img/>, то при помощи атрибутов мы можем дополнительно сообщить браузеру адрес изображения (src), его высоту (height), ширину (width) и т.д.
Структура HTML страницы
Элемент <!DOCTYPE html> указывает на принадлежность текущего документа к определенному типу HTML. Как мы уже отмечали, существует несколько версий HTML, и для того, чтобы браузер не путался и отображал правильный стандарт, необходимо ему на него указать.
Различают несколько видов < !DOCTYPE> , для каждой версии HTML языка существует свой.
Начало и конец HTML документа обозначаются тегами <html> </html>, который сообщает браузеру информацию об HTML документе.
В теге <head> содержатся другие HTML элементы, а также предназначенные для поисковых систем метаданные (мета-заголовок, мета-описание, ключевые слова, и т.д. ). Содержимое этого тега не показывается на веб-странице, за исключением содержимого тега <title>, который устанавливает заголовок окна веб-страницы.
Заголовок веб-страницы пишется между открывающим <title> и закрывающим </title> тегами.
Элемент <body> содержит всю информацию о веб-странице (текст, изображения, видео, и т.д.). Информация записывается между открывающим <body> и закрывающим </body> тегами.
Теги заголовка <h1>-<h6> используются для обозначения заголовков разного уровня.
Всего существует 6 уровней заголовков: тег <h1> обозначает самый важный заголовок на странице (не путать с <title>, где содержится заголовок окна веб-страницы), а тег <h6> - наименее важный.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок веб-страницы</title>
</head>
<body>
<h1>Самый важный заголовок на странице</h1>
<p> Первый абзац </p>
<h2> Второй по значимости заголовок </h2>
</body>
</html>Результат
Для того, чтобы начать писать код для вашего веб-сайта, вам потребуется HTML редактор. Поговорим об HTML редакторах в следующей главе.
Практикуйте свои знания
