"Истина где-то рядом."
 Уроки HTML |
 Скрипты PHP |
 Шаблоны HTML |
| Уроки HTML |
| Уроки CSS |
| HTML5 |
| Скрипты JAVA |
| Вёрстка сайта |
| Примеры PHP |
| Графика |
| Оптимизация сайта |
| Полезное |
Структура HTML документа
Урок №2
При создании сайта первое, что нужно представлять — это то, как формируется веб-страница. Это, своего рода, «фундамент» в сайтостроении.
Поэтому прежде чем, углубляться в изучение более сложных технологий создания сайтов, рекомендуется иметь хотя бы базовые сведения о HTML.
В данном уроке мы познакомимся с HTML, разберем структуру HTML документа.
HTML страница и ее структура, определяемая основными тегами
Любой HTML документ (веб-страница) должена иметь определенную структуру. Это позволит избежать возможных проблем при открытии страниц в браузерах. В качестве примера давайте рассмотрим страницу, которая содержит следующий HTML код:
<!doctype html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
<meta charset="UTF-8">
<link rel="icon" href="favicon.ico">
<meta name="description" content="Описание страницы" />
<meta name="keywords" content="Ключевые слова страницы" />
</head>
<body>
Тело документа
</body>
</html>
html - С него начинается и заканчивается html-документ. Исключение может составить так называемая - спецификация.
head - В голове документа содержатся данные о сайте или странице: заголовок, ключевые слова, описание, автор и тд
body - Мы же пока конкретнее остановимся на ТЕЛЕ документа. Именно между открывающим и закрывающим тегами body будем вставлять текст, ссылки, изображение и многое другое.
 | Важно понять и соблюдать базовую структуру html-документа. Нужно будет выучить последовательно базовых тегов, таких как html, head, body. Если её нарушить, то и Ваш html-документ будет отображаться некорректно. |
Спецификация документа HTML
Итак, разберем по порядку, что входит в данную структуру:
1. Тег DOCTYPE всегда идет в самом начале веб-страницы. — указание версии (первая строка). Для корректной работы следует указывать данную строку при верстке веб-страницы.
Это так называемая спецификация html документа.
В последней пятой версии он имеет такой вид:
<!DOCTYPE html>
Рекомендую его таким и использовать. С помощью данного элемента браузер дальше интерпретирует то, что мы ему напишем. То есть все теги в стандарте html 5.
| Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML - пятая и приведенный в примере доктайп является актуальным. |
2. Далее идет тег <html>, в конце страницы этот тег нужно закрыть, поставив </html>.
3. Затем идет область для верхней части сайта (шапки). Для этого служит тег <head>. В шапке мы указываем название нашей страницы, помещая заголовок страницы между тегами <title> и </title>. Далее указывается кодировка HTML документа (пятая строка). Это делается для правильно отображения кириллицы. Закрываем область шапки тегом </head>.
4. Мета-тег «description» — краткое содержание страницы, предназначен для поисковых систем. Данный тег является важным для поисковой оптимизации и его необходимо заполнять.
5. Мета-тег «keywords» — ключевые слова, которые могут встречаться на странице. Данный тег также предназначен для поисковиков. В настоящее время этот тег редко используется.
6. Тело страницы открывается тегом <body> и закрывается, соответственно, тегом </body>. В теле веб-страницы размещается, как правило, основной контент — текст, видео, аудио и другая информация.
>Полученная в данном уроке информация — это базовые понятия, мы изучили структуру документа HTML и познакомились с спецификацией документа HTML.
