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

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

1. Кнопка в виде изображения

Это самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg . Тогда, для создания ссылки код должен быть следующим:

Вот во что он превращается на странице сайта:

Это самый элементарный вариант. Советую прочитать про тег <a> и тег <img>, чтобы настроить кнопку именно под Ваши требования.

Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/. Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.).

2. Кнопка с помощью HTML тега <form>

Этот вариант также является одним из методов создания кнопки в виде ссылки. Приведу элементарный пример кнопки созданной с помощью тега <form> и <input>:

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

Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target=»_blank» у тега a), то вместо onclick=»javascript:window.location=’. ‘» нужно прописать onclick=»javascript:window.open=’. ‘» (заменить location на open).

Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn:

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

Мы разобрали 2 подхода к решению задачи создания кнопки на сайте. Обычно все используют первый подход, поскольку заморачиваться с input никто не хочет. Более подробно об стилях можно прочитать в статье: тег <style>.

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

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

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

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

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

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

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

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

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

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

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

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

. Пояснение для новичков , фотографию, изображение в 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 и оформить ее в CSS?

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

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

Навигация по статье:

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

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

Кроме атрибута href, который задает адрес перехода, тегу <a> можно задавать следующие атрибуты:

• download – указывает на файл для скачивания.
• name – якорь.
• title — всплывающая подсказка при наведении.
• accesskey — активация ссылки с помощью комбинации клавиш.
• coords – задает координаты расположение активной области.
• hreflang – определяет язык текста по ссылке.
• rel — отношения между ссылаемым и текущим документами.
• rev — отношения между текущим и ссылаемым документами.
• shape — указывает форму области ссылки для изображений.
• tabindex — последовательность переключения между ссылками при нажатии на клавишу Tab.
• target — имя окна или фрейма, куда браузер будет загружать документ.
• type — тип документа, на который осуществляется переход.

Большинство из данных атрибутов используются достаточно редко. Наиболее часто используемыми атрибутами являются href, download, target и name.

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

Для открытия новой вкладке мы можем использовать атрибут target с атрибутом _blank.

Кнопка или ссылка?

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

Давайте сделаем ссылку и кнопку, оформим их одинаково и посмотрим, чем же они различаются между собой кроме оформления. В примере 1 я вставил в код тег <a> и <button> и применил к ним стилевой класс design , при этом постарался убрать различия, чтобы эти два элемента выглядели похожими друг на друга как близнецы.

Пример 1. Оформление элементов

HTML5 CSS3 IE Cr Op Sa Fx

Вот как это выглядит в браузере Chrome (рис. 1).

Рис. 1. Ссылка и кнопка, вид которых изменён через стили

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

• в статусной строке браузер показывает адрес ссылки, на которую она ведёт;
• ссылку можно открыть в новом окне или вкладке средней кнопкой мыши;
• ссылку можно сохранить через контекстное меню браузера.

• при щелчке по кнопке происходит переход к странице, заданной внутри атрибута action тега <form> . Разумеется, это срабатывает, если у нас кнопка вложена в форму. В примере выше можно хоть защёлкать кнопку, ни к чему это не приведёт;
• на кнопку можно навесить функцию JavaScript, которая будет делать что-нибудь фееричное, чего не может ссылка.

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

Что можно сделать для устранения этого противоречия. Вариантов несколько.

1. Ничего не делать, пользователи сами пусть разбираются.
2. Воспользоваться опытом JavaScript. В этом случае обычные ссылки делаются подчёркнутыми (что, в общем-то, не обязательно), а текст, при нажатии на который открывается невидимый блок или меняется содержимое текущей страницы, выделяется пунктирным подчеркиванием.
3. Убрать с кнопки свойство cursor , оставив значение по умолчанию.

Текст с пунктиром показан на рис. 2. Для наглядности несколько увеличил размер шрифта.

Рис. 2. Кнопка с пунктирным подчёркиванием текста

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