Основы HTML
содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот)
, так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.)
. HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег
показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег
образуется путем добавления слэша / перед именем тега: имя тега> … . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег Кнопка
внутри.
Теги могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия
(принцип «матрёшки»)
, например, следующая запись будет неверной:
Текст
.
HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел,
. Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг)
начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов - заголовка — между тегами
… и содержательной части — между тегами … .
Структура веб-страницы
1. Структура HTML-документа
Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD)
. DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE
отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
...
Элементы, находящиеся внутри тега объектную модель документа, DOM (document object model)
. При этом элемент
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения»
между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок
- элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является
является предком для всех содержащихся в нем тегов:
, , ,
и т.д.
Потомок
- элемент, расположенный внутри одного или более типов элементов. Например,
является потомком Является потомком одновременно для
и Родительский элемент
- элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1
и . Тег Является родительским только для .
Дочерний элемент
- элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы
, , И
являются дочерними по отношению к .
Сестринский элемент
- элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1
и — элементы одного уровня, так же как и элементы , и Являются между собой сестринскими.
1.1. Элемент 1.2. Элемент
Раздел
... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. Элемент </h4>
<p>Обязательным тегом раздела <head> является тег <title> . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.</p>
<h4>1.2.2. Элемент <meta></h4>
<p>Необязательным тегом раздела <head> является одинарный тег <meta> . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta> , потому что в зависимости от используемых атрибутов они несут различную информацию.</p><p>
<meta name="description" content="Описание содержимого страницы">
<meta name="keywords" content="Ключевые слова через запятую">
</p><p>Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:</p><p>
<meta name="description" lang="ru" content="Описание содержимого страницы">
<meta name="description" lang="en" content="Description">
<meta name="keywords" lang="ru" content="Ключевые слова через запятую">
<meta name="keywords" lang="en" content="Keywords">
</p><p>С помощью тега <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:</p>
<p>
<meta name="robots" content="index, follow">
</p><p>
<meta name="robots" content="index, nofollow">
</p><p>
<meta name="robots" content="noindex, nofollow">
</p><p>Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:</p><p>
<meta content="30">
</p><p>Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3">
Таблица 2. Атрибуты тега <meta>
<tbody><tr><th style="width: 20%;">Атрибут
</th>
<th></th>
</tr><tr><td> charset
</td>
<td>Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8">
</td>
</tr><tr><td> content
</td>
<td>Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения.
</td>
</tr><tr><td> http-equiv
</td>
<td>Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:<br>
default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link> , который ссылается на таблицу стилей CSS, или идентификатор элемента <style> , содержащего таблицу стилей.<br>
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br>
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br>
<meta content="30"> <br>
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br>
<meta content="0; url=http://mail.ru/">
</td>
</tr><tr><td> name
</td>
<td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br>
application-name указывает название веб-приложения, используемого на странице.<br>
author указывает имя автора документа в свободном формате.<br>
description определяет краткое описание к содержимому страницы, например:<br>
<meta name="description" content="Описание содержимого страницы"> <br>
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br>
<meta name="generator" content="WordPress 4.0"> .<br>
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br>
<meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
</i>
</td>
</tr></tbody></table><h4>1.2.3. Элемент <style></h4>
<p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p>
<p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p>
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p>
<div class="paper">
...
</div>
</p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p>
<h4>1.2.4. Элемент <link></h4>
<p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p>
<p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через
директиву @import url</p><p>
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title>
с
использованием элемента
Таблица 4. Атрибуты тега Атрибут
Описание, принимаемое значение
crossorigin
Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.
href
Основной атрибут тега, в качестве значения выступает путь к файлу со стилями.
hreflang
Определяет язык текста в документе, на который идет ссылка.
media
Определяет тип устройства, к которым должен быть применен ресурс ссылки.
nonce
Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
rel
Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.
sizes
Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения:
title
Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
type
Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" .
1.2.5. Элемент
Рис. 1. Простейшая структура веб-страницы
Загрузка...