Сышышь ты, выходи сюда,
поговорим !

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

Опубликовано: 01.09.2018

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

Уроки по HTML #7 Ссылки

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



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

Ссылка-картинка — это обычная ссылка, просто вместо текста в которой используется изображение. Если вы используете визуальный редактор, то можете подглядеть в посте  Основы работы с WordPress | Создание картинки-ссылки и редактирование свойств изображений , как использовать картинку в виде ссылки. Если же вы редактируете запись в режиме HTML, то для начала давайте вставим изображение:


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

< img src = "http://site.ru/files/image.jpg" / >

Этот код вставляет изображение image.jpg, которое находится в /site.ru/files/. Теперь осталось сделать его ссылкой.

< a href = "http://site.ru" > < img src = "http://site.ru/files/image.jpg" / > < / a >


Как сделать якорь. Ссылка на определенное место в тексте

Этот код вставляет картинку image.jpg, при клике на которую вы перейдете на site.ru. Это обычная ссылка, в которой можно использовать дополнительные параметры (какие? смотрите этот или этот посты).

Ссылка-якорь

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

1. В то место, куда вы хотите бросить якорь, вставьте невидимую ссылку:

< a name = "якорь" > < / a >

2. Если вам нужно отправить посетителя к якорю, вставьте ссылку на него:

< a href = "#якорь" > текстссылки < / a >

Пример ссылки-якоря, используемого в этом посте:

< a name = "z001" > < / a > - этоякорь

< a href = "#z001" > поэтойссылке > < / a > - этоссылка ,отправляющаякякорю

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

< a name = "001" > < / a > - этоякорь ,которыйрасположеннастранице page

< a href = "/page#001" > текстссылки < / a > - этоссылка ,отправляющаяизлюбогоместакякорю 001 , установленномунастранице page

Это пример простейшего варианта ссылки-якоря. Есть и более сложные, с использованием других контейнеров — span, div, а так же атрибутов id, но даже этого простого варианта вам хватит, чтобы сделать блог более удобным.

rss