Урок №1: Структура HTML-документа. Ваш первый сайт.

Каждый web-сайт, состоит из разметки с помощью языка HTML, и в 100% случаев сайт начинается со строчки в которой указана версия HTML-документа.

Выглядит она вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

В данном случае мы сообщаем браузеру, что разметка нашего сайта соответствует международной спецификации версии 4.01.

Запоминать эту строку наизусть, особого смысла нет, но запомните, что эта строка обязательна при построении любого сайта.
Именно эта строчка помогает сделать сайт одинаковым и читабельным для всех браузеров, как правило, сейчас наиболее используемые браузеры это Google Chrome, Yandex и Mozilla Firefox.

У каждого HTML-документа, как и у любого живого существа есть тело, и оно состоит из «головы» и «тела».
Также есть и ноги документа, именуемые в народе как «подвал» сайта.

Разберем все в подробностях:

<html> — обозначает начало и конец документа. Закрывающий тег обязателен.

<head> — это голова документа. Она несет информацию которую вы видите в поисковиках и надпись во вкладке окна браузера, а также в ней заключаются ключевые слова по которым посетители смогут найти Ваш сайт.
Обязательным документом головы является элемент <title> — заголовок документа. В нем содержится название Вашего сайта/страницы, которое отображаеться в браузере во вкладке сверху. Находится внутри тега <head>.
Не менее важным есть тег <meta>.

<meta> — тег, который используется браузерами и поисковыми системами. Поисковые системы берут информацию о вашем сайте именно из метатегов. Детальнее о голове документа мы поговорим с Вами позже.

<body> — тело документа. Предназначено для хранения содержимой информации сайта — контента, что отображается в браузере. Информация записывается внутри контейнера. Закрывающий тег обязателен</body>.

<footer> — подвал документа. В этом теге располагается информация об авторе , дата существования документа, а также контактная и правовая информация.
Зачастую в подвале документа заключают тег <address>.

<address> — данный тег предназначен для хранения информации об авторе. Содержимое тега анализируется поисковыми системами для получения информации об авторе.

Структура HTML-документа составлена таким образом:

  1. Строка соответствия версии разметки
  2. Обозначение начала и конца документа
  3. Голова документа
  4. Тело документа
  5. Ноги документа

Для лучшего понимания всего вышесказанного, вот Вам схематическое изображение:

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

 

Думаю, теперь Вы разобрались.
Как видно на рисунке, голова находится над телом, не размещайте голову в теле документа или тело в голове. Сначала закрываем тег головы, а только потом открываем тег тела. Ах, да и еще, голова и тело только в одном экземпляре.

Очень и очень полезная фишка при создании сайта, это вставка комментария.
Комментарий можно вставить вот так:

Открываем тегом — <!—, далее пишем текст вашего комментария, и закрываем с помощью тега — —>.

<!--Ваш комментарий-->

 

А полезна эта штука тем, что как пройдет время после создания сайта, Вам, мой друг, будет очень трудно и страшно смотреть на то, что Вы там кодили. А при внесении комментария в свои действия вам будет легче понять, что к чему.

Вот вам пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<!—Здесь начинается голова-->

<head>

<title> htmlless.com – учись с нами</title>

</head>

<!—Кончается голова и начинается тело-->

<body>

htmlless.com научил меня вставлять комментарий

</body>

</html>

 

Ваши комментарии видны только вам. Так что внешний вид сайта для посетителя они не испортят.

Практикуйтесь.

Закрыть меню