HTML

Пути

Итак, этот урок, на самом деле, имеет первостепенную важность. Просто важный-важный-важный, очень важный сейчас урок. Его порой сложновато-таки понять, поэтому читайте внимательно, и после урока ещё обязательно попишите сами код, повставляйте картинки, попрописывайте пути, чтобы закрепить это окончательно и не забыть. К тому же, правила, которые я сейчас буду говорить относятся абсолютно ко всем путям, которые вы используете при разработке сайтов. Те же самые правила, которые вы используете, когда прописываете путь к CSS-ке, те же самые правила, когда вы прописываете путь к картинке, или, когда вы будете в CSS прописывать пути к картинкам. Всё идёт от одного и того же, поэтому поехали!

Итак, давайте для начала, перенесу картинку в корень.

И в значении src оставлю просто название «Audi».

<img src='audi.png'> 

Я просто прописываю название нашего файла.

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

Дальше мы эту картинку переносим в папочку «img», поэтому в src прописываем «img/».

<img src='img/audi.png'> 

Как это работает? Вы прописываете название папочки, в которую нужно перейти, в данном случае папочка «img». Ставите «/» и после него пишите файл, который нужно найти. 

Если у вас файлик jpg или gif, то пишите jpg или gif. То есть вдруг вы там перепутаете, что нужно приписывать «png». Вы пишите полностью название файла с его расширением либо png, либо jpg, либо gif. В принципе, это те расширения, которые используются. 

Итак, мы прописали пути к нашим папочкам, к нашему файлику. В принципе, сейчас всё легко. В начале пути слеш не ставите.

А что если вдруг у нас получится вот такая вот ситуация? Наша папочка «img» лежит не в корне нашего проекта, а немножчко назад, то есть в предыдущей папке.

То есть если вы поставите вот так «<img src=”img/audi.png”>», то у нас ничего не откроется. Поэтому мы в начале мы ставим две точки и слеш:

<img src="../img/audi.png”>

Тогда всё заработает. Две точки означают переход на уровень выше относительно того, где вы находитесь. То есть мы находимся в папочке «new_project» с «index.html». Дальше тут две точечки, значит, мы переходим в папку «Sites», и в ней уже ищем папочку «img», а в ней «audi.png». Я думаю, понятно. Чтобы вы понимали, это может идти до бесконечности, до тех пор, пока вы не упрётесь в корень вашего винчестера. 

Теперь, если мы ставим в самом начале пути слеш, то ничего не откроется.

<img src="/img/audi.png”>

Почему? Если мы ставим слеш вначале, то отсчет идёт от корня вашей файловой системы. В данном случае относительно корня нашего винчестера. То есть первый слеш говорит, что мы идём в самый-самый корень и уже здесь ищем папочку «img».

Давайте пропишем полностью путь к картинке. У меня будет:

<img src=”Users/lessonweb/Documents/Sites/new_project/img/audi.png”>

Всё правильно прописали и открылось. 

Разница в чём? Во-первых, есть такая тема, как абсолютные пути и относительные пути. Абсолютный – это тот путь, который мы с вами сейчас прописали, то есть относительно корня вашей файловой системы. Ни в коем случае так прописывать не надо. Многие по началу пишут именно так, потом закидывают на сервер и говорят: «А почему не открываются картинки?» Потому что вы прописали абсолютный путь, то есть, если вы закидывает на другой компьютер ваш проект, то этот путь абсолютно меняется. То есть, если там был «Иванов Кирилл» логин вашего аккаунта, то всё меняется. Получается, у другого человека будет другое название аккаунта и как минимум вот этот вот параметр изменится. Если вы перешли на Windows, кинули там с Mac’а или с Windows на Mac, то вообще этот путь изменится и будет другим. Поэтому обязательно всегда прописываем относительные пути относительно вашей папочки с «index.html».

Давайте с CSS-кой помудрим немножечко. В данном случае CSS-ка лежит в корне проекта, рядом с «index’ом», поэтому мы просто пишем название нашего файла.

<link rel="stylesheet" href="style.css">

Если мы захотим разделить всё это на подпапочки, то в пути добавляем папку ( и создаем ее в корне проекта) «css» и в нее закидываем «style.css».

<link rel="stylesheet" href="css/style.css">

То есть, если у вас потом будет много CSS-ок, то мы можем их просто закинуть в одну папку «css» и там все файлики держать, чтобы у нас не было хлама в корне. 

Скажу вам на будущее: если вдруг что-то не подключается, не работают картинки, CSS-ка вдруг не подключилась, стили не задаются, то обязательно, в первую очередь, проверьте, как вы прописали пути. В самую первую очередь проверьте, есть ли у вас слеши вначале. Если у вас абсолютные пути прописаны, то удаляйте их к чертям и ставьте относительные пути. Если правильно, значит вы молодец, всё должно работать, ищите в другом проблему. Но, скорее всего, в первую очередь, смотрите на прописание путей. Самая частая по началу ошибка, когда не работают картинки, не получаются CSS-ки, там что-нибудь ещё не подключается, скорее всего, вы неправильно прописали пути. Поэтому после урока сразу же попрописывайте разные пути, поэкспериментируйте с этим, закрепите у себя в голове, потому что через час вы уже забудете всё, что я вам рассказывал, и потом будет паника: «Почему не подключаются файлики?»

Это очень важная тема, и она будет вас преследовать абсолютно всю жизнь. Поверьте мне. Поэтому хорошо её закрепите и попрактикуйтесь. Всё, надеюсь, у вас всё будет классно с этим уроком. Давайте, удачи! Идите дальше.