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

Оформление ссылок 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 код часиков примет другой вид. На какой платформе находится Ваш блог?

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

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

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

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

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

  7. Это стандартный гаджет для блога Blogger.com. Кодом на другие площадки не встраивается.

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

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