Home » Как создавать и связывать дополнительные страницы сайта с помощью HTML

Как создавать и связывать дополнительные страницы сайта с помощью HTML

Разбираем одну из самых базовых, но критически важных тем для любого, кто хочет создать нормальный сайт. Статическая HTML-вёрстка — это основа основ, но многие почему-то думают, что для создания многостраничного сайта обязательно нужны фреймворки или CMS. Нет, товарищи! Иногда простого HTML достаточно, особенно для лендингов, документации или небольших корпоративных сайтов. Эта статья поможет вам быстро разобраться с созданием дополнительных страниц и их правильной связкой, настроить всё на VPS или выделенном сервере, и сделать это максимально эффективно.

Как это работает: основы HTML-структуры

Для начала разберёмся с тем, как браузер понимает связи между страницами. Каждая HTML-страница — это отдельный файл с расширением .html или .htm. Браузер загружает их по URL-адресам, которые мы указываем в тегах <a>.

Основная структура любой HTML-страницы выглядит так:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголовок страницы</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Главная</a></li>
                <li><a href="about.html">О нас</a></li>
                <li><a href="contact.html">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- Основной контент страницы -->
    </main>
    <footer>
        <!-- Подвал сайта -->
    </footer>
</body>
</html>

Ключевые моменты:

Относительные пути — используются для ссылок внутри сайта (about.html, contact.html)
Абсолютные пути — полные URL для внешних ссылок
Якорные ссылки — для навигации внутри страницы (#section1)
Иерархия папок — организация файлов в директории

Пошаговая настройка: от идеи до готового сайта

Давайте создадим простой многостраничный сайт с нуля. Для этого понадобится:

Текстовый редактор (VS Code, Sublime Text, или даже nano на сервере)
Веб-сервер (Apache, Nginx, или Python’s SimpleHTTPServer для тестов)
Структурированный подход к организации файлов

Шаг 1: Создание структуры проекта

mkdir my-website
cd my-website
mkdir css js img pages
touch index.html css/styles.css js/script.js

Получаем такую структуру:

my-website/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── script.js
├── img/
├── pages/
│   ├── about.html
│   ├── services.html
│   └── contact.html

Шаг 2: Создание базового шаблона

Создаём index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Главная - Мой сайт</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <ul>
                <li><a href="index.html" class="active">Главная</a></li>
                <li><a href="pages/about.html">О нас</a></li>
                <li><a href="pages/services.html">Услуги</a></li>
                <li><a href="pages/contact.html">Контакты</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section class="hero">
            <h1>Добро пожаловать на мой сайт</h1>
            <p>Это главная страница нашего проекта</p>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 Мой сайт. Все права защищены.</p>
    </footer>
</body>
</html>

Шаг 3: Создание дополнительных страниц

Создаём pages/about.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>О нас - Мой сайт</title>
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <ul>
                <li><a href="../index.html">Главная</a></li>
                <li><a href="about.html" class="active">О нас</a></li>
                <li><a href="services.html">Услуги</a></li>
                <li><a href="contact.html">Контакты</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h1>О нашей компании</h1>
            <p>Здесь расскажем о том, чем мы занимаемся</p>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 Мой сайт. Все права защищены.</p>
    </footer>
</body>
</html>

Обратите внимание на относительные пути: ../css/styles.css и ../index.html — это возврат на уровень выше из папки pages.

Практические примеры и кейсы

Кейс 1: Сайт документации

Для технической документации отлично подходит структура:

docs/
├── index.html
├── installation/
│   ├── index.html
│   ├── linux.html
│   └── windows.html
├── configuration/
│   ├── index.html
│   ├── basic.html
│   └── advanced.html
└── api/
    ├── index.html
    └── endpoints.html

Навигация строится по принципу “хлебных крошек”:

<nav class="breadcrumb">
    <a href="../index.html">Главная</a> > 
    <a href="index.html">Установка</a> > 
    <span>Linux</span>
</nav>

Кейс 2: Лендинг с якорными ссылками

Для одностраничного сайта с прокруткой:

<nav>
    <a href="#hero">Главная</a>
    <a href="#features">Возможности</a>
    <a href="#pricing">Цены</a>
    <a href="#contact">Контакты</a>
</nav>

<section id="hero">...</section>
<section id="features">...</section>
<section id="pricing">...</section>
<section id="contact">...</section>

Добавляем плавную прокрутку через CSS:

html {
    scroll-behavior: smooth;
}

Таблица сравнения подходов к навигации

Подход	Преимущества	Недостатки	Когда использовать
Относительные пути	Портативность, работает локально	Сложность при изменении структуры	Статические сайты, документация
Абсолютные пути	Всегда работают корректно	Привязка к домену	Крупные проекты, CDN
Якорные ссылки	Быстрая навигация внутри страницы	Ограниченность одной страницей	Лендинги, FAQ
JavaScript-роутинг	SPA-подход, быстрые переходы	Сложность, проблемы с SEO	Веб-приложения

Автоматизация и скрипты

Для автоматизации создания страниц можно использовать bash-скрипты:

#!/bin/bash
# create-page.sh

PAGE_NAME=$1
PAGE_TITLE=$2
TEMPLATE_DIR="templates"
PAGES_DIR="pages"

if [ -z "$PAGE_NAME" ]; then
    echo "Usage: $0 <page-name> <page-title>"
    exit 1
fi

# Создаём страницу из шаблона
sed "s/{{PAGE_TITLE}}/$PAGE_TITLE/g; s/{{PAGE_NAME}}/$PAGE_NAME/g" \
    $TEMPLATE_DIR/page-template.html > $PAGES_DIR/$PAGE_NAME.html

echo "Page $PAGE_NAME.html created successfully!"

Пример шаблона (templates/page-template.html):

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>{{PAGE_TITLE}} - Мой сайт</title>
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
    <!-- Навигация -->
    <main>
        <h1>{{PAGE_TITLE}}</h1>
        <p>Контент страницы {{PAGE_NAME}}</p>
    </main>
</body>
</html>

Python-скрипт для генерации sitemap

#!/usr/bin/env python3
import os
import xml.etree.ElementTree as ET
from datetime import datetime

def generate_sitemap(base_url, directory):
    urlset = ET.Element("urlset")
    urlset.set("xmlns", "http://www.sitemaps.org/schemas/sitemap/0.9")
    
    for root, dirs, files in os.walk(directory):
        for file in files:
            if file.endswith('.html'):
                url = ET.SubElement(urlset, "url")
                
                # Формируем URL
                rel_path = os.path.relpath(os.path.join(root, file), directory)
                if rel_path == 'index.html':
                    loc_text = base_url
                else:
                    loc_text = f"{base_url}/{rel_path}"
                
                loc = ET.SubElement(url, "loc")
                loc.text = loc_text
                
                lastmod = ET.SubElement(url, "lastmod")
                lastmod.text = datetime.now().strftime("%Y-%m-%d")
    
    tree = ET.ElementTree(urlset)
    tree.write("sitemap.xml", encoding="utf-8", xml_declaration=True)

if __name__ == "__main__":
    generate_sitemap("https://your-domain.com", ".")
    print("Sitemap generated successfully!")

Настройка веб-сервера

Для развёртывания на сервере нужно правильно настроить веб-сервер. Конфигурация Nginx:

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/your-site;
    index index.html index.htm;
    
    location / {
        try_files $uri $uri/ =404;
    }
    
    # Кеширование статических файлов
    location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # Сжатие
    gzip on;
    gzip_types text/plain text/css application/json application/javascript;
}

Для Apache (.htaccess):

RewriteEngine On

# Убираем .html из URL
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC,L]

# Кеширование
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
</IfModule>

Продвинутые техники и трюки

Условная загрузка CSS

Для оптимизации можно загружать CSS только для нужных страниц:

<!-- Базовые стили для всех страниц -->
<link rel="stylesheet" href="css/base.css">

<!-- Стили только для главной страницы -->
<link rel="stylesheet" href="css/homepage.css">

<!-- Стили только для страниц каталога -->
<link rel="stylesheet" href="css/catalog.css">

Предварительная загрузка страниц

Для ускорения навигации используем prefetch:

<link rel="prefetch" href="pages/about.html">
<link rel="prefetch" href="pages/contact.html">
<link rel="dns-prefetch" href="//fonts.googleapis.com">

Микроразметка для SEO

<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
    <a itemprop="url" href="index.html">
        <span itemprop="name">Главная</span>
    </a>
    <a itemprop="url" href="pages/about.html">
        <span itemprop="name">О нас</span>
    </a>
</nav>

Альтернативные решения

Если чистый HTML кажется слишком примитивным, есть несколько альтернатив:

Jekyll — статический генератор сайтов, работает с GitHub Pages
Hugo — быстрый генератор на Go
Eleventy — простой и гибкий генератор
Pandoc — конвертация из Markdown в HTML

Ссылки на официальную документацию:

Интересные факты и нестандартные применения

Знали ли вы, что:

Первый в мире сайт (info.cern.ch) до сих пор работает на статическом HTML
GitHub Pages бесплатно хостит статические сайты прямо из репозитория
Многие крупные компании используют статические сайты для документации (Bootstrap, Vue.js)
Статические сайты работают в 10 раз быстрее динамических

Нестандартные способы использования HTML-структуры:

Email-шаблоны — те же принципы, но с таблицами для совместимости
Электронные книги — EPUB использует HTML внутри
Презентации — библиотеки типа reveal.js
Документация API — генерация из OpenAPI спецификаций

Заключение и рекомендации

Статический HTML остаётся мощным инструментом для создания быстрых и надёжных сайтов. Основные преимущества:

Скорость — нет обращений к базе данных
Безопасность — нет уязвимостей серверного кода
Надёжность — работает на любом хостинге
SEO — поисковики отлично индексируют статические страницы

Используйте статический HTML для:

Лендингов и промо-сайтов
Документации и справочников
Портфолио и визиток
Прототипирования перед внедрением CMS

Для развёртывания рекомендую арендовать VPS с Nginx или Apache. Это даст полный контроль над конфигурацией и возможность легко масштабировать проект. Если планируете высокие нагрузки, рассмотрите выделенный сервер.

Помните: простота — это не недостаток, а преимущество. Иногда обычный HTML решает задачи лучше, чем сложные фреймворки.

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

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