Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Напишите ссылку с адресом
https://codebra.ru - Напишите ссылку с адресом
/hello.html
В предыдущих уроках мы изучали разметку текста в HTML. В этом уроке начнем знакомство с ссылками.
Благодаря ссылкам и существует интернет, все сайты связаны между собой паутиной (всемирная паутина). Ссылка – это объект, с помощью которого мы можем переходить от одной страницы к другой. Ссылки могут вести на любой файл, и неважно где он находится, главное чтобы он был доступен.
Чтобы указать ссылку, нужно использовать тег <a> и атрибут href (путь до файла). Текст между <a> ... </a>, обычно подчеркнутый и синего цвета, а так же этот текст называют – анкор. Далее пример:
<a href = "https://codebra.ru/index.html">codebra.ru</a>
<a href = "/index.html">Файл index.html</a>Первая ссылка является абсолютной. В абсолютной ссылке указывается ресурс целиком. Обычно это сторонний ресурс. А вот вторая ссылка является относительной. Например, если вы находитесь на странице https://codebra.ru/dir1/dir2, то следующая ссылка:
<a href = "index.html">Файл index.html</a>Приведет на следующий адрес: https://codebra.ru/dir1/dir2/index.html. Кстати, с «относительностью» мы встречались ранее. Поправим ссылку:
<a href = "/index.html">Файл index.html</a>Куда она приведет? Из-за слеша / она будет относительно корня сайта: https://codebra.ru/index.html. Теперь сделаем относительную ссылку на папку выше текущей:
<a href = "../index.html">Файл index.html</a>Кликнув по ней вы перейдете по адресу https://codebra.ru/dir1/index.html.
Если вы указали ссылку на отсутствующий файл, то сервер вернет ошибку. Такие ссылки называют – битыми.
Обязательно потренируйтесь в написании различных относительных ссылок и переходите к следующему уроку, в котором научимся делать ссылку на определенную часть документа (якорь).
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
