Letysite.ru

IT Новости с интернет пространства
17 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как указать адрес файла

Корень сайта и правильный путь к файлам: новичкам

При работе на хостинге одни файлы необходимо загружать в корневой каталог сайта, другие в папки разной вложенности, и зачастую к ним требуется указать правильный путь. Начинающие вебмастеры здесь испытывают сложности — где корень сайта, что такое путь и как его прописывать?

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

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

Корень сайта — где это и что это.

Прежде чем объяснять, где и что находится, необходимо уяснить с понятие уровней вложенности.

Допустим, Вы на компьютере создали папку под названием «Семья», закинули в нее свои фотографии, и в нее же поместили папку «Мы на природе» с видеороликами. Корневой в данном случае является «Семья», и все содержимое лежит в ее корне. А вот файлы из «Мы на природе» находятся на следующем от корневого уровне вложенности. И так далее.

Та же картина на хостинге — корень сайта находится на первом уровне. Сама корневая папка на хостингах открывается первой по умолчанию и называется по-разному у разных провайдеров (например, www., html).

На хостинге Макхост, которым пользуюсь я и на примере которого пишу эту серию статей, она называется httpdocs.

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

Для наглядности я нарисовал картинку

А вот так выглядит корень одного из моих сайтов в аккаунте хостинга

Путь к файлам корневого каталога.

Путь к корню сайта — это адрес Вашего основного сайта (домена), например, http://example.ru.

По умолчанию, при указании пути до любой папки роботы поисковиков открывают файл под названием index (расширением html или php), поэтому дописывать его не нужно — сработает такая ссылка.

А вот чтобы указать путь к другим файлам в корне сайта, необходимо их название добавить к адресу через слэш (косую черту), например, http://example.ru/kartinka.png.

Как правильно указать путь к файлам на других уровнях.

Допустим, в корне сайта лежит папка XXX, в ней следующая YYY, а уже в ней изображение kartinka.png. Тогда путь к ней прописывается как http://example.ru/xxx/yyy/kartinka.png.

То есть, указывается адрес корневого каталога, затем через слэш имя первой вложенной папки, опять же через слэш следующей и так далее до нужной (если они вложены одна в другую), а затем уже пишется название нужного файла.

Такой путь называется абсолютным или полным — с указанием протокола (http или https) и всеми последующими уровнями. Есть еще относительный путь, но про него как-нибудь в другой раз — не будем все собирать в кучу.

На одном домене, кроме основного сайта, можно держать множество других одностраничных лендингов или многостраничников. Для этого, к примеру, можно разместить в корне (или на другом уровне) отдельные папки с лендингами и в ссылке указывать к ним путь — роботы автоматически откроют в них индексный файл index.html или index.php. Если же он назван по-другому, необходимо просто дописать его в адресе, как я уже говорил выше.

Думаю, что объяснил подробно и понятно. Если нет — спрашивайте в комментариях, отвечу.

Немного практики.

Чтобы на Макхост открыть какой-либо корневой каталог, необходимо:

  1. В левом меню нажать ссылку «Сайты».
  2. Выбрать из появившегося списка нужный и кликнуть по нему.
  3. В открывшемся меню управления выбрать «Файловый менеджер».

Все, каталог открыт.

Часто при работе с сервисами у Вас требуют: «в корне сайта создайте файл с именем»… Как это сделать?

Есть два варианта — создать его на компьютере и закачать в корневую папку или сделать это прямо на хостинге. Начнем с второго способа — спускаемся вниз содержимого каталога и жмем соответствующую ссылку (замечу, что таким же способом можно создать и новую папку)

В открывшемся окне пишем название нового файла и нужное расширение — html, php, txt или другое. Я на примере создаю html.

Вот он разместился в корне сайта, но пустой — внутри нет ничего.

Чтобы вставить необходимый текст или код (или отредактировать существующий), нужно в этой же строке нажать на карандашик справа. Откроется окно, вписываете необходимое и сохраняете. Все.

Если необходимо загрузить файл в корневой каталог сайта (как и в любое другое место), действуем по схеме выше — спускаемся вниз списка в открытом каталоге, где хотим разместить загруженное, и жмем «Закачать…» (смотрите на скриншоте выше).

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

На этом заканчиваю. Остались вопросы — читайте подробнее о том, как заливать на хостинг.

Как указать адрес файла

Абсолютные и относительные ссылки. Как указать путь к файлу правильно Абсолютные ссылки всегда начинаются с имени протокола. Например http:// и содержат имя файла.

Читать еще:  Как сделать переадресацию писем из mail

Относительные — ведут отсчет от корня сайта или текущего документа.

При обращении к каталогу без явного указания названия файла (то, что пишется в конце, после /fail.html) обычно открывается индексный файл — index.html. Это стоит помнить, чтобы всегда вы могли защитить свой сайт от мошенников. Об этом я рассказываю в настройках WP.

Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.
Если вы забыли как правильно написать ссылку в коде , то следует вернуться к этому посту.
Рассмотрим создание относительных ссылок более подробно.

Вариант 1 Фалы располагаются в одной папке?

Здесь все просто. Нужно сделать ссылку из исходного на ссылаемый. То есть вот так:

Вариант 2. Исходный в папке, а ссылаемый в корне

../ мы говорим, что нужно выйти из текущей папки на уровень выше. Много папок, значит и ../ ../ ../ — много. Столько сколько папок (уровней)

Вариант 3. Исходный в корне сайта, ссылаемый в папке
То есть зеркальный вариант от предыдущего.

Здесь путь такой

Если много папок, то

Вариант 4.Файлы в разных папках

Здесь нужно выйти — ../ из одной и второй ../ папки и там уже найти файл

Как видите, ничего трудного нет в этом, если знать, как правильно обозначить путь к файлу.

Хочется предупредить, что этот метод указания пути к файлу не работает на локальном компьютере и годится, только для серверов.

Зато на компьютере вообще все проще простого.

Сейчас я вам расскажу пару фишек о том, как легко и точно прописать путь к файлу.

Вариант первый.

  1. Выбираете нужный вам файл
  2. Зажмите кнопку Shift и щелкаете правой кнопкой мыши.
  3. В открывшемся меню выбираете копировать путь к файлу.
  4. Вставляете сразу после = без кавычек. Они подставятся автоматически.

Если вы пользуетесь командной строкой на компьютере. Лично у меня она даже закреплена в панели задач. То..

Вариант второй.

  1. Открываете командную строку
  2. Просто перетаскиваете туда нужный файл
  3. Получаете точный путь к вашему файлу. Копируйте и наслаждайтесь!

На этом все на сегодня. Хочется добавить. что при создании папок и файлов не стоит пользоваться кириллицей и тем более пробелом, или разными регистрами символов.
Пробуйте, экспериментируйте и делитесь своими «фишками» и «кейсами».

Как прописать путь к файлу в HTML?

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

Навигация по статье:

Путь к файлу это своего рода его адрес содержащий в себе цепочку (последовательность) папок, внутри которых он находится. Путь может быть абсолютным и относительным.

Что такое абсолютный путь к файлу?

Если говорить простым языком, то это полный путь к файлу, который содержит в себе название сайта, протокол http или https, название папок, внутри которых он находится, а так же его имя и расширение.

Например, для картинки image.png, которая лежит в папке images на вашем хостинге абсолютный путь будет выглядеть так:

Когда вы создаёте HTML страницу на компьютере у вас абсолютный путь будет начинаться не с HTTPS, а с названия диска, на котором этот файл находится. Затем будет идти последовательность папок внутри которых он лежит, а уже потом имя файл и его расширение.

Посмотреть этот путь можно в адресной строке:

Как определить абсолютный путь к файлу у себя на хостинге?

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

В этом случае нам нужно:

    1. Найти папку, в которой лежат файлы сайта.
    Например, в случае с CMS WordPress в ней должны находиться папки «wp-admin», «wp-content» и так далее.

Потом приписываем к нему скопированный адрес папки с загруженным файлом и в конце пишем название его название и расширение.

Особенности абсолютного пути:

  • указанный адрес будет работать при его использовании на других сайтах или страницах
  • при смене домена основного сайта или при переходе на https адреса в этом пути тоже нужно будет менять.

Что такое относительный путь к файлу?

С эти немного сложнее. Относительный путь к файлу указывается относительно расположения того файла в коде которого он указывается. Давайте разберём на конкретных примерах.

Пример 1.
Допустим, мы вставляем картинку в index.html, который лежит в папке с доменом. Там же в папке с доменом находится папка images с нашей картинкой.

Относительный путь будет выглядеть так:

Пример 2.
Нам нужно указать относительный путь к картинке в файле style.css, который лежит в папке CSS. При этом сама картинка находится не папке images.

Читать еще:  Почему перестал работать word

В этом случае если мы просто напишем /images/image.png, как в предыдущем примере, то это не сработает!

Браузер будет воспринимать эту запись так: «Зайди в папку images, которая лежит рядом с файлом style.css и возьми там файл image.png». Проблема в том, что в рядом с style.css нет никакой папки images! Она находится на уровень выше.

В таком случае мы должны как бы сказать браузеру: «Сначала выйди из папки CSS, в которой лежит style.css в котором мы указываем наш абсолютный путь, а потом зайди в папку images и возьми там файл image.png»

На языке кода команда «выйди из папки» будет выглядеть так: ../

В итоге получим:

Пример 3.

Если нужная картинка лежит рядом с файлом, в коде которого вы пишете путь, то это будет выглядеть так:

Особенности относительного пути:

  • для того чтобы его указать нужно представлять структуру файлов сайта
  • указанные адреса будут работать только в пределах вашего сайта
  • при переходе на https или смене домена все адреса будут по прежнем работать и их не нужно менять.

Определение пути к файлу в WordPress и других CMS

При работе с движками для отображения определённых файлов на сайте вам нужно указывать пути к ним или в админке или коде темы или шаблона.

Если вы вносите правки в коде, то указывать относительный путь вы должны относительно файла index.php который лежит в папке с доменом.

Получается, что вы вносите правки в файле шаблона, но путь должны указывать как будто бы вы работаете с index.php в корне сайта. Такова особенность работы движков.

Если вы указываете адрес внутри скрипта или CSS файла, то путь указывается относительно этого файла.

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

Относительный и абсолютный путь к файлу

В данном уроке мы объясним новичкам, что такое абсолютный и относительный путь к файлу, а также в каком случае какой из них лучше использовать. Если вы уже знакомы с данной темой, вы можете переходить к следующему уроку.

Итак, начнем с определения самого термина «путь»:

Путь (англ. path) — набор символов, показывающий расположение файла в файловой системе, адрес каталога.

Если говорить о сайтах, то путь — это то же, что и ссылка. Ссылки могут быть абсолютными и относительными. Рассмотрим оба варианта более подробно.

Что такое абсолютный путь к файлу

Абсолютный адрес ссылки на файл включает в себя протокол (например, http:// ), имя сайта в Сети, подкаталог (или несколько подкаталогов), название файла. Пример того, как выглядит абсолютный URL:

Абсолютный путь можно использовать в CSS. Например, чтобы задать рисунок в качестве фона, вы можете взять абсолютный URL к файлу с изображением И указать его в таблице стилей:

Абсолютная ссылка всегда будет указывать на одно и то же место, независимо от того, где расположен содержащий ее документ (в нашем случае таблица стилей). Чего не скажешь об относительной ссылке.

Что такое относительный путь к файлу

С относительным адресом всё намного интереснее — он может отсчитываться как от корня сайта, так и от текущего документа. Корневой относительный путь — это путь, который указывает на расположение файла относительно корневого каталога сайта. В этом случае адрес не содержит ни протокола, ни имени домена, и начинается со знака слэша / , который указывает на корневую папку. Выглядит этот адрес так:

Как легко определить корневой относительный адрес? Просто возьмите абсолютную ссылку и уберите из нее протокол и название домена, оставив слэш и все символы, которые идут дальше.

Относительный путь к файлу от документа — это путь к файлу относительно текущего документа. Такой адрес зависит от расположения файла, в котором он записан. Так, когда относительная ссылка указывается в та­блице стилей, она рассчитывает путь к файлу, отталкиваясь от таблицы стилей, а не от текущей веб-страницы либо корневой папки. Приведем несколько примеров.

Пример I

Если наша таблица стилей style.css и файл с фоновым рисунком bg.png находятся в одной папке (не обязательно корневой), то относительный путь от таблицы до рисунка будет выглядеть так:

Пример II

Если таблица стилей находится в корне, а рисунок — в папке img , относительная ссылка будет таковой:

Пример III

Если таблица стилей находится в папке, а рисунок соседствует с этой папкой, то относительный путь будет таким:

Пример IV

Если таблица стилей находится в двух папках, а рисунок соседствует с первой папкой, то относительный путь будет следующий:

Две точки и слэш в начале относительного пути означают подъем на один уровень вверх. В зависимости от количества уровней (каталогов), на которые нужно подняться, необходимо прописать нужное количество точек со слэшом. К примеру, если таблица стилей лежит не в двух, а в четырех папках, запись, соответственно, будет следующей:

В том случае, когда рисунок спрятан в папку img , а таблица стилей — в папку css , вам понадобится выйти из папки css и зайти в папку img . Вот так:

Читать еще:  Как узнать свой физический адрес

Если папок несколько, необходимо также прописать их. Изменим предыдущий пример: представим, что в папке img есть еще одна папка backgrounds , в которой лежит наш рисунок. Относительный путь будет таким:

Какой путь лучше использовать

Абсолютный адрес ссылки понадобится использовать, если файл, на который вы ссылаетесь, находится на другом сайте. В пределах одного сайта абсолютный путь практически не используется (хоть он и будет работать). Это связано с несколькими моментами: во-первых, такие ссылки могут быть весьма громоздкими, а во-вторых, если имя домена изменится, то возникнет проблема — все ссылки будут вести на старый домен, что может повлечь за собой множество ошибок и битых ссылок.

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

Относительный путь от документа — наилучший вариант при веб-разработке на локальной машине без использования сервера. В браузере вы сможете нормально просматривать веб-страницы, хранящиеся на вашем компьютере, и адреса файлов будут работать. Они будут работать и на живом сайте, но с одним условием — если не перемещать таблицу стилей в другое место (иначе придется корректировать пути).

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

Далее в учебнике: свойство background-repeat — управление повтором фонового изображения.

URL-адрес

Каждый файл или документ в интернете находится по уникальному адресу, называемому URL ( U niform R esource L ocator с анг. Единый указатель ресурса). Термин URI ( U niform R esource I dentifier с анг. Единый идентификатор ресурса) иногда используют взаимозаменяемо с URL-адресом, хотя это более общий термин.

Именно URL-адрес позволяет различным устройствам, подключенным к интернету, находить определенный файл на определенном сервере для загрузки и отображения этого файла пользователю (или использовать его для других целей: не все файлы предназначены для отображения).

Любой URL следует стандартной форме, которая может быть разбита на несколько основных частей (схема представлена на изображении). Каждый сегмент сообщает определенную информацию для клиента и сервера.

Протокол

Протокол указывает один из нескольких различных наборов правил, которые определяют передачу данных через Интернет. Веб использует стандартный протокол гипертекста, используемый для передачи данных, кодированных гипертекстом, с одного компьютера на другой. Протокол отделен от остальной части URL-адреса двоеточием и двумя косыми чертами ( :// ).

Доменное имя и поддомены

Hostname является именем сайта, с которого браузеру будет извлекать файл. Истинным адресом веб-сервера является уникальный числовой адрес интернет протокола ( IP — Internet Protocol), и каждый компьютер, подключенный к сети интернет имеет один IP-адрес (что-то вроде «141.8.192.108»), который, безусловно, не очень-то легко запомнить. Доменное имя — более запоминающийся псевдоним, который направляет трафик из интернета на IP-адрес. Многие веб-хостинги имеют префикс перед именем домена, после которого идет конкретный сервер, к которому осуществляется доступ (особенно когда есть несколько серверов в рамках одного домена). Префикс может быть любым, самым распространенным префиксом является конечно «WWW». Это дает возможность существования нескольких отдельных сайтов на одном домене, но имеющих разные префиксы — поддомены . Hostname также содержит суффикс домена, указывающий категорию доменов, например » .org » для сайтов различных организаций. Каждая страна также имеет свое собственное расширение домена, и вы будете часто видеть URL-адреса, которые указывают на страну, а не на какую-либо категорию.

Путь к файлам

Путь указывает каталог (папку) на веб-сервере, который содержит запрашиваемый документ. Файлы на веб-сервере могут храниться в подкаталогах — дочерних папках, расположенных внутри других папок, и каждый каталог в пути разделяется косой чертой ( / ). Путь является маршрутом, по которому будет следовать клиент, для достижения целевого файла. Каталог самого верхнего уровня веб-сайта (тот, который содержит в себе другие файлы и каталоги) называется корневым каталогом сайта и не отображается в URL-адресе.

Имя и расширение файла

Определенные файлы для извлечения идентифицируются по имени файла и расширению. Вы можете задать своему файлу любое нужное имя , а расширение файла будет указывать на тип файла. HTML документы (или XHTML) будут иметь расширение .html или .htm (сокращенный вариант используется на некоторых серверах, которые поддерживают только три буквы в расширении). CSS-файлы используют расширение .css , файлы с JavaScript кодом используют .js и так далее. Веб-серверы настраивают на узнавания этих расширений и обработки файлов соответствующим образом, обработка различных типов файлов осуществляется различными способами.

Скорее всего вы не увидите имя файла и его расширение в каждом URL-адресе с которым вы столкнётесь. Большинство веб-серверов настраивают для автоматического обнаружения специально именованного файла при запросе каталога без указанного имени файла. Это может быть файл index.html , default.html или какое-нибудь другое имя, в зависимости от настроек сервера. Действительно, большинство различных частей URL-адреса могут быть зависимы от конфигурации конкретного сервера.

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

Ссылка на основную публикацию
Adblock
detector