Введение в создание сайтов #2 создание структуры сайта с HTML

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

1. Разделение контента на блоки

HTML предоставляет множество тегов для организации информации. Самые распространённые из них — это заголовки и параграфы, но существуют и другие элементы, которые помогают структурировать страницу.

Заголовки
Заголовки используются для создания разделов на странице. В HTML существует шесть уровней заголовков: от <h1> до <h6>. Например:

html
<h1>Основной заголовок</h1>
<h2>Подзаголовок</h2>
<h3>Ещё один уровень подзаголовка</h3>

Параграфы
Для создания текстовых блоков используется тег <p>. Пример:

html
<p>Это обычный текстовый параграф.</p>

2. Списки

Списки — это отличный способ структурировать информацию. В HTML существует два основных типа списков:

Нумерованные списки
Используются для создания упорядоченных списков. Тег для этого — <ol> (ordered list), а элементы списка заключаются в <li> (list item):

html
<ol>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>

В результате вы получите нумерованный список:

Первый элемент
Второй элемент
Третий элемент

Маркированные списки
Если порядок не имеет значения, используйте ненумерованный список с помощью тега <ul> (unordered list):

html
<ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
</ul>

В результате получится список с маркерами (точками):
Элемент 1
Элемент 2
Элемент 3

3. Вставка изображений

Изображения — важный элемент веб-страниц. Чтобы добавить изображение, используется тег <img>. У него есть обязательный атрибут src, который указывает путь к изображению, и атрибут alt, который описывает изображение для поисковых систем и людей с нарушениями зрения.

Пример добавления изображения:

html
<img src="image.jpg" alt="Описание изображения">

Атрибут src указывает на местоположение файла изображения, а alt содержит текстовое описание, которое отобразится, если изображение не удастся загрузить.

4. Добавление ссылок

Ссылки на другие страницы создаются с помощью тега <a>. Основной атрибут — href, который указывает адрес ссылки. Пример:

html
<a href="https://example.com">Перейти на другой сайт</a>

В этом примере по нажатию на текст "Перейти на другой сайт" пользователь перейдет на указанный сайт.

5. Семантические теги

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

<header> — верхняя часть страницы или раздела.
<nav> — навигация по сайту.
<article> — отдельная статья или запись.
<section> — раздел внутри страницы.
<footer> — нижняя часть страницы.

Пример использования семантических тегов:

html
<header>
    <h1>Заголовок сайта</h1>
    <nav>
        <ul>
            <li><a href="#home">Главная</a></li>
            <li><a href="#about">О нас</a></li>
            <li><a href="#contact">Контакты</a></li>
        </ul>
    </nav>
</header>
<section>
    <article>
        <h2>Заголовок статьи</h2>
        <p>Текст статьи.</p>
    </article>
</section>
<footer>
    <p>© 2024 Мой сайт</p>
</footer>

6. Пример полноценной страницы

Теперь давайте объединим все элементы в одну простую страницу:

html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя страница</title>
</head>
<body>
    <header>
        <h1>Добро пожаловать на мой сайт</h1>
        <nav>
            <ul>
                <li><a href="#home">Главная</a></li>
                <li><a href="#about">О нас</a></li>
                <li><a href="#contact">Контакты</a></li>
            </ul>
        </nav>
    </header>
    
    <section>
        <h2>О сайте</h2>
        <p>Этот сайт создан с нуля с использованием HTML. Мы учимся создавать веб-страницы, добавляя различные элементы, такие как заголовки, списки, изображения и ссылки.</p>
        
        <h3>Основные возможности:</h3>
        <ul>
            <li>Создание структуры с помощью заголовков и параграфов</li>
            <li>Добавление изображений и ссылок</li>
            <li>Использование списков для упорядочивания информации</li>
        </ul>
        
        <img src="example.jpg" alt="Пример изображения">
    </section>
    
    <footer>
        <p>© 2024 Мой сайт. Все права защищены.</p>
    </footer>
</body>
</html>

Заключение

Теперь вы знаете, как создавать более сложные структуры веб-страниц с использованием заголовков, списков, изображений и ссылок. Семантические теги помогут улучшить восприятие вашей страницы как пользователями, так и поисковыми системами.

Что будет дальше?

В следующей статье мы перейдем к стилизации страницы с помощью CSS, чтобы сделать её внешний вид привлекательнее и профессиональнее.