Прежде чем понять, что такое структура html документа и перейти к ее разбору нам нужно выбрать программу в которой мы будем реализовывать наш план. Просто использовать NotePad++ или Блокнот не целесообразно. Лично Я использую программу , она отлично подходит для взаимодействия с кодом и упрощает жизнь во многих моментах. По желанию вы так же можете разобраться в программе . Она тоже очень хороша, но на мой взгляд работает значительно дольше чем 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 документа, где мы разбираем все вышеперечисленное:
Оставляйте свои комментарии ниже, нам очень важно знать ваше мнение и о чем бы вы хотели узнать в следующих наших уроках.
