Ссылки в 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>

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

Аналогично можно сделать и с остальными типами файлов.

И на этом все. Из этой статьи Вы узнали следующие:

• Как создать ссылку на другую страницу.
• Как сделать изображение ссылкой.
• Как сделать ссылку на изображение
• Как создать ссылку на файл.

Теперь Вы сможете сделать все это сами. Без чьей либо помощи.

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Дата добавления: 2015-12-11 13:50:05