Ссылки в HTML
HTML
| |
 Тематические порталы
|
Ссылки — являются основным и важнейшим элементом любого сайта, а также всего интернета, так как благодаря им возможно переходить с одной страницы сайта на другую, организовывать удобную, понятную навигацию по сайту для посетителей, а это делает возможным быстрее находить нужную информацию.
Ссылки также очень важны для поисковых систем, так как благодаря им поисковые машины индексируют сайт, понимают когда и какие страницы появились на сайте, таким образом выдавая их в результатах поисковых запросов.
Синтаксис ссылок в HTML
Большинство платформ для создания сайтов имеют инструменты создания ссылок в рамках своей системы, однако следует знать принцип создания ссылок в html. Ссылку можно сделать при помощи, так называемого, тэга <a>, например:
<a href="url">Текст ссылки</a>
- url - адрес страницы, на которую введёт ссылка
Таким образом полностью ссылка может быть создана таким образом:
<a href="http://www.wikijournal.ru">Посетите Викижурнал</a>
- Атрибут "href" обозначает конечный адрес ссылки, в примере - "www.wikijournal.ru"
- Текст самой ссылки всегда виден на странице
- Нажатие на ссылку открывает страницу с указанным адресом
- В качестве ссылки может быть не только текст, но и любая картинка или любой другой HTML элемент (об этом читайте ниже)
Домашние ссылки
Домашние ссылки — это ссылки, использующиеся в рамках одного сайта. Если в ссылках указывается полный адрес страницы, то такая ссылка является абсолютной. Домашняя ссылка оформляется без "http://www....". Пример домашней ссылки:
<a href="homepage.html">Текст ссылки</a>
- homepage.html - данный файл находится в корневом каталоге сервера, где расположен сайт. Если страница находится в другой папке, например файл страницы "page.html" находится в папке "pages", то домашняя ссылка будет иметь такой вид:
<a href="page/homepage.html">Текст ссылки</a>
Свойства ссылок
Любую размещённую ссылку можно настраивать, вернее поведение того, что будет происходить после нажатия той или мной ссылки, а точнее, как будет открываться окно сайта по ссылке или поведение того или иного объекта на странице, на которой расположена данная ссылка.
Свойство цели ссылки
Данное свойство прописывается в ссылке при помощи атрибута "target=""" следующим образом:
<a href="http://www.wikijournal.ru" target="_blank">Посетите Викижурнал</a>
Где "target="_blank"" означает, что ссылка откроется в новом окне / вкладке (новой странице браузера), это параметр можно менять на другие свойства:
- _blank - открывает ссылку в новой странице / вкладке браузера.
- _self - открывает ссылку в том же окне / вкладке браузера, на которой осуществляется переход по ссылке (этот параметр установлен ко всем ссылкам по умолчанию).
- _parent - открывает ссылку в родительском фрейме (если страница изначально состоит из нескольких фреймов - частей).
- _top - открывает страницу в полном окне браузера, отменяя все существующие фреймы.
- framename - открывает страницу в конкретном заданном фрейме, необходимо дать имя фрейму и задать данное имя в ссылке.
Необходимо отметить, что современные сайты очень редко используют, так называемые, фреймы. Существуют другие, более удобные инструменты для создания свойств фремов, чтобы создать сайт с похожими функциями.
Ссылка в виде закладок
Закладки — очень удобный инструмент для создания ссылок к определённой части страницы (заглавие, абзац или другая часть). Закладки очень удобны для посетителей, так как они могут быстро перейти к нужной части страницы без необходимости прокручивания страницы в поиске необходимого текста. Пример закладок приведён на данной странице - вверху есть содержание данной статьи с ссылками по разделам. Эти ссылки являются закладками по разделам статьи, нажимая на ссылку пользователя переносит сразу же к разделу, который он выбрал. Для того, чтобы создать закладку необходимо обозначить на странице название данной закладки через присвоения имени, например:
<h2 id="название_закладки">Текст куда будет осуществляться переход по закладке</h2>
В самой ссылке на данной странице необходимо поставить знак "#" и далее название закладки:
<a href="#название_закладки">Ссылка</a>
Если ссылка с закладкой введёт на совершенно другую страницу, то необходимо обозначить название страницы, затем поставить знак "#" и далее название закладки:
<a href="page_name.html#название_закладки">Ссылка</a>
Ссылка в виде картинки
Ссылка на странице может быть представлена не только в виде текста, но и в виде картинок. Многие веб-мастера делают навигационные кнопки по сайту в виде картинок. Или небольшие картинки оформляются ссылками на полноформатные картинки или фотографии. Для того, чтобы сделать ссылку в виде картинки, необходимо HTML код картинки поставить между тэгом ссылки - "<a>", например:
<img src="pic.gif" alt="Link text" style="width:42px;height:42px;border:0">
- img src="pic.gif" — адрес месторасположения картинки на сервере
- alt="Link text" — текст, появляющийся при наведении курсора на картинку
- style="width:42px;height:42px;border:0" — CSS параметры картинки
Более подробно о картинках в HTML читайте в соответствующей статье
Оформление ссылок
Оформить ссылку можно непосредственно через код HTML (обычное форматирование текста). Данный способ применим только к одной, конкретной ссылке на сайте, например:
<a href="page_url.html" style="color: red">Link</a>
В вышеуказанном примере ссылка будет окрашена в красный цвет. Можно указывать любой цвет, указывая наименование цвета на английском языке: "red" - красный, "green" - зелёный и так далее. Можно указывать цвет специальным кодом, например "#ffffff" - белый. Любой цвет кодом можно получить в любом графическом редакторе или специальных бесплатных онлайн сервисах.
Также можно оформлять ссылки, так называемыми, средствами CSS. Данный способ оформления предпочтителен, так как он применим к отдельным ссылкам, группам ссылок или всем ссылкам на сайте. Например оформить ссылку через CSS можно таким образом:
a:link {color:blue; background-color:transparent; text-decoration:none}
a:visited {color:gray; background-color:transparent; text-decoration:none}
a:hover {color:green; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
Читайте об этом отдельную статью - Настройка ссылок CSS.
Примечание
Подведём итог по данной статье:
- Для создания ссылок необходимо использовать тэг "<a>", прописать все свойства ссылки и закрыть тэгом "</a>".
- HTML атрибут "href" определяет конечный адрес ссылки.
- HTML атрибут "target" определяет как будет открываться ссылка (в отдельном окне, каком-либо фрейме и так далее).
- HTML тэг "<img>" задаёт параметры картинки, которую можно преобразовать в ссылку.
- HTML атрибут "value" (id="value") задаёт определённую закладку на странице, к которой можно привязать ссылку.
- HTML атрибут "href="#value"" создаёт ссылку на закладку
