Как добавить веб-страницу к существующей?(HTML5)

Question

Я новичок в кодировании в HTML5 и создаю свой первый веб-сайт.Как бы я, например, связал страницу «События» со страницей «О нас»?Итак, в этом порядке: Главная страница> О нас> События.Я чувствую, что, наверное, слишком много думаю об этом, но нигде не могу найти ответ.Мне нужны две страницы, связанные.Могу ли я просто добавить другую опцию навигации на страницу «О нас»?

Answer 1

Если это просто статический HTML-сайт, вы можете просто настроить структуру папок следующим образом:

/home
    - index.html
    - /about
        - index.html
        - /events
            - index.html

Тогда каждая страница индекса будет связана с любым другим, как

<a href="./about">About Us</a>

Тогда просто делай что угодно с телами страниц.

Множество других способов сделать это, если у вас есть фреймворк или бэкэнд.

Answer 2

Атрибут href указывает назначение ссылки:

<a href="https://www.w3schools.com">Visit W3Schools</a> 

Синтаксис:

<a href="URL">

Вы можете использовать атрибут href для прямого перенаправления на другую страницу вашего сайта:

<a href="./contact">Contact page</a> 
<a href="./home">Home page</a> 

Answer 3

Каждая страница представляет собой отдельный .html файл.

В верхней части каждого HTML-файла у вас есть панель навигации. Это может быть построено из <li></li> элементов, отображаемых inline, или это может быть серия <div> s (опять же, с внутренними div-элементами, стилизованными inline или inline-block), или это может быть таблица (плохая идея, но просто говоря ...).

Каждая «ячейка» вашей панели навигации содержит ссылку <a href="">, которая ссылается на другие страницы. Например, с общим форматом <li>:

<ul id="navbar">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html" class="active">About</a></li>
    <li><a href="summat.html">Summat Else</a></li>
</ul>

На странице about вы бы дали ссылку на эту страницу специальному className (популярно "active"), и вы используете CSS для стилизации этой ссылки, чтобы она выглядела активной - возможно, немного более темный фон и желтый текст, или какой-то другой например.

.active{color:yellow;background:darkcyan;}

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

Если пользователь находится на домашней странице (index.html) и щелкает, скажем, страницу about - тег <a>, по которому он щелкает, отправляет его на страницу about.html. Это так просто. Если все страницы находятся в одном и том же каталоге на вашем сервере (или в xampp), то нет необходимости в каких-либо предшествующих косых чертах или чем-то подобном.

На странице about вы можете добавить еще одно дополнение к вашему меню для страницы Events - и сделать то же самое, что вы делали раньше, но теперь вы добавляете <li> для страницы events.html. Обычно навигационная панель появляется на каждой странице аналогично , но не идентично - обычно каждая страница имеет одну или несколько ссылок навигационной панели, которые уникальны для этой страницы.