Структура HTML документа, как создать первую web страницу

Шевченко Вячеслав

5 лет назад

Прежде чем понять, что такое структура html документа и перейти к ее разбору нам нужно выбрать программу в которой мы будем реализовывать наш план. Просто использовать NotePad++ или Блокнот не целесообразно. Лично Я использую программу Sublime Text 3, она отлично подходит для взаимодействия с кодом и упрощает жизнь во многих моментах. По желанию вы так же можете разобраться в программе Brackets от Adobe. Она тоже очень хороша, но на мой взгляд работает значительно дольше чем Sublime.

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

Для того, чтобы начать разбор, мы должны создать отдельную папку в которой будет хранится наш первый html файл. Для этого открываем наш Sublime Text 3 и переходим в раздел File > New File. Вы увидите, что у Вас создался новый файл и он будет открыт в новой вкладке редактора. Теперь нажимаем сочетание клавиш CTRL+S и сохраняем наш документ в папку проекта с название index.html. Абсолютно все файлы типа html, имеют расширение html или htm. Для стартового файла, с которого начинается сайт всегда используем имя index. Это очень важно т.к. при загрузки вашего веб сайта первым делом браузер обращает внимание на этот файл. В итоге у вас выйдет готовый документ, но он пока пустой. Давайте перейдем непосредственно к созданию структуры.

Все страницы html состоят из тегов, их минимальное количество — это три тега на страницу. Они бывают:

Парные/Непарные
Закрывающиеся/Незакрывающиеся

Если мы откроем код любого сайта в интернете, мы можем заметить что они начинаются с одной и той же строки — это декларация типа документа или “доктайп”. На данный момент существует несколько версий html, и тип документа необходим, чтобы браузер смог правильно отобразить страницу и определить версию языка.

Для старых версий языка doctype выглядел так:

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

В новых версиях, начиная с версии HTML5 и выше определяется следующим образом:

<!doctype html>

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

Так давайте это исправим и напишем следующий тег <html></html>.

<!doctype html>
<html>
</html>

Этот тег относится к типу закрывающийся и в нем располагается вся информация нашего документа. Т.е все действия связанные в дальнейшем с разработкой будут происходить именно в этом теге.

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

<title></title> — тег отвечающий за название нашей страницы. Обычно в нем прописывается название вашей организации или название сайта. В нашем случае для примера мы напишем:

<!doctype html>
<html>
<head>
<title>Наш первый сайт</title>
</head>
</html>

Следующим шагом мы зададим нашему документу meta описание.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Наш первый сайт</title>
</head>
</html>

Этот тег говорит нашему браузеру, какую кодировку нужно использовать. Важно знать, что каждый тег имеет свой атрибут и его значение. Чтоб было более понятно в коде выше атрибутом является «charset», а значением «utf-8». Значение атрибута всегда заключается в кавычки. Также есть и другие виды тега «meta», такие как «keywords» «description» и др.. Но это уже тема семантической разметки.

Давайте разберем тег под названием <body></body>. Боди тег закрывающийся и содержит в себе основную информацию страницы. Т.е после того как мы прописали выше перечисленные теги, нам нужно перейти к созданию информации, которая будет отображаться на сайте и видна пользователям. Чтобы увидеть это наглядно, давайте пропишем еще несколько тегов.

<h1></h1> — тег в котором указывается заголовок страницы. Существует 6 уровней заголовков от h1-h6. Обычно используют h1 один раз на странице, h2 подзаголовок второго уровня он может использоваться несколько раз и заголовок 3-го уровня h3. Все остальные уровни заголовков используются в крайне редком случае. Поймите одно, что каждый уровень заголовка идет один за другим от h1(самый большой) и до h6(самый маленький). Нельзя использовать теги в такой последовательности h1-h2-h3-h2, важно соблюдать последовательность.

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

В результате у нас получится вот такая структура нашего документа:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Наш первый сайт</title>
</head>
<body>
<h1>Наш первый документ</h1>
<p>Наш первый текст Наш первый текст Наш первый текст</p>
</body>
</html>

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

Подробнее об этой статье в моем видеоуроке по структуре html документа, где мы разбираем все вышеперечисленное:

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