Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <a>, который имеет единственный обязательный атрибут href. В качестве значения используется адрес документа (URL).
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).
Пример 1. Использование абсолютных ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Абсолютная ссылка</title> </head> <body> <p><a href="http://www.yandex.ru">Поисковая система Яндекс</a></p> </body> </html>
Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.
Примеры относительных адресов
/
/demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.
/images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.
../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.
manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).
Пример 2. Использование относительных ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Относительная ссылка</title> </head> <body> <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p> <p><a href="tip.html">Как сделать такое же фото?</a></p> </body> </html>
Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка со слэшем (символ /) означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.
htmlbook.ru
Как же сделать ссылку на другой сайт?
Сделать ссылку на другой сайт довольно просто. Для этого нужно обозначить ссылку в браузере, и указать место где находится документ, к которому она будет вести. Это делается при помощи HTML-тега <а>, и обязательной части href: . Вот формула построения ссылки:
<a href= URL > текст_ссылки </a>
В данной формуле URL означает собственно адрес файла, на который ведет ссылка. Текст ссылки называется анкором, и его видно посетителям страницы. Анкор дает понять посетителю, куда ведет та или иная ссылка. Кроме того, текст ссылки важен еще и для раскрутки сайта. Ведь если в ней будут часто запрашиваемые слова, то поисковые программы будут выбивать ее чаще. Таким образом можно сделать действительно посещаемый сайт, вложив немного своего времени. Если адрес начинается с протокола (http) и названия сайта, то такой URL- адрес называется абсолютным.
Абсолютные ссылки принято делать для перехода на другой сайт, то есть внешними. Внутри сайта удобнее сделать ссылку с более коротким адресом (относительные). Однако встречаются сайты где и внутренние ссылки являются абсолютными. Это делается для того, чтобы в случае копирования страницы оставались рабочие ссылки.
Сделать абсолютную ссылку довольно просто. А вот когда речь идет об относительных ссылках, там все обстоит немного сложнее, ведь значение атрибута href зависит от изначального расположения файлов, и нужно четко понимать, как обозначить атрибут href. Именно поэтому все предпочитают абсолютные ссылки, как внешние, так и внутри сайта. Их проще и быстрее сделать. Если кому-то интересно, существует более подробное описание, как сделать относительную ссылку. А в этой статье мы можем показать ее формулу:
<a href="/kak_sozdat_ssilku.html"> ссылка</a>
Как видите, эта ссылка короче и из за этого удобнее.
Но вернемся к тому, как самостоятельно сделать гиперссылку. Вы наверно замечали, что иногда, направив курсор на некоторые ссылки, рядом возникает текстовое изображение, как бы пояснение смысла электронного адреса. Такой эффект можно сделать при помощи атрибута title:. Выглядеть это будет примерно так:
<noindex><a rel="nofollow" title="Текст_ подсказки" href="http://internetprogram.ru"> анкор </a></noindex>
Форму, цвет и размер окна можно сделать на ваше усмотрение, при помощи настроек css.
Как сделать ссылку вам уже понятно, но нужно разобраться, как вставить ее в текст? Для этого нужно зайти через HTML-редактор и скопировать туда сделанный нами HTML-код.
Ссылка, открывающаяся в новом окне
Когда переходишь по ссылке, чаще всего она открывается в рабочем окне, заменяя страницу, которую до этого читал посетитель. Такой вариант много где используется, но это не очень удобно. Возможно, вам нужно чтобы первая часть документа оставалась на виду, чтобы гость страницы мог быстро посмотреть на любое место текста.
Ведь если ссылок окажется несколько, и новая автоматически закрывает предыдущую, то рано или поздно искать первоначальную страницу будет уже бессмысленно, проще будет поискать информацию на другом сайте. Для того чтобы эксплуатация сайта была всегда удобной, и ссылки автоматически открывались в новом окне, существует — target тега <a>, еще один атрибут. Если изменить значение атрибута target тега <a> на _blank, документ будет открываться в новой вкладке. Формула такой ссылки:
<noindex><a rel="nofollow" href="http://internetprogram.ru" target="_blank">Отдельное окно</a></noindex>
Но что делать, если вы на чужом сайте, где документы открываются в одном окне, а вы хотите чтоб они открывались в новом? Этот вопрос решить очень просто, нужно вместо того чтоб щелкать по ссылке левой кнопкой мыши, нажимать на них колесиком. В таком случае автоматически открывается новое окно.
Создание ссылки на e-mail адрес.
Что делать, если вам нужно сделать ссылку на свой e-mail? Используем стандартный протокол передачи почты mailto. Вписываем в текст ссылки нужный адрес. Выглядит это так:
<a href="mailto:ivanova@internetprogram.ru"> Текст для строки “Кому” на e-mail</a>
При клике по такой ссылке будет открываться программа по работе с почтой, где уже будет заполнена строка “Кому”. Можно заполнить сразу и тему письма, для этого мы сделаем ссылку на электронный адрес по такому примеру:
<a href="mailto:ivanova@internerprogram.ru?subject=письмо_тема "›строка “Кому” e-mail</a>
На месте “темы письма” вписываете то, что потом должно быть автоматически написано в строке “тема письма” при отправке сообщения. Писать это нужно обязательно латинскими буквами, так как браузеры не работают с кириллицей, и если ее использовать, можно в результате получить неизвестно что. А используя латиницу — вы получите то, что нужно.
Как сделать картинку — ссылку?
Чтобы сделать картинку- ссылку, в редакторе HTML используется тег <img>. Он применяется для вставки изображения, которое прописывается вместо анкора. Структура такой ссылки:
src="http://internetprogram.ru/image/Top.jpg" alt="основная страница internetprogram.ru" /></a>
Здесь включена всплывающая подсказка, а так же, если в браузере отключен просмотр изображений, то вместо картинки будет текст, закодированый в атрибуте alt. Поэтому же атрибуту поисковые системы распознают, что на картинке. Таким образом, можно сделать посещаемость сайта выше, ведь в текст можно, опять же, вписать часто запрашиваемые слова. Кстати ссылка может находиться и на баннере, по структуре они одинаковы с ссылкой картинкой.
И последний вопрос, который мы рассмотрим, это как сделать ссылку на одной странице.
Мы уже объяснили, как сделать ссылку в пределах одного сайта, то есть внутренние. Но бывает, что нужно вставить ссылку на одну и ту же страницу. Казалось бы, зачем? Но ведь если текст длинный, то раз потеряв нужную строку, можно искать ее потом очень долго, что приведет к поиску информации на другом сайте. Случается, что проще еще раз вбить запрос и найти более короткую статью. Во избежание такого прокола, существуют ссылки в пределах одной страницы, ведущие, к примеру, на каждый пункт статьи.
Таким образом, при прочтении документа не приходится заново его читать ради пары слов. Можно просто сохранить, или открыть в новом окне ссылку на заинтересовавшее место. Сделать это можно с помощью заранее прописанных в тексте закладок, именуемыми html якорями. При этом ссылка выглядит так:
http://internetprogram.ru/kak-sdelat-ssyilku -v-html.html#ixzz2NJY0dDwi
Напоминаем, что все названия пишутся только латинскими буквами! И не забывайте что каждый клик по вашим ссылкам будет играть роль в улучшении поведенческих факторов! А у вас получается сделать ссылку для сайта?
Следующий как заработать денег с нуля
prosmo3.ru
Для того чтобы сделать ссылку для сайта,можно использовать несколько способов. И во многом способ, которым это выполняется, зависит от ресурса, на котором вы планируете разместить ссылку, и какого типа будет ваша ссылка.
Так существуют обычные ссылки (я их называю прямыми), в этом случае вы открываете необходимую страницу (ту на которую должна вести размещаемая вами ссылка), и копируете с адресной строки браузера полностью ссылку.
Такая условная страница (используется исключительно для примера) должна вести на главную (основную) страницу сайта ssilka после того как вы скопировали такую ссылку (кстати, если не удается скопировать при помощи правой кнопки мыши, воспользуйтесь для этого одновременным нажатием горячих клавиш «ctr+с»), вставьте ее просто в то место куда запланировали. Это может быть как обычный текстовый документ, так и специальное поле на странице сайта для вставки HTML кода. В итоге ваша ссылка будет выглядеть так, как вы ее скопировали с адресной строки браузера. Это один самый пожалуй простой способ, как сделать ссылку на сайт.
Существует еще один распространенный способ, когда ссылка является непрямой (понятие придумано исключительно для удобства объяснения). В таком случае при размещении такой ссылки в тексте статьи или дополнительных полях сайта пользователь будет видеть перед собой не строку с HTML кодом в виде ссылки аналогичной той, что мы приводили для примера выше. В данном варианте ссылка будет выглядеть как слово, или словосочетание, нажав на которое браузер перенаправит вас на страницу, куда ведет данная ссылка. Такой способ делать ссылки вызван желанием веб-дизайнеров придать страницам сайтов более красивый вид и оптимизировать их для читателей. Ведь если пользователь читая статью просто прочтет слово «ссылка» пусть и подсвеченную синим цветом с подчеркиванием это будет не так заметно и раздражительно чем среди текста встретить полную прямую ссылку с тегом http и с адресом ssilka. Причем зачастую слова которые связаны с ссылкой (их называют анкорами) вписываются в текст не просто так, а по смыслу всей статьи.
это поисковые системы обращают пристальное внимание. Как сделать ссылку на сайт в виде анкора. Для этого при вставке ссылки в текст необходимо выделить нужное слово (словосочетание) и после в панели управления (где задается тип текста, шрифт размерность и т.д.) сходной с основным меню текстового редактора «word» найдите значок похожий на значок бесконечности « ∞ ». Нажмите на него, и в отрывшемся окошке появится надпись типа «вставьте URL адрес ссылки» и поле для ввода. Иногда это поле может содержать уже введенный исходный код «http» а иногда нет, но в любом случае полный адрес ссылки должен начинаться с такого исходного кода. После этого жмем ОК, и все слово в тексте подсвечивается, синим цветом с подчеркиванием, если вы до этого не сменили стиль ссылок для своего сайта.
Но бывают ситуации, когда нет возможности воспользоваться такой кнопкой при добавлении ссылок в сайдбар например, или как сделать шапку для сайта что бы она в себе содержала так же ссылки. Для этого существует так же несколько способов. Итак как сделать ссылку на сайт в сайдбаре в виде анкора. Для этого необходимо открыть виджет или поле в которое можно добавлять исходный HTML код (практически все СМС поддерживают такую функцию) «вставка HTML кода». После чего необходимо воспользоваться тегом href и прописать ссылку. Если вы не специалист в языке HTML и не горите желанием изучать его, но вам срочно понадобилось сделать вручную ссылку. Как сделать ссылку на сайт в этом случае. А для этого всего-навсего необходимо воспользоваться HTML редактором типа «Дримвеве». Там набирая текст и используя кнопку для создания ссылок вы сможете, переключившись на вкладку «исходный код» скопировать полный адрес своей ссылки.
Кстати кроме перенаправления посетителей с одной страницы на другую, ссылки помогают, и модернизировать дизайн сайта. К примеру, многие начинающие владельцы сайтов используя различные стандартные темы для оформления, не знают, как сделать фон для сайта другим. А для этого необходимо всего лишь подобрать необходимое вам фоновое изображение, загрузить его в корневой каталог с изображениями для вашего сайта и вместо старой ссылки на старое изображение прописать путь к новому. Вот и все таким не хитрым способом можно легко изменить фон сайта.
fb.ru
Почему лучше на сайте использовать активную, а не неактивную ссылку
Преимущество использования активных ссылок перед неактивными в том, что аудитории легче получать информацию:
- В отличие от перехода по неактивной ссылке, для которого нужно скопировать ссылку и вставить ее затем в адресную строку браузера, на активную ссылку достаточно просто кликнуть.
- Благодаря удобству увеличивается посещаемость указанной страницы.
Как создать активные ссылки в HTML, визуальном редакторе, в соцсетях: ВК, Инстаграм
Как сделать активную ссылку в HTML
Тег активной ссылки на языке HTML для страницы site.ru выглядит следующим образом:
<a href="site.ru">анкор ссылки</a>
Чтобы браузер открывал ссылку в новом окне впишите в ссылку атрибут target:
<a href="/" target="_blank">site.ru</a>
Здесь присвоенное атрибуту target значение _blank означает новую страницу. Оно самое распространенное. Есть и другие, но они используются крайне редко при указании на страницы, использующие алгоритмы языка Java.
Это один из самых простых и действенных способов оформления активных ссылок в интернете.
Другой способ создания активных ссылок выглядит так:
[url=адрес ссылки, скопированный из адресной строки браузера]название ссылки[/url]
Этот метод может быть неудобен тем, что не всегда верно отображается на некоторых сайтах и страницах. Поэтому лучше использовать первый способ.
Как сделать активную ссылку в визуальном редакторе
Этот способ еще проще, чем создание ссылки через HTML. Например, вы используете WordPress – самую популярную CMS для создания сайтов. Выделяйте в тексте фрагмент, который хотите сделать кликабельным:
Находите в панели инструментов вверху значок «Вставить ссылку». Кликаете на него:
Под тем участком текста, который мы выделили, появится поле. В него вписываем адрес ссылки:
После этого выделенная фраза становится кликабельной и ведет на ту страницу, которую мы указали. О том, что по тексту можно кликнуть, говорит его оформление.
Текст подчеркнут и выделен другим цветом. Так пользователь видит, что по этому фрагменту можно кликнуть.
Как сделать активную ссылку в Инстаграме
Активной ссылку в Инстаграме можно сделать только в профиле и в комментариях. Любая ссылка в профиле автоматически становится активной. В комментариях воспользуйтесь HTML кодом:
<a href="site.ru">анкор ссылки</a>
В постах сделать ссылки активными невозможно из-за борьбы сети со спамом.
Как сделать активную ссылку ВКонтакте
Анкорные ссылки ВКонтакте могут быть только внутренними, то есть переадресующими на собственные страницы социальной сети: профили, паблики, сообщества и события. Если вам требуется вставить в запись или в комментарий ссылку на чей-либо профиль, то делается это следующим образом: в квадратных скобках прописывается id страницы, а через вертикальную черту – ее анкор, после чего квадратные скобки закрываются. Аналогично вписываются и ссылки:
- cообществ с атрибутом club;
- пабликов атрибутом public;
- событий с атрибутом event.
Например, id пользователя – 60230983, имя – Иван Иванов. Мы хотим упомянуть этого человека в записи. Для этого нужна следующая запись:
[id60230983|Иван Иванов]
Внешние ссылки могут быть только безанкорными. Скопируйте из адресной строки браузера и вставьте в запись, комментарий или сообщение. Подождите немного, чтобы подгрузилось изображение с сайта.
Как сделать ссылку активной в Ворде
Чтобы сделать ссылку активной в Miscrosoft Word есть два метода:
- Вставить ссылку из адресной строки браузера, а затем нажать клавишу Enter.
- Выделить слово или фразу, которая будет анкором ссылки, затем нажать на выделенный участок правой кнопкой мыши. Далее в выпавшем меню выбрать опцию «Гиперссылка»:
Далее требуется установить связь файла с веб-страницей, в данном случае. Выбрав эту опцию, вводим в поле снизу ссылку.
semantica.in
Статья поможет тем, кто хочет сделать слово ссылкой на сайт либо словосочетание в теле письма либо текстовом документе.
И так, если вы хотите сделать слово либо словосочетание ссылкой на сайт в теле письма, то для этого вам необходимо в почтовом клиенте (в том, которым пользуетесь, я буду показывать на примере Outlook Express) как обычно создать письмо и в теле письма выделить необходимое вам слово и выбрать пункт «Вставка — Гиперссылка».
Далее в открывшемся окне введите адрес сайта либо определенной страницы на сайте, куда должна вести ссылка и нажмите «Ок».
Все, считайте слово ссылкой в теле письма вы сделали.
Теперь рассмотрим, как создать ссылку на сайт в теле, например, вордовского документа.
Выделяем необходимое нам слово и кликаем по нему правой кнопкой мыши. Из выпавшего меню выбираем «Гиперссылка».
В открывшемся окне в поле Адрес вставляем адрес сайта и нажимаем «Ок». Только смотрите чтобы указатель в пункте «Связать с:» стоял в положении «файлом, веб-страницей».
Все, ссылки на сайт в теле документа вы теперь можете делать. Теперь чисто так для общего развития покажу как сделать ссылку на сайт в теле html-документа (кому не интересно, можете не читать).
Прописав следующее: <a href="http://comp-profi.com/">Как установить Windows</a> в html-документе вы установите ссылку на мой сайт по словосочетанию Как установить Windows.
comp-profi.com
Что такое ссылка
Сегодня мы с вами познакомимся с еще одним термином, без которого ну никак не обойтись во время продвижения. «Ссылка» — интересное понятие. В словаре можно найти несколько расшифровок данному слову — от заключения в дальних местах лишения свободы и воли, до направления которое выбирает человек в кибер-пространстве, следуя, по нему человек попадает на определенное место, где хранится нужная для него информация. Вот как неоднозначно и интересно может расшифровываться одно слово в «умных книгах».
В настоящее время известно несколько видов ссылок:
- Прямые (это когда в информационный текст вставляется url нужного сайта).
- Анкорные (другими словами, это видоизмененные адреса ресурсов). Вот как раз эта группа своеобразных путей содержит в себе большое количество разнообразных вариаций, среди которых:короткая, замаскированная словом или картинкой, гиперссылка.
- Внутренние (используются для перехода на определенные страницы вашего ресурса, не покидая просторов сайта). Другими словами, внутренние ссылки выполняют функцию перелинковки или перераспределения трафика по сайту в целом. Это понятно?
- Внешние (позволяют совершать переход на сторонний ресурс). Использование таких приспособлений может принести вам доход, но не забывайте о личной безопасности (берегите свой ресурс).
Как вы заметили, эти виды выделяются по определенным признакам. Например, первые 2 разновидности – по внешнему виду, следующие две – по характеру и возможностям и тд. Если с этим понятно, то давайте разбираться с тем, как же можно сделать ссылку на определенную страницу.
Ссылки-ссылочки или создаем шедевр маскировки
«Волшебство да и только», — хочется ответить на вопрос: «Как создавать ссылки»? Почему? Да потому что каждый описанный ранее вид можно получать различными способами.
Вы готовы погрузиться в мир языка html? Нет? Тогда рекомендую вам использовать прямые ссылки, заказывайте работу у фрилансеров и перестаньте задавать на форумах один и тот же вопрос: «А почему у моего сайта такая низкая посещаемость?» Я веду свой блог для тех, кому нужен результат и они готовы работать, следуя известной пословице: «Без труда не вытащишь и рыбку из пруда».
Кто-то сейчас со мной не согласится, сказав, что смысл этой пословицы уже утерян, ведь с приходом техники, работа рыбака стала простой (сети закинул и получил улов). Но это не так. Не верите? Может посмотреть несколько видеороликов об особенностях работы рыболовов и изменить свое мнение.
Ну да ладно, я снова отвлеклась от темы, давайте разбираться со способами получения ссылок:
- Создание прямой ссылки. Для воплощения этого метода вам нужно просто скопировать содержимое адресной строки и вставить его в нужное место. Отличительной чертой такого вида ссылок служит отсутствие ее маскировки (человек видит это и понимает, что кликнув по ней, он совершит переход, но не знает куда).
Совет: Если вы хотите чтобы ссылочки работали как часы, то вышеописанный способ вам явно не подойдет. Почему? Все очень просто-природа человека такова, что ему уже надоели такие примочки, ему подавай что-то эдакое— непохожее на других.
- Что касается анкорных ссылок, дак, они напоминают мне шоколад, завернутый в красивую обертку. Почему? Все дело в том, что url-адрес будет просто замаскирован специальными тегами, выступающие в роли фантика. А как вы знаете, не видя содержимого, человек выбирает по внешнему виду. Вкуснотище внутри— попробуй разверни и получи сюрпрайз. Интересно.
Исходя из этого, старайтесь создавать красивый текст или подбирать картинку, которые будут цеплять интернет-пользователя и действовать подобно гипнозу, заставляя совершить клик. Здесь все понятно?
Вот как выглядит путь, спрятанный под словом в html-формате:
<a href=»адрес» target=»_blank»>анкор</a>
где включение target – позволяет нужной странице открываться в новом окне, анкор – текст, под которым и будет сокрыт путь перехода к желаемому.
Что куда вставлять, я думаю, понятно. Если нет, то вы всегда можете задать мне вопрос, оставив комментарий к данному обзору, или изучить вот этот обзор «Способы маскировки ссылок».
Если html для вас «и мать и отец», то эта родственная связь вам поможет с сокрытием ссылок от поисковых роботов (бывают такие случаи, когда человек не хочет индексировать сторонний ресурс). Но если у вас таких вод «родственников» нет, то тут уж я приду к вам на помощь и подскажу, как это сделать. Вам просто нужно добавить в своем письме атрибут «nofollow». Другими словами, html-форма будет выглядеть вот так:
<a href=”адрес”rel=”nofollow”>анкор</a>
Получается, что вы можете спокойно скрывать url-адрес от человеческого взгляда, тем самым привлекая на собственный ресурс еще больший трафик. Однако если использовать текст для такой процедуры, то он становится заметным на фоне общего информационного потока (подсвечивается цветом и подчеркивается). Следовательно, читатель уже понимает, или догадывается, что будет совершен переход и может отказаться совершить это действие.
- А вот на мой взгляд самый классный и часто используемый и интересный способ завоевания сердец миллионов – сокрытие url-адреса картинкой или баннером. Как это сделать? Да не слишком то и сложно. Вам нужно найти подходящий файл формата jpg в интернете (если он на вашем рабочем столе, то нужно выгрузить его на сайт или вконтакте, чтобы суметь раздобыть его адрес).
Когда подготовительный этап завершен, нужно просто вставить в тело своего создания вот такую html— форму:
< a href=»адрес сайта»><img scr=”адрес картинки/*. jpg”/></a>
Что куда вставлять, я думаю понятно. Если остались вопросы, то выделите немного времени на прочтение вот этого обзора («Как скрыть ссылку»).
Если вы боитесь испортить свой ресурс, то проведите тренировки в ворде, попробуйте разослать своим родным и понимающим друзьям письма с различными вариантами ссылок и попросите их составить список наиболее интересных или удобных материалов. Такое маркетинговое исследование не только позволит вам хоть немного, но повысить свою посещаемость, но и получить мнение большого количества человек. Следовательно, вы уже сможете найти свою фишку (если людям больше нравится кликать на баннеры, то привлекайте внимание аудитории таким образом, только не переусердствуйте).
Пожалуй, это все, что я хотела рассказать вам сегодня. Надеюсь, что обзор получился интересным, а главное, понятным. На этом все, пока-пока.
P.S. У вас появилась возможность поделиться полученными знаниями со своими коллегами – кликайте по клавишам социальных сетей (одно мгновенье и ссылка на обзор уже доступна вашим друзьям).
С уважением, Елена Изотова.
blogizotovoy.ru
Как сделать гиперссылки на сайте
- Содержание:
- 1. Структура ссылки
- 2. Абсолютный и относительный путь
- 3. Якорь
- 4. Как сделать изображение-ссылку
- 5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
- 6. Атрибуты ссылок
1. Структура ссылки
Гиперссылки создаются с помощью парного тега <a></a>. Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.
Обязательным параметром тега <a> является атрибут href, который задает URl-адрес веб-страницы.
<a href="http://site.ru">указатель ссылки</a>
Ссылка состоит из двух частей — указателя и адресной части. Указатель ссылки представляет собой фрагмент текста или изображение, видимые для пользователя. Адресная часть ссылки пользователю не видна, она представляет собой адрес ресурса, к которому необходимо перейти.
Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:
метод доступа://имя сервера:порт/путь
Метод доступа, или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:
file обеспечивает чтение файла с локального диска:
file:/gallery/pictures/summer.html
http предоставляет доступ к веб-странице по протоколу HTTP:
http://site.ru/
https — специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS)
https://site.ru/
ftp осуществляет запрос к FTP-серверу на получение файла:
ftp://pgu/directory/library
mailto запускает сеанс почтовой связи с указанным адресатом и хостом:
mailto: nika@gmail.com
Имя сервера описывает полное имя машины в сети, например, site.ru. Если имя сервера не указано, то ссылка считается локальной, т.е. она относится к той же машине, на которой находится HTML-документ, содержащий ссылку.
Номер порта ТСР, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:
21 — FTP
23 — Telnet
70 — Gopher
80 — HTTP
Путь содержит имя папки, в которой находится файл.
2. Абсолютный и относительный путь
Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный.
2.1. Абсолютный путь
Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
1) протокол, например, http (опционально);
2) домен (доменное имя или IP-адрес компьютера);
3) папка (имя папки, указывающей путь к файлу);
4) файл (имя файла).
Существует два вида записи абсолютного пути — с указанием протокола и без него:
http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Если файл находится в корневой папке, то путь к файлу будет следующим:
http://site.ru/index.html
При отсутствии имени файла будет загружаться веб-страница, которая задана по умолчанию в настройках веб-сервера (так называемый индексный файл).
http://site.ru/
Обычно в качестве индексного файла выступает документ с именем index.html. Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.
2.2. Относительный путь
Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http://, он выполняет поиск указанного документа на том же сервере.
Относительный путь содержит следующие компоненты:
1) папка (имя папки, указывающей путь к файлу);
2) файл (имя файла).
Путь для относительных ссылок имеет три специальных обозначения:
/ указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки
./ указывает на текущую папку
../ подняться на одну папку (директорию) выше
Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте.
3. Якоря
Якоря, или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега <a> с разницей в том, что атрибут href содержит имя указателя — так называемый якорь, а не URl-адрес. Перед именем указателя всегда ставится знак #.
Следующая разметка создаст оглавление с быстрыми переходами на соответствующие разделы:
<h1>Времена года</h1> <h2>Оглавление</h2> <a href="#p1">Лето</a> <!--создаём якорь, указав #id элемента--> <a href="#p2">Осень</a> <a href="#p3">Зима</a> <a href="#p4">Весна</a> <p id="p1">...</p> <!--добавляем соответствующий id элементу--> <p id="p2">...</p> <p id="p3">...</p> <p id="p4">...</p>
Если нужно сделать ссылку с одной страницы сайта на определенный раздел другой страницы, то необходимо задать id для этого раздела страницы, а затем добавить его к абсолютному адресу ссылки:
<th id="about-color">color</th> <a href="https://html5book.ru/css-shrifty/#about-color" class="site" target="_blank">color</a>
4. Как сделать изображение-ссылку
Чтобы сделать кликабельное изображение, необходимо поместить элемент <img> внутрь тега <a>. Чтобы ссылка открывалась в другом окне, нужно добавить атрибут target="_blank" для ссылки.
<a href="http://www.fast-torrent.ru/film/gran-za-granyu-tv.html" target="_blank"><img src="//html5book.ru/wp-content/uploads/2014/07/Fringe.jpg" alt="Fringe"></a>
5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
У ссылок появились новые возможности — по клику можно не только переходить на другие страницы и скачивать файлы, но и совершать звонки на телефоны, отправлять сообщения или звонить по скайпу.
ссылка на телефонный номер <a href="tel:+74951234567">+7 (495) 123-45-67</a> ссылка на адрес электронной почты <a href="mailto:example@mail.ru">example@mail.ru</a> ссылка на скайп (позвонить) <a href="skype:имя-пользователя?call">Skype</a> ссылка на скайп (открыть чат) <a href="skype:имя-пользователя?chat">Skype</a> ссылка на скайп (добавить в список контактов) <a href="skype:имя-пользователя?add">Skype</a> ссылка на скайп (отправить файл) <a href="skype:имя-пользователя?sendfile">Skype</a>
html5book.ru
Содержание
- Как создать ссылку на сайт
- Атрибуты для ссылок
- Открытие ссылки в новом окне (target=»значение»)
- Описание ссылки (title=»описание»)
- Определение отношений между документами (rel=»значение»)
- Как создать ссылку на сайт в WordPress
- Рекомендации и советы по созданию ссылок
- Бонус — моя схема работы с внутренними ссылками
Как создать ссылку на сайт
Ссылка — это специально выделенный элемент в тексте, который при нажатии его кнопкой мыши открывает другую страницу или закладку внутри исходного документа. Любой линк на другую страницу выглядит следующим образом:
<a href=»адрес«>анкор</a>
где,
<a></a> — тег (элемент), обозначающий в коде ссылку;
адрес — это url документа сайта, который должен открыться при нажатии мышью перехода;
анкор — это текст самой ссылки, которую видит пользователь в тексте. Обычно при стандартных настройках он подчеркивается сплошной линией и выделяется цветом (например, у меня голубым).
Код для линка на внутреннюю закладку страницы немного другой:
<a name=»идентификатор«>анкор</a>
где,
идентификатор — якорь на текст документа, являющийся целью перехода по ссылке. Часто этот вариант линка используется для создания внутреннего меню на страницах с большим объемом контента, что позволяет быстро переходить на нужные разделы документа, не теряя времени на поиск нужной информации в тексте. Про этот вариант ссылки я рассказывать не буду. Если кого-то интересует данная информация, ее можно найти в Интернете.
Итак, для создания ссылки блоггеру и веб-мастеру необходимо сообщить браузеру, что выделенный специальный кусочек текста (анкор) является ссылкой (за это отвечает тег <a>), а также указать url страницы для перехода (атрибут href). Адрес ссылки может быть относительным и абсолютным. Первый работает только относительно текущей страницы или корня веб-ресурса. Второй используется для перехода на страницы других сайтов и работает всегда.
Также ссылки делятся на внутренние и внешние. Первые осуществляют взаимосвязь внутренних страниц блога, вторые осуществляют переход на документы чужих сайтов.
к меню ↑
Атрибуты для ссылок
Язык HTML имеет огромный перечень всевозможных дополнительных условий отображения перехода, ее взаимодействия с другими элементами страницы. Благодаря им блоггер может максимально использовать взаимосвязь документов своего блога, дополнять ссылки различной поясняющей информацией и позволяет ему использовать различный функционал при взаимодействии мыши и самой ссылки. Их все перечислять не имеет смысла — мой блог не является специальным разделом Википедии о коде HTML. Но я расскажу все важные и полезные атрибуты, которые пригодятся Вам для ведения своего блога и продвижения его в поисковых системах.
Атрибут для элемента <a> выглядит следующим образом:
<a имя атрибута=»значение» ></a>
Атрибут со значением всегда пишется одинаково: сначала идет имя атрибута, затем знак равенства и затем значение атрибута в кавычках (кавычки — важный момент в правильном написании атрибута!). Атрибутов для тега <a> может быть от одного и больше. Все они пишутся через пробел, а их последовательность не имеет значения.
к меню ↑
Открытие ссылки в новом окне (target=»значение»)
Когда посетитель приходит на Ваш блог или сайт, он перед собой видит только одну страницу. Если он захочет перейти на другой документ веб-ресурса (кликнув по ссылке), то вторая страница может появиться как в том же окне браузера, так и в новом. Для чего надо новое окно? Во-первых, чтобы пользователю было удобно и просто искать информацию по Вашему блогу. Согласитесь, имея стартовую страницу всегда открытой, посетитель всегда может перейти в ней на интересующий его документ по ссылке. Ему не надо все время искать ссылку на первую страницу, чтобы опять возобновлять свой поиск. Во-вторых, когда посетитель видит выбранный им новый документ Вашего блога в новом окне, он полностью на него переключается — читает информацию, смотрит картинки. Его мозг занят новым материалом, поступают новые данные. И обычно, когда открытый документ заинтересовывает его, посетитель блога может очень быстро забыть про первоначальную страницу. И если этот новый документ не открыт в новом окне, то есть вероятность, что он не вернется на прошлую страницу и не возобновит свой поиск. А значит он будет меньше находится на Вашем сайте, а с точки зрения поисковых систем это ухудшает поведенческие факторы.
В языке HTML для атрибута target есть ряд значений. Для эффективного и удобного изучения материалов блога, я рекомендую пользоваться значением _blank. Именно оно позволяет новый документ сайта открыть в новом окне:
<a href=»адрес» target=»_blank«>анкор</a>
к меню ↑
Описание ссылки (title=»описание»)
Если посетитель видит линк в тексте, он делает свой выбор — кликнуть по ней или читать текст дальше. Так как Вы ставите ссылки на своем блоге для разных целей (повышение популярности сайта, усиление продвигаемых страниц, улучшение метрик посещаемости и т.д.), то Вам важно, чтобы читатель обратил на них свое внимание. Благодаря анкору ссылки посетитель видит ее тему, но не более того. Потому что крайне сложно впихнуть в анкор описание той страницы, по которой будет осуществлен переход, не искажая текст предложения. Для усиления привлекательности ссылки существует атрибут title. Он описывает содержимое тега <a> в виде всплывающей подсказки, которая появляется при наведении курсора мышки на ссылку:
<a href=»адрес» title=»текст с описанием ссылки«>анкор</a>
А вот так выглядит этот атрибут в действии:
к меню ↑
Определение отношений между документами (rel=»значение»)
Атрибут rel определяет отношения между открытой страницей сайта и документом, на который ведет переход. Есть много разных значений у этого атрибута. В своей практике я использую два из них:
nofollow. Значение этого атрибута дает ссылке команду не передавать вес страницы, на которой она расположена. Таким образом веб-мастер дает понять поисковым системам, что частичку авторитета своего сайта он не хочет отдавать другому внешнему сайту или не хочет усиливать новую страницу. Это отличный способ, чтобы в продвигаемых страницах Вашего блога показать нужные по контексту ссылки на другие полезные статьи без ущерба потери веса. Вот синтаксис ссылки с атрибутом rel и значением nofollow:
<a href=»адрес» rel=»nofollow«>анкор</a>
sidebar. Значение атрибута rel, которое я использую крайне редко. Благодаря этому значению атрибут rel позволяет читателю вместо перехода на новую страницу сайта по ссылке закрепить ее в браузере в панель закладок. Такой вариант бывает полезен:
<a href=»адрес» rel=»sidebar«>анкор</a>
На деле вид ссылки со значением sidebar получается следующий (при нажатии на переход):
к меню ↑
Как создать ссылку на сайт в WordPress
В разных CMS есть свои способы создания ссылки на страницы веб-ресурса. Сейчас я покажу, как можно быстро сделать ссылку в визуальном редакторе WordPress.
1. Зайдите в редактор с уже открытым постом или статьей Вашего блога. Выделите текст будущей ссылки (анкор) в нужном предложении текста и нажмите кнопку на панели (для примера я взял старый пост своего блога):
2. В открывшемся окне напишите url той страницы, на которую читатель Вашего поста должен перейти, кликнув по ссылке. Если Вы собираетесь делать ссылку на страницу Вашего сайта, то ее адрес можно найти из списка внизу. Если документов очень много на Вашем блоге, ускорить поиск нужного url можно путем обычного поиска.
3. Для линка напишите в разделе «заголовок» ее описание (текст описания перехода на другую страницу атрибута title). Если Вы делаете ссылку на другую страницу Вашего сайта, в этом разделе будет автоматически ставиться название поста этого документа.
4. Если Вы желаете, чтобы после нажатия мышкой по созданной ссылке читатель увидел новый документ в новом окне, отметьте соответствующее поле. Далее жмете кнопку «добавить ссылку»:
В итоге у Вас должна появиться новая ссылка на другую страницу:
Если Вы хотите добавить в новую ссылку еще несколько атрибутов, то Вам необходимо зайти в том же редакторе во вкладку «HTML» и вручную написать недостающие описания элементов. Например, для моего примера в созданный линк я хочу добавить атрибут rel=»nofollow». Открываю редактор, нахожу новую ссылку и вставляю заданный атрибут тега <a>:
к меню ↑
Рекомендации и советы по созданию ссылок
Используйте изображение как ссылку. Кроме обычного текста на странице в качестве линка можно использовать любую картинку. Для этого нужно вместо анкора вставить тег картинки <img>:
<a href=»адрес«><img src=»адрес картинки«></a>
Не ставьте много ссылок. Для поисковых систем ссылки — это переходы с текущей страницы на дополнительный контент по тому вопросу, который искали их посетители. Поэтому они понимают, что далеко не каждый сайт обладает огромным арсеналом страниц. Поэтому, чем меньше блог и чем меньше текста в текущем документе, тем меньше нужно ставить ссылок. Для большинства веб-ресурсов существует негласное правило — число ссылок на любой странице не более 100. Придерживайтесь этого правила.
Анкор ссылок должен быть понятным. В любом тексте одним из важных моментов является плавность повествования. Поэтому, когда Вы создаете очередную свою ссылку, обязательно проверьте читаемость нового анкора. Оцените плавность хода всего предложения — читатель не должен чесать себе затылок, пытаясь понять ход Ваших мыслей. Переход по ссылке должен быть продолжением, а не обрывом информации.
Цените терпение посетителей своих блогов. Если документ, на который ссылается Ваш текст, большой по объему (длинная статья, большая картинка, тяжелый файл для скачивания), обязательно предупредите посетителя. И ему будет приятна забота, и Вы не потеряете читателя.
Проверяйте ссылки на внешние документы. Перед тем, как ссылаться на страницу чужого сайта, убедитесь в его благонадежности. Проверьте его на вирусы, просмотрите наличие платных переходов, убедитесь в отсутствии на нем спама и наличия фильтров. Если Вы проморгаете ГВС (говносайт по простому) и дадите ссылку на него, то после индексации ссылки поисковым роботом есть шанс получить санкции от поисковых систем. Если Вам все же нужно ссылаться на подозрительный документ, используйте атрибут rel со значением nofollow.
Удаляйте битые ссылки. Со временем, ссылки на различные документы (как на Вашем блоге, так и на чужих сайтах) могут вести в никуда — страницы веб-ресурсов могут быть удалены автором (из-за ненадобности, в связи с изменением структуры, с переездом на новый сайт, потеря актуальности текста этих страниц и т.д.). Ежемесячная проверка всех ссылок Вашего блога сэкономит Вам нервы и время. В качестве инструмента для проверки битых ссылок могу порекомендовать бесплатный сервис Broken link checker, платную программу Page Weight или бесплатную Xenu Link Sleuth.
Уделите особое внимание анкорам. Текст ссылки — это самый важный элемент с точки зрения внутренней перелинковки любого сайта. Перечислю самые важные моменты:
- создавайте информативные анкоры — не стоит злоупотреблять в текстах ссылок фразами «тут», «здесь», «статья» и т.д. Для любой ссылки важна полезность и естественность. Если анкор сделать не интересный и пустой, никто из читателей не будет кликать по переходу.
- пишите краткий, но точный анкор. Масло масленное хорошо тогда, когда от времени зависит результат — чем больше минут — тем больше результат. Но не для ссылок. Никто не будет читать анкоры длинной в абзац — у читателя или терпение лопнет, или он начало текста перехода забудет и не примет решение на переход;
- придерживайтесь стандартов при оформлении анкоров. Почти всегда люди идут по наименьшему сопротивлению — так устроен наш мозг, который любой ценой бережет нашу энергию. Поэтому привычка в этом случае играет положительную роль, а значит оформление ссылок должно быть стандартным. Не надо придумывать новые варианты отображения анкоров, не теряйте линию подчеркивания под ссылками, не делайте цвет их текста таким же, как и буквы постов;
- каждый анкор должен быть уникальным. Не ленитесь придумывать каждый раз новый текст ссылок. Не идите по стопам горе-сеошников, которые не заморачиваются и везде не продвигаемые страницы ставят одни и те же анкоры. Они склеиваются — поисковые системы все видят. ?
к меню ↑
Бонус — моя схема работы с внутренними ссылками
Итак, знания о создании внутренних ссылок Вы уже получили. Теперь самое время их использовать на практике.
В помощь предлагаю свою схему использования внутренних ссылок, которую использую для продвижения своих проектов — личного блога и ряда информационных сайтов. В этой схеме Вы узнаете о том, по каким принципам и по какому плану ставлю внутренние переходы. Все эти материалы находится в этой seo-шпаргалке:
На этом мой небольшой ликбез по созданию и вставке ссылок на Ваш сайт закончен. Если будут у Вас возникать небольшие вопросы, пишите прямо в комментариях этого поста.
С уважением, Ваш Максим Довженко
www.workformation.ru