Ссылки в HTML

Приветствую Вас дорогие друзья! В этой статье мы поговорим о HTML ссылках. Это очень важный элемент и Вы, безусловно, должны знать, что это такое и где используются, так как ссылки присутствуют на каждом сайте.
Я еще не встретил в интернете такие сайты, чтобы не имели хотя бы одну ссылку. В первую очередь ссылки используются для связки страниц, то есть для того чтобы пользователь смог перейти с одной страницы на другую.
Также они используются в следующих случаях:
- Для того чтобы увеличить изображение на сайте.
- Для того чтобы скачать какой-то файл или посмотреть в браузере какой-то документ.
- Для того чтобы перейти к началу текущей страницы или к какому то абзацу другой страницы. Таким образом, делается ссылка на вверх.
Ссылки имеют следующий синтаксис:
<a href="адрес страницы" >Якорь ссылки </a>
Атрибут href является обязательным, в его значение указываем адрес страницы, на которую хотим перейти. Также в его значение мы можем указать путь к изображению или путь, к файлу которого хотим скачать.
Существует 2 типа адресов, это абсолютный адрес и относительный.
Абсолютный адрес это когда указываем адрес какого-то сайта из интернета, вместе с протоколом http. Например:
<a href="https://www.vk.com" >Социальная сеть ВКонтакте </a>
После клика по данной ссылке мы перейдём в социальную сеть ВКонтакте.
Относительный путь это путь относительно текущего файла. Допустим, в папку сайта находится два файла, главная страница index.html и страница о нас about.html. Для того чтобы мы смогли перейти с главной страницы на страницу о нас, в значение атрибута href у ссылки на главной странице нужно написать название файла который отвечает за страницу на которой хотим перейти. В нашем случае мы хотим сделать ссылку для перехода с главной странице на страницу о нас, поэтому в коде главной странице добавляем такую ссылку:
<a href="about.html" > Перейти на страницу О нас </a>
Изображение в качестве якоря ссылки
Вместо якоря ссылки может быть и изображение. Нажимая на изображение, мы перейдём на указанный адрес в значение атрибута ссылки href. Вот пример такой ссылки:
HTML код такой ссылки следующий:
<a href="https://ru.wikipedia.org/wiki/Angelina_Jolie" > <img src="images/angelinajolie.jpg" alt="Анжелина Джоли" /> </a>
Ссылка на изображение
Если в значение атрибута href указать адрес на какое-нибудь изображение, то при нажатии на данную ссылку, в браузере откроется изображение в полном ее размере.
Посмотрим это на примере. Напишем следующие строки в код странице.
<h1 align="center" > Ссылки </h1> <p> Для того чтобы посмотреть изображение в браузере, кликните на ее. </p> <p> <a href="images/bugatti.jpeg" > <img src="images/bugatti.jpeg" alt="Bugatti" /> </a> </p>
Открываем страницу в браузере и смотрим на результат:

После клика на изображение, оно откроется в браузере.

Ссылка на файл
А теперь сделаем так чтобы пользователь смог скачать со страницы какой-нибудь файл. Этот файл может быть какой-то документ, какая-то песня, торрент-файл или архив.
И так для того чтобы это реализовать нужно в значение атрибута ссылки href, указать путь к файлу для скачивания. Например, нужно сделать так чтобы пользователь смог скачать какой-нибудь документ с расширением .docx. Для начала на хостинге сайта создаем папку для файлов, назовем ее, например files. Вставляем в созданную папку нужный файл и в коде страницы пишем следующие строки:
<p> <a href="files/document.docx"> Скачать Документ </a> </p>
Теперь, когда пользователь нажмет на ссылку скачать документ, сразу начнется скачивание файла.

Аналогично можно сделать и с остальными типами файлов.
И на этом все. Из этой статьи Вы узнали следующие:
- Как создать ссылку на другую страницу.
- Как сделать изображение ссылкой.
- Как сделать ссылку на изображение
- Как создать ссылку на файл.
Теперь Вы сможете сделать все это сами. Без чьей либо помощи.
Похожие статьи:
Видео:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Добавляйтесь ко мне в друзья в:
Добавляйтесь в мои группы:
Подпишитесь на мои каналы:
Автор статьи: Мунтян Сергей
Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!
Дата добавления: 2015-12-11 11:50:05