Как создать многостраничный веб-сайт в HTML

Существует два типа веб-сайтов.

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

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

 

Преимущества многостраничного веб-сайта

Веб-сайт с ограниченным содержанием для отображения конечным пользователям может использовать преимущества одностраничного веб-сайта. Но есть так много причин, по которым мы видим много многостраничных веб-сайтов в Интернете.

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

 

Создание многостраничного веб-сайта в HTML

Теперь, когда мы знаем о преимуществах многостраничного веб-сайта, давайте создадим простой веб-сайт в HTML.

Шаг 1. Создание нашей первой HTML-страницы

Откройте редактор кода, такой как Visual Studio Code, Sublime Text или Notepad++. Если у вас нет текстовых редакторов, откройте блокнот.

Затем создайте базовую структуру HTML, как показано ниже (исходный код я приведу в конце блога)

9Создание 0002

Сохраните этот файл блокнота в предпочитаемой папке и сохраните его как index.html

Теперь мы изменим заголовок и создадим заголовок для этой веб-страницы

 

Шаг 2: Еще две веб-страницы

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

Шаг 3. Объединение нескольких страниц веб-сайта в HTML

Пришло время связать несколько страниц, которые мы создали на нашем веб-сайте.

Мы создадим навигационное меню, которое свяжет все страницы вместе.

Сначала мы изменим код на нашей странице index.html на следующий:

И мы также скопируем этот элемент навигации на другие страницы (about.html и contact.html)

Шаг 4 — Запуск Наш многостраничный веб-сайт

Теперь вернитесь в свою папку, в которой вы сохранили все свои файлы.

Щелкните правой кнопкой мыши файл index.html и откройте этот файл в предпочитаемом браузере.

Результат

Это откроет ваш многостраничный сайт в браузере.

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

Измените содержимое веб-страниц на содержимое, которое вы хотите добавить на свой веб-сайт.

Многостраничный веб-сайт в формате HTML — исходный код

Домашняя страница (index.html)

<голова> <мета-кодировка="UTF-8"> <тело> <навигация> Главная О нас Связаться с нами

Главная страница

О странице (about. html)

<голова> <мета-кодировка="UTF-8">

<тело> <навигация> Главная О нас Связаться с нами

О странице

Контактная страница (contact.html)

<голова> <мета-кодировка="UTF-8"> <тело> <навигация> Главная О нас Связаться с нами

Контактная страница

Как создать несколько страниц в HTML

Узнайте, как создать несколько страниц в HTML, выполнив три простых шага.

Шаг 1: Создайте папку

Первый шаг — добавить папку. Папка хранит все ваши страницы в одном месте и упрощает организацию вашего проекта.

Чтобы создать папку в Visual Studio Code, щелкните значок Explorer на левой боковой панели и щелкните значок новой папки.

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

Шаг 2: Создайте файл HTML

Второй шаг — добавление файлов HTML. Файлы HTML будут служить страницей веб-сайта, и вы можете иметь столько страниц, сколько захотите. В этом руководстве мы сделаем только четыре веб-страницы.

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

Затем добавьте три других HTML-файла и дайте имена файлам about. html , service.html и contact.html . Убедитесь, что все эти файлы находятся в одной папке.

Когда вы закончите, каталог вашего веб-сайта должен выглядеть так:

Шаг 3: Создайте панель навигации

Итак, вы почти закончили! Осталось только добавить панель навигации на все веб-страницы HTML, чтобы посетители могли перемещаться по вашему сайту.

Чтобы создать панель навигации, добавьте элементы nav внутрь элементов body . Внутри элементов nav

создайте навигационную ссылку, добавив элементы a , и каждая ссылка должна иметь атрибут href , где значением является имя файла HTML.

Например, чтобы связать страницу контактов, сделайте следующее:

 Контакт
 

Окончательный код должен выглядеть так в каждом файле HTML.

  <голова> <метакодировка="UTF-8" />