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

Пятница, 02 Октября 2015 г. 06:24 + в цитатник

Цитата сообщения Шадрина_Галина

Прочитать целиком В свой цитатник или сообщество!

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

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

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

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

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

<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 - Несколько оригинальных формул и ссылок для дневника
...
Часть 10 - Бродилка по ОНЛАЙН - генераторам для создания Слайд-шоу.
Часть 11 - Все о бегущем тексте. Примеры и коды.
Часть 12 - Все о ссылках, оформление и коды.

Рубрики:

оформление дневника

Метки: ссылки коды

<a href="https://www.liveinternet.ru/users/naniika/post373184215/">Р’СЃРµ Рѕ СЃСЃС‹Р»РєР°С…, РѕС„РѕСЂРјР»РµРЅРёРµ Рё РєРѕРґС‹</a><br/>Р’СЃРµ Рѕ СЃСЃС‹Р»РєР°С…, РѕС„РѕСЂРјР»РµРЅРёРµ Рё РєРѕРґС‹.

РЎРґРµР»Р°С‚СЊ СЃСЃС‹Р»РєСѓ РєР»РёРєР°Р±РµР»СЊРЅРѕР№, РІРµРґСѓС‰РµР№ РЅР° СЃР°Р№С‚, РёРЅС‚РµСЂРЅРµС‚ СЃС‚СЂР°РЅРёС‡РєСѓ, РґРЅРµРІРЅРёРє, Р±Р»РѕРі Рё РїСЂРѕС‡РµРµ РјРѕР¶РЅРѕ СЃРґРµР»Р°С‚СЊ РѕС‡РµРЅСЊ Р±С‹СЃС‚СЂРѕ. РќРѕ С…РѕС‡РµС‚СЃСЏ РµС‰Рµ РµРµ Рё РѕС„РѕСЂРјРёС‚СЊ РѕСЂРёРіРёРЅР°Р»СЊРЅРѕ. РќР°РїСЂРёРјРµСЂ,  С‡С‚РѕР± РѕРЅР° С‡РµС‚РєРѕ РІС‹РґРµР»СЏР»Р°СЃСЊ, РёР»Рё РЅР°РѕР±РѕСЂРѕС‚ Р±С‹Р»Р° СЃРєСЂС‹С‚Р°СЏ Рё С‚.Рґ. Р’СЃРµ СЃР°РјС‹Рµ РёР·РІРµСЃС‚РЅС‹Рµ РїСЂРёРјРµСЂС‹ СЃСЃС‹Р»РѕРє СЃ РєРѕРґР°РјРё РґР»СЏ РІСЃС‚Р°РІРєРё Р·РґРµСЃСЊ.

Р—Р”Р•РЎР¬ РњРћР™ Р”РќР•Р’РќРРљ&nbsp;&nbsp;&nbsp;     РњРћР™ Р”РќР•Р’РќРРљ&nbsp;&nbsp;&nbsp;    РЁРђР”Р РРќРђ Р“РђР›РРќРђ

РџСЂРѕСЃС‚Р°СЏ СЃСЃС‹Р»РєР° РЅР° Р»СЋР±СѓСЋ РІРµР±-СЃС‚СЂР°РЅРёС†Сѓ, С‡С‚РѕР± СЃР°Р№С‚ РѕС‚РєСЂС‹Р»СЃСЏ РІ РЅРѕРІРѕРј РѕРєРЅРµ:

РќР° РіР»Р°РІРЅСѓСЋ СЃС‚СЂР°РЅРёС†Сѓ

&lt;a href="РђР”Р Р•РЎ РЎРўР РђРќРР¦Р«" target="_blank"&gt;РќРђР—Р’РђРќРР• РЎРђР™РўРђ&lt;/a&g... <a href="https://www.liveinternet.ru/users/naniika/post373184215/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Аноним обратиться по имени Суббота, 16 Октября 2021 г. 15:35 (ссылка)

Подскажите, а как вставить сам фон? Я недавно вернулась сюда и уже забыла как это делалось.

Ответить С цитатой В цитатник

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Рубрики

-Метки

-Цитатник

-Приложения

-Ссылки

-Музыка

-Подписка по e-mail

-Поиск по дневнику

-Интересы

-Друзья

-Постоянные читатели

-Сообщества

-Трансляции

-Статистика

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