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

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

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

главная страница Google

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

Структура тега ...

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

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

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

главная страница Гугл

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

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

главная страница Гугл

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

главная страница Гугл

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

Гугл

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

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

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

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

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

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

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

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

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

Перейти к букве Я

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

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

буква Я

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

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

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

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

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

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

картинка

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

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

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

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

главная страница гугл

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

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

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

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

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

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

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

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

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

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

Широко применяется способ замены статичных кнопок () на красивые графические, созданные веб-дизайнером в редакторах графики (GIMP, Photoshop).

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

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

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

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

...абонент ...

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

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

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

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

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

Yandex

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

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

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

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

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

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

Как сделать ссылку в Word? Гиперссылка это часть документа (какой-нибудь графический объект или текст), щелчок по ней осуществляет переход на веб-страницу или к определенному файлу, которые находятся в Интернете или на вашем компьютере. Гиперссылка в Word чаще всего делается для перехода по такой ссылке на какой-нибудь сайт, для перехода на который была сделана такая ссылка.

Для осуществления перехода необходимо нажать на клавиатуре на клавишу «Ctrl» и кликнуть левой кнопкой мыши по ссылке, после этого вы автоматически попадете на нужный вам сайт или файл, на определенное место в документе, будет открыт новый документ или будет открыта электронная почта.

В разных версиях программы Microsoft Word эти действия производятся одинаково, есть только различия в интерфейсе версий программы.

Создание гиперссылки в документе Word 2007

В версии программы Word 2007, на этом примере, будет показано создание гиперссылки в документе Word на определенный сайт.
Для этого необходимо будет открыть документ Word. В окне открытого документа следует выделить слово, выражение, фрагмент текста, символ или графический объект. В данном случае, я выделил слово «СКАЧАТЬ».

После этого, отрывается окно «Вставка гиперссылки».

Под выражением «Связать с:» необходимо нажать на кнопку «файлом, веб-страницей» (в нашем случае). Вы также можете сделать ссылку на конкретное место в документе, или сделать ссылку на другой документ или электронную почту.

В поле «Адрес:» вставляете скопированную ссылку нужного вам сайта. В поле «Текст:», адрес ссылки будет введен автоматически.

Если вам нужно будет ввести вместо простого адреса в интернете (например, https://сайт/) какое-нибудь выражение, которое будет отображаться вместо простого веб-адреса, то тогда вы можете скрыть такую ссылку таким выражением (анкором).

Для этого, в поле «Текст:» нужно будет ввести необходимое слово или выражение. На этом примере, я ввел слово «СКАЧАТЬ».

Затем нажимаете на кнопку «OK». После этого ссылка в Word будет вставлена в нужное место документа.

Сделать гиперссылку можно и другим способом. После открытия документа Word, выделяете нужное вам выражение или фрагмент текста, затем щелкаете правой кнопкой мыши по выделенному выражению или фрагменту текста. Далее в контекстном меню нажимаете на пункт «Гиперссылка…».

Создание гиперссылки в документе Word 2003

Во вкладке «Вставка», в контекстном меню необходимо будет выбрать пункт «Закладка…».

В окне «Закладка» нажимаете на кнопку «Добавить». Здесь можно будет ввести имя закладки (должно начинаться с буквы и не должно быть пробелов), по умолчанию имя вводится автоматически.

Теперь переходите к тексту (в нашем случае), который должен быть гиперссылкой. Выделяете этот текст (на этом примере слово «нажимаем»), а в контекстном меню нажимаете на пункт «Гиперссылка…».

Гиперссылка создана. Для перехода к определенному месту в документе, щелкаете по ссылке правой кнопкой мыши, в контекстном меню нажимаете на пункт «Открыть гиперссылку». После этого произойдет перемещение в определенное место в документе Word, на которое была создана ссылка.

Создание гиперссылки в документе Word 2010

В Word 2010 будем создавать гиперссылку на новый файл. Для этого, в окне открытого документа Word выделяете фрагмент текста, символ или графический объект, к которому будет привязана гиперссылка. Щелкаете правой кнопкой мыши по выделенному (на этом примере слово «документ»), затем в контекстном меню выбираете пункт «Гиперссылка…».

В поле «Имя нового документа» вы должны будете написать его имя. Вы можете изменить расположение нового документа. Потом нажимаете на кнопку «ОК». Гиперссылка создана.

Если активирован чекбокс в пункте «сейчас», то тогда сразу откроется новый документ Word. После окончания работы с новым документом, закрываете его.

Открываете первый документ, щелкаете правой кнопкой мыши по гиперссылке, в контекстном меню нажимаете на пункт «Открыть гиперссылку». После этого открывается второй документ, на который вы делали ссылку.

Описанные действия аналогичны для всех версий программы Word.

Выводы статьи

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

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

Как сделать гиперссылку в Ворде
Устанавливаются гиперссылки в текстовом редакторе Ворд очень просто. Запишите адрес страницы в интернете, на которую вы хотите сделать гиперссылку в виде http://adress.ru, установите после нее знак пробела или нажмите клавишу Ввод (Enter) и текстовый редактор сразу же преобразует ее в активную гиперссылку. Это самый простой вариант, но не самый гибкий.

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

Для этого перейдите в раздел Вставка и нажмите на кнопку Гиперссылка .

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

С файлом или веб-страницей. Для связи с веб станицей в строке Текст введите информацию, которая будет отображаться в видимой части гиперссылки (например, КакИменно), а в поле Адрес точную запись ссылки в виде адреса в сети Интернет (например, http://сайт). При установке ссылки на файл выберите его на диске вашего компьютера и также введите текст ссылки.

С местом в документе. Гиперссылку в Ворде можно связать со следующими местами в документе: началом документа, заголовками и закладками внутри него. При этом заголовки и закладки должны уже содержатся в документе. Вам остается только выбрать место в документе для установки гиперссылки на него и вписать ее текст.

С новым документом. Можно связать гиперссылку с новым документом, являющимся одним из стандартных файлов Office. Для этого достаточно указать полный путь к файлу в компьютере и сам текст ссылки.

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

При необходимости, если что-то вам окажется непонятным при работе с гиперссылками, всегда можно обратиться к справочным данным нажав знак вопроса в окне мастера. Откроется подробная справка, в которой описаны все способы и нюансы создания гиперссылок в Microsoft Word на русском языке.

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

Что такое гиперссылка?

Не каждый пользователь ПК знает, что такое гиперссылка, и как она создается, хотя наверняка не раз видел её не только на просторах интернета, но и в документах Word, Excel, различных презентациях.

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

Если стоит задача перенаправить пользователя на другую страницу в пределах того же сайта, то используются гиперссылки в html с pagehtml – относительным адресом страницы. А чтобы связать страницы различных сайтов, следует использовать абсолютный адрес страницы, которому свойственна такая структура гиперссылки – http:⁄⁄site.com⁄page.html.

Виды гиперссылок

По зоне их действия

• Внешние. Они приводят на относящуюся к другому документу или сайту страницу.
• Внутренние. Такие виды гиперссылок могут вывести только на страницу с активного в данный момент сайта (при этом они связывают размещённые на одном домене документы) или другую страницу того же самого документа.

По формату

• Текстовые.
• Графические.

В первом случае подразумевается обычный текст, как, например, гиперссылки в блокноте (т. н. URL-редирект). Во втором случае ссылка прикрепляется к графическому файлу (картинке, баннеру, анимации, кнопке и т. д.). Часто графические ссылки используются при создании кнопочного меню, а также при размещении миниатюр статей, тизеров, рекламы и т. д. На некоторых сайтах используется графическая карта – совокупность миниатюр (небольших картинок), которые разнесены по ячейкам импровизированной таблицы. В каждую миниатюру встроена гиперссылка, отсылающая на определённую страницу.

Вначале выделяется отдельное слово, фраза или даже целый кусок текста (когда нужно создать гиперссылку в презентации, документе или странице сайта).

В группе «Связи» нужно отыскать кнопку «Гиперссылка», нажатие на которую открывает диалоговое окно.

Можно прийти к необходимому пункту и через контекстное меню, нажимая в поле выделенного объекта на правую клавишу мышки, а также с помощью клавиатуры, если после выделения фрагмента нажать сочетание «Ctrl+K».

В диалоговом окне откроется список документов на вашем компьютере, из которого следует выбрать нужный.

Если объектом гиперссылки является документ из Интернета, то её можно создать ручным способом. Нужно просто скопировать url объекта и вставить его в поле «Адрес». Затем завершить всё нажатием кнопки «ОК», после чего ссылка окажется вставленной.

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

Перед тем как делать гиперссылку в презентации, важно определиться с программой, в которой вы будете работать. Основными программами считаются LibreOfficeImpress и Powerpoint. Эти ссылки можно разделить на несколько типов, что необходимо знать перед их созданием в презентации, ведь при разработке конкретного проекта нужно учитывать предлагаемые конкретной программой возможности.

• документов;
• адресов в Интернете;
• адресов электронных почт;
• слайдов данной или иной презентации.

Чтобы создать гиперссылку для презентации в PowerPoint на нужную страницу сайта, нужно:

Выделить фрагмент (текст, картинка или медиафайл).

Перейти во вкладке «Вставка» к группе «Ссылки».

Нажать на «Гиперссылку».

После этих действий на экране откроется окно «Вставка гиперссылки».

Далее нужно выбрать среди четырёх вариантов гиперссылок:

• на web-страницу или файл;
• на адрес электронной почты;
• на локацию в данном документе;
• на новый документ.

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

Чтобы вставить гиперссылку в презентацию, создаваемую в программе LibreOfficeImpress, нужно вначале выделить часть нужного содержимого, а затем последовательно перейти через «Вставку» к «Гиперссылке», после чего нужно вставить необходимый адрес.

Как сделать гиперссылку в экселе (MicrosoftExcel)?

Гиперссылки в Excel также можно внедрять по-разному. Простейший вариант, когда копируется внешняя ссылка и вставляется гиперссылка в Excel. Если нужно оставить её активной, то копирование завершается нажатием «Вставить». При нажатии на эту ссылку, осуществляется переход на другую страницу сайта, а ссылка становится фиолетовой. Если копировать ссылку в качестве простого текста, то она получится неактивной. Тогда алгоритм такой: «Копировать», «Специальная вставка», «Текст в кодировке Unicod», и получается простой текст.

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

{Текстовая ссылка}

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

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

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

А Вы уже знакомы с гиперссылками? Где и как Вы их делали? Расскажите об этом в

Здравствуйте, уважаемые читатели блога сайт ! Как известно, для успешной раскрутки сайта и повышения его позиций в результатах поисковой выдачи, необходимо проводить качественную SEO оптимизацию сайта. Понятие “ “, которая, в свою очередь, делится на внутреннюю и внешнюю, неразрывно связано с такими понятиями, как “внутренние и внешние ссылки сайта”. Поэтому, нам очень важно знать, сколько ссылок должно быть на сайте, как проверить их количество, как убрать лишние ссылки с сайта и закрыть их от индексации, как наращивать ссылочную массу и т.д. Чтобы ответить на все эти и другие вопросы, касающиеся внутренних и внешних ссылок, давайте, для начала, разберемся, что такое ссылка (или гиперссылка) в HTML.

В этой статье я расскажу, что такое ссылка, как сделать гиперссылку в HTML на сайте, как открыть ссылку в новом окне, как создать ссылку на адрес электронной почты (e-mail) и как сделать ссылкой картинку. Коснемся, также, таких понятий, как html-теги и атрибуты гиперссылок, анкор ссылки, html якорь (anchor) и хеш-ссылки. Итак, начнем.

Что такое ссылка (гиперссылка).

Если гиперссылка ведет на веб-страницу или файл, которых не существует (удалены, перемещены) или ее адрес указан неверно, то такая ссылка называется битая. Битых ссылок на сайте быть не должно, так как они вводят посетителей в заблуждение и, перейдя, по такой ссылке человек уже вряд ли вернется на Ваш сайт. Подробнее, о том, почему появляются битые ссылки, как их искать и исправлять, мы поговорим в отдельной статье. А сейчас продолжим.

Как сделать ссылку (гиперссылку) в HTML на сайте.

Сделать ссылку на другую страницу своего или другого сайта очень легко. Для создания гиперссылки надо указать браузеру, что является ссылкой и указать адрес документа, на который она будет вести. Делается это с помощью HTML-тега и обязательного атрибута href :

Здесь URL – это адрес документа, на который следует перейти. А текст гиперссылки, расположенный между тегами и , называется анкором ссылки и виден посетителю веб-страницы. Кроме того, что текст ссылки (анкор) информирует читателя, куда будет осуществлен переход, он еще очень важен в поисковой оптимизации (SEO), так как служит одним из определяющих факторов, влияющих на ранжирование Вашего сайта по ключевым словам, содержащимся в этом анкоре. Обычно такой вид ранжирования называют ссылочным.

Абсолютная ссылка

Они используются для указания документа на другом сайте (внешняя ссылка).

Допускается делать абсолютные ссылки и внутри одного сайта, однако правильнее использовать для создания внутренней ссылки относительные адреса, которые выглядят короче. Но, анализируя различные сайты, я заметил, что подавляющее большинство веб-мастеров делают внутренние ссылки с абсолютными адресами. Тут есть свой плюс, так как, если у Вас скопируют страницу, то таким образом Вы получите рабочие обратные внешние ссылки.

Как видите, с абсолютными ссылками все просто. Вот с относительными сложнее, поскольку при их создании надо понимать, какое значение атрибута href надо указать, так как оно зависит от исходного расположения документов. Как я уже говорил, никто с этим особо не заморачивается и делает все ссылки на сайте абсолютными. Однако, если Вам интересно подробнее узнать, как правильно создавать относительные ссылки для сайта, могу порекомендовать статью Дмитрия, автора блога ktonanovenkogo.ru . Более подробного и понятного объяснения я еще не встречал.

Для примера, покажу, как будет выглядеть ссылка, ведущая к файлу относительно корня сайта (просто отсекаем все, что слева от третьего слеша в аналогичной абсолютной ссылке):

Относительная ссылка

На главную

Текст ссылки (анкор)

Цвета и оформление всплывающего текста зависят только от настроек операционной системы и браузера.

Как открыть ссылку в новом окне.

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

Открыть ссылку в новом окне нам поможет атрибут target тега . По умолчанию он имеет значение _self , которое обычно не прописывается. Для того чтобы открыть документ в новом окне, изменяем значение атрибута target на _blank :

1	Новое окно

Новое окно

Что делать, если при посещении чужого сайта, где ссылки открываются в текущем окне, Вы хотите открывать их в новом? Надо просто щелкать по ним не кнопкой, а колесиком мыши. В этом случае новая страница откроется в новом окне.

Как сделать ссылку на e-mail (адрес электронной почты).

При щелчке по этой ссылке откроется программа для работы с электронной почтой, установленная у Вас по умолчанию, где уже будет заполнено поле “Кому”. Чтобы автоматически заполнялась и тема письма, надо сделать ссылку на e-mail такого вида:

Дмитрий КтоНаНовенького советует еще один способ установки закладок в тексте веб-страницы, без использования html якорей. Для этого делаем закладку из любого HTML-тега, имеющегося на странице, прописывая ему универсальный атрибут id . Например, делаем закладку из тега заголовка h3 :

Текст заголовка

Важно в атрибуте id первым символом имени якоря прописывать латинскую букву, потом можно использовать любые другие разрешенные символы.

Давайте, для примера, вернемся к заголовку “ “, а потом продолжим.

Можно использовать хеш-ссылки для перехода на нужное место не только в пределах одной страницы, но и для перехода на другую страницу сайта. Для этого мы устанавливаем html якорь в нужном месте на нужной странице, а в саму хеш-ссылку перед символом решетки прописываем адрес этой страницы. Например:

Текст ссылки на html якорь-закладку

Виды и цвет гиперссылок в HTML.

• Не посещенная ссылка – имеет синий цвет и подчеркивание.
• Активная ссылка – принимает красный цвет во время между щелчком мыши по ссылке и началом загрузки новой страницы. Понятное дело, в таком состоянии она находится совсем недолго.
• Посещенная ссылка – меняет свой цвет на фиолетовый после перехода по ней.

Изменить цвет гиперссылок в html-документе можно при помощи тега и следующих его атрибутов:

• Link – цвет не посещенных ссылок.
• Alink – цвет активной ссылки.
• Vlink – цвет посещенных ссылок.

Все приведенные атрибуты можно объединять:

1

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

Таких длинных статей еще писать не приходилось, более 10 000 символов. Но на этом тема ссылок не исчерпана, продолжение следует.

Если для Вас была полезна эта статья, просьба понажимать на кнопочки соц.сетей ниже. До новых встреч на страницах !