Все о ссылках, оформление и коды.

Четверг, 01 Октября 2015 г. 11:46 + в цитатник

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

ЗДЕСЬ МОЙ ДНЕВНИК МОЙ ДНЕВНИК ШАДРИНА ГАЛИНА

Простая ссылка на любую веб-страницу, чтоб сайт открылся в новом окне:

На главную страницу

<a href="АДРЕС СТРАНИЦЫ" target="_blank">НАЗВАНИЕ САЙТА</a>

Можно сделать так, что при подводе мышки к ссылки, появится ваш комментарий к ней. Например
Всплывающий комментарий к ссылке:

ДНЕВНИК Шадрина Галина

<a href="АДРЕС СТРАНИЦЫ" target="_blank" title="ВСПЛЫВАЮЩИЙ ТЕКСТ">НАЗВАНИЕ САЙТА</a>

Ссылкой на страницу является картинка или кнопка, при нажатии на которую переходим на нужный сайт. Связкой «картинка-ссылка» делается большинство кнопок на сайтах.

<a href="АДРЕС СТРАНИЦЫ" target="_blank">НАЗВАНИЕ САЙТА<img src="URL АДРЕС КАРТИНКИ"></a>

Здесь так же можно сделать всплывающую подсказку (Наведите курсор на ссылку) .

<a href="АДРЕС СТРАНИЦЫ" target=_blank title="ВСПЛЫВАЮЩАЯ ПОДСКАЗКА"><img src="URL АДРЕС КАРТИНКИ"></a>

Обычно ссылка на сайт всегда подчеркнута. Что бы отменить такое подчеркивание применяем следующие теги.

ПЕРЕХОДИМ В ДНЕВНИК

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

Сделать текст ссылки обычным, (в данном примере я ее чуть выделю, что б вам было видно) цветом и отменить подчеркивание, по сути скрыть ссылку, то есть сделать ее тем же цветом, каким и текст поста. Такая ссылка не будет выделятся на фоне вашей записи. (цвет менять из таблицы цветов)

ТАБЛИЦА HTML кодов ЦВЕТОВ

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

Подчеркиваем ссылку пунктиром

МОЙ ДНЕВНИК ЗДЕСЬ

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

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

ЗДЕСЬ НАХОДИТСЯ МОЙ ДНЕВНИК

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

Обводим ссылку рамочкой:

ЗДЕСЬ НАХОДИТСЯ МОЙ ДНЕВНИК

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

Обводим ссылку пунктирной линией:

ЗДЕСЬ НАХОДИТСЯ МОЙ ДНЕВНИК

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

Обвести точками и назначить свой цвет текста:

ЗДЕСЬ НАХОДИТСЯ МОЙ ДНЕВНИК

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

Ссылка с выделенным фоном:

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="background:yellow; color:black">Ваш ТЕКСТ</a>

Переход наверх, в начало страницы В начало

<a href="#top">В начало</a>

Изменение формы курсора для отдельной ссылки:(Подведите курсор к ссылке)

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:help">Ваш ТЕКСТ</a>

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:Crosshair">Ваш ТЕКСТ</a>

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:Move">Ваш ТЕКСТ</a>

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:Auto">Ваш ТЕКСТ</a>

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:ne-resize">Ваш ТЕКСТ</a>

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:s-resize">Ваш ТЕКСТ</a>

И еще несколько курсоров с кодами для удобства.

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:not-allowed">Ваш ТЕКСТ</a>

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:zoom-in">Ваш ТЕКСТ</a>

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:zoom-out">Ваш ТЕКСТ</a>

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:progress">Ваш ТЕКСТ</a>

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:wait">Ваш ТЕКСТ</a>

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:pointer">Ваш ТЕКСТ</a>

МОЙ ДНЕВНИК ЗДЕСЬ

<a href="АДРЕС СТРАНИЦЫ" style="cursor:default">Ваш ТЕКСТ</a>

Ссылка на свой ё-мейл: Встаньте мышкой на ссылку, нажмите правую кнопку и выберите СКОПИРОВАТЬ АДРЕС

МОЙ ё-мейл АДРЕС ЗДЕСЬ

<a href=mailto:АДРЕС ПОЧТЫ>Написать мне на e-mail</a>

Список ссылок с точкой впереди:

• МОЙ ДНЕВНИК
• Таблица кодов цветов
• МОИ АЛЬБОМЫ НА ЯНДЕКС ФОТО
• МОИ УРОКИ
• ШПАРГАЛКИ ПО HTML

Код:

<ul>

<li><a href="АДРЕС САЙТА">НАЗВАНИЕ САЙТА</a></li>

<li><a href="АДРЕС САЙТА">НАЗВАНИЕ САЙТА</a></li>

<li><a href="АДРЕС САЙТА">НАЗВАНИЕ САЙТА</a></li>

<li><a href="АДРЕС САЙТА">НАЗВАНИЕ САЙТА</a></li>

<li><a href="АДРЕС САЙТА">НАЗВАНИЕ САЙТА</a></li>

</ul>

Эффект подсветки ссылки (наведите курсор на текст):

<form action="АДРЕС САЙТА" target="_blank" method="get"><button type="submit">ССЫЛКА С ЭФФЕКТОМ ПОДСВЕТКИ</button></form>

Делаем красивую кнопку-ссылку на страницу (с картинкой), и эффектом подсветки:

<form action="АДРЕС САЙТА" target="_blank" method="get"><button type="submit"><img src="АДРЕС КАРТИНКИ" align=absMiddle> TEXT</button></form>

В начало ↑

Удачи в вашем творчестве.

Серия сообщений "Шпаргалки":
Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 9 - Бродилка по ОНЛАЙН - генераторам для создания Слайд-шоу.
Часть 10 - Все о бегущем тексте. Примеры и коды.
Часть 11 - Все о ссылках, оформление и коды.
Часть 12 - РАБОТА С ТЕКСТОМ. html коды для текста
Часть 13 - Он-лайн графические редакторы
...
Часть 28 - Вставляем картинки в свои сообщения
Часть 29 - Справочник html по изображениям
Часть 30 - Как сохранить гифку из Одноклассников