Видео-уроки HTML. Часть 7. Абсолютный и относительный путь к файлу

Информация о материале: Родительская категория: Программирование; Категория: HTML

Абсолютный и относительный путь к файлу в Интернете.

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

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

Обучающее видео про абсолютный и относительный путь к файлу в HTML.

В этом видео мы вплотную подберёмся к сути языка HTML, а точнее к той части, которая делает Интернет Интернетом.

Что же делает Text не просто текстом, а Hyper текстом? Конечно же, ссылки!

Но прежде чем рассказать про ссылки, нужно сперва разобраться с тем, что они такое. Поэтому начнём, как это у нас заведено: «От простого к сложному».

Файловая система

Этим пользуются все

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

Рассмотрим более подробно, что она из себя представляет.

Файловая система находится на жестком диске, флешке.

Файловая система позволяет хранить файлы.
Файл – это блок данных, который имеет имя.

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

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

Путь к файлу

Например, в Windows стандартной программой для работы с файловой системой является Проводник (Explorer), которым все, безусловно, пользовались.

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

В данном видео рассказывается, как вызвать файл file1-2.gif, находящийся в папке folder1 из файла file2-1.html, находящегося в папке folder2.

Это реальный пример использования знаний о файловой системе, т.к. HTML-документ не всегда лежит в одной и той же папке, где лежат картинки, которые нужно отобразить в этом документе.

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

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

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

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

На слайде показаны абсолютные пути до файлов:

C:\folder1\file1-2.gif
C:\folder2\file2-1.html

Тут всё просто и понятно: нужно

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

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

Теперь рассмотрим, как строится относительный путь к файлу.

Файл file2-1.html находится в папке folder2. Нам нужно для этого файла прописать путь к картинке (файлу file1-2.gif, который находится в соседней папке folder1, лежащей на одном уровне с папкой folder2).

Для того, чтобы подняться из текущей папки (folder2) на один уровень нужно написать ... Это поднимет нас на уровень выше, т.е. на уровень диска C:.

Далее ставим слеш \ и опускаемся в папку folder1. И вот мы уже в папке с нужным файлом!

Далее снова ставим слеш \ и пишем имя требуемого файла file1-2.gif.

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

..\folder1\file1-2.gif

Иерархическая структура

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

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

Для того, чтобы перейти от одной папки, лежащей на одной ветке, в другую папку, лежащую на другой ветке, нужно дойти по «узловой» папки, из которой «растут» обе ветки и опуститься на уровень нужной папки.

Мы привыкли к тому, что «дерево» повёрнуто набок. Именно так отображаются папки в графических программах для работы с файловой системой.

Структура файловой системы

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

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

А дальше, спускаться по папкам, разделяя их названия слэшом \.

URL

Путь к файлу в интернете

URL – это путь до файла в интернете. Этот путь также может быть как абсолютным, так и относительным.

При указании абсолютного пути к файлу, корнем будет доменное имя сайта, а далее всё те же папки.

Отличие от Windows только в том, что разделителем является прямой слэш /.

Структура записи URL

<способ>://<логин>:<пароль>@<хост>:<порт>/< путь>?<параметры>

<способ> — способ доступа к ресурсу: сетевой протокол;
<логин>:<пароль> — параметры доступа к ресурсу;
<хост>— имя хоста в системе DNS, может записываться как IP-адрес хоста;
<порт>— порт хоста;
<путь> — содержит в себе информацию о доступе к ресурсу;
<параметры> — отдельные параметры страницы, которые отвечают за файлы внутри указанного ресурса.

В качестве примера на слайде приведён пример URL страницы, на которой лежат все видео с уроками HTML данного цикла для начинающих:

https://mb4.ru/component/tags/tag/27-html-video.html

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

Резюме

Домашнего задания к этому видео не будет.

Главное, что нужно понять – это то, как строятся абсолютные и относительные пути к файлам.

Если что-то осталось непонятным, советую ещё раз посмотреть это видео сначала, т.к. данный материал является необходимым для продолжения изучения HTML.

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

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)