Как прикрепить ссылку – Как вставить в Контакте ссылку на человека или группу и можно ли сделать слово гиперссылкой в тексте ВК сообщения

Содержание

Как привязать ссылку к тексту или другому элементу сайта

Ссылка устанавливается на следующие элементы сайта:

  • на любой участок текста в виджете «Текст»;
  • на виджет «Картинка»;
  • на виджет «Кнопка»;
  • на виджет «Карточка»;
  • на виджет «Иконка».

Как привязать ссылку к тексту

Нажмите на нужный элемент сайта или выделите часть текста. Щелкните по кнопке «Ссылка», которая появляется над элементом или текстом.

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

Как привязать ссылку к виджету «Картинка»

Нажмите на изображение, в левой панели кликните на обведенный на скриншоте значок и установите настройки для ссылки:

Как привязать ссылку к виджету «Кнопка»

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

В открывшемся окошке установите необходимые параметры и сохраните изменения. Кроме обычных ссылок на кнопку можно назначить всплывающие окна с формой заявки:

Как привязать ссылку к виджету «Карточка»

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

В тонких настройках в левой панели можно выбрать, какие элементы виджета будут кликабельны:

Как привязать ссылку к виджету «Иконка»

Нажмите на иконку, в левой панели кликните на обведенный на скриншоте значок и установите настройки для ссылки:

Примечание:

Если кнопка «Ссылка» не появляется, значит сделать элемент или текст кликабельным невозможно.

Помогла ли вам статья?

Статья оказалась полезной для 101 человека

ukit.com

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

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

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

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

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

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

http://kostyakhmelev.ru/poleznoe/kak-sdelat-ssylku-na-sait.html

http://kostyakhmelev.ru/poleznoe/kak-sdelat-ssylku-na-sait.html

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

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

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

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

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

<a href="http://kostyakhmelev.ru/" target="_blank">Кликните сюда</a>

<a href="http://kostyakhmelev.ru/" target="_blank">Кликните сюда</a>

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

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

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

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

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

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

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

<a href="http://kostyakhmelev.ru/" title="заголовок ссылки (всплывающая подсказка)" target="_blank">Кликните сюда</a>

<a href="http://kostyakhmelev.ru/" title="заголовок ссылки (всплывающая подсказка)" target="_blank">Кликните сюда</a>

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

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

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

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

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

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

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

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

к содержанию ↑

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

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

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

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

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

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

<a href="адрес ссылки" title="заголовок ссылки" target="_blank"> <img title="заголовок изображения" src="путь к изображению" alt="описание картинки" /> </a>

<a href="адрес ссылки" title="заголовок ссылки" target="_blank">

<img title="заголовок изображения" src="путь к изображению" alt="описание картинки" />

</a>

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

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

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

к содержанию ↑

Ссылка-кнопка с помощью CSS стилей

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

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

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

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

Проверить работу кнопки

Если посмотреть исходный код кнопки, то вы все очень просто. Единственным отличием от обычной гиперссылки является наличие id, который дописан внутри открывающего тега <a> и к нему в свою очередь прописаны стили оформления в файл style.css.

Вот сама структура кнопки.

<a title="заголовок ссылки" href="адрес ссылки" target="_blank">анкор (текст кнопки)</a>

<a title="заголовок ссылки" href="адрес ссылки" target="_blank">анкор (текст кнопки)</a>

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

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

/* стили кнопки в обычном режиме */ #button { display: block; width: 550px; /* ширина кнопки */ height: 60px; /* высота */ background-color: #ff4343; /* цвет фона */ text-shadow: 1px 1px #800909; /* тень текста */ color: #fff; /* цвет текста */ border-style: solid; /* тип линии границы (рамки) кнопки */ border-width: 1px; /* толщина линии границы (рамки) кнопки */ border-color: #db3a3a; /* цвет линии границы (рамки) кнопки */ font-size: 18px; /* размер текста */ line-height: 60px; /* линейная высота текста */ font-weight: normal; /* жирность текста */ font-family: arial; /* тип шрифта */ text-align: center; /* выравнивание текста */ text-decoration: none; /* подчеркивания текста */ margin: 40px auto; /* отступы кнопки от других эементов на странице */ text-transform: uppercase; /* чтобы все буквы были заглавными. Если не нужно, то удалите строку */ } /* стили кнопки при наведении курсора мыши */ #button:hover { background-color: #f23333; font-size: 19px; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

/* стили кнопки в обычном режиме */

#button {

display: block;

width: 550px; /* ширина кнопки */

height: 60px; /* высота */

background-color: #ff4343; /* цвет фона */

text-shadow: 1px 1px #800909; /* тень текста */

color: #fff; /* цвет текста */

border-style: solid; /* тип линии границы (рамки) кнопки */

border-width: 1px; /* толщина линии границы (рамки) кнопки */

border-color: #db3a3a; /* цвет линии границы (рамки) кнопки */

font-size: 18px; /* размер текста */

line-height: 60px; /* линейная высота текста */

font-weight: normal; /* жирность текста */

font-family: arial; /* тип шрифта */

text-align: center; /* выравнивание текста */

text-decoration: none; /* подчеркивания текста */

margin: 40px auto; /* отступы кнопки от других эементов на странице */

text-transform: uppercase; /* чтобы все буквы были заглавными. Если не нужно, то удалите строку */

}

 

/* стили кнопки при наведении курсора мыши */

#button:hover {

background-color: #f23333;

font-size: 19px;

}

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

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

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

С уважением, Константин Хмелев!

По теме ссылок также советую почитать: ссылка-якорь

kostyakhmelev.ru

Как вставить ссылку в тексте страницы или записи. Якоря. » Техподдержка Prihod.ru

В последней версии WordPress ссылки можно вставлять еще проще — копируете адрес с ссылкой, набираете на странице или записи текст, который должен стать ссылкой, выделяете его мышкой и нажимаете сочетание клавиш «Ctrl»+»V», к выделенному тексту автоматически привяжется ссылка.

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

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

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

1. Поставим курсор в ту часть текста, куда нужно вставить ссылку

2. Набираем название ссылки и выделяем его курсором мышки

3. На панели инструментов нажимаем кнопку  Вставить/изменить ссылку

4. В появившемся диалоге в поле URL набираем или вставляем адрес ссылки

5. Нажимаем кнопку Добавить ссылку

Примечание: Если вы хотите, чтобы ссылка открывалась в новой вкладке браузера, то поставьте галочку в поле «Открывать в новом окне/вкладке».

В результате в тексте раздела получаем ссылку:

Также можно размещать ссылку с помощью специального тега <a href=""></a>.

Стандартный код ссылки выглядит так:

<a href="http://site.ru">Текст ссылки</a>

Этот код можно разместить в режиме редактирования страницы/записи на вкладке «Текст».

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

Параметры:

http://site.ru — вместо этого адреса вставляйте нужную ссылку, протокол http:// в ссылке обязательно должен присутствовать.

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

target="_blank" — с помощью этого параметра ссылка будет открываться в новом окне браузера. Код ссылки будет выглядеть примерно так:
<a href="http://site.ru" target="_blank">Текст ссылки</a>

Якоря

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

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

<a href="#tekst">Текст ссылки</a> — ссылка на якорь

<a name="tekst"></a> — якорь, нужно вставлять в то место на странице, куда будет совершен переход по ссылке.

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

Пример кода якорей:

<a href="#tekst1">Текст ссылки1</a>
<a href="#tekst2">Текст ссылки2</a>
<a href="#tekst3">Текст ссылки3</a>
<a href="#tekst4">Текст ссылки4</a>

<a name="tekst1"></a>
много текста

<a name="tekst2"></a>
много текста

<a name="tekst3"></a>
много текста

<a name="tekst4"></a>
много текста

Если нужно поставить ссылку на якорь с другой страницы сайта или добавить якорь в пункт меню нужно прописать полную ссылку на страницу и после слэша добавить якорь. К примеру: http://support.prihod.ru/docs/napisanie-i-redaktirovanie/kak-vstavit-ssylku-v-tekste-stranicy-ili-zapisi/#link2

 

Просмотрено (105399) раз

support.prihod.ru

Как сделать ссылку в HTML?

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

Как сделать ссылку в HTML

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

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

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

1. HREF — отвечает за то, куда должна вести ссылка. Стандартная ссылка задается следующим образом: <a href="адрес ссылки">Текст ссылки</a>.

2. TARGET — отвечает за то, в каком окне будет открываться документ. По умолчанию новый документ открывается в текущем окне браузера. Атрибут «target» позволяет открывать ссылку в новом окне браузера. Данный атрибут имеет следующие параметры:

  • _blank — загружает страницу в новом окне;
  • _self — загружает страницу в текущем окне;
  • _parent — загружает страницу во фрейм-родитель;
  • _top — отменяет все фреймы и загружает страницу в новом окне.

3. NAME — используется для перехода к конкретной области внутри страницы. После символа «решетка» указывается в кавычках ключевое слово (закладка или метка). Для перехода к этой метке используется ссылка, в которой данная метка прописывается.

Рассмотрим, как сделать ссылку в HTML на примерах:

Пример 1. Внешняя ссылка.

<html>
<head>
<title>Пример внешней ссылки</title>
</head>
<body>
<p><a href="//siteblogger.ru">Перейти на сайт</a></p>
</body>
</html>

В данном примере ссылка называется «Перейти на сайт», она ведет на мой сайт.

Пример 2. Внешняя ссылка, открывающаяся в новом окне.

<a href="//siteblogger.ru" target="_blank" title="Текст подсказки для ссылки">Перейти на сайт</a>

В данном примере ссылка будет открываться в новом окне. При наведении на ссылку будет появляться текст подсказки, прописанный в «title».

Пример 3. Внутренняя ссылка.

<a href="/uroki-wordpress/wordpress-lessons.html">Бесплатные уроки по WordPress</a>

Пример 4. Изображения в качестве ссылок.

<html>
<head>
<title>Пример изображения в качестве ссылки</title>
</head>
<body>
<p><a href="kak-sozdat-sait.html"><img src="Рисунок.jpg"></a></p>
</body>
</html>

Пример 5. Ссылка на определенную область внутри страницы.

<html>
<head>
<title>Пример ссылки на определенное место на странице</title>
</head>
<body>
<p><a href="list">Перейти к тексту</a></p>
<p>Текст страницы...</p>
<a name="#list"></a>
</body>
</html>

В данном примере на странице ставится метка «list» с помощью атрибута «name». Ссылка на эту метку обеспечит переход в определенную область страницы.

Пример 6. Ссылка на скачивание файла.

<a href="distr.rar" target="_blank">Скачать файл</a>

Пример 7. Ссылка на электронную почту.

<a href="mailto:[email protected]">Написать письмо</a>

Можно задавать цвет ссылок с помощью атрибутов, которые указываются в теге «body» в качестве параметров. Рассмотрим эти атрибуты:

  • link — не посещенная ссылка, по умолчанию она отображается синим цветом;
  • alink — активная ссылка, по умолчанию имеет красный цвет;
  • vlink — посещенная ссылка, имеет по умолчанию фиолетовый цвет.

Пример 8. Задание цвета ссылкам.

<html>
<head>
<title>Пример задания цвета у ссылок</title>
</head>
<body link="blue" vlink="black" alink="red">
...
</body>
</html>

Таким образом, мы разобрались по какому принципу создаются ссылки в HTML. Ссылкам можно придавать определенные стили оформления. Про стили ссылок в CSS можно посмотреть в уроке, перейдя по ссылке.

Понравилось? Поделитесь с друзьями!

siteblogger.ru

Как вставить ссылку в HTML. Основы HTML для начинающих. Урок №6


Как вставить ссылку в HTML. Основы HTML для начинающих. Урок №6

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

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

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

Если вы не поняли, как выглядит ссылка, тогда сморите – вот так выглядит ссылка. Можете нажать на слово «ссылка» и вы попадете на другую страницу.

Теория закончилась, переходим к практике.

Как вставить ссылку в документ на другую страницу

Чтобы вставить ссылку в HTML-документ, используют тег <a> с параметром «href», которое определяет путь или адрес к другому объекту, странице, адресу сайта.


<a href="адрес ссылки или название страницы"> ссылка</a>

Для тега <a> закрывающий тег </a> обязателен.

Внимание: адрес ссылки или название страницы должны быть прописаны на латинице.

Неправильно:


<a href="карта.html"> ссылка</a>

Правильно:


<a href="karta.html"> ссылка</a>

Теперь пример.

Создайте HTML-документ под названием «1.html» и вставьте вот такой код:


<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body>
<a href="2.html">Ссылка</a>
Страница №1
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

Теперь создайте второй HTML-документ под названием «2.html» и вставьте вот такой код:


<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body>
<a href="1.html">Ссылка</a>
Страница №2
</body>
</html>

Внимание, HTML-документы «1.html» и «2.html» должны находиться в одной папке.

[посмотреть пример]

Обратите внимание на страничку «1.html». Там мы сделали ссылку на страницу «2.html», а со страницы «2.html» сделали ссылку на «1.html».

Разобрались?
Попробуйте все сделать сами. Добавьте еще пару страниц и привяжите страницы ссылками.

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

Как вставить ссылку на другую страницу, вы уже знаете. Чтобы сделать ссылку на другой сайт, достаточно в параметре «href» указать адрес сайта (http://адрес сайта):

<a href="http://stepkinblog.ru"> ссылка на мой блог</a>

Вот пример:

ссылка на мой блог

Как сделать ссылку на почту в html

Ссылка на почтовый ящик делается так же, как и обычные ссылки, только вместо адреса сайта или страницы указываете mailto:адрес электронной почты


 <a href="mailto:[email protected]">Написать письмо</a>

При нажатии по ссылке «Написать письмо», откроется почтовая программа, где вы сможете отправить письмо.

Как сделать html ссылку, чтобы она открывалась в новом окне

Добавьте к тегу <a> атрибут «target» с параметром «_blank» и страница будет открываться в новом окне при нажатии по ссылке.


 <a href="http://bloggood.ru" target="_blank">ссылка</a>

Как сделать ссылку на скачивание файла

Укажите в параметре «href» путь к файлу или к архиву.
- Для скачивания архива


 <a href="fail.zip">Скачать zip</a>

fail.zip – это название и расширение архива.

- Для скачивания обычных файлов
Если в ссылке прописать название файла (txt), то при нажатии на ссылку «Скачать» в браузере откроется текстовый файл. Но вам же хочется ее скачать? Для этого добавьте к тегу <a> атрибут «download».


 <a href="fail.txt" download>Скачать txt</a>

- Для скачивания картинок
Если в ссылке прописать название картинки, то при нажатии на ссылку «Скачать» в браузере откроется картинка. Но вам же хочется ее скачать? Для этого добавьте к тегу <a> атрибут «download».


 <a href="stepkinblog-ru.png" download>Скачать картинку</a>

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

Как в HTML-документ вставлять картинку, я думаю, писать не нужно, так как недавно вы этот урок изучали. Если подзабыли, читайте тут.
Итак, чтобы сделать картинку ссылкой, достаточно в html-документе прописать тег картинки <img> между тегами ссылки <a>…</a>


 <a href="http://stepkinblog.ru"><img src="kartinka.jpg"></a>

 

Как сделать подсказку для ссылки

При наведении курсора мышки на ссылку, появится подсказка. Чтобы это реализовать, добавьте к тегу <a> атрибут «title» с текстом:


 <a href="http://stepkinblog.ru" title="Главная страница блога">
 Главная страница блога
 </a>

Как сделать цвет ссылки в html

Чтобы простая ссылка после нажатия или посещения имела нестандартный цвет, добавьте к тегу <body> три атрибута: «link», «alink», «vlink» с кодом цвета (цвет можно задать и на английском, например «red»)


 <body link="#00FF00" alink="#FFFF00" vlink="#EEE9E9">
 <a href="1.html">ссылка</a>
 </body>

- link - цвет просто ссылки
- alink - цвет нажатой ссылки
- vlink - цвет посещенной ссылки
- #00FF00; |  #FFFF00; | #EEE9E9; - это кода цветов ссылок

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

Вот пример того, что у вас может получиться, если правильно используете пройденный материал:

[посмотреть пример]

Подписывайтесь на обновление моего блога и не пропустите новых уроков по основам HTML. Удачи!

Предыдущая запись
Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5 Следующая запись
Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7

stepkinblog.ru

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

Статьи по теме

Вставляем ссылки на сайтУ многих начинающих блоггеров часто возникают вопросы по созданию ссылок на внутренние страницы своих блогов и на документы чужих сайтов. В принципе ничего сложного нет — берешь адрес своего поста или страницы внешнего веб-ресурса, прописываешь их в тег <a> и все вопросы решены. Но как показывает практика, правильно пользоваться элементом гипертекста не у всех получается, особенно с точки зрения поискового продвижения. В этом посте я расскажу о том, как вставить ссылку в текст любой страницы блога или сайта, познакомлю с различными составляющими тега <а>, а также дам ряд рекомендаций по использованию ссылок в seo-тексте. Прочитав этот пост, Вы сможете самостоятельно выполнить правильную взаимосвязь страниц.

[contents h3 h4]

Как создать ссылку на сайт

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

<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>

А вот так выглядит этот атрибут в действии:

Атрибут title в действии

Определение отношений между документами (rel=»значение»)

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

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

<a href=»адрес» rel=»nofollow«>анкор</a>

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

<a href=»адрес» rel=»sidebar«>анкор</a>

На деле вид ссылки со значением sidebar получается следующий (при нажатии на переход):

Значение sidebar атрибута rel

Как создать ссылку на сайт в WordPress

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

1. Зайдите в редактор с уже открытым постом или статьей Вашего блога. Выделите текст будущей ссылки (анкор) в нужном предложении текста и нажмите кнопку на панели (для примера я взял старый пост своего блога):

Значение sidebar атрибута rel

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

3. Для линка напишите в разделе «заголовок» ее описание (текст описания перехода на другую страницу атрибута title). Если Вы делаете ссылку на другую страницу Вашего сайта, в этом разделе будет автоматически ставиться название поста этого документа.

4. Если Вы желаете, чтобы после нажатия мышкой по созданной ссылке читатель увидел новый документ в новом окне, отметьте соответствующее поле. Далее жмете кнопку «добавить ссылку»:

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

В итоге у Вас должна появиться новая ссылка на другую страницу:

Готовая ссылка после вставки

Если Вы хотите добавить в новую ссылку еще несколько атрибутов, то Вам необходимо зайти в том же редакторе во вкладку «HTML» и вручную написать недостающие описания элементов. Например, для моего примера в созданный линк я хочу добавить атрибут rel=»nofollow». Открываю редактор, нахожу новую ссылку и вставляю заданный атрибут тега <a>:

Вставляем новый атрибут rel

Рекомендации и советы по созданию ссылок

Используйте изображение как ссылку. Кроме обычного текста на странице в качестве линка можно использовать любую картинку. Для этого нужно вместо анкора вставить тег картинки <img>:

<a href=»адрес«><img src=»адрес картинки«></a>

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

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

Цените терпение посетителей своих блогов. Если документ, на который ссылается Ваш текст, большой по объему (длинная статья, большая картинка, тяжелый файл для скачивания), обязательно предупредите посетителя. И ему будет приятна забота, и Вы не потеряете читателя.

Проверяйте ссылки на внешние документы. Перед тем, как ссылаться на страницу чужого сайта, убедитесь в его благонадежности. Проверьте его на вирусы, просмотрите наличие платных переходов, убедитесь в отсутствии на нем спама и наличия фильтров. Если Вы проморгаете ГВС (говносайт по простому) и дадите ссылку на него, то после индексации ссылки поисковым роботом есть шанс получить санкции от поисковых систем. Если Вам все же нужно ссылаться на подозрительный документ, используйте атрибут rel со значением nofollow.

Удаляйте битые ссылки. Со временем, ссылки на различные документы (как на Вашем блоге, так и на чужих сайтах) могут вести в никуда — страницы веб-ресурсов могут быть удалены автором (из-за ненадобности, в связи с изменением структуры, с переездом на новый сайт, потеря актуальности текста этих страниц и т.д.). Ежемесячная проверка всех ссылок Вашего блога сэкономит Вам нервы и время. В качестве инструмента для проверки битых ссылок могу порекомендовать бесплатный сервис Broken link checker, платную программу Page Weight или бесплатную Xenu Link Sleuth.

Уделите особое внимание анкорам. Текст ссылки — это самый важный элемент с точки зрения внутренней перелинковки любого сайта. Перечислю самые важные моменты:

  • создавайте информативные анкоры — не стоит злоупотреблять в текстах ссылок фразами «тут», «здесь», «статья» и т.д. Для любой ссылки важна полезность и естественность. Если анкор сделать не интересный и пустой, никто из читателей не будет кликать по переходу.
  • пишите краткий, но точный анкор. Масло масленное хорошо тогда, когда от времени зависит результат — чем больше минут — тем больше результат. Но не для ссылок. Никто не будет читать анкоры длинной в абзац — у читателя или терпение лопнет, или он начало текста перехода забудет и не примет решение на переход;
  • придерживайтесь стандартов при оформлении анкоров. Почти всегда люди идут по наименьшему сопротивлению — так устроен наш мозг, который любой ценой бережет нашу энергию. Поэтому привычка в этом случае играет положительную роль, а значит оформление ссылок должно быть стандартным. Не надо придумывать новые варианты отображения анкоров, не теряйте линию подчеркивания под ссылками, не делайте цвет их текста таким же, как и буквы постов;
  • каждый анкор должен быть уникальным. Не ленитесь придумывать каждый раз новый текст ссылок. Не идите по стопам горе-сеошников, которые не заморачиваются и везде не продвигаемые страницы ставят одни и те же анкоры. Они склеиваются — поисковые системы все видят. 🙂

Бонус — моя схема работы с внутренними ссылками

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

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

[lock]https://yadi.sk/i/sUT4j7UTjXUxQ[/lock]

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

С уважением, Ваш Максим Довженко

maksimdovzhenko.ru

Как сделать ссылку в Ворде

Я надеюсь, все мои подписчики занимаются чтением в свободное время? Это полезно для вашей головы, умственно закаляет. Это я так, к слову. Вообще, про книги сказал для другого: в них очень часто авторы ссылаются на элементы из примечания, на другие главы и многое другое. Согласитесь, удобный подход? Для упрощения работы можно делать то же самое в Word.

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

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

Что касается работы с ПК, советую рассмотреть курс Евгения Попова «Секреты продуктивной работы за компьютером». Создан в 2016 году, поэтому информация актуальная и повысит вашу эффективность в несколько раз!

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

Ссылаться на какой-либо ресурс в Word проще простого. Достаточно скопировать нужный url-адрес и просто вставить его в файл. Это — самый простой способ. Чтобы перейти по указанному url с текстового редактора, необходимо зажать клавишу CTRL и нажать на него левой кнопкой мыши. Выглядит такая ссылка следующим образом:

Есть ещё один метод. Перейдите в раздел «Вставка» и выберите пункт «Гиперссылка»:

Откроется окно, в котором вас интересуют два поля: «Текст» и «Адрес». Сначала во втором поле укажите линк нужного сайта или веб-страницы. В первом поле укажите текст url. Например, чтобы не было голого https://start-luck.ru, я в этой строке пропишу «Мой блог»:

Уже добавленную гиперссылку можно изменить. Наведите курсор на нужную и нажмите правой кнопкой мыши. В таблице выберите пункт «Изменить гиперссылку». Открывшееся окно, точно такое же, как на предыдущей картинке. Можете внести необходимые поправки.

Ссылаемся на место в документе

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

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

В открывшемся окне просто укажите её наименование. Чтобы сохранить, нажмите на кнопку «Добавить»:

Казалось бы, после этого не произошло изменений! «Ничего не получилось?» — спросите вы. Да нет, всё у вас получилось и даже очень хорошо. Закладка добавилась, но никаким текстом она в документе не отмечается. Дальше переведите курсор в то место, где необходимо разместить ссылку. Например, в начало статьи.

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

Выглядеть это должно следующим образом:

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

Ссылаемся на картинку

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

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

Ссылаемся на фрагмент текста

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

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

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

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

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

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

Что имеем в итоге?

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

Стремитесь к новым знаниям, тогда вы получите всё, о чём так давно мечтаете!

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

С вами был Андрей Зенков, до скорых встреч, мои любые читатели блога Start Luck!

start-luck.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о