|
||||||||||||
Меню сайта
Реклама на сайте:
|
HTML СсылкиУрок №8 Ссылки (или гиперссылки) играют самую важную роль в HTML. В первую очередь именно благодаря им интернет получил столь быстрое развитие и популярность. Ссылка — это «адрес» документа или сайта в интернете.Ссылки создаются при помощи тега <a>...</a>, он относится к уже хорошо известному вам типу — это обычный встроенный (уровня строки) элемент, который может содержать тоже только встроенные теги. Но, он не может содержать другие теги <a> , то есть нельзя одну ссылку располагать внутри другой. Обязательным параметром у ссылки является только href="URL", т.е. адрес ссылки. Между открывающим тегом <a> и закрывающим тегом </a> пишется анкор ссылки, который может состоять из слов, символов, картинки и прочих элементов. Пример. Код Html ссылки: <a href="http://webps.ru/">Перейти на сайт webps.ru</a>
Цвет ссылокПо умолчанию все ссылки на странице имеют синий цвет, посещенные ссылки имеют фиолетовый цвет, и активные ссылки (ссылка является активной при нажатии на нее кнопкой мыши) - красный. Цвет ссылок можно менять, используя атрибуты link, vlink и alink тега <body> при этом изменится цвет всех ссылок на странице:
Пример. Цвет ссылки: <body link="red" alink="green" vlink="yellow"> А также можно менять цвет отдельных ссылок с помощью тега <font> Пример. Фрагмент кода: <p style="color: blue;"> Как это будет выглядеть на странице:
Атрибуты и свойства тега <a>К открывающему тегу <a> можно прописывать различные атрибуты. Они отвечают за корректную работу ссылок. Атрибут target="здесь параметр", который может принимать следующие значения. Например:
Пример с target_blank Главная страница Пример кода Html ссылки: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег А, атрибут target</title> </head> <body> <p><a href="new.html" target="_blank">Открыть в новом окне</a></p> </body> </html> Чаще всего применяется значение _blank, поскольку он позволяет открывать страницу в новой вкладке. Это удобно для пользователя, поскольку у него остается открытой текущая страница в соседней вкладке. Погружаясь в тему с ссылками хочется отметить ещё один важный момент с атрибутом rel где указан параметр nofollow. Атрибут с параметром rel="nofollow" — определяет отношения между текущим документом и документом, на который ведет ссылка. Этот атрибут носит важное значение для поисковых машин и браузерами он никак не трактуется и может принимать следующее значения. Что вес по ссылке не будет передаваться (робот не будет переходить по ссылке!) Визуально никаких отличий Вы не заметите, однако для поисковых систем эта ссылка не будет передавать вес. Поэтому закрывайте все внешние ссылки атрибутом rel="nofollow", чтобы сохранить вес на Вашем сайте. Всплывающая подсказка для ссылкиЕще одним полезным вспомогательным атрибутом для ссылок является title, он позволяет создать всплывающую подсказку для вашей ссылки. Такая подсказка дает пользователю дополнительную информацию о том, что его ждет под ссылкой. Подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время исчезает. Как это будет выглядеть на странице: Главная страница Абсолютные и относительные ссылкиВ зависимости от вида адреса, указанного в атрибуте href, ссылки могут быть абсолютными и относительными. Как правило, для связи HTML-документов внутри сайта, используются относительные ссылки, а для ссылок на другие ресурсы — абсолютные. Но в конечном итоге каждый выбирает сам. Если, используя абсолютную адресацию, вы решите поменять домен, то вам придется переделывать все ссылки на вашем сайте. При относительной адресации этого делать не придется, при условии сохранения структуры папок. Абсолютные ссылки — это ссылки, которые содержат полный адрес страницы: имя протокола (http), имя домена-сайта (webps.ru, www.webps.ru) и месторасположение самого файла или папки на сайте. Плюсы таких ссылок в том, что они работают везде, где бы их ни указали (любой сайт или компьютер). Абсолютная ссылка будет выглядеть так: <a href="http://webps.ru/pages/file.html">Текст ссылки</a> Относительные ссылки — они содержат адреса относительно корня сайта или страницы, на которой указаны. Плюсы — они гораздо короче абсолютных, минусы — работают только в пределах сайта. Относительная будет такой: <a href="/file.html">Текст ссылки</a>
|