#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-файлам, чтобы лучше ознакомиться с этой темой.
Надеюсь, это поможет! Продолжайте в том же духе! 🙂