worldwide open-source software - software:development:web:docs:learn:html:introduction_to_html

document_and_website_structure

anonymous@undisclosed.example.com (Anonymous) — Mon, 29 Jan 2024 17:33:08 +0000

Структура документа и веб-сайта

В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), HTML также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.

Необходимые знания:	Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок.
Задача:	Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.

Основные составляющие документа

Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:

Заголовок (колонтитул)

Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.

Навигационное меню

Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.

Основное содержимое

Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!

Боковая панель

Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.

Нижний колонтитул (футер)

Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.

«Типичный веб-сайт» может быть структурирован примерно так:

HTML для структурирования содержимого

Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным CSS вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и использовать правильный элемент для правильной работы.

Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция «розового» и «большого шрифта» не будет полезной?

Примечание: Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).

В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их функциональности — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как «найти основную навигацию» или «найти основное содержимое». Как мы упоминали ранее в ходе курса, существует ряд последствий неиспользования правильной структуры элементов и семантики для правильной работы.

Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:

Заголовок: <header>.
Навигационное меню: <nav>.
Основное содержимое: <main>, с различными подразделами содержимого, представленными элементами <article>, <section> и <div>.
Боковая панель: <aside>, обычно располагается внутри <main>.
Нижний колонтитул: <footer>.

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

Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории Github). Мы хотели бы, чтобы вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.

href	Значение этого атрибута определяет веб-адрес ссылки. Например: `href=«https://www.mozilla.org/»`.
title	Атрибут `title` указывает дополнительную информацию о ссылке, например описание страницы, на которую имеется ссылка. Например, `title=«The Mozilla homepage»`. Оно появляется в виде всплывающей подсказки при наведении курсора на элемент.
target	Атрибут `target` определяет контекст просмотра, используемый для отображения ссылки. Например, `target=«_blank»` отобразит ссылку в новой вкладке. Если вы хотите отображать связанный контент на текущей вкладке, просто опустите этот атрибут.

Символ	Эквивалент ссылки на символ
<	<
>	>
«	"
'	'
&	&

worldwide open-source software - software:development:web:docs:learn:html:introduction_to_html

document_and_website_structure

Структура документа и веб-сайта

Основные составляющие документа

Заголовок (колонтитул)

Навигационное меню

Основное содержимое

Боковая панель

Нижний колонтитул (футер)

HTML для структурирования содержимого

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

Подробнее об элементах HTML макета

Несемантические обёртки

Перенос строки и горизонтальный разделитель

Планирование простого веб-сайта

Самостоятельная работа: создайте свою собственную карту сайта

Заключение

Дополнительные материалы

getting_started

Начало работы с HTML

Что такое HTML?

Анатомия HTML-элемента

Создание первого HTML-элемента

Вложенные элементы

Пустотные элементы

Атрибуты

Добавление атрибутов к элементу

Логические атрибуты

Пропуск кавычек вокруг значений атрибутов

Одинарные или двойные кавычки?

Анатомия HTML-документа

Добавление функций в HTML-документ

Пробелы в HTML

Ссылки на сущности: включение специальных символов в HTML.

HTML-комментарии

Заключение