Структура HTML-документа определяет базовый каркас будущего сайта. Давайте рассмотрим структуру самой простенькой страницы html и разберём, из чего она состоит и как её сделать. Потом перейдем к более сложному варианту.
Простой пример структуры html страницы
Общая схема страницы выглядит так:
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Заголовок</title> </head> <body> Текст </body> </html> |
Страница представляет собой html-документ, который заключается между тегами <html> и </html>. В контейнере head мы указали только заголовок страницы (title). В текстовом контейнере body у нас прописано слово «Текст».
Теперь скопируем этот код в любой текстовый редактор и посмотрим, что получится.
Как создать файл html
Откроем стандартный системный блокнот и скопируем в него этот код.
После этого этот файл надо сохранить с любым именем и расширением .html.
Покажу этот процесс в картинках.
И так, после вставки кода в блокнот в меню Файл выбираем пункт Сохранить как… Откроется окошко, в котором выберите место для сохранения этого файла. Можно заранее создать отдельную папку, в которую и загрузите этот файл. Обратите внимание на нижнюю часть окошка:
Изначально в блокноте сохранение файлов настроено на формат .txt, а нам нужен формат.html Для этого раскройте строку Тип файла и выберите Все файлы:
Далее в строке Имя файла прописываете название файла и его расширение, ну например index.html
Теперь можно нажать на Сохранить и файл сохранится в Вашей папке. Остаётся только посмотреть, что же из этого выйдет. Запустите созданный файл (двойной клик мышкой) и увидите в браузере свою свежесозданную страницу.
Пример развитой структуры html страницы сайта
Теперь разберем более сложный пример html страницы — какой она бывает на сайте.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <!-- Объявление формата документа --> <html lang="ru"> <!-- Определение языка документа --> <head> <!-- Техническая информация о документе --> <meta charset="UTF-8"> <!-- Определяем кодировку символов документа --> <title>...</title> <!-- Задаем заголовок документа --> <meta name="description" content="Описание страницы" /> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей --> <link rel="icon" href="/img/favicon.png"> <!-- Указываем путь к фавикону сайта --> <script src="script.js"></script> <!-- Подключаем сценарии --> </head> <body> <!-- Основная часть документа --> <header> <!-- Шапка сайта --> <nav> </nav> <!-- Меню навигации --> </header> <main> <section> <h1>Заголовок страницы</h1> Основная часть </section> </main> <aside> Боковая колонка (сайдбар) </aside> <footer> Подвал </footer> </body> </html> |
Чтобы не усложнять пример, все, что входит в , рассмотрим отдельно:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <title>...</title> </head> <body> <h1>Основной заголовок</h1> <p>Абзац</p> <p>Абзац</p> <h2>Первый подзаголовок</h2> <p>Абзац</p> <p>Абзац</p> <h3>Первый второстепенный подзаголовок</h3> <p>Абзац</p> <p>Абзац</p> <h2>Второй подзаголовок</h2> <p>Абзац</p> <p>Абзац</p> <h3>Первый второстепенный подзаголовок</h3> <p>Абзац</p> <p>Абзац</p> <h4></h4> <p>Абзац</p> <p>Абзац</p> </body> </html> |
Расшифровка структуры html
Разберем подробно основные теги и атрибуты, использованные в примере:
<!DOCTYPE HTML> – указание браузеру, как интерпретировать данную страницу, к какой версии принадлежит HTML-документ. В нашем случае подразумевается стандарт HTML5.
<html lang=”ru”> – контейнер для всего содержимого страницы с указанием языка сайта.
<head> – технический контейнер, направленный на составление информации о странице, подключения стилей и скриптов.
<meta charset=”UTF-8″> – кодировка сайта.
<title> – название страницы. Отображается, например, на вкладке браузера, в результатах поиска, когда вы сохраняете страницу в качестве закладки и т.д.
<meta name=”description” content=”” /> – мета-описание документа.
<link rel=»stylesheet» type=»text/css» href=»» /> – подключение файла каскадных таблиц стилей (CSS) для стилизации и оформления элементов.
<link rel=»icon» href=»»> – иконка сайта, отображаемая в браузере.
<script type=»text/javascript» src=»»> – подключение внешней библиотеки JQuery последней версии.
<body> – тело документа, включающее теги, атрибуты, текст и изображения. Отображается в браузере.
<header> – шапка сайта.
<nav> – навигация по ресурсу непосредственно в шапке. Может быть также использован как в aside, так и в footer.
<main> – основной контент документа.
<section> – секция для одного типа содержания. Допустимо наличие несколько одноименных тегов.
<h1> – заголовок страницы.
<aside> – боковая колонка, также именуемая как «сайдбар».
<footer> – подвал сайта.
Элементы <h1-h6> — заголовки разделов. Эти теги имеют ранг, определяемый числом в их имени. Элемент <h1> имеет наивысший ранг, элемент <h6> имеет наименьший ранг, а два тега с одинаковым именем имеют одинаковый ранг. Используйте ранг элементов заголовка, чтобы создать схему документа.
Элементы, находящиеся внутри элемента <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом.
Статья была полезной?