Найти тему

Работа с ссылками на HTML

Оглавление

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

Ссылка создается с помощью тега <a>. В этом теге обязательно должен быть атрибут href, в который следует записывать адрес той страницы, на которую ведет ссылка.

Давайте для примера сделаем ссылку на Яндекс. Для этого нужно открыть этот сайт в браузере, скопировать адрес страницы из адресной строки и вставить в атрибут href ссылки:

Задача 1

Сделайте на вашей странице ссылку на сайт гугл и ссылку на ютуб.

Ссылки на страницы вашего сайта

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

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

Для страниц своего сайта следует практиковать другой подход. Изучим его на примере. Пусть в корневой папке вашего сайта расположен файл index.html и файл page.html. Свяжем эти файлы ссылками. Для этого в атрибуте href ссылок следует просто написать имена этих файлов (с их расширением). Давайте сделаем это.

На странице index.html сделаем ссылку на страницу page.html:

-2

А на странице page.html сделаем ссылку на страницу index.html:

-3

Задача 2

Сделайте три HTML страницы в корне вашего сайта. Назовите их 1.html, 2.html, 3.html. Свяжите эти страницы ссылками друг с другом.

Задача 3

Сделайте также страницу index.html. Разместите на ней ссылки на страницы 1.html, 2.html, 3.html.

Задача 4

Модифицируйте предыдущую задачу так, чтобы ссылки располагались в списке ul.