Все для создания сайта

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

<a href="имя-файла">Текст ссылки</a>

В имени файла важно соблюдать регистр и не забыть указать расширение.

Для указания текущей папки можно использовать и последовательность «./». Предыдущий пример можно переписать так:

<a href="./имя-файла">Текст ссылки</a>

От этого ссылка не изменится.

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

<a href="../имя-файла-в-родительской-папке">Текст ссылки</a>

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

Имя дочерней папки указывается перед именем файла.

<a href="дочерняя-папка/имя-файла">Текст ссылки</a>

либо

<a href="./дочерняя-папка/имя-файла">Текст ссылки</a>

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

Для указания на папку верхнего уровня (корневую папку) используется «/».

<a href="/имя-файла-в-папке-верхнего-уровня">Текст ссылки</a>

Давайте рассмотрим это дерево папок и файлов небольшого Web-узла.

Итак, на Web-узле есть восемь файлов, которые организованы в пять папок. Давайте создадим для него ссылки.

Оба этих файла находятся в одной папке «company».

<a href="staff.html">Текст ссылки</a>

<a href="./staff.html">Текст ссылки</a>

Также, можно привязаться к папке верхнего уровня:

<a href="/company/staff.html">Текст ссылки</a>

То есть, мы поднимаемся до папки «main», в ней находим папку «company», в которой находим файл «staff.html».

Файл «news.html» находится в родительской папке по отношению к файлу «history.html».

<a href="../news.html">Текст ссылки</a>

Также, файл «news.html» находится в папке верхнего уровня.

<a href="/news.html">Текст ссылки</a>

Нам нужно в папке верхнего уровня «main», в которой находится файл «welcome.html», найти папку «products», в ней — папку «food», в которой уже найти файл «cakes.html».

<a href="products/food/cakes.html">Текст ссылки</a>

<a href="./products/food/cakes.html">Текст ссылки</a>

<a href="/products/food/cakes.html">Текст ссылки</a>

Нам стоит подняться в папку «products», где найти папку «drinks», в которой будет файл «beer.html».

<a href="../drinks/beer.html">Текст ссылки</a>

<a href="/products/drinks/beer.html">Текст ссылки</a>

Опять таки, мы можем исходить из папки верхнего уровня.

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