Как сделать многостраничный сайт html css

Как правильно создать многостраничный сайт на чистом HTML CSS JS?

Мне нужно создать многостраничный сайт, сначала делал по-простому, то-есть много HTML доков в проекте и по нажатию на кнопку открывался тот или иной документ. Но были перезагрузки. Вот ссылка на сайт, в хедере наглядно видно. https://famous-dango-326bce.netlify.app

• Вопрос задан 09 февр.
• 659 просмотров

Комментировать
Решения вопроса 1

Немного не понимаю вашего вопроса, вы всё правильно делаете. Можно для каждой страницы создавать директорию, а в ней считывать index.html, но это немного не правильно. Хотя решит проблему, если у вас сотня страниц и разделов сайта, тогда будет логично разделить разделы на директории. Не совсем понял проблемы с первзагрузкой, страницы на вашем сайте и должны перезагружается, у вас ведь не SPA приложение, а HTML сайт.

Ответ написан 09 февр.
vittallyyaaa @vittallyyaaa Автор вопроса
я бы и не спрашивал, не видел проблемы, мне просто сказали что так не должно быть. Спасибо!
vittallyyaaa @vittallyyaaa Автор вопроса
Может у вас есть какие-то рекомендации, это мой первый сверстаный сайт, был бы рад услышать

vittallyyaaa, у вас два пути (на самом деле больше, но это на любителя) — либо много папок и в каждой файл index.html или много html файлов с разными именами в корне (как сейчас). Оба имеют права на жизнь, но мне вот например больше нравится когда адреса site.ru/page вместо site.ru/page.html

Но в целом, если вы не планируете продвижение сайта (не продукта) в печатном формате, то всем по большому счёту плевать что там в адресной строке.

Ещё вам наверно стоит почитать про сборщики и/или шаблонизаторы. Вот у вас допустим 15 страниц, но на всех есть одинаковые блоки (подвал, навигация и тд). Если через полгода вам понадобится что-то там убрать, добавить или поменять, то нужно будет это сделать 15 раз или 1, если используете сборщик.

Как сделать сайт многостраничным

Освойте создание многостраничного сайта с этой практической статьей, которая охватывает все основы от структуры до стилей CSS.

Алексей Кодов
Автор статьи
2 июня 2023 в 12:05

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

1. Определение структуры сайта

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

• Главная страница
• О нас
• Услуги
• Услуга 1
• Услуга 2
• Блог
• Контакты

2. Создание разметки HTML для каждой страницы

Создайте отдельный HTML-файл для каждой страницы сайта. Например, для главной страницы создайте файл index.html , для страницы «О нас» — about.html и т.д. В каждом файле добавьте базовую разметку HTML и добавьте контент, соответствующий этой странице.

Пример базовой разметки HTML:

3. Создание навигационного меню

Пример навигационного меню:

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

4. Оформление сайта с помощью CSS

После того, как все страницы созданы и связаны между собой, можно приступить к оформлению сайта с помощью CSS. Создайте отдельный файл стилей, например, styles.css , и подключите его к каждой странице сайта.

Пример подключения файла стилей:

В файле styles.css определите стили для различных элементов сайта, чтобы придать ему единый и современный вид.

�� Процесс создания многостраничного сайта может быть сложным, особенно для новичков. Не стесняйтесь искать дополнительные материалы и примеры в интернете, а также практиковать свои навыки на реальных проектах.

Удачи в освоении веб-разработки! ��

Добавляем новую страничку

которая означает что файла нет. Что конечно предсказуемо, но уныло.

Так что давайте добавим файлик hello.php вот с таким содержимым:

  lang="en">  charset="UTF-8">  http-equiv="X-UA-Compatible" content="IE=edge">  name="viewport" content="width=device-width, initial-scale=1.0"> Document  Я новая страничка. 1111 =)  

хм, все равно 404

О! Заработало! То есть получается мы после http://localhost/ должны указывать путь к php файлу. Ну ладно…

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

А давайте попробуем картинку добавить. И причем так, чтобы она у нас на сервере лежала. Вот такую, например,:

сохраняем ее в папку где лежит файл, причем лучше подпапку images создать, вот так:

теперь давайте подключим ее на новой странице, для этого надо указать ее путь относительно папки с проектом. И еще путь ОБЯЗАТЕЛЬНО должен начинаться с прямого слеша / вот так:

  lang="en">  Я новая страничка. 1111 =)  src="/images/025_picture-47918.gif" alt="">   

Только возникает тогда вопрос почему php понял что эта картинка и не стал интерпретировать файлик, мы ведь даже можем его открыть по прямой ссылке http://localhost/images/025_picture-47918.gif

более того мы можем даже открыть папку: http://localhost/images/

а это, товарищи, между прочим дыра в безопасности. Неужели все это делает php?

Настраиваем Nginx

А вот и нет! На самом деле это делает не php. На самом деле когда мы пишем http://localhost/images/ запросы идут не к php, а сначала к веб-серверу Nginx (engine x — по-русски произносится как энджи́нкс, но я почему-то говорю нгинкс… как пишется так и слышится)

Это специальная программа, которая в общем не предназначена исполнять какой-нибудь код, ее главная задача перенаправлять запросы разным интерпретаторам и раздавать файлы. И делает она это настолько виртуозно что может одновременно обслуживать десятки тысяч соединений и раздавать тысячи файлов. За что ее все нежно любят *_*

Давайте заглянем в настройки этого самого nginx

Так как nginx может обслуживать сразу несколько сайтов, то в блоке sites-enabled можно выбрать какой именно сайт мы хотим настроить. Так как мы работаем только с одним проектом и никаких дополнительных настроек не производили, то мы выбираем 00-default.con, там мы увидим:

в общем первое что нам надо сделать это отключить autoindex, можно поставить значение off, либо просто закомментить строку, вот так:

и теперь надо перезапустить nginx

Forbidden – то есть запрещено, то что нам и надо =)

А теперь сделаем еще одну вещь которая может показаться странной, но мы сделаем так чтобы все запросы, если файл не найден, шли в index.php, для этого поправим строчку с try_files:

try_files $uri $uri/ /index.php$is_args$args;

снова перезапускаем nginx

попробуем теперь зайти, например, на такую страницу http://localhost/page/about

по идее нас должно переправить на index.php,

Узнаем URL запроса

Что же нам это дало? А то что мы теперь управляем всеми запросами, которые идут не напрямую к обычным файлам с помощью одного index.php, а это в свою очередь дает нам возможность более централизовано руководить приложением.

Давайте вообще посмотрим, как мы можем использовать информацию о ссылке внутри нашего файлика index.php

И так, каждый раз, когда запускается php файл ему доступен список предопределенных переменных https://www.php.net/manual/ru/reserved.variables.php

давайте глянем что в них оказывается, когда мы будем открывать страничку с разными адресами, добавим в index.php:

  lang="en">   print_r($_SERVER) ?>  

получим такую нечитаемую кашу

на самом деле php сформировал нам ответ в красивом виде, но так как браузер игнорит всякие переносы то выглядит это уродливо.

Можно даже глянуть код страницы (Ctrl+U) и увидеть

К счастью в html есть специальный тег pre которые учитывает все переносы и отступы, я кстати использую его для вывода кода во всех своих статьях. В общем просто берем и оборачиваем тегом нашу php вставку.

   print_r($_SERVER) ?>   

Запускаем и скроллим пока не найдем пункт REQUEST_URI

если присмотреться в нем написано тоже самое что и в строке бразуера.

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

$_SERVER – это словарик, то есть у него есть ключи и значения, для доступа используется оператор квадратных скобок [] , вот так:

   print_r($_SERVER["REQUEST_URI"]) ?>   

прикольно! =) Но что нам с этого?

Делаем менюшку

Попробуем сделать меню. У меня допустим будет сайт о галактиках и туманностях во вселенной. Пусть у меня будет три странички. Например:

• Главная
• Галактика Андромеда
• Туманность Ориона

Давайте запилим меню.

Подключаем бутстрап

и копируем себе css в head файла index.php

как-то так получится

  lang="en">  charset="UTF-8">  http-equiv="X-UA-Compatible" content="IE=edge">  name="viewport" content="width=device-width, initial-scale=1.0"> Document  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">   print_r($_SERVER["REQUEST_URI"]) ?>   

теперь нам надо вставить меню навигации, опять же его можно скопипастить с сайта bootstrap, идем сюда https://getbootstrap.com/docs/5.0/components/navbar/#nav

и пихаем в body

 class="navbar navbar-expand-lg navbar-light bg-light">  class="container">  class="navbar-brand" href="#">Navbar  class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  class="navbar-toggler-icon">   class="collapse navbar-collapse" id="navbarNav">  class="navbar-nav">  class="nav-item">  class="nav-link active" aria-current="page" href="#">Home   class="nav-item">  class="nav-link" href="#">Features   class="nav-item">  class="nav-link" href="#">Pricing   class="nav-item">  class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled       print_r($_SERVER["REQUEST_URI"]) ?> 

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

давайте перепишем его так чтобы остались только нужные нам:

получится вот так:

чтобы наш /hello/words выровнялось по навигации, обернем нашу инструкцию в класс .container , это специальный класс в бутстрапе, который добавляет отступы по краям. Причем он респонсивный, то есть на больших экранах отступы больше, на маленьких – меньше, на телефоне вообще могут отсутствовать. Вот так:

 class="navbar navbar-expand-lg navbar-light bg-light">  class="container">  print_r($_SERVER["REQUEST_URI"]) ?>  

теперь уже симпатичнее

Кстати вот эта надпись Navbar это на самом деле место под лого сайта, давайте подключим fontawesome и запихаем туда какую-нибудь иконку,

   href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />   class="navbar navbar-expand-lg navbar-light bg-light">  class="container"> -->  class="navbar-brand" href="#"> class="fas fa-meteor">  class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  class="navbar-toggler-icon">   class="collapse navbar-collapse" id="navbarNav">  class="navbar-nav">     class="container">  print_r($_SERVER["REQUEST_URI"]) ?>   

давайте теперь как-нибудь сделаем так, чтобы тыкая на разные пункты меню у нас появлялся разные текст внизу, в принципе тут все просто. Достаточно прописать url у каждого пункта меню. Прописываем:

попробуем теперь потыкать:

То есть формально мы вроде страницы не переключаем, но выглядит будто бы мы таки переключаем. Пусть вас это не смущает, так работают 90% сайтов в мире

Управляем содержимым

Давайте теперь попробуем чего-нибудь вывести, например, на главной страницу будет список ссылок на все страницы (ну типа продублируем навигацию), а на страницах туманностей будут картинки

Способ №1

Это самый неправильный способ, никогда так не делайте, но в принципе он сам естественный. Мы просто будем проверять значение переменной $_SERVER[«REQUEST_URI»] и в зависимости от значения выводить тот или иной кусок.

PHP нас не ограничивает в таком написании, у него есть поддержка if , и делается это так:

  class="navbar navbar-expand-lg navbar-light bg-light">  class="container">  if ($_SERVER["REQUEST_URI"] == "/")  ?> Вы на главной странице! =)  > elseif ($_SERVER["REQUEST_URI"] == "/andromeda")  ?> Тут мы вам расскажем о волшебной Галактике Андромеда  > elseif ($_SERVER["REQUEST_URI"] == "/orion")  ?> Был значит один кот, и носил он галактику в поясе Ориона  > ?>   

то есть логику мы оборачиваем в а вывод в браузер помещаем внутрь как будто это тело if

ну типа работает, но читать очень тяжело, да и писать долго.

Способ №2

По убогости примерно, как первый, но писать меньше. Делается значит так, вместо того чтобы писать кучу php оберток делается одна и в нее все помещается. Выглядит так

 class="navbar navbar-expand-lg navbar-light bg-light">  class="container">  if ($_SERVER["REQUEST_URI"] == "/")  echo "Вы на главной странице! =)
"; echo "И разметку могу принтовать"; > elseif ($_SERVER["REQUEST_URI"] == "/andromeda")  echo "Тут мы вам расскажем о волшебной Галактике Андромеда"; > elseif ($_SERVER["REQUEST_URI"] == "/orion")  echo "Был значит один кот, и носил он галактику в поясе Ориона"; > ?>  

В общем, в PHP есть специальный оператор echo , который вставляет указанный текст в содержимое html ответа ну или правильнее сказать в содержимое web-ответа, ведь ответ это не всегда html файлик, может быть и json какой-то или вообще картинка, а то и простой файл.

Кстати никто не мешает нам объявлять переменные и использовать их:

 $url = $_SERVER["REQUEST_URI"]; // у переменной в PHP слева ставим $ if ($url == "/")  // и при обращении тоже echo "Вы на главной странице! =)
"; echo "И разметку могу принтовать"; > elseif ($url == "/andromeda")  echo "Тут мы вам расскажем о волшебной Галактике Андромеда"; > elseif ($url == "/orion")  echo "Был значит один кот, и носил он галактику в поясе Ориона"; > ?> 

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

 $url = $_SERVER["REQUEST_URI"]; echo "Вы на странице: $url, будьте внимательны!
"; // вместо url подставится значение $url if ($url == "/")  echo "Вы на главной странице! =)
"; echo "И разметку могу принтовать"; > elseif ($url == "/andromeda")  echo "Тут мы вам расскажем о волшебной Галактике Андромеда"; > elseif ($url == "/orion")  echo "Был значит один кот, и носил он галактику в поясе Ориона"; > ?> 

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

Способ №3

Самый грамотный способ. По крайне мере если используем базовый PHP. Идея такая: взять и создать под страницы отдельные файлы и в зависимости от адреса выводит их содержимое.

Создадим отдельную папку, назовем ее views, создадим в ней три файлика и загоним в файлике содержимое страниц, вот так:

а теперь сделаем так чтобы в нашем index.php в зависимости от url выводилось содержимое этих файлов, для этого будем использовать еще один специальный оператор require, который просто берет и вставляет то что находится внутри указанного после оператора файла:

 class="container">  $url = $_SERVER["REQUEST_URI"]; echo "Вы на странице: $url, будьте внимательны!
"; if ($url == "/")  require "views/main.php"; > elseif ($url == "/andromeda")  require "views/andromeda.php"; > elseif ($url == "/orion")  require "views/orion.php"; > ?>  

работает так же, но теперь мы можем создавать содержимое любой сложности в отдельных файликах! =)

Настраиваем безопасность

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

Например, он может зайти по пути http://localhost/views/orion.php и увидеть содержимое файла orion.php

И казалось бы чего страшного то? Но дело в том, что при разработке реального приложения, у вас в файлах может лежать какая-та информация которую вы не хотели бы показывать стороннему пользователю. Или какой-то скрипт которые будучи выполненным не из index.php может повести себя не предсказуемо.

Поэтому все современные веб-движки рекомендуют создавать отдельную папку public в которой будут лежать index.php, всякие картинки, стили и все такое. Давайте настроим наше приложение чтобы оно работало таким образом:

попытка открыть http://localhost нам выдаст

теперь надо настроить laragon чтобы он в качестве root папки использовал папку public, идем в laragon,

выбираем папку public

и вроде как и всё, но проблема в том что laragon сбросил наши настройки nginx, давайте зайдем туда и глянем:

и так, чтобы эти настройки не терялись, у вас по сути два варианта, первый: это вы просто таскаете папку c laragon на флешке и с нее запускаетесь, и второй это создать настройку nginx под себя и просто переключать на нее.

Делается это так:

в открывшейся папке копируете 00-default.conf и называете как-нибудь, чтобы идентифицировать файлик и свою принадлежность к нему

затем правите следующим образом

и тыкаем перегрузить

я выбрал порт 9007 , и теперь я буду открывать свое приложение по адресу http://localhost:9007

хохо! Работает! Только ошибки сыпятся. Но оно и понятно у нас ведь в index.php пути относительно index.php строятся, а надо чтобы он ходил на папку выше. Поэтому идем в index.php и правим

  lang="en">   class="navbar navbar-expand-lg navbar-light bg-light">  class="container">  $url = $_SERVER["REQUEST_URI"]; echo "Вы на странице: $url, будьте внимательны!
"; if ($url == "/")  require "../views/main.php"; // > elseif ($url == "/andromeda")  require "../views/andromeda.php"; // > elseif ($url == "/orion")  require "../views/orion.php"; // и здесь > ?>    

И самое замечательное что теперь никто не сможет посмотреть содержимое отдельного php файла

Такие дела *______*

Разбираемся с обработкой простых веб-запросов и делаем простой многостраничный сайт.

Прежде чем начать делать это задание вам надо придумать себе тему про что вы будете делать сайт.

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

Я выбрал тему космических туманностей. У меня в качестве подопытных: Галактика Андромеда и Туманность Ориона

Как сделать многостраничный сайт html css

Фриланс маркетплейс

Пользователей онлайн: 3063

Последний заказ: 2 сек. назад

Логотип и брендинг

Презентации и инфографика

Арт и иллюстрации

Веб и мобильный дизайн

Маркетплейсы и соцсети

Интерьер и экстерьер

Обработка и редактирование

Полиграфия

Промышленный дизайн

Наружная реклама

Доработка и настройка сайта

Создание сайтов

Десктоп программирование

Скрипты и боты

Мобильные приложения

Сервера и хостинг

Юзабилити, тесты и помощь

Тексты и наполнение сайта

Набор текста

Продающие и бизнес тексты

Резюме и вакансии

Статистика и аналитика

Соцсети и SMM

Контекстная реклама

Базы данных и клиентов

E-mail рассылки

Маркетплейсы и доски объявлений

Реклама и PR

Аудиозапись и озвучка

Музыка и песни

Редактирование аудио

Интро и анимация логотипа

Видеоролики

Персональный помощник

Бухгалтерия и налоги

Обзвоны и продажи

Юридическая помощь

Продажа сайтов

Подбор персонала

Презентация

Обучение и консалтинг

Стройка и ремонт

Логотип и брендинг

Презентации и инфографика

Арт и иллюстрации

Веб и мобильный дизайн

Маркетплейсы и соцсети

Интерьер и экстерьер

Обработка и редактирование

Полиграфия

Промышленный дизайн

Наружная реклама

Доработка и настройка сайта

Создание сайтов

Десктоп программирование

Скрипты и боты

Мобильные приложения

Сервера и хостинг

Юзабилити, тесты и помощь

Тексты и наполнение сайта

Набор текста

Продающие и бизнес тексты

Резюме и вакансии

Статистика и аналитика

Соцсети и SMM

Контекстная реклама

Базы данных и клиентов

E-mail рассылки

Маркетплейсы и доски объявлений

Реклама и PR

Аудиозапись и озвучка

Музыка и песни

Редактирование аудио

Интро и анимация логотипа