Введение в язык разметки гипертекста HTML

Язык разметки HTML

HTML - это язык для описания структуры веб-страниц. Страницы, созданные с его помощью, могут быть просмотрены только при помощи специальных программ (браузеров), установленных на компьютерах пользователей.

Аббревиатура HTML расшифровывается как Hyper Text Markup Language (язык разметки гипертекста).
Запомните, он не является языком программирования, это язык разметки.
HTML использует теги разметки, чтобы описать структуру веб-страницы.

HTML теги - это ключевые слова или символы, заключенные в угловые скобки, например <body>, <p>, <h2> и т.д. Теги бывают двух видов: парные и одиночные (их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: <p>текст</p>. Символ "/" после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например: <br>. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами: <P> означает то же самое, что и <p>. Теги определяют, где начинается и где заканчивается, HTML-элемент.

С помощью тегов браузер распознает структуру и значение вашего текста, например, они сообщают браузеру, какая часть текста является заголовком, где начинается новый абзац, что нужно подчеркнуть и где расположить изображение (картинку). Получив эту информацию, браузер использует встроенные в него по умолчанию правила о том, как отображать каждый из этих элементов.

Структура HTML документа

Давайте разберем структуру html документа чтобы понимать, как все работает.

Чтобы создать любую веб-страницу, в ней должен присутствовать минимальный набор тегов. Они расположены в примере ниже.

<!DOCTYPE html>

<html>

<head>

<title>Профессиональное создание сайта в интернете с примерами</title>

</head>

<body>

<h1>Как создать сайт в интернете</h1>

<p>Здесь размещается содержание документа, которое видно всем пользователям.</p>

</body>

</html>

Браузер сам интерпретирует все эти теги и выводит их в одном для пользователя виде информации. Вы и сами замечали, что, когда заходите на сайт, на экране не отображаются эти элементы. Вы видите только красивую обертку, которую выводит браузер.

Тег DOCTYPE

Тег DOCTYPE всегда идет в самом начале веб-страницы. Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.

В последней версии 5 он имеет такой вид:

<!DOCTYPE html>

Тег HTML

Тег html является контейнером, который заключает в себя все содержимое веб-страницы. Открывающие и закрывающие элементы в документе не обязательны. Однако хороший стиль требует их использования.

Как правило, открывающий тег html идет вторым после определения документа при помощи doctype. Закрывающий всегда идет на странице последним.

Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается. Поэтому все остальные элементы (кроме doctype) должны быть вложены внутри этого контейнера.

Тег head

Тег head предназначен для хранения других элементов, цель которых помочь браузеру при работе с данными. Также внутри контейнера находятся мета теги, которые используются для хранения информации. Она предназначена для браузеров и поисковых систем.

Содержимое head не отображается напрямую на веб-странице, кроме тега title. Он отвечает за заголовок страницы.

В общем, в этом элементе хранится вся техническая информация о странице. Например, тип кодировки html страницы. Он будет говорить браузеру, как ему лучше декодировать документ. Также сюда мы можем подключать css стили и различные скрипты.

Тег title

У head есть один обязательный компонент. Это тег title. Он отвечает за то, как будет выглядеть html заголовок страницы. То, что вы напишите сюда, будет отображаться во вкладке браузера.

В данном элементе рекомендуется использовать название не более 60 символов с пробелами. Это нужно чтобы оно не обрезалось в поисковой выдаче. И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.

<head>

<title>Профессиональное создание сайта в интернете с примерами</title>

</head>

Тег meta

Еще один элемент, это тег meta. Он не парный и особой ценности не представляет. Однако наиболее важными элементами являются его атрибуты.

Таким образом, с помощью параметров и атрибутов, тег может хранить важную информацию о вашей странице.

Давайте к элементу я пропишу параметр charset и в нем укажу предпочтительную кодировку документа.

<head>

<title>Профессиональное создание сайта в интернете с примерами</title>

</head>

Обратите внимание, как указывается параметр. Его вставляем внутри тега и перед правой закрывающей скобкой. Далее ставим знак равно и в кавычках указываем кодировку документа.

Обязательно ее указывайте в своих документах. Иначе на вашем сайте вместо текста появятся некрасивые иероглифы (кракозябры).

Тег body

Чуть ниже идет тег body. Это основное тело документа. Внутри него находится тот контент, который виден пользователю. Это может быть текст, картинки, ссылки, видео и так далее.

Обратите внимание, что body всегда идет ниже тега head. То есть сначала идет техническая информация о странице и только потом основной контент для пользователя. Но никак не наоборот!

Внутри body обязательно должен присутствовать тег h1. Это заголовок материала. То есть, как будет называться ваша статья.

Далее чуть ниже идут элементы текста. Это обязательно будет абзац (тег p), картинки, какие-то выделения и так далее.

Задание

Скопируйте приведенную структуру HTML документа, начиная с <!DOCTYPE html>, заканчивая </html>, в текстовый редактор Блокнот. Сохраните страницу с расширением html. Привыкайте давать страницам латинские названия, желательно еще не использовать пробелы. Обычно главную страницу сайта называют index.html.
Откройте текстовый документ с помощью веб-браузера: Chrome, Opera, Firefox...

Page updated

Google Sites

Report abuse