Доброго времени суток, друзья!
Сегодня мы с вами научимся тому, как отправлять в ссылку слова и даже целые фразы. Не в Сибирь. А на другие странички, сайты, текстовые документы и картинки.
Этот пост написан вот почему. Многие начинающие (и даже некоторые опытные) копирайтеры не знают, как вставить ссылку в текст. Кроме того, читатели блога не раз просили меня поделиться моими скромными познаниями на эту тему ;-).
Многие копирайтеры знают, как вставлять ссылки в Ворде и текстовых редакторах на сайтах. Нужно только выделить желаемую фразу и кликнуть на значок с такой «цепью»:
А в появившемся после этого окошке можно вставить адрес любой веб-странички, скопированный из адресной строки браузера.
Но заказчики чаще всего просят немного о другом – вставить соответствующие теги, то есть кусочки программного кода 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
оде бы всё правильно: и якорь с латинским именем находится в нужном месте и ссылка на него сделана в соответствии с требованиями. Публикую сообщение и пытаюсь посмотреть что же у меня в итоге вышло? В итоге, ничего не вышло. Для проверки результата, жму на ссылку, в надежде оказаться в нужном месте текста (или блога), а меня, с просматриваемой страницы блога, выкидывает назад, в редактор сообщений. Почему так?
Blogger считает, что пользователь ошибся, размещая href без полного URL и исправляет ошибку.
Я редко пользуюсь вкладкой "Создать", поэтому уж подзабыла.
r />Наконец-то, получилось. ) Спасибо!
1. Как вы выделяете в тексте код? Например когда приводите в пример строки кода, то слева от него вы ставите вертикальную линию. Как это задать в html или css?
2. Нет ли возможности сделать подсветку синтаксиса, в приводимых примерах кода html, css и пр.?
2) стили можно использовать любые, например, http://shpargalkablog.ru/2011/09/cytata-html.html
<a href="URL" style="background: green;">анкор</a>
Вопрос про хэш-ссылки. По умолчанию браузер при переходе по хэш-ссылке показывает ее содержимое в самом верху окна.
У меня в самом верху меню закреплено с помощью position:fixed;
и поэтому начало нужного текста при переходе по хэш-ссылке (а это обычно подзаголовок) не видно…
То есть посетитель теряется и не понимает куда его привела хэш-ссылка.
Как бы каким-то скриптом сделать так, чтобы когда браузер видит, что переход идёт по хэш-ссылке, он как бы
отматывал страницу пониже на заданное число пикселей? И якорь бы вылезал из под шапки (меню).
А если бы еще этот якорь как-нибудь при переходе подсвечивался… ну там бекграунд#FF0000 это было бы круто:)
С уважением, Владимир
Отличное решение. Простой css, и всё работает (кроме background — ну и ладно). А в инете предлагаются большие скрипты, которые у меня все равно не получается подключить)
С уважением, Владимир
<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 элемента, который находится как можно ближе к низу страницы.
Пример 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)
Лучшие статьи читаем: