HTML-ссылки между локальными страницами не работают корректно

#html

#HTML

Вопрос:

Я только начинаю изучать HTML и CSS и пытаюсь создать базовый веб-сайт. Я пытался создать ссылки между различными локальными веб-страницами, используя: <a href="Subpages/Our product/Contact.html">Contact Us</a> и поначалу это работает действительно хорошо, но затем, когда я пытаюсь использовать больше ссылок, они как бы начинают складываться, приводя к несуществующему каталогу.

Пример:

Используется первая ссылка:
file:///C:/Users/Desktop/WebPage/Main/Subpages/Contact.html но затем, когда я использую другую ссылку, она делает это:

Используется вторая ссылка:
file:///C:/Users/Desktop/Webpage/Subpages/contact/Webpage/Main.html вместо просто file:///C:/Users/Desktop/Webpage/main.html

Комментарии:

1. Похоже, вам не хватает /, указывающего на корень вашей структуры каталогов. Попробуйте изменить href=»Subpages/Our product/Contact.html » to href=»/Subpages/Our product/Contact.html » и добавьте / перед всеми другими ссылками, которые у вас есть в href

2. Большое спасибо! Это сработало.

Ответ №1:

Добро пожаловать в SO!

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

Вот базовая структура папок, демонстрирующая связывание путей:

 [project-folder]
↳[pages]
  ↳about.html
  ↳index.html
↳[scripts]
  ↳script.js
↳[stylesheets]
  ↳style.css
  

На index.html странице, если вы хотели создать ссылку на about.html страницу с помощью тега привязки: <a href="about.html">To about page</a>

Также на index.html странице, если вы хотели связать stylesheet file и JavaScript file :

<link rel="stylesheet" type="text/css" href="../stylesheets/style.css">

<script type="text/javascript" src="../scripts/script.js"></script>

../ В пути означает, что вы выходите из текущей папки ( pages ), затем scripts/ означает, что вы входите в scripts папку.

Я бы взглянул на краткое руководство по путям к HTML-файлам, чтобы лучше ознакомиться с этой темой.

Надеюсь, это поможет! Продолжайте в том же духе! 🙂