Гиперссылки — ссылки на другие ресурсы, которые пользователь может посетить или загрузить.
Гиперссылки создаются с помощью элемента <a></a>. Внутрь помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.
Обязательным параметром элемента <a> является атрибут href, который задает URl-адрес веб-страницы.
<a href="http://site.ru">указатель ссылки</a>
Абсолютный и относительный путь
Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный.
Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере).
http://site.ru/index.html
Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http://, он выполняет поиск указанного документа на том же сервере.
Относительный путь содержит следующие компоненты:
- папка (имя папки, указывающей путь к файлу);
- файл (имя файла).
Путь для относительных ссылок имеет три специальных обозначения:
/ указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки
./ указывает на текущую папку
../ подняться на одну папку (директорию) выше
Как сделать изображение-ссылку
Чтобы сделать кликабельное изображение, необходимо поместить элемент <img> внутрь элемента <a>
<a href="адрес ссылки" target="_blank"><img src="адрес картинки" </a>