Графические ссылки в html документе.

Безимени-187Рассмотрим как сделать графические ссылки, когда ссылкой html является не часть текста, а картинка. По принципу действия всё похоже на обычные текстовые ссылки (т.е. ссылки состоящие только из слов). Любая картинка (как неподвижная, так и анимированная) также заключается в тэги <a></a>. Т.е. после <a href=…> – вписываете адрес либо на свой сайт, либо на сторонний ресурс. Потом, вместо текста вставляем с помощью атрибута img src электронный адрес нашей картинки.. И когда посетитель нажимает на обведенное изображение, осуществляется переход на заданный ресурс либо на страницу вашего проекта.

Вот как подобная графическая ссылка вписывается в html-код:

Предположим, на определенной странице уже есть картинка с прописанными к ней атрибутами. Вот её и сделаем активной, заключив в ссылочный тэг.

Теперь новый html код со ссылкой вставляем внутрь вашей страницы:

посмотреть результат

 

В некоторых браузерах вокруг картинки, которая обозначена как ссылочная, может находиться обводка, что не всегда эстетично выглядит. Чтобы избавиться от подобного элемента, в тэг графического файла вписывайте атрибут border=0.
А ещё вы можете сделать, чтобы ссылка открывалась в новом окошке. Для этого внутрь <a> вписываем target=”blank”:

Переход по ссылкам можно задавать и внутри страницы, если на ней находится очень много текста, картинок. Например, в верхней части предварительно располагаете список разделов, содержащихся в этом обширном документе. Посетитель получает возможность быстро сориентироваться и, нажав на ссылку, осуществить переход, не тратя время на просмотр всей «портянки». Служит этому атрибут name, который также вставляется в уже знакомый нам тэг <a>.

Рассмотрим пример, если на вашей странице содержатся 3 раздела. Прежде всего, вставляем ссылку, которая позволяет перемещаться в нужные места внутри html-документа.

Обратите внимание на символ # (решетка) – писать его обязательно, т.к. он дает браузеру понять, где именно находятся закладки. После, в нужных местах (в началах разделов) расставьте и сами закладки на которые будут осуществляться переходы.

Так выглядит описанный пример внутри html кода:

посмотреть результат

 

Поэкспериментировав с различными вариациями описанных html-ссылок, вы можете создавать удачный и практичный вид ваших сетевых проектов. Основные функции работы с ссылками изучены вами, но помните, что важна и постоянная практика.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Оставить комментарий

http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика