Как сделать путь на сайте
Добавил пользователь Валентин П. Обновлено: 04.10.2024
Пути к файлам - тема, которая обычно взрывает мозг новичкам. Но не волнуйся, сейчас мы всё расставим по полочкам.
Чем отличаются пути в PHP и URL
Когда мы смотрим любимый фильм или сериал, мы видим только готовый продукт.
А за кадром существует совсем другой, невидимый для нас мир: стилисты и гримёры, искусственные декорации, наложение спецэффектов и многое другое.
В PHP существует такое же разделение. С одной стороны - реальная файловая система с реальными папками и файлами, с другой - URL адреса, которые могут не иметь ничего общего с реальной файловой структурой.
Если ты видишь на каком-нибудь сайте страницу с URL /category/monitors - это совсем не значит, что на сайте есть скрипт /category/monitors/index.php .
Вполне вероятно, что и такой папки там тоже нет, а все URL адреса обрабатываются одним единственным PHP файлом.
И даже если в URL присутствует расширение файла, например /about.html - это тоже не говорит о существовании файла about.html . Может он есть, а может и нет.
Новички часто путают пути к реальным файлам с URL адресами. Сейчас я разберу пару таких ошибок, на примере которых можно будет прочувствовать разницу.
Ошибка №1: Подстановка физического пути в URL
Очень частая ошибка новичков - пытаться подставить в URL адрес ссылку на физический файл, вроде такого:
Это неправильно. Браузер не может видеть реальную файловую структуру сервера. Он не видит никаких дисков D, он видит только URL адреса.
Правильная ссылка выглядит так (разницу объясню чуть позже):
Ошибка №2: Подключение скриптов по URL
Иногда новички пытаются подключить физический файл по его URL:
Это неправильно. Во-первых, подключится не сам скрипт, а результат его работы. Во-вторых, подключать какие-то файлы через URL вообще идея очень опасная.
Абсолютный путь в PHP
Абсолютный путь - это полный путь к папке или файлу. Вот пара примеров для разных операционных систем:
Как видите, это полный путь от корня диска до конкретного файла или папки. Начинается со слеша или буквы диска (Windows).
Получить абсолютный путь скрипта можно с помощью магической константы __FILE__ :
Для получения абсолютного пути к папке, в которой находится скрипт, есть магическая константа __DIR__ :
Как этим пользоваться. Допустим, у нас в корне сайта лежат файлы index.php и config.php и мы хотим подключить второй в первый.
Если мы хотим подключить config.php по его абсолютному пути, есть два способа сделать это:
Поскольку константа __DIR__ не добавляет слеш после последней папки, мы указываем его вручную.
Относительный путь в PHP
У относительных путей в PHP есть один подвох - они могут строиться относительно не той папки, от которой мы ожидаем.
Дело в том, что когда мы подключаем скрипт по относительному пути require('config.php'); , PHP будет искать его по следующему алгоритму:
Сначала PHP попытается найти этот файл в папках, указанных в директиве include_path. Посмотреть, что указано в этой директиве конкретно у вас можно с помощью var_dump(get_include_path()); , папки разделяются символом ;
Если мы укажем путь к скрипту в таком виде: require('./config.php'); , то этот шаг будет пропущен.
Далее PHP попытается найти файл в папке текущего рабочего каталога.
Например, если мы в index.php подключили файл scripts/script.php, а в этом самом script.php уже пытаемся подключить файл по относительному пути, тогда поиск файла произойдёт и в папке scripts тоже.
Два последних пункта - главная проблема относительных путей. Мы не можем быть уверены, что будет подключен именно тот файл, который нам нужен.
Именно по этой причине я призываю тебя отказаться от использования относительных путей в PHP.
Кому-то из практикующих разработчиков эта фраза может не понравиться, но я считаю это единственным разумным решением.
Тем более нет ничего сложного в добавлении константы __DIR__ перед именем скрипта, что автоматически сделает путь абсолютным.
Абсолютный путь в URL
Абсолютный путь в URL означает путь от корня сайта. Корень сайта - это папка, которая содержит публичную часть сайта, т.е. доступную извне.
Относительный путь в URL
Относительные пути в URL указываются без слеша в начале ссылки, например:
Относительные пути в URL более предсказуемы, чем в PHP. Но я рекомендую использовать их только там, где это действительно необходимо.
Чаще всего их использование приводит к путанице. И вот пара типичных проблем, с которыми часто сталкиваются новички.
Ошибка №1: относительные пути к стилям, скриптам и другим файлам
Представим, что мы решили подключить стили к нашему сайту:
Разработчик указывает относительный URL style.css и видит, что всё работает. По крайней мере, на главной странице.
Но при переходе по любой ссылке, например /products/15 , стили перестают работать.
А причина в том, что относительный путь строится от текущего URL-адреса, а значит в нашем примере он из style.css превратился в /products/15/style.css .
Ошибка №2: Рекурсия в ссылках
При использовании относительных путей есть риск случайно создать на сайте бесконечные ссылки. Вот один из таких способов:
Для работы данного кода должна быть настроена единая точка входа.
Текущий и родительский каталоги
Помимо указания конкретных папок, мы также можем добавить в путь указание "перейти на папку выше", например:
В коде выше мы подключим файл config.php, который находится не в текущей папке, а в родительской. С абсолютными путями это тоже работает:
И с URL-адресами тоже:
Также мы можем указать ссылку на текущий каталог, что бывает актуально в некоторых операционных системах:
Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Ссылки это то, что делает Всемирную паутину такой, какой мы её знаем. Они позволяют путешествовать с одного сайта на другой, т.е. сёрфить. Ссылки, как ягодка за ягодкой при сборе земляники, манят нас, влекут за собой. и не дают уснуть вовремя 🙂
Ссылки бывают разные, но чаще всего встречаются такие:
Ссылка создаётся с помощью тега (от англ. Anchor, якорь). Чтобы указать адрес, куда перенаправляется пользователь, используется атрибут href . Сам адрес пишется в кавычках. Между тегами указывается текст ссылки. Желательно, чтобы он объяснял пользователю куда он перейдет, а не просто гласил типа "Жми сюда".
При клике на любое из слов, помещенных внутри элемента пользователь переходит по указанной ссылке.
По умолчанию, когда вы наводите на ссылку, указатель мыши превращается в руку с тычущим пальчиком, а цвет ссылки меняется.
Абсолютные и относительные ссылки
Давайте представим, что к вашему соседу пришел курьер и спрашивает, где найти вашу квартиру. Сосед может начать издалека: "планета Земля, материк Евразия, страна Украина, город Киев, улица Мечникова, дом 16, квартира 41". А может просто сказать "да вот его квартира, слева от меня". В первом случае сосед дал курьеру (браузеру) абсолютную ссылку, а во втором - относительную.
Относительные ссылки используются для перехода в рамках одного сайта (со страницы на страницу или с одного места в другое). Особенно это удобно, если вы только создаёте свой сайт и еще не опубликовали его. Если вы создавали свою первую веб-страницу вместе с нами, самое время создать вторую и посмотреть как работают относительные ссылки 🙂
Ссылка на документ в той же папке
Итак, давайте создадим в той же папке HTML_Start (это наша корневая папка) еще один html документ с любым названием, например about.html
Относительные - ведут отсчет от корня сайта или текущего документа.
При обращении к каталогу без явного указания названия файла (то, что пишется в конце, после /fail.html) обычно открывается индексный файл - index.html. Это стоит помнить, чтобы всегда вы могли защитить свой сайт от мошенников. Об этом я рассказываю в настройках WP.
Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
Если вы забыли как правильно написать ссылку в коде , то следует вернуться к этому посту.
Рассмотрим создание относительных ссылок более подробно.
Вариант 1 Фалы располагаются в одной папке?
Здесь все просто. Нужно сделать ссылку из исходного на ссылаемый. То есть вот так:
Здесь путь такой
Здесь нужно выйти - ../ из одной и второй ../ папки и там уже найти файл
Как видите, ничего трудного нет в этом, если знать, как правильно обозначить путь к файлу.
Хочется предупредить, что этот метод указания пути к файлу не работает на локальном компьютере и годится, только для серверов.
Зато на компьютере вообще все проще простого.
Сейчас я вам расскажу пару фишек о том, как легко и точно прописать путь к файлу.
- Выбираете нужный вам файл
- Зажмите кнопку Shift и щелкаете правой кнопкой мыши.
- В открывшемся меню выбираете копировать путь к файлу.
- Вставляете сразу после = без кавычек. Они подставятся автоматически.
Если вы пользуетесь командной строкой на компьютере. Лично у меня она даже закреплена в панели задач. То..
- Открываете командную строку
- Просто перетаскиваете туда нужный файл
- Получаете точный путь к вашему файлу. Копируйте и наслаждайтесь!
На этом все на сегодня. Хочется добавить. что при создании папок и файлов не стоит пользоваться кириллицей и тем более пробелом, или разными регистрами символов.
Пробуйте, экспериментируйте и делитесь своими "фишками" и "кейсами".
Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.
Пока размеры проектов (особенно веб-сайтов) уменьшены и имеют мало страниц, мы можем предположить, что все файлы остаются в одной папке. Однако по мере роста проекта — нам потребуется больше места.
Затем необходимо будет вставлять изображения в разные папки (чтобы все они были в одном месте), и, возможно, будет целесообразно разделить сайт на различные разделы, чтобы все документы одного типа были в контексте.
Поэтому HTML-проекты и веб-сайты организованы в упорядоченные структуры: мы не случайно говорим о дереве сайта , чтобы показать визуализацию структуры в основе сайта.
Поскольку организация сайта в каталогах и подкаталогах является очень обычной вещью, мы должны научиться перемещаться между различными файлами, составляющими сам сайт, чтобы иметь возможность создавать ссылки на самые скрытые документы, маневрируя между структурами. разветвления.
Для этого мы можем использовать два режима:
HTML веб-ссылка: Абсолютные пути
Описать абсолютный путь означает полностью указать адрес определенного документа, перечислив все каталоги и подкаталоги, через которые мы должны пройти, чтобы достичь его. Чтобы лучше понять, давайте рассмотрим этот адрес:
Ссылка указывает абсолютный путь и ссылается на конкретный каталог. В этом случае:
Для упрощения можно также сказать, что абсолютная ссылка — это URL, который мы обычно находим в адресной строке.
Абсолютные пути используются в основном при написании ссылок на ресурсы, расположенные на сторонних сайтах (которые не принадлежат проекту).
HTML-ссылка с относительными путями
Эти относительные пути относятся к позиции других файлов , чем документ , в котором вы находитесь в данный момент. Чтобы связать две страницы в одном каталоге, просто напишите:
Давайте теперь окажемся в такой ситуации:
То есть со страницы index.html мы хотим сослаться на файл interna.html , который находится в каталоге interna , который, в свою очередь, находится внутри каталога prima .
Синтаксис выглядит следующим образом:
Теперь давайте посмотрим на противоположный пример: с внутренней страницы мы хотим сослаться на страницу ( index.html ) выше двух уровней:
Как можно видеть, следующие общие правила применяются к относительным путям :
- Чтобы сослаться на файл, который находится в том же каталоге, просто свяжите имя файла:
2. Чтобы обратиться к файлу в папке более низкого уровня, чем текущая позиция, просто назовите папку, за которой следует символ / (косая черта), а затем имя файла. По формуле имяПапки/файл .html :
Чтобы вернуться на уровень, просто используйте обозначение: ../файл.html
Благодаря этим устройствам мы можем легко перемещаться между каталогами проекта или сайта: чтобы взять другой пример, вы можете вернуться на один уровень выше относительно местоположения файла, выбрать другую папку, а затем выбрать другой файл следующим образом:
Href: index.html
Если проект находится на сервере Unix (но синтаксис также работает в системах Windows, если они не локальные), эта запись не должна вас удивлять: символ ‘ / ‘, помещенный в начале адреса, указывает на главный каталог сайт, иначе называемый root . Поэтому это еще один способ выражения абсолютных путей на своем сайте.
Еще одна важная вещь, которую нужно знать, это то, что когда сайт подключен к сети, указание индекса в каталоге почти всегда является необязательным. Вместо этого:
просто укажите каталог:
Имя файла рекомендации
Как известно, существует два семейства операционных систем: Windows и Unix (Linux). Эти две операционные системы используют разные способы управления файлами, поэтому необходимо выполнить несколько шагов:
Читайте также: