Коды HTML для создания гиперссылок

Коды HTML для создания гиперссылок


Основная гиперссылка:

<a href="АДРЕС СТРАНИЦЫ"> Ваш текст </a>

Пример:

Ваш текст


<a href="АДРЕС СТРАНИЦЫ" target="_blank">текст(откроется в новом окне)</a>

Пример:

текст(откроется в новом окне)


<a href="АДРЕС СТРАНИЦЫ" target="_blank" title="Пояснительный текст"><img src="URL картинки"></a>

При наведении на ссылку всплывет текст, поясняющий данную гиперссылку.

где title=”Пояснительный текст” - всплывающая подсказка.

Пример:


Узнайте, как изменить стили ссылки css и узнать ссылку фото

Отменить подчеркивание гиперссылки:

<a href="АДРЕС СТРАНИЦЫ" style="text-decoration: none;">Ваш текст</a>

Ваш текст

Поменять шрифт, цвет и размер шрифта для ссылки:

<a href="АДРЕС СТРАНИЦЫ" style="font-family:Monotype Corsiva;color:green;font-size:25px">Ваш текст</a>

Ваш текст

Гиперссылка в рамке

  1. точками:

     <a style="text-decoration: none; border-top;border-width:thin;border-style:dotted;color:blue" href="АДРЕС СТРАНИЦЫ">Ваш текст</a>
    

Ваш текст

  1. пунктиром:

     <a style="text-decoration: none; border-bottom;border-width:medium;border-style:dashed;color:blue" href="АДРЕС СТРАНИЦЫ">Ваш текст</a>
    

Ваш текст

  1. трехмерная вдавленная:

     <a style="text-decor>ation: none; border-top;border-width:thick;border-style:groove;border-color:green" href="АДРЕС СТРАНИЦЫ">Ваш текст</a
    

Ваш текст</a

  1. Таким же образом можно задать и остальные рамки: сплошной чертой (solid), двойной (double), трехмерная выпуклая (ridge), трехмерная ступенька вверх (inset), трехмерная ступенька вниз (outset), изменяя параметр border-style

  2. Ссылка в разноцветной рамке:

     <table style="border-style: solid; border-width: thick; border-top-color: blue;
     <br />border-right-color: red; border-bottom-color: green; border-left-color: Yellow;">
     <tr> <td> <a href="АДРЕС СТРАНИЦЫ">Ваш текст</a></td> </tr>
     <br /></table>
    

Ваш текст

Подчеркнутая ссылка

  1. Ссылка зеленого цвета, подчеркнутая красной чертой

     <a href="АДРЕС СТРАНИЦЫ" target="_blank" style="color:red; text-decoration:underline;"><span style="color:green;">Ваш текст</span></a>
    

Ваш текст

  1. Подчеркнуто зеленым.Задается аналогично ссылке в рамке, только при этом задают параметр нижней границы рамочки: border-bottom

     <a href="АДРЕС СТРАНИЦЫ" style="border-bottom: 2px dotted DarkGreen; text-decoration: none;">Ваш текст</a>
    

Ваш текст

Гиперссылка на цветном фоне

    <a style="background-color: #6A5ACD; color: #E0FFFF; padding: 3px" href="АДРЕС СТРАНИЦЫ">Ссылка</a>

Ссылка

Изменение цвета фона ссылки после наведения на нее курсора

    <a href="АДРЕС СТРАНИЦЫ"><font onmouseover="style.backgroundColor='#98FB98'; style.cursor='hand'" onMouseOut="style.backgroundColor='#FFDAB9';">ТЕКСТ ССЫЛКИ</font></a>

ТЕКСТ ССЫЛКИ

Гиперссылка на фоне-картинке (изображении)

    <a style="background-image: url('Ссылка на изображение'); padding: 10px;" href="http://mycrib.ru/">Ссылка</a>

Ссылка

Как задать стили ссылки через a href style

Чтобы изменить внешний вид ссылки, вы можете прописать встроенные ссылки через style.

В этом случае код HTMl ссылки будет выглядеть:

    <a href="URL" style="здесь можно прописать селекторы с блоком объявлений встроенного CSS;">Текст ссылки</a>

Текст ссылки

Источник https://mycrib.ru/2018/07/html_2182.html