Блог Тимура Казанского

Урок 4. Пути к файлам в HTML


В данном уроке мы поговорим об относительных, абсолютных путях, корне папки, уровнях, ветвях, как расположить и упорядочить файлы с папками на сайте (сервере), да и вообще о путях к файлам и страницам html, конечно же они (пути) используются не только в html, а везде, начиная от папок компьютера и заканчивая любым мобильным устройством, сервером и так далее, но в данном уроке мы научимся прописывать пути к папкам и файлам конечно же в HTML. Представьте себе ситуацию, когда изначально не зная куда и как помещать все файлы, картинки, скрипты вашего сайта вы на первом этапе начинаете сохранять все это в корневую папку или папку верхнего уровня вашего сервера или Денвера, о то, что это такое и как его установить вы можете почитать в статье «Как быстро установить Denwer». В итоге спустя какое-то время, когда ваш интернет проект вырастет, появится множество статей, картинок, может быть каких-то файлов, а особенно, бывает, что когда какие-то картинки и файлы не нужны и вы их хотите заменить или вовсе удалить, но в силу хаоса из множества файлов, вам лень их искать, а иногда и некогда, вот тогда в конечном счете ваш сервер (сайт) превращается в мусорку, а чтобы потом все это разгребсти понадобится немалое количество времени. Так почему бы сразу не расставить все по местам и в будущем избежать всякого рода проблем? Давайте разбираться как это сделать.

Теория. Структура папок и файлов сайта

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

Практика

Давайте рассмотрим это на примере интернет магазина, который мы рассматривали в Уроке 3. Ссылки в html, вот его структура:

Путь файлов интернет магазина

Впрочем, вы и сами можете это с легкостью проверить, скачав его отсюда или посмотрев здесь

Также не советую создавать сложную структуру папок на небольших сайтах, главное все должно быть доступно и логично, например рисунки которые относятся к дизайну вашего сайту лучше поместить в отдельную папку, рисунки и изображения статей в другую, файлы скриптов которые отвечают за подключение к базе данных, «джава скрипты», функции в соответствующую папку, а вот основные файлы сайта – оставьте в корневой, зачем так делать спросите вы? Все просто, в дальнейшем вы без труда можете создать запрет индексации отдельных папок (индексация поисковыми роботами – делается это для того, чтобы ваш сайт и статьи появлялись в поисковых системах), в которых находятся вспомогательные файлы, такие как картинки дизайна сайта и так далее. Не переживайте если не поняли последние два предложения, мы до этого еще дойдем. Ну вроде со структурой сайта разобрались, а теперь давайте вернемся к примеру интернет магазина и попробуем создать папку – «auto» и поместим туда два файла – «jeep.html» и «audi.html»(кстати, а вы знали, что марка машины «ауди», как мы говорим по-русски, по-анлийски произносится, как «оди»?)

Перемещаем файлы в папку auto

а теперь запустим наш сайт двумя щелчками мыши на файле «index.html» и попробуем зайти в описание данных машин (щелкните на картинку или заголовок одной из машинок), что произошло?

Переходим на ссылку машинок

«Данная страница не существует?»

веб страница не найдена

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

Теория. Как прописать пути к файлам и папкам? Относительные и абсолютные пути.

Давайте возьмем для примера ссылку на описание машинки «audi» из файла index.html, повторю, про интернет магазин я описывал в предыдущем уроке.

<a href="audi.html" title="Audi R8" target ="_blank">Audi R8</a>

Мы видим, что атрибут «href» указывает путь к файлу «audi.html» просто как "audi.html", почему так происходит? Потому что файл «index.html» находится в той же папке, что и искомый файл «audi.html», и чтобы найти его, всего лишь достаточно указать имя этого файла, система просканирует все файлы в папке где находится «index.html» и найдет файл «audi.html».

Использования ссылок на примере интернет магазина

А теперь наверняка у вас назрел вопрос, а почему в атрибут «href» мы прописываем просто имя файла, обычно же ссылки начинаются с http:// и так далее? А все потому, что в данном случае мы прописываем относительный путь, т.е. поиск идет относительно того файла откуда поступает запрос, т.е. от него самого, в нашем случае это файл index.html. А вот абсолютный путь, это уже когда указываем путь полностью, запомните слово «абсолютно» - т.е. точно, - вот как выглядит абсолютный путь: «http://сайт.ру/shop/auto/audi.html», а теперь вставим абсолютный путь в атрибут «href»:

<a href="http://сайт.ру/shop/auto/audi.html" title="Audi R8" target ="_blank">Audi R8</a>

Вы удивитесь, но так тоже работает. Тогда почему мы указываем везде относительный путь? Для удобства! Во первых абсолютные пути длинные и их тяжело редактировать, а во вторых, представьте, я сначало, перед тем, как показать вам код и загрузить его на свой сайт, пишу его, тестирую (например на денвере), соответственно мне приходится указывать абсолютный или полный путь для всех ссылок и файлов такого рода «http://localhost/и т.д.» (как вариант, я пишу сайт, тестирую его у себя на компьютере в папке «site.ru», поэтому и все ссылки будут начинаться с «site.ru») а потом мне нужно перенести код в интернет, и что? Представьте сколько мне придется ссылок редактировать и менять на http://wexplorer.ru итд. А с относительными путями ничего менять не нужно, если конечно структура папок не изменилась, вы поймете о чем я, когда разберете пример ниже, а потом сравните два варианта, кстати в варианте2, как раз таки я и изменю немного структуру папок интернет магазина. А вот абсолютные пути мы прописываем, когда нам нужно перейти на другой сайт или отобразить изображение на нашем сайте с какого либо интернет источника, словом указываем абсолютный путь на то, что не находится на нашем сервере или сайте, но бывают и исключения!

Путь к файлу с деревом каталога

Путь назад

А как же прописать путь назад, из папки нижнего уровня, до корня?

Очень просто, указываем предыдущую папку, как «../» две точки, а если сзади две папки? Не беда, указываем так: «../../»

Практика

Давайте возьмем файл «audi.html» и укажем там ссылку назад в каталог игрушек, хотя нет, сделаем сложнее, добавим файл «index.html» еще выше, рядом с папкой «shop», а «shop» и все его содержимое поместим в папку «main»(от англ. главный). А теперь укажем всем ссылкам (кнопка «купить», изображение..) файла «audi.html» путь обратно к файлу «index.html» и смотрим, что происходит: запускаем файл «index.html» в папке «main», нажимаем на картинку машинки, после этого, когда попадем в описание машинки (файл audi.html), нажимаем снова на картинку и в результате мы переходим обратно.

Абсолютные и относительные пути

Вариант примера интернет магазина, который мы рассматривали на прошлом уроке, вы сможете скачать отсюда – интернет магазин до изменения.

А тот вариант, который мы рассмотрели сегодня со всеми изменениями, назовем его вариант2, вы можете посмотреть здесь и скачать отсюда.

Кстати откройте и посмотрите внимательно на вариант2, видите изображение шапки не отображается и некоторые ссылки не работают? Попробуйте исправить эту проблему самостоятельно и вы уже наверняка разберетесь с тем, как прописывать пути к файлам. Ну вот вроде бы и все! С тем, как прописывать пути к файлам и папкам, что такое корень каталога, что такое относительные и абсолютные пути, я думаю мы изучили и со всем этим разобрались!

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

Категория: Уроки HTML для чайников

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

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