Работа с ссылками в html

Автор: | 14 января, 2021

Ссылки – это неотъемлемый элемент, без которого невозможно представить интернет.

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

Существует 2 вида ссылок:

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

Пример внешней ссылки:

<a href=”//wm-port.com”>Это ссылка на сайт wm-port.com</a>

будет выглядеть так:
Это ссылка на сайт wm-port.com

Элемент а (ancor) это своего якорь и текст, заключенный между открывающим <a> и закрывающим </a> тегом , является текстом ссылки.
Атрибут href – это сокращение от “hypertext reference/гипертекстовая ссылка”, определяет место, на которое выполняется переход по ссылке.

Внутренняя ссылка

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

<p><a name=”zagolovok1″></a>Заголовок1</p>

или

<h2 id=”zagolovok1″>Заголовок1</h2> (Этот способ используется при маркировании заголовков)

Теперь на это место надо сделать ссылку (в данном случае nomer1) простым указанием ее имени после значка #.
Вот как будет выглядеть ссылка на nomer1:

<a href=”#zagolovok1″>Ссылка на Заголовок1</a>

Более подробный пример:

<h1 > Содержание </h1> <br>
<a href=”#zagolovok1″> Создание сайта</a> <br>
<a href=”#zagolovok2″> Оптимизация</a><br>
<a href=”#zagolovok3″> Продвижение</a>
<h2 id=”zagolovok1″> Создание сайта</h2>
<p>Здесь будет текст материала 1</p>
<h2 id=”zagolovok2″>Оптимизация</h2>
<p>Содержимое текста материала 2</p>
<h2><a name=”zagolovok3″></a>Продвижение</h2>
<p>Текст материала 3</p>

Вот результат (можно проверить, если кликнуть “на заголовок 2” в содержании Вы быстро перейдете к заголовку 2 в тексте):

 

Атрибуты

TARGET – указывает где открывать страницу на которую ведет html ссылка. По умолчанию она открывается в том же окне.

Значения бывают такие:
_blank документ откроется в новом окне браузера;
_self документ откроется в текущем фрейме;
_parent — документ откроется в родительском фрейме.

TITLE – указывает заголовок ссылки, который появляется при наведении на нее.

Например:

<a href=”//wm-port.com” target=”_blank”>
Это ссылка на сайт wm-port.com, откроется в новом окне
</a> <br>
<a href=”//wm-port.com” title=”Как создать сайт “>
И это на wm-port.com. Только эта ссылка  откроется в том же окне и при наведении на нее появится надпись.
</a>

В итоге мы увидим:

Это ссылка на сайт wm-port.com, откроется в новом окне

И это на wm-port.com. Только эта ссылка откроется в том же окне и при наведении на нее появится надпись.

Цвет ссылки в html

Чтобы назначить цвета ссылкам на всей странице применяется элемент body. Его дополняют атрибутами:
link – цвет ссылки
alink – цвет ссылки при нажатии на неё мышкой
vlink – цвет посещённой ссылки

К примеру если при открытии тела документа, элементу body прописать:

<body link=”green” vlink=”blue” alink=”yellow”>

то все ссылки в данном документе станут зелеными, уже посещенные ссылки станут синимы а ссылки в момент нажатия будут желтыми.

Следующая страница – Вставка изображения в html

Предыдущая – Списки в html

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *