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

Здравствуйте, уважаемые посетители!

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

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

Начнем с самого простого и дойдем до сложного.

Обычная ссылка и гиперссылка

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

Попробуйте кликнуть на ссылку. Как видите, это простой текст и при нажатии на него, перехода на другую страницу не происходит.

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

Другим же делом является гиперссылка, которая по клику перенаправляет на другой документ в интернете, как внутренний (в пределах того же сайта), так и внешний (другой сайт). Пример такого линка можете видеть ниже. Попробуйте нажать на ссылку.

>>Кликните сюда

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

Ссылка создается простым тегом <a>, внутри которого имеется сам адрес, куда нужно произвести перенаправление пользователя, а также анкор ссылки (в примере выше анкором служит фраза «кликните сюда»), который указывает текст линка, поясняющий, что вы получите, когда перейдете по данному адресу.

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

«>

Внутри ссылочного тега <a> также имеется атрибут для открытия страницы в новой вкладке.

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

Если же вы используете внешние ссылки, то желательно закрывать их в атрибут nofollow.

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

«>

Желательно добавлять тег title, чтобы посетители видели эту подсказку при наведении и понимали, куда переходят. Делается это просто, внутри открывающего тега <a>, как на примере ниже.

При использовании движка, например WordPress, добавление ссылки на сайт происходит очень просто без каких либо правок в html режиме. В редакторе записи имеется специальная иконка со значком соединения.

«>

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

1. Сначала выделяем фразу, которую нужно сделать ссылкой;
2. Кликаем на значок добавления связи;
3. Задаем параметры ссылки (адрес страницы, куда нужно перекинуть пользователя, а также заголовок ссылки, то есть анкор, если необходимо).

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

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

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

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

Если вы хотите углубиться в процесс создания относительных адресов, настоятельно рекомендую ознакомиться с этой статьей на другом ресурсе. Там все очень круто расписано.

Ссылка картинка

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

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

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

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

На практике это будет выглядеть следующим образом.

Как видим, внутри открывающего и закрывающего ссылочных тегов имеется код изображения, который также имеет свои особенности. В нем нужно прописать все тот же тег title, указать путь к изображению на хостинге или на другом ресурсе. Также стоит указать размеры изображения (width — ширина, height — высота). И обязательно стоит прописывать атрибут alt, который служит описанием к изображению. Если все пропишите, то оптимизация изображений будет на уровне.

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

«>

Сложность тут составляет лишь правильно прописывать код картинки, который используется в качестве анкора.

kostyakhmelev.ru

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

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

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

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

Структура тeга <a>…</a>

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

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

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

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

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

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

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

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

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

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

<b>Гугл</b>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<a href=»tel:+79xxxxxxxxx»>…абонeнт…</a>

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

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

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

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

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

<a href=«http://yandex.ru/» title=«русский интeрнeт-портал»>Yandex</a>

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

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

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

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

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

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

xroom.su

Текстовые ссылки.

Знакомимся тег <a> (от anchor- якорь), в него можно заключить текст или рисунок, которые станут ссылкой на те или иные документы. Атрибут тега <a> href задаёт имя и путь к документу на который указывает ссылка.

Всё вместе пишется так:

<a href=»primer.html»>Здесь мои фотки!!</a>

Как Вы наверное поняли primer.html это имя нашего второго html документа, а надпись «Здесь мои фотки!!» это кусочек текста из файла index.html.

По аналогии с рисунками тег <img> путь ссылки к открываемому документу прописывается теми же способами:

<a href=» stranica/primer.html»>Здесь мои фотки!!</a> — Такая запись подразумевает, что в директории, где расположен наш первый html документ есть папка stranica в которой расположен файл primer.html
<a href=»../primer.html»>Здесь мои фотки!!</a> — А это значит, что файл primer.html размещен на уровень выше от документа
<a href=»http://www.site.ru/primer.html»>Здесь мои фотки!!</a> — документ расположен на сайте www.site.ru..

Ну что давайте попробуем? Ниже приведен пример сразу двух документов в которых прописаны ссылки указывающие друг на друга.

Пример:

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

link — цвет ссылки.
alink — цвет нажатой, активной ссылки.
vlink — цвет посещенной ссылки.

Пишется так:

<body link=»#008000″ alink=»#ff0000″ vlink=»#ffff00″>

Продолжая говорить о цвете текстовой ссылки стоит упомянуть, что при необходимости можно принудительно выделять цветом как всю ссылку, так и отдельные её части (фразы слова буквы) знакомым тегом <font> </font> и его атрибутом color. Впрочем, это касается не только цвета так же отдельно можно задать размер, стиль и шрифт текста. Но помните, что манипуляции с цветом нужно проводить внутри тега <a>вот здесь</a> а не за бортом, иначе цвет ссылки будет либо по умолчанию, либо так как прописано в теге <body>

Пример:

Такие вот дела…

Рисунок ссылка.

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

Вот так:

<a href=»primer3.html»><img src=»knopa.gif»></a>

Перед тем как привести очередной пример расскажу про то, как при переходе по ссылке открыть документ в новом окне браузера, до этого если Вы обратили внимание он у нас открывался в текущем, что не всегда удобно. Решает эту проблему атрибут target (цель) и его значение _blank.

Пишется так:

<a href=»primer3.html» target=»_blank»>открыть в новом окне</a>

Пример:

Я надеюсь, Вы не додумались нажать большую красную кнопку? Ох уж этот русский менталитет.. 🙂

Что ещё можно почерпнуть из этого примера?

Во-первых. Мы применили уже знакомые атрибуты описания title=»Не нажимать!!!» для тега <a> и одновременно alt=»Не нажимать!!!» для тега <img> если Вы помните, эти атрибуты позволяют сделать нам всплывающие подсказки. Но зачем я их продублировал? Один для ссылки, а другой для рисунка, если сам по себе рисунок является ссылкой?.. долгая история, когда ни будь напишу статью: «Спецификации HTML, браузеры и головная боль..» — а сейчас скажу лишь то, что разные браузеры не всегда воспринимают те или иные теги и их атрибуты. А описание для ссылки картинки нам просто таки необходимо! Помните, я рассказывал, что есть люди, умышленно отключающие загрузку рисунков?- это для них.

Во-вторых. В примере использован атрибут тега <img> border=»0″ — рамка рисунка. 0 — это значит выключить рамку, так как она портит весь вид страницы в данном примере, но бывают случаи когда рамки рисунка вполне актуальны и так сказать вписываются в страницу. Здесь нужно помнить, что когда рисунок является ссылкой, его рамка окрашивается в цвета ссылки: link — цвет ссылки, alink — цвет нажатой, активной ссылки, vlink — цвет посещенной ссылки тега <body>.

Ссылка на e-mail

Я тут Вас чуть-чуть с толку сбил, вроде бы договаривались вместе писать полноценный сайт, а я тут какие то мелкие примерчики выкладываю.. Не волнуйтесь! В конце главы покажу готовый сайт про Карлсона целиком. А сейчас думаю так будет удобнее Вам читать, и мне писать.. : Да и подразумеваю что Вы уже самостоятельно можете вставлять теги в нужные места.

Напишите мне письмо.. — строчка из того примера..

Для того что бы сделать текст или рисунок ссылкой на e-mail — почтовый ящик его нужно заключить в тег <a>, но не простой, а с использованием mailto

Пишем так:

<a href=»mailto:karlson@kruha.ru»> Напишите мне письмо.. </a>

Эта непривычная запись будет говорить что, кликнув по тексту ссылке «Напишите мне письмо..» посетитель сайта попадет в свою почтовую программу, которая выдаст ему бланк для отправки письма, где в строчке Кому: уже будет указан нужный нам почтовый ящик karlson@kruha.ru

Пример:

Помимо этого в почтовом бланке можно заранее прописать следующие вещи:

?subject= — Тема пиcьма
&Body= — Текст сообщения
&cc= maluh@kruha.ru,maluh2@kruha.ru — Копии письма
&bcc= freken_bok@kruha.ru,freken_bok2@kruha.ru — Скрытые копии письма

Адреса ящиков для копий и скрытых копий письма пишутся через запятую.

Пример:

Закладки.

Закладки или якоря — это особый вид ссылок. Данные ссылки, как правило, не ведут к какому либо документу, а предназначены для навигации внутри страницы.

Предположим на странице в удобном месте находится некое содержание или меню.. по принципу:

Глава1
Глава2
Глава3

А далее идет большой текст с этими главами, так вот чтобы посетитель страницы нажав на одну из этих глав «перенёсся» в нужное место текста нам нужно сделать две вещи:

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

Вот так:

<а name=»glava1″>Глава1 </а>
<а name=»glava2″>Глава2 </а>
<а name=»glava3″>Глава3 </а>

Имя можно присвоить любое необязательно glava1

А теперь собственно прописываем на них ссылки в нашем меню, содержании.

Вот так:

<a href=»#glava1″> Глава1</a>
<a href=»#glava2″> Глава3</a>
<a href=»#glava3″> Глава3</a>

Замете перед каждым именем ставим знак решётки #.

Ладно, думаю, на примере будет понятнее:

Хотя, как я уже говорил, закладки используют для навигации внутри страницы, на них всё же можно ссылаться с других страниц или сайтов

<a href=»primer.html#glava1″> идем к главе1 с другой страницы сайта</a>
<a href=»http://www.site.ru/ primer.html#glava2″> разместив такую ссылку на любом другом сайте мы согласно указанному пути сначала попадаем на наш сайт www.site.ru надём там документ primer.html и сразу начинам читать главу2</a>

Ну а теперь, как и обещал, выкладываю «большой» пример он тоже состоит из двух отдельных страниц:

Фух.. ну вроде всё.. Думаю, на этом примере с Карлсоном мы распрощаемся, разросся он через чур.. да и как сайт с точки зрения построения имеет законченный вид…

Он улетел — но обещал вернуться!.. 🙂

Вполне нормальный сайт-визитка получился.. конечно, дизайн не вдохновляет, но зато теперь у Вас будет стимул сделать лучше!! Теперь этот сайт можно выложить в свет, как это сделать читайте в статье «Публикация сайта»

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

Полезные советы:

• Одна из Ваших страничек на сайте обязательно должна называться index.html. Именно файл с таким названием на Вашем сайте будет искать программа робот, когда человек введет имя Вашего сайта. Так как страница index.html будет открываться первой, делайте её главной. Остальные страницы можете называть, как угодно… больше никаких нюансов с именами нет.

• Про регистр.. Прописывая путь и имена документов помните, что, к примеру: Page.html, page.html и PAGE.html это имена разных документов! Это же касается имен закладок и рисунков. Всегда учитывайте регистр при написании кода, есть большая вероятность, что такие имена не будут распознаны тем или иным браузером. Возьмите за правило все писать и обзывать маленькими латинскими буквами, тогда риск человеческого фактора и капризов программ сведется к нулю.

• Правило трех кликов..

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

www.webremeslo.ru

Создание текстовых гиперссылок

Начнем с простого и рассмотрим создание обычных текстовых ссылок. Для создания текстовой гиперссылки достаточно любой фрагмент текста, который должен стать ссылкой, заключить в парный тег <a>. И в атрибуте href этого тега необходимо указать адрес целевой web-страницы в интернете:

 

Тег <a> или гиперссылка представляет собой встроенный элемент html-страницы, т.е. ссылка должна быть частью блочного элемента, например абзаца. Например:

<p><a href=»http://www.site.ru/catalog/page15.html»>страница 15</a></p>

В этом фрагменте html-кода создается абзац, который содержит ссылку. Ссылка указывает на web-страницу page15.html, которая находится в папке catalog, хранящейся в корневой папке сайта www.site.ru.

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

<a href=»http://www.site.ru/catalog/page15.html»>страница <strong>15</strong></a>

Можно создавать пустые гиперссылки, которые никуда не ведут. Для этого достаточно в атрибут href добавить знак #:

<a href=»#»>Ссылка никуда не ведет</a>

Если щелкнуть по такой ссылке ничего не произойдет. Обычно пустые гиперссылки применяются если необходимо при щелчке по ней запустить какой-нибудь javascript-код.

Если на странице не используются стили CSS и не применяются дополнительные атрибуты, то гиперссылки на странице по умолчанию отображаются следующим образом:

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

Интернет адреса

Далее рассмотрим виды интернет-адресов применяемых в атрибуте href. В коде html применяются полные и сокращенные интернет адреса.

Полный адрес содержит содержит интернет-адрес web-сервера, и путь к файлу, который необходимо получить. Например:

http://www.site.ru/catalog/page15.html

Здесь www.site.ru адрес web-сервера, а /catalog/page15.html — путь к файлу на этом сервере. Вообще, обычно полные интернет-адреса используют только если необходимо создать гиперссылку, указывающую на какие-либо ресурсы находящиеся на другом web-сайте.

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

Сокращенные интернет-адреса бывают абсолютными и относительными.  Абсолютный адрес задает путь к целевому файлу относительно корневой папки сайта. Такой адрес начинается с символа /(слэш), который и обозначает корневую папку. Например, адрес «/page15.html» указывает на файл page15.html, который хранится в корневой папке сайта. Или адрес «/catalog/page.html» указывает на файл page.html, который помещен в папку catalog, вложенной в корневую папку сайта.

Относительный адрес задет путь к файлу относительно файла текущей веб-страницы. Относительные адреса не содержат в начале символа слэш. Рассмотрим несколько примеров.

Например адрес «page.html» указывает на файл, который находится в той же папке, что и файл текущей web-страницы. А адрес «catalog/page.html» откроет файл page.html, хранящийся в папке catalog, вложенной в папку, в которой хранится текущая страница. С помощью двух точек вначале адреса можно указывать папки предыдущего уровня вложенности. Так, например адрес «…/page.html» указывает на страницу page.html, хранящуюся в папке, в которую вложена папка с текущей веб-страницей.

Ссылка на почту

С помощью языка html можно создавать почтовые гиперссылки, щелчок по которым запускает программу почтового клиента. При указании адреса в атрибуте href перед email необходимо поставить «mailto:», т.е. примерно так: href=»mailto:user@mail.ru». Причем после двоеточия перед почтовым адресом не должно быть пробелов.

Например, я хочу создать  ссылку указывающую на почтовый адрес webcodius@gmail.com. Тогда моя почтовая ссылка в html-коде будет выглядеть так:

<a href=»mailto:webcodius@gmail.com»>написать письмо</a>

написать письмо

Если щелкнуть по этой ссылке, то у вас запустится установленная по умолчанию почтовая программа и откроется диалог создания нового письма, в котором в поле «кому» будет вставлен адрес  webcodius@gmail.com.

Как сделать картинку ссылкой

Так как тег img для вставки изображения является строчным элементом html-страницы, то просто вставляем этот тег внутрь тега <a> вместо текста:

<a href=»http://webcodius.ru»><img src=»image.png»></a>

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

Кроме этого простого варианта создания картинки-гиперссылки, html позволяет превратить в гиперссылку часть графического изображения. Более того, имеется возможность разбить изображение на части, каждое из которых будет представлять из себя гиперссылку, указывающей на свой интернет-адрес. Такой вариант называется картой изображений.

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

Изображение-карта создается в три этапа:

1. Создание самого изображения с помощью тега img: <img src=»map.jpg»>;
2. Создание карты с помощью парного тега <map>. С помощью обязательного атрибута name этого тега задается уникальное в пределах страницы имя карты. Далее необходимо привязать карту к изображению с помощью атрибута usemap тега img, значением которого должно состоять из символа # и имени карты:
   <img src=»map.jpg» usemap=»#mapname»><map name=»mapname»></map>;
3. Создание описаний областей гиперссылок с помощью одинарных тегов area. Данные тег должен содержать атрибуты: shape — форма области, coords — координаты области и href — адрес гиперссылки. Эти описания помещают внутрь тега map.

Примерно так выглядит полный html-код, создающий карту изображения:

<img src=»map.png» usemap=»#mapname»>
<map name=»mapname»>
<area shape=»rect» coords=»0, 0, 100, 100″ href=»http://webcodius.ru» target=»_blank»>
<area shape=»circle» coords=»150, 50, 50″ href=»http://webcodius.ru/vse-stati-bloga» target=»_blank»>
<area shape=»poly» coords=»0, 100, 200, 100, 200, 200, 0, 200″ nohref>
</map>

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

webcodius.ru

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

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

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

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

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

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

При нажатии на гиперссылку происходит переход к заданному документу, который будет открыт в активном окне веб-браузера или в новом окне.

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

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

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

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

URL-адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса начинаются с указания протокола (обычно http) и имени сайта, например:

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

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

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

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

Ну а относительная ссылка на главную страницу сайта будет выглядеть так:

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

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

Ну вот, как создать ссылку надеюсь понятно. А как вставить гиперссылку в текст веб-страницы сайта? Для этого надо перейти в режим HTML-редактора и просто скопировать туда созданный нами HTML-код.

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

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

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

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

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

Создавая почтовую ссылку, надо указать адрес e-mail, используя стандартный протокол передачи электронной почты mailto:

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

Вместо слов “тема_письма” надо написать нужную тему и, обязательно, латинскими буквами. Делаем это потому, что многие браузеры и почтовые программы плохо работают с кириллицей и есть шанс увидеть в теме письма всякие кракозябры. Используя этот не хитрый совет, Вы сможете создать ссылку на e-mail, не боясь ненужных сюрпризов.

Как сделать картинку ссылкой.

Чтобы сделать любую картинку ссылкой, в HTML применяется тег <img>, используемый для вставки изображений, который прописывается вместо анкора ссылки:

Здесь атрибут title – это всплывающая подсказка, а текст, прописанный в атрибуте alt (альтернативный источник информации), будет появляться на странице, если показ изображений отключен в браузере. Если атрибут title служит, в первую очередь, для удобства читателей, то по атрибуту alt поисковые системы пытаются понять, что изображено на картинке. Рекомендуется прописывать в эти теги ключевые слова, что будет иметь большое значение в поисковой оптимизации. Ведь никто не отменял поиска по картинкам.

Как сделать гиперссылку (html якорь) на одной HTML-странице.

Выше мы уже рассматривали, как создать ссылку на страницу сайта, не важно внутреннюю или внешнюю. Но иногда, приходится делать гиперссылки в пределах одной веб-страницы. Зачем? Ну, например, для того, чтобы при чтении очень длинного текста, у нас была возможность быстрого перехода к какой-либо его части. Или это пригодится тогда, когда в начале статьи Вы публикуете по пунктам ее содержание. Тогда, нажав на нужный пункт, Вы мгновенно перейдете к интересующему Вас материалу. Делаются такие переходы с помощью заранее установленных в теле статьи меток-закладок, называемых html якорями (anchor, не путать с текстовым анкором) и специальных хеш-ссылок.

Для создания якоря сначала делаем закладку с любым именем (используются только латинские буквы, цифры, дефис и подчеркивание), задаваемым с помощью атрибута name тега <a>:

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

Теперь надо сделать хеш-ссылку на якорь, где в качестве значения атрибута href пишем символ решетки (# – октоторп или хеш) и выбранное Имя якоря:

Чтобы ссылка просто вела вверх на начало страницы, пишем в нужном месте такой код:

Другой вариант для прокрутки страницы вверх я подсмотрел у того же Дмитрия на сайте ktonanovenkogo.ru. В этом случае ставим обычную хеш-ссылку, но после символа решетки (#) никакое имя якоря не пишем:

Если вставить первый или второй вариант ссылки в картинку, то можно использовать такой метод для создания кнопки “Наверх”. Например, так:

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

Хеш-ссылку прописываем также, как и в предыдущем случае:

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

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

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

Для примера, перейдите по ссылке “поисковая оптимизация” вверху этой страницы и Вы попадете в новой статье сразу к слову SEO.

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

Любая гиперссылка на HTML-странице по умолчанию находится в одном из трех состояний:

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

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

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

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

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

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

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

Понравилась статья? Нажимай на кнопки:

blogibiznes.ru

Что такое ссылка

Гиперссылка (англ. hyperlink) — часть веб-документа, которая ссылается на другой элемент на этой же странице, либо на любой другой. Объектами и элементами, куда ссылается гиперссылка могут быть: приложение, файл, каталог, заголовок, примечание, текст, изображение и др. Располагаться объекты могут как на локальном диске или компьютерной сети, так и в интернете.

Гиперссылки (ссылки) — одни из важнейших элементов сайтов и интернета. Благодаря им мы беспрепятственно перемещаемся по вебсайтам, социальным сетям и документам в интернете, можем сохранять на свой жесткий диск изображения, видеозаписи и другие документа.

Давайте перейдем непосредственно к действиям (коду).

Как вставить ссылку в HTML

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

Результат:
Blogwork — Главная страница
Ссылка на внутреннюю страницу сайта в виде html-кода выглядит так:

Результат:
Blogwork — Внутренняя страница
Для того чтобы вставить ссылку на pdf-документ, html-код выглядит так:

Результат:
Blogwork — PDF
Для того чтобы вставить ссылку на картинку, html-код выглядит так:

Результат:
Blogwork — PNG
Обратите внимание на параметр href. В каждой из ссылок он включает в себя адрес — местонахождение той страницы (ее части, или файла), куда попадет пользователь, нажав на эту ссылку.

Анкор, видимая часть ссылки — параметр, который заключен внутри тегов <a>АНКОР</a>. Это может быть текст, а может быть и картинка (кнопка). Текст в качестве анкора в примерах выше вы уже видели, давайте перейдем к кнопкам-картинкам.

Читайте также другие инструкции:

• Что такое HTML. Пояснение для новичков
• Как вставить картинку, фотографию, изображение в HTML — вставка картинки это просто!
• Как установить счетчик посещений на сайт? Устанавливаем счётчик LiveInternet, Яндекс.Метрика и Google Analytics: https://blogwork.ru/kak-ustanovit-schetchik-poseshhenij-na-sajt/

Как вставить картинку с ссылкой или ссылку на картинку

Чтобы вставить ссылку на сайт в виде изображения или кнопки, вам потребуются знание того как вставить картинку в html. Порядок действий такой: вставляем картинку в HTML и затем оборачиваем ее ссылкой, то есть помещаем тег img (который запрашивает картинку) внутри тега <a href=»ССЫЛКА»><img src=»ПУТЬ К КАРТИНКЕ»></a>

Да, вставить ссылку в картинку очень просто:

Ну а если вы хотите вставить ссылку не на картинку, а на другую статью на сайте, значит замените содержание параметра href на нужное — поместите туда ссылку на статью.

Более того, в тег a можно одновременно поместить и картинку, и текст:

Текст для картинки

БОНУС №1 — ссылаемся на элемент страницы (подзаголовок)

Для осуществления навигации внутри одной страницы сайта, вы можете разметить ее якорями и ссылать на них. Для разметки используйте тег name или id (обратите внимание, id также может относиться к css-стилям и вам нужно использовать уникальные id, чтобы к заголовкам не присваивались стили; или наоборот — если есть такая потребность). Я разметил три первых подзаголовка H2 тегом name, присвоил им значения «1», «2», «3» соответственно.

Теперь нужно сослаться на них. Для примера сделаем это следующим образом:

Результат:

Что такое ссылка
Как вставить ссылку в HTML
Как вставить картинку с ссылкой или ссылку на картинку

Вы можете попробовать нажать любую из трех верхних ссылок и браузер переместит вас к соответствующему заголовку, а адрес страницы в браузере изменится на https://blogwork.ru/kak-vstavit-v-html-ssylku/#1. Не бойтесь, это не страшно. Есть анкоры которые используются в браузерах по умолчанию, например нажатие по ссылке #top автоматически прокрутит страницу в самый вверх — в начало сайта.

БОНУС №2 — добавление в HTML ссылки на электронную почту

Код:

Результат:

Почта Центробанка РФ

Бонус №3 — задаем параметр для открытия ссылки в новой вкладке

Для этого используйте атрибут _blank в ссылке a, например:

Что получится:

Ссылка на главную страницу откроется в новой вкладке

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

Бонус №4 — как задать заголовок для ссылки

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

Результат:

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

И снова в редакторе Вордпресса есть специальное поле, куда можно вписать заголовок ссылки.

На этом все — удачного размещения ссылок! Если что-то не получается, спрашивайте в комментариях.

blogwork.ru