Оформление гиперссылок HTML

от Иванова НатальяHTML
Дата: 31 июля, 2018. Обновлено: 6 сентября, 2020
Время на чтение: 2 минут(ы)

Оформление ссылок HTML

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

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

    Пример: Шпаргалка по HTML для блоггера;

  2. <a href="АДРЕС СТРАНИЦЫ" target="_blank">текст</a>

    Шпаргалка по HTML для блогера (откроется в новом окне);

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

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

где title="Шпаргалка по HTML для блогера" - всплывающая подсказка.

Узнайте, как изменить стили ссылки 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>

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

Здесь

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

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

Вам сюда

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

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

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

Клик

 

 <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>

Опубликовано Иванова Наталья

17 ответов к «Оформление гиперссылок HTML»

  1. ничего не понимаю.хочу вставить в свой блог часики,но не пойму как вставлять код. ну, допустим копирую код, а как этот код может превратиться в часики?

    Ответить

  2. Обязательно нужно вставлять код в режиме HTML, проверьте весь ли код Вы скопировали (нельзя пропустить ни один символ), для этого выделить код лучше при помощи клавиш клавиатуры Ctrl+A (выделить все). Некоторые блогохостинги не поддерживают флеш-формат часиков, поэтому вставить в блоги, находящиеся, например, на платформе mail.ru, привет.ru, невозможно. На Li.ru код часиков примет другой вид. На какой платформе находится Ваш блог?

    Ответить

  4. Заморочно, но нужно и полезно. СПАСИБО. ЛиРу дает возможность комментировать
    только анонимно?((

    Тогда подписываюсь так: Lo_spero

    Ответить

  6. Добрый день!
    Объясните пожалуйста (подробнее, если можно), как сделать — "Ссылку к заданному месту текста". Спасибо

    Ответить

  14. Россиянка, если я правильно поняла, то вам нужен этот код:
    <a href="ссылка на flash" target=_blank title="смотреть флеш">Посмотреть флеш</a>

    Ответить

  15. Добрый день
    подскажите где можно найти код вашего архива блога справа.. раскрывающийся список

    Ответить

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

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