Как связать html файл с папкой
Обновлено: 03.05.2024
Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.
Абсолютные ссылки
Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.
Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.
Относительные ссылки
То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:
Предположим, мы загрузили страницу по такому адресу:
Во всех примерах ниже приведены относительная ссылка и полный путь, в который браузер расшифровывает ссылку.
Ссылка на файл в той же папке
Файл расположен в той же папке, где и текущая страница. Пишется без дополнительных знаков.
Ссылка на файл в папке ниже текущей
Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.
Ссылка относительно корня сайта
Файл расположен в корневой папке сайта. Для ссылки относительно корня используется / . Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.
Файл на два уровня ниже корня сайта.
Ссылка на папку выше текущей
На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../ .
На две папки вверх. Синтаксис ../ может повторяться сколько угодно раз, главное, чтобы все папки «по пути» существовали.
Комбинированная ссылка
На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2 .
Все приведённые примеры одной картинкой:
ID-ссылки (якорные ссылки)
Ставим якорную ссылку на той же странице:
Ставим якорную ссылку на другую страницу:
Пройдите интерактивный тренажёр по якорным ссылкам, чтобы узнать наверняка, как это делается.
Что будет, если ошибиться
Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.
Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/ .
Сейчас, конечно, такого никто в больших компаниях не допустит — но если вы сначала делаете страничку на своём компьютере, могут быть нюансы. Поэтому пользуйтесь нашей шпаргалкой, чтобы избежать ошибок.
Не делайте плохо, делайте хорошо
Разберитесь в нюансах вёрстки с HTML Academy — знакомство с HTML и CSS бесплатное.
Это второй способ описания стилей. С первым способом вы познакомились в предыдущем уроке. Этот способ более эффективный и удобный. Итак, нам поможет тег (дескриптор, контейнер) . Он имеет три важных атрибута: type , rel , href . Type – указывает тип подключаемого документа. Rel – сообщает отношение между файлами. Href – ссылка на файл.
Пример подключения файла CSS
Пример подключения файла, лежащего в папке, которая находится в этой директории "include"
Пример подключения файла, лежащего в папке, которая находится в директории на другом уровне
Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.
- Подключите стили с именем thr , которые лежат в папке main . Папка main находится на уровень ниже, чем файл к которому подключаем (возможно, нужно использовать ../ )
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Извините за это всплывающее окно, меня они тоже раздражают.
Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.
Сейчас я вам покажу один из моих любимых фокусов в Windows XP. На пользователей действует отрезвляюще.
Берём WinXP, в любом месте файловой системы создаём папку с именем x.files. Предположим, в ней у нас находятся все 9 сезонов любимого одноимённого сериала.
Рядом с ней создадим (сами, вручную создадим) текстовый файл x.txt и переименуем его в x.html. Допустим, этот файл был сохранён с интернета и в спешке, чтобы не заморачиваться, мы дали ему название x.
Представили: x.files - все сезоны сериала, x.html - сохранённый с интернета файл, который нам больше не нужен. Удалим его!
Можно использовать Shift Del , чтобы удалить минуя корзину.
А фокус в том, что несмотря на то, что файлы были созданы в разное время и несмотря на то, что содержимое папки и файла никак не связаны, Windows XP удалит папку вместе с файлом, не спрашивая. Такие настройки выставлены в ней по умолчанию.
При удалении файла с расширением .htm или .html система тупо ищет папку с тем же именем и с постфиксом .files или _files и эта папка идёт вслед за файлом.
Наш каталог с сериалом мог называться не x.files, а x_files - в любом случае он был обречён.
Понятно, что само название папки роли не играет, она может называться important_files, working.files, some_files, в этом случае при удалении стоящего рядом файла important.htm, working.html или some.html, удалится соответствующая папка.
Попробуем понять как работает система, по какой вообще логике.
Эксперимент 1
Создаём где-нибудь две папки и два файла:
При удалении любого из файлов, удаляется папка my.files. При удалении любой папки удаляется файл my.htm. Запомнили и поехали дальше.
Эксперимент 2
Создадим папку x.files. С помощью Mozilla Firefox сохраним какой-либо файл с интернета под именем x.html - автоматически появится папка x_files.
При удалении x.html удалится папка x.files (в которой, не забываем, находится наш любимый сериал), а папка x_files с интернет-хламом останется на диске.
Результаты
В свойствах експлорера (обычного, не интернет; Пуск -> Панель управления -> Свойства папки) на вкладке «Вид» есть настройки того, как поступать системе с парами веб-страниц и папок. Они следующие:
Показывать и обрабатывать пару как единый файл
Стоит якобы по умолчанию. Не работает с момента выхода операционной системы Windows 2000. Ни один сервис-пак этот глюк не исправил, мало того, он тянется из системы в систему.
Показывать обе части и обрабатывать их отдельно
Другими словами, «разбить» пару. Эта настройка должна была стоять по умолчанию, потому что не приводит к потере данных: при удалении одного из файлов пары, другой не трогается.
Показывать обе части, но обрабатывать их как единый файл
Хоть и не стоит по умолчанию (в смысле в настройках), но работает именно она.
Но это в Windows 2000 и XP. В Windows Vista и 2008 разработчики исправили проблему: они просто убрали все эти пункты настройки нахрен. Теперь «разбить» пару невозможно, по крайней мере штатными средствами.
Во всей линейке Windows - начиная с Windows 2000 и заканчивая Windows 2008 Server - по умолчанию стоит небезопасная настройка операций с веб-парами. Можно случайно, в результате простого совпадения имён, лишиться своих данных.
При удалении одного из элементов веб-пары (файла или папки), сопутствующий ему элемент система ищет тупо по алфавиту, не проверяя на соответствие ни его размер, ни дату создания. Удаляет первый попавшийся.
Система удаляет пару (вернее то, что она считает парой) без дополнительных вопросов, даже если есть неоднозначность и даже если удаление происходит напрямую, без корзины.
Спокойно. Писать пути я умею. Мне интересно, как правильно навести "порядок в файлах", не запутаться и не создавать сотни папок (дублировать тоже не охото).
Пример:
У меня есть директория puplic_html, и вот пошли файлики(порядок написанного не соответствует сортировке):
css
fonts
php
js
services
img
index.html
В папке "services" лежат папки с сайтами услуг
как мне правильно приписывать пути к папке img js php в корне ?
Я писал так: img src=". /img/icons/nameicon.jpg" alt=""
но шота не работает. как правильно?
Простой 2 комментария
Анатолий уже ответил, немного структурирую информацию, может кому пригодиться. Нужно отличать пути в файловой системе и на сайте (через веб-сервер). У каждой файловой системы есть корень - это / (слеш), если путь начинается со слеша, это абсолютный путь от корня файловой системы, если начинается не со слеша, это относительный путь (относительный - потому что относительно текущего положения файла). Относительные пути могут начинаться с ../ и ./ - вариант с двумя точками это выход на уровень выше, вариант с одной строкой - это аналогия как я без ничего, то есть в текущей папке.
Зачем нужны относительные пути? Чтобы укоротить путь или убрать зависимость от места хранения файлов, пример: Вы разрабатываете сайт, некоторые статические файлы лежат глубоко в папке с названием пакета, номера версии, юзера, мы прописали в скрипт картинку, скрипт находиться в папке /static/vasya/script - а прописанный абсолютный путь от корня веб-сервера картинки /static/vasya/images, в конце vasya - это автоматически созданные папки пользователей, этот Вася меняет логин на supervasya - по какой-то причине у Вас создан функционал, который переименовывает папки юзеров при изменении логина. И получается что путь изменился и картинка больше не работает (если путь не меняется автоматом), чтобы такой ситуации не было можно использовать просто относительные пути, так как папки script и images находятся в одной папке (/static/supervasya) то просто водим на один уровень выше и заходим в папку images и получаем наш файлик, то есть проще и работать будет всегда (если папки относительно друг друга не менялись). Относительный путь выглядеть будет так ../images.
История с абсолютными путями веб-сервера выглядит похожим образом, нужно запомнить, что / (то есть корень сайта) это та папка, которую мы прописываем в конфиге как root, то есть если корень веб-сервера /var/www/site.name/web то картинка picture.jpg, которая лежит в папке /var/www/site.name/web/images/ на сайте всегда. будет иметь вид /images/picture.jpg вне зависимости от того в какой папке находиться файл, где будет прописан этот путь, повторюсь - это все потому что путь начинается со слеша.
Если стоит вопрос какие пути для сайта выбрать, то лучше делайте абсолютные то есть от корня со ведущим слешем спереди.
Теперь, почему абсолютные пути сайта не работают в файловой системе на компе разработчика, все очень просто - корень веб-сервера это папка внутри проекта, а когда мы открываем хтмл файл вне веб-сервера, мы имеем дело с корнем той файловой системы где это лежит, то есть от корня диска и поэтому пути не совпадают, поэтому всегда веб-разработку начинайте с установки веб-сервера (denwer, openserver, vagrant или docker с установленными веб-серверами и т.п.). Знания того как это работает когда-нибудь да пригодятся, особенно когда начнёте копать куда-то глубже чем верстка (а копать рано или поздно начнёте). Работать без веб-сервера можно, но нужно понимать специфику и понимать, что иногда в очень крайних случаях могут быть ошибки типа не сработает images/pictures.jpg, но сработает ./images/picture.jpg, почему так? Разные ОС, версии пакетов, особенности разных веб-серверов и фаз Луны и дня в женском календаре жены ведущего разработчика пакета, который пять лет не менялся и все работало, а потом внезапно сделал рефакторинг без изменения функционала и пути сломались. Ну в общем Вы поняли
При разработке сайта часто приходится прописывать пути к файлам, ссылки на документы, страницы.
В книгах по компьютерным технологиям можно часто встретить употребление терминов абсолютного и относительного пути к файлам. Часто автор не разъясняет, что означает тот или иной путь. Читатель, соответственно, путается, когда автор в последствии говорит об использовании абсолютного и(или) относительного пути.
Допустим, у Вас есть сайт и Вам нужно создать гиперссылку(ссылку) на одну из страниц сайта. Здесь нужно выбрать какой использовать тип пути: относительный или абсолютный.
Очень важно понимать, где какой путь нужно и лучше использовать. Абсолютный путь можно указать только одним способом. А вот относительный в отличии от абсолютного имеет несколько вариантов использования.
Подробнее о том как и где используется абсолютный и относительный путь к файлам, я попытаюсь вам сегодня рассказать.
Так как большую часть своего времени я уделяю web-технологиям, то примеры буду приводить относящиеся к созданию сайтов.
Оглавление
Абсолютный путь
Немного отступив от темы хочу вкратце рассказать про то что такое URL.
Каждая веб-страница или документ в сети Интернет имеет собственный уникальный адрес, который и называется URL.
URL – единообразный локатор (определитель местонахождения) ресурса. Расшифровывается URL как Uniform Resource Locator(унифицированный адрес ресурса). Можно так же встретить и такую расшифровку как Universal Resource Locator(универсальный локатор ресурса). Этот способ записи адреса стандартизирован в сети Интернет. Более общая и широкая система идентификации ресурсов URI постепенно заменяет термин URL.
URI — это символьная строка, которая идентифицирует какой-либо ресурс: документ, файл, и т.д. Конечно, здесь подразумеваются ресурсы сети Интернет.
Относительный путь
Путь относительно документа
Именно путь относительно документа используется чаще всего. Такие ссылки ещё называются локальными. В основном такой путь используется тогда, когда текущий и связанный документ(страница) находятся в одной директории. Если переместить документ в другую директорию, то путь(ссылку) придётся менять. Хотя можно ссылаться и на документы(страницы) из других директорий. Для этого путь прописывается от текущего документа до целевого документа(страницы). При этом путь относительно документа должен задаваться в зависимости от структуры директорий.
Возьмём к примеру простейшую структуру статического сайта.
Предположим, что каждое изображение в каталоге images нужно вставить в соответствующие страницы home.html, products.html, contact.html. Для того что бы вставить изображение к примеру на страницу “home.html”, нужно прописать путь, где расположено изображение. Если использовать путь относительно документа, то нужно будет прописать в коде страницы следующее:
Этот код для вставки изображения на страницу – неполный. Так как он не содержит нескольких важных атрибутов, таких как ширина, высота и др. Атрибут src, здесь служит для указания пути к файлу. Здесь опущены все остальные атрибуты, так как они сейчас не столь важны. Главное сейчас, что бы Вы имели представление о том, как выглядит путь относительно документа.
При использовании путей относительно документа отсутствует часть абсолютного пути. Часть абсолютного пути, здесь усекается, как для текущего документа(страницы), так и для связанного. Здесь используется только та часть пути, которая всегда меняется.
Напомню ещё раз про то, что при использовании пути относительно документа, нужно учитывать исходное расположение файлов.
Представим ситуацию, когда страница products.html, будет располагаться не в корневой директории сайта(как это было в предыдущем примере), а в подкаталоге. Теперь необходимо вставить изображение, в файл products.html, который находится, глубже чем корневая директория сайта.
Для того, что бы вставить изображение в файл products.html нужно вернуться в корневую директорию. После чего, можно использовать уже известный путь, о котором говорилось чуть выше.
Как видно из приведённого выше кода, к пути теперь добавилось следующее: ../. Как раз эта последовательность символов ../ и служит для перехода на одну директорию(уровень) выше в иерархии каталогов. Путь в вышеприведённом коде можно прочесть так: “Перейти на один каталог выше(назад), зайти в директорию images и взять от туда файл products.jpg“.
Если ../ означает переход на одну директорию(уровень) выше в иерархии каталогов, то символ / обозначает переход на один уровень ниже.
Последовательность символов ../ можно использовать в пути неоднократно. Например, если файл products.html переместить в три директории вложенные в друг друга, то нужно будет использовать следующий код:
Как видно из предыдущих примеров, использование путей относительно документа во многих случаях оправдано. Такой вид пути часто применяется в практике, и его можно применить практически в любой ситуации. Как я уже говорил выше, существует ещё путь относительно корня сайта, о котором собственно и пойдет речь ниже.
Путь относительно корня сайта
Вы наверное уже поняли что пути относительно документа используются очень часто. Но при их использовании существует одна проблема. Которая заключается в том, что при смене структуры директорий, пути придется менять.
Но такая проблема решаема при использовании путей относительно корня сайта. Где путь указывается от корневой директории до документа.
Все пути относительно корня сайта начинаются со знака /. Только здесь, в отличии от путей относительно документа этот знак используется для указания корневой директории. Потому, что он используется в начале пути.
Путь относительно корня сайта позволяет перемещать некоторые файлы, без ущерба для ссылок. Этот тип пути Вы сможете использовать только на web-сервере в интернете, или на web-сервере расположенном на локальной машине.
В качестве web-сервера на локальной машине может выступать – XAMPP. Который позволит у себя на компьютере создать среду для созданию сайтов и их предварительного тестирования.
Например, /images/products.jpg обозначает, что файл products.jpg находится в папке images, которая расположена в корневом каталоге.
Пример
Иногда бывает нужно, что бы информацию одной страницы использовали другие страницы сайта. Часто это делается для того что бы сократить количество повторяемого кода на каждой странице. Допустим есть файл _contact.html, который содержит информацию о телефонных номерах, e-mail и содержит изображение contact.jpg. (Пускай это будет небольшая таблица, которая будет располагаться на каждой странице сайта.)
Следующий код предназначен для вставки изображения “contact.jpg”.
Код, который необходим для вставки одного файла в другой, выходит за рамки этой статьи. Здесь все зависит от используемого языка программирования.
Я надеюсь, что Вы уже знаете какой тип пути использовался в вышеприведённом коде. Если нет, тогда посмотрите приведённое выше определение пути относительно документа.
Теперь, когда посетитель зайдет на такие страницы сайта как home.html, contact.ntml, он увидит прекрасно отображаемую страницу. В каждую из которых вставлен файл _contact.html, в который, в свою очередь, вставлено изображение contact.jpg.
Другими словами зайдя, к примеру, на страницу home.html, происходит следующее: “Выполняется код основной страницы home.html. Затем вставляется и исполняется код страницы _contact.html. Код страницы _contact.html, говорит что нужно перейти в директорию images и взять от туда изображение contact.jpg“.
Если опустить сам код для вставки, то все работает отлично. Но вот если запустить страницу products.html, то произойдет ошибка. Так как код будет пытаться найти директорию images и файл contact.jpg в директории products. Но такой директории там не существует, из за чего собственно и возникает проблема.
Становится ясным, что использовать путь относительно документа здесь нельзя.
Конечно здесь можно использовать абсолютный путь. О плюсах и минусах данного подхода я говорил выше.
В общем говоря, это одна из ситуаций, когда нужно использовать путь относительно корня сайта. При использовании пути относительно корня сайта, ссылка будет всегда начинаться с корневого каталога(корня сайта). Такой тип пути позволит использовать код для вставки, например изображения, независимо от иерархии сайта, и его директорий.
Использование пути относительно корня сайта в вышеприведённом примере, позволит избежать проблем, со вставкой изображения. Потому как независимо от того где будет использовать такой тип пути, он всегда найдет указанный в нем файл.
Путь относительно корня сайта, очень похож на путь относительно документа. Для того что бы создать путь относительно корня сайта, нужно добавить символ / в начало пути.
Теперь изображение будет корректно вставляться на любой из страниц сайта.
Надеюсь я немного помог Вам разобраться в том какие пути существуют, и в том когда и где они используются. Теперь можно использовать все типы пути по прямому их назначению.
Читайте также: