FB
.ru

Как вставить гиперссылку в HTML? Создание и использование гиперссылок в HTML

Подписаться Редактировать статью

Гипертекст представляет собой текст, содержащий ссылки на другой текст. Примером могут служить примечания автора на сложные определения или сноски переводчиков внизу страницы книги, если в ней встречается текст на иностранном языке. Сайты Интернета представляют собой сложную систему гипертекстовых переходов с одной страницы на другую, в пределах самой страницы, а также между несвязанными единой тематикой ресурсами. Такая структура практична, экономит много времени, позволяет посетителю быстро найти необходимую информацию и не растеряться в большом количестве переходов.

Вставка гиперссылки

В HTML для вставки гиперссылки используется дескриптор (тег) <a>, который вставляется в нужное место. Обычно его располагают среди текста, так как гиперссылка сама по себе является текстовой структурой. Но ссылки бывают ещё графическими (иконки, кнопки, картинки); о них будет рассказано дальше. Их расположение на веб-странице не ограничивается текстом, а зависит от дизайнерского решения создателя сайта.

<a href=«https://google.com/»>главная страница Google</a>

Это пример того, как вставить гиперссылку в HTML-документ, что осуществляется посредством тега <a>. Посетитель сайта увидит подчёркнутый текст, отличный от цвета окружающего текста (цвет HTML-ссылки может быть любым), «главная страница Google», нажав на который, он попадёт на главную страницу поисковой системы «Гугл». Следует отметить, что текст гиперссылки должен содержать информацию о том, куда будет осуществлён переход. Этого принципа следует придерживаться и принять за правило!

Структура тега <a>...</a>

Можно заметить, что тег <a> – парный: необходим закрывающий тег </a>.

href—атрибут тега, указывает назначение ссылки.

https://google.com/ – значение атрибута, заключающее в себе URL-адрес ресурса, на который осуществится переход. Оно заключается в двойные или одинарные кавычки. Это зависит от структуры вложенности тегов по правилам HTML.

<a href=«https://google.com/»>главная страница Гугл</a>

вся эта конструкция называется элементом веб-документа.

как вставить гиперссылку в html

По правилам HTML, одни элементы могут содержать другие элементы. Тег <a> не исключение. Если программисту необходимо выделить жирным слово Google, то делается это с помощью тега <b></b> по общим правилам форматирования текста, соблюдая последовательность вложенности тегов. Веб-мастер должен знать, как создать гиперссылку в HTML без ошибок, иначе они не будут работать. Неработающие ссылки на компьютерном слэнге называют «битыми».

<a href=«https://google.com/»>главная страница <b>Гугл</b></a>

Здесь: элемент

<a href=«https://google.com/»>главная страница <b>Гугл</b></a>

содержит вложенный элемент

<b>Гугл</b>

Теперь посетитель страницы увидит гиперссылку с выделенным жирным текстом словом «Гугл».

Абсолютные гиперссылки

Гиперссылки, использующие абсолютные URL-адреса сайтов, содержащие имена доменов (.ru, .com, .org, .gov), называются абсолютными и имеют следующий синтаксис:

протокол://название домена/путь к файлу

Пример адреса распространённого в Америке поисковика: https://aol.com — абсолютный, так как содержит имя домена .com.

Абсолютные гиперссылки используются для переходов на страницы других сайтов или для доступа к ресурсам, расположенным на другом сервере. Переход осуществляется с помощью протоколов Интернета. Протоколы — это не тема данной статьи, но поскольку они участвуют в создании гиперссылок, необходимо хотя бы вкратце о них упомянуть:

  • http и https — наиболее часто встречающиеся; по ним осуществляется переход между интернет-страницами разных сайтов;
  • ftp — протокол для загрузки файлов на сервер или скачивания пользователем с сайта;
  • mailto — почтовый протокол, по которому отправляется электронная почта непосредственно с сайта, не заходя в личную почту.

Существуют ещё несколько протоколов особого назначения (gopher, telnet), встречающихся довольно редко, использование которых требует специальных знаний в программировании или системном администрировании.

Относительные гиперссылки

При относительной адресации использование гиперссылок в HTML служит для переходов внутри ресурса и не ведёт за его пределы. Если страница настолько большая, что работает вертикальная полоса прокрутки, иногда очень длинная, как, например, в словарях, то очень удобно и целесообразно использовать относительные ссылки для быстрого перехода к нужной букве.

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

как вставить гиперссылку в html на другую страницу

Для создания относительной ссылки используется атрибут name тега <a>:

<a name=«ya»>Перейти к букве Я</a>

где ya называется якорем, а Перейти к букве Я – якорем назначения. Для правильного отображения якорей рекомендуется использование латинских букв и цифр, поэтому не стоит писать «Я», хотя так было бы понятнее.

Теперь, чтобы осуществлялся переход от алфавита в начале страницы к букве «Я», нужно сделать привязку якоря в том месте HTML-документа, в котором начинаются слова на букву «Я»:

<a href=«#ya»>буква Я</a>

перед якорем стоит знак решётки, без которого переход к букве не будет работать.

Относительная адресация при создании сайта

Удобный и самый общепринятый алгоритм создания сайта программистом:

  • создание папки в компьютере и расположение её в месте быстрого доступа для удобства;
  • создание в этой папке главной страницы сайта index.html;
  • создание второстепенных веб-страниц (index.html/page2);
  • создание папки и размещение в ней графических файлов;
  • создание папки и размещение в ней других объектов (файлы для скачивания, например);
  • наполнение сайта контентом;
  • размещение файлов сайта на хостинге.

Обязательно придётся использовать ссылки для связи между элементами сайта, и очень кстати будет знать, как вставить гиперссылку в HTML на другую страницу этого же сайта. Если файлы сайта находятся в одной директории, на одном сервере, то нет необходимости использовать абсолютную адресацию. При передаче файлов сайта на хостинг связь между объектами сохранится, потому что они на хостинге также разместятся в одной директории.

Допустим, программист создал главную страницу сайта index.html, на которой имеется ссылка на другую страницу page2.html, украшенную картинкой img.png. Тогда относительный путь к этой картинке будет выглядеть так:

<a href=«/page2.html/img.png»>картинка</a>

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

Способы переходов по гиперссылкам

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

Значения атрибута target
_blankоткрывает страницу в новом окне браузера
_selfоткрывает страницу в текущем окне (значение по умолчанию)
_parentоткрывает страницу в родительском фрейме
_topпри использовании фреймов отменяет их все и открывает страницу в текущем окне браузера

Синтаксис применения атрибута target:

<a href=«https://google.com/» target=«_blank»>главная страница гугл</a>

Главная страница «Гугл» откроется в новом окне.

Примечание: для открытия страниц в новой вкладке не существует значений для данного атрибута, а задаётся самим пользователем в настройках браузера.

Цвет гиперссылок

Опытный пользователь Интернета со временем должен был заметить, что гиперссылки отличаются по цвету от окружающего текста, и обычно они синие. Ссылки, по которым он переходил и затем вернулся на прежнюю страницу, становятся сиреневыми. Использование гиперссылок в HTML в нестандартной цветовой гамме немного, но выделяет сайт среди остальных.

цвет html

Задаются цвета ссылок в теге <body> с помощью атрибутов и их значений, в которых выступает цвет HTML в системе rgb (#00FF00) или с прямым указанием имени цвета («green»). Существует три вида атрибутов для ссылок:

  • link — задаёт цвет непосещённой ссылки;
  • vlink — задаёт цвет ссылки, по которой пользователь уже переходил;
  • alink — задаёт цвет ссылки в момент перехода на другую страницу. Это происходит быстро, поэтому не всегда можно уловить этот эффект.

Пример разметки:

<body link=«#330099» alink=«#FF0000» vlink=«#990066»>

Если применить эти атрибуты в теге <body>, ссылки данного веб-документа будут тёмно-синими, посещённые – лилового, а активные – оранжево-красного цвета.

Графические гиперссылки

Прогресс и развитие веб-дизайна обязывают знать, как вставить гиперссылку в HTML в качестве изображения. Понятно, что картинка должна соответствовать содержимому страницы назначения. Например, главная страница сайта о лекарственных растениях может быть представлена в виде фотографий растений, кликнув по которым, пользователь перейдёт на страницу, на которой описываются лекарственные свойства растения.

Широко применяется способ замены статичных кнопок (<input type=«button»>) на красивые графические, созданные веб-дизайнером в редакторах графики (GIMP, Photoshop).

использование гиперссылок в html

Для вставки графики в качестве гиперссылок на страницы сайта используется тот же синтаксис, только вместо текста используется тег вставки изображения по правилам HTML:

<a href=«page2.html»><img src=«/images/img1» alt=«мать-и-мачеха» width=«50» height=«46»></a>

К тегу <img> точно так же применимы атрибуты задания альтернативного текста, ширины, высоты и другие.

Звонки с сайта

Стандарт html5 расширил функциональные возможности использования Интернета, и теперь совершать звонки можно не только с телефона, но непосредственно с сайта. Для этой цели также можно использовать гиперссылки в HTML документе, и они имеют такой синтаксис:

<a href="tel:+79xxxxxxxxx">...абонент...</a>

Вместо слова «абонент» прописывается понятный звонящему контакт, как в телефонной книге. Также можно разместить графический файл (фотографию абонента).

какие виды гиперссылок существуют в html

Чтобы звонки совершались с сайта, необходимо наличие не только ссылки на номер телефона абонента, но и гарнитуры (микрофон, наушники), установленной на компьютере VoIP-программа, скорость интернета должна превышать 0,5 Мб/сек. Оплата за звонки осуществляется расходом траффика. Поэтому, если Интернет безлимитный, то звонки бесплатные.

Этика создания гиперссылок

Размещая сайт в Интернете, веб-мастер должен знать, какие виды гиперссылок существуют в HTML, и не только правильно, профессионально их применять, но и придерживаться следующих положений:

  • Гиперссылка должна быть хорошо видна, отличаться от окружающего её текста. Пользователь должен знать, что это – гиперссылка.
  • Пользователю должно быть понятно, куда он попадёт, нажав на ссылку. Для этого целесообразно использовать ещё атрибут title, который лаконично описывает страницу перехода. Синтаксис применения атрибута такой:

<a href=«http:///a>

  • Пользователь должен получить правдивую информацию о файле, который будет скачан при переходе по ссылке.

какие виды гиперссылок существуют в html

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

Анти-Seo при создании гиперссылок

Кроме технической стороны вопроса о том, как вставить гиперссылку в HTML, следует осветить ещё и нравственный аспект. Существует много сайтов, доступ к которым пользователям блокируется программами безопасности (антивирусом) или даже государством. Это те сайты, которые были созданы нечистыми на руку веб-программистами.

как вставить гиперссылку в html на другую страницу

Одна из уловок, к которой они прибегают, – это вставка «невидимых» гиперссылок на веб-страницу. Мошенники знают, как создать гиперссылку в HTML, а при помощи атрибутов убрать подчёркивание ссылки и назначить ей цвет окружающего текста с тем, чтобы рядовой пользователь не увидел её. А при помощи других инструментов веб-технологий (CSS, JavaScript, PHP) можно запрограммировать их поведение. К примеру, событие OnMouseOver языка JavaScript активирует действие элемента веб-страницы. Когда пользователь проводит курсором по невидимой ссылке, он попадает на рекламную страницу другого сайта. Или ещё хуже, когда присутствует невидимая ссылка на файл и на его компьютер начинает скачиваться и устанавливаться ненужное программное обеспечение. Обычно это вирусы, которые меняют домашнюю страницу браузера, захламляют жёсткий диск массой программ и прочее.

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

загрузка...

Как снизить уровень стресса? 6 советов на каждый день
Психология
Зачем нужен крошечный карман на джинсах?
Одежда
Что форма носа может сказать о вашей личности?
Психология
Джо Метени – маньяк, который делал со своими жертвами нечто поистине ужасное
Культура
Топ-10 разорившихся звезд
Знаменитости
Что происходит с телом, когда у вас долго нет интимных отношений?
Сексуальность