Вставка ссылки в html


Доброго времени суток, друзья!

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

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

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

kak vstavit' ssylku na sajt 


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

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

На самом деле премудрость невелика. Нужно всего лишь поместить желаемое слово вот в такой интересный контейнер:

<a href=”адрес сайта”>слово</a>

Вместо слов «адрес сайта» нужно вставить адрес желаемой страницы. Причем, полностью: http://www.site.ru

И, дабы я был уверен в том, что все всё правильно усвоили, небольшой пример:

Вот так будет выглядеть ссылка в программном коде: <a href=”http://copy-info.ru/intervyu/159.html”>Интервью с успешным копирайтером</a>

А так будет выглядеть готовый результат на сайте: Интервью с успешным копирайтером


Теперь вы знаете, как вставить ссылку в слово b фразу. Пришло время немного поговорить о терминологии.

В данном случае вся конструкция называется ссылкой. А фраза «Интервью с успешным копирайтером» — анкор (от англ. – «якорь», слово, которое «заякорено» на другой странице).

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

Так выглядит программный код: <a href=”http://copy-info.ru/intervyu/159.html”>http://copy-info.ru/intervyu/159.html</a>

А так результат на сайте: http://copy-info.ru/intervyu/159.html

Анкора как бы нет. Им является сама ссылка.

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

Как вставить ссылку в текст на сайт, которая будет открываться в отдельном окошке?

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

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


К счастью, к конструкции <a href=””> можно добавить атрибут: <a href=”” target=”blank”>. И, — о чудо!, — новая страничка будет открываться в новом окошке браузера (в новой вкладке).

Как ссылаться на документы?

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

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

<a href=”http://www.site.ru/полный путь к документу на сервере/название документа.docx”>анкор</a>

<a href=”http://www.site.ru/полный путь к документу на сервере/название документа.jpg”>анкор</a>

<a href=”http://www.site.ru/полный путь к документу на сервере/название документа.rar”>анкор</a>

<a href=”http://www.site.ru/полный путь к документу на сервере/название документа.pdf”>анкор</a>

<a href=”http://www.site.ru/полный путь к документу на сервере/название документа.exe”>анкор</a>


<a href=”http://www.site.ru/полный путь к документу на сервере/название документа.zip”>анкор</a>

В общем, надеюсь, суть вы поняли.

Позвольте на этом прекратить ссылочные репрессии в отношении слов и фраз русского языка.

Но мы возобновим их в одном из следующих уроков на блоге. Посмотрим, как расставить ссылки в сообщениях на форуме. Хороший повод подписаться на обновления блога!

Чуть не забыл!!!

P.S.: Настоятельно рекомендую делать все, что я описал выше, в редакторе «Блокнот». Писать программные коды в привычном для копирайтера «Ворде» — не есть хорошо по многим причинам.

А теперь разрешите на сегодня полностью откланяться.

Как всегда ваш.

Артем Кабанов.

copy-info.ru

Tulyka
Делаю всё также, как написано здесь.

оде бы всё правильно: и якорь с латинским именем находится в нужном месте и ссылка на него сделана в соответствии с требованиями. Публикую сообщение и пытаюсь посмотреть что же у меня в итоге вышло? В итоге, ничего не вышло. Для проверки результата, жму на ссылку, в надежде оказаться в нужном месте текста (или блога), а меня, с просматриваемой страницы блога, выкидывает назад, в редактор сообщений. Почему так?
NMitra
Да, вспомнила об особенности Blogger. Зайдите снова в редактируемое сообщение, но на вкладку "Изменить HTML" (или "HTML" для нового редактора), там подчистите хэш-ссылку до знака #. И не заходя на вкладку "Создать" сохраните.

Blogger считает, что пользователь ошибся, размещая href без полного URL и исправляет ошибку.

Я редко пользуюсь вкладкой "Создать", поэтому уж подзабыла.

Tulyka
Я об этом тоже подумала, но уже после того, как написала Вам. Так оно и есть: если делаешь хэш-ссылку, то в визуальный редактор "Создать" нельзя даже и на секундочку заглянуть, до тех пор, пока не сохранишь сообщение с уже готовыми ссылками.

r />Наконец-то, получилось. ) Спасибо!
LVE
NMitra, подскажите, пожалуйста:
1. Как вы выделяете в тексте код? Например когда приводите в пример строки кода, то слева от него вы ставите вертикальную линию. Как это задать в html или css?

2. Нет ли возможности сделать подсветку синтаксиса, в приводимых примерах кода html, css и пр.?

NMitra
1) http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html

2) стили можно использовать любые, например, http://shpargalkablog.ru/2011/09/cytata-html.html

NMitra
stas_dayan, это не URL, а анкор. Мне такую красоту не нужно в комментариях не нужно ))
scooter
kak sozdati fon
NMitra
С помощью стилей CSS. Например, так


<a href="URL" style="background: green;">анкор</a>

NMitra
В комментариях стили не пропускаются.
Анонимный
Здравствуйте NMitra!

Вопрос про хэш-ссылки. По умолчанию браузер при переходе по хэш-ссылке показывает ее содержимое в самом верху окна.
У меня в самом верху меню закреплено с помощью position:fixed;
и поэтому начало нужного текста при переходе по хэш-ссылке (а это обычно подзаголовок) не видно…
То есть посетитель теряется и не понимает куда его привела хэш-ссылка.

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

А если бы еще этот якорь как-нибудь при переходе подсвечивался… ну там бекграунд#FF0000 это было бы круто:)

С уважением, Владимир

NMitra
Здравствуйте, шикарный вопрос! Пока не готова дать на него ответ
NMitra
Владимир, есть ответ http://jsfiddle.net/NMitra/7g9mn63b/2/
Анонимный
NMitra, спасибо!


Отличное решение. Простой css, и всё работает (кроме background — ну и ладно). А в инете предлагаются большие скрипты, которые у меня все равно не получается подключить)

С уважением, Владимир

NMitra
Как то так http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#background
Alex Fialka
Здравствуйте! Подскажите, как сделать картинку с ссылкой на конец страницы?
NMitra
Здравствуйте, вместо смайлика свою картинку

<a href="#footer-1"><img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик" title="HTML код картинки" height="32" width="32"/></a>


Использовала id из http://fialkaa.blogspot.ru/ То есть id элемента, который находится как можно ближе к низу страницы.

Анонимный
Привет. Подскажите пожалуйста, есть кнопка размером 220×58, сделанная в css, и в её центре надпись, которая является ссылкой. Но сам элемент ссылки распространяется только всю ширину блока, то бишь на 100%, так как заключён в тег "center", но без него никак. А нужно чтобы ссылка была такой же, как и размер фона за текстом — 220х58, при этом должна оставаться в теге "center".
NMitra
Привет. Без кода что-то трудно сказать

Пример http://jsfiddle.net/NMitra/q49o7st6/

<style>
.raz {
display: block;
width: 220px;
height: 58px;
margin: 0 auto;
background: green;
}
</style>

<a href="#" class="raz"></a>

Возможно вам вот это поможет http://shpargalkablog.ru/2015/02/h1-seo.html#img (Утверждение 2)

Лучшие статьи читаем:

You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.