"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка
Графика
Оптимизация сайта
Дополнительно


Реклама на сайте:




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


папка digest

Урок №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.

 



Создано|Обновлено: 16.01.2020.