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

Простой генератор ссылок

Например, http://shpargalkablog.ru/ или Например, купить телевизор или http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif открыть ссылку в текущей вкладке открыть ссылку в новом окне/вкладке скачать файл

Атрибут ссылки href

Элемент станет гиперссылкой, если тег a будет содержать атрибут href. В качестве значения href принимается адрес веб-страницы. Его называют URL. Он показан в адресной строке браузера.

Подробнее о том, что такое ссылка и где находится адресная строка браузера

Пример: Результат:
<a href="URL">анкор</a>
<a href="http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-a-element">стандарт w3.org</a>
стандарт w3.org

Всегда ли URL в ссылке начинаются с http://?

В теге a URL можно сокращать согласно установленным правилам. Сокращённую ссылку называют относительной. Она приведёт на страницу относительно точки отправления.

Пример: Результат:
<a href="/2013/01/absolute-relative-links.html">подробнее про относительные ссылки</a>
подробнее про относительные ссылки

Когда используется слеш (символ /) в конце URL

Эти страницы для поискового робота являются разными. Они дублируют содержание друг друга (подробнее).

http://shpargalkablog.ru http://shpargalkablog.ru/

Из них выбирается основная. На Шпаргалке блоггера со слешем ( http://shpargalkablog.ru/ ), так как предполагается что будет продолжение, допустим, http://shpargalkablog.ru/2010/. С второстепенной следует настроить перенаправление на основную с помощью 301 редиректа или rel="canonical". Если ссылка будет иметь вид

<a href="http://shpargalkablog.ru">Главная страница Шпаргалки блоггера</a> то посетитель или, в случае rel="canonical" только поисковый робот, сначала попадёт на http://shpargalkablog.ru, а потом его перебросит на http://shpargalkablog.ru/.

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

Веб-документы, имеющие окончание, скажем,.html,.png,.css, считаются конечным файлом и косую черту после них писать не желательно. То есть

http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html

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

На странице каждое значение идентификатора (id) должно употребляться только один раз. В CSS селектор id распознаётся благодаря хэшу (символ #) перед значением идентификатора.

Пример: Результат:
<тег id="имя_закладки">анкор</тег>
<style> #tut { background: yellow; } </style> <div id="tut">закладка №1</div>

закладка №1

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

http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut

В CSS есть псевдокласс :target, который отвечает за внешний вид элемента, чей селектор присутствует в URL.

Пример: Результат:
<style> #zdes:target { background: red; } </style> <div id="zdes">закладка №2</div> <a href="#zdes">ссылка к закладке №2, которая (закладка) поменяет свой фон</a>

закладка №2

ссылка к закладке №2, которая (закладка) поменяет свой фон

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

Пример: Результат:
<style> .hash:target:before { content: ""; display: block; height: 14em; margin-top: -14em; visibility: hidden; } </style> <div id="tam" class="hash">закладка №3</div> <a href="#tam">ссылка перенесёт на 14em над закладкой №3</a>

закладка №3

ссылка перенесёт на 14em над закладкой №3

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

Пример: Результат:
<a href="#">анкор</a>
<a href="#">наверх</a>
наверх

Поисковые системы не рассматривают дубликатами друг друга URL вида

http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#tut http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#zdes

Ссылка для отправки почты

В качестве URL следует указать mailto:адрес_электронной_почты. Несколько адресов можно перечислить через запятую. Параметры cc=копия, bcc=скрытая_копия, subject=тема, body=письмо не являются обязательными и объединены с помощью &.

Пример: Результат: Пример: Результат: Пример: Результат:
<a href="mailto:email?cc=копия&bcc=скрытая_копия&subject=тема&body=письмо">анкор</a>
<a href="mailto:"></a>
<a href="mailto:,?subject=Вопрос по коду ссылки">служба поддержки</a>
служба поддержки
<a href="mailto:?subject=Код ссылки в html&body=&lt;a href='http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html'&gt;http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html&lt;/a&gt;">поделитесь ссылкой с друзьями</a>
поделитесь ссылкой с друзьями

Звонок по телефону

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

Пример: Результат:
<a href="tel:номер">анкор</a>
<a href="tel:+79030000000">Позвонить</a>
Позвонить

Ссылка на скачивание файла

Пример: Результат: Пример: Результат:
<a href="URL" download="имя_файла">анкор</a>
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" download>скачать иконку смайлика</a>
скачать иконку смайлика
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" download="smaylik">скачать иконку смайлика с именем файла «smaylik»</a>
скачать иконку смайлика с именем файла «smaylik»

Открыть ссылку в новом окне, новой вкладке, фрейме

<a href="URL" target="_self">анкор</a> <a href="URL" target="_parent">анкор</a> <a href="URL" target="_top">анкор</a> <a href="URL" target="_blank">анкор</a> <a href="URL" target="name">анкор</a>
на странице есть указанный код ссылки на странице есть фрейм, который содержит другой фрейм со страницей, на которой есть указанный код ссылки
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_self">показать смайлик в текущей вкладке или текущем iframe</a>
показать смайлик в текущей вкладке или текущем iframe
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_parent">показать смайлик в текущей вкладке или во фрейме-родителе</a>
показать смайлик в текущей вкладке или во фрейме-родителе
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_top">показать смайлик в текущей вкладке</a>
показать смайлик в текущей вкладке
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="_blank">показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя)</a>
показать смайлик в новой вкладке или в новом окне (зависит от настроек браузера пользователя)
<a href="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" target="raz">показать смайлик в iframe с указанным name</a> <iframe name="raz" src=""></iframe>
показать смайлик в iframe с указанным name

Нельзя обязать браузер открыть ссылку в новой вкладке, а не в новом окне.

Игнорируя желания пользователя, с помощью JavaScript можно открыть ссылку в новом окне любого размера, а не в новой вкладке. Но в таком окне нельзя будет поменять URL в адресной строке браузера.

rel может иметь несколько значений, разделённых пробелом, например, rel="nofollow noreferrer". У whatwg.org список значений несколько больше. В таблице указаны только те, которые имеют практическое применение, так как часто устройства учитывают лишь тег link: rel="prefetch" в Mozilla Firefox [developer.mozilla.org] и Google Chrome [developers.google.com], rel="next" и rel="prev" для Google [support.google.com].

<a href="URL" rel="sidebar">анкор</a> <a href="URL" rel="noreferrer">анкор</a>
<a href="#" rel="sidebar">добавить страницу в закладках браузера</a>
добавить страницу в закладках браузера
<a href="http://shpargalkablog.ru/" rel="noreferrer">не будет показан URL, с которого пришёл пользователь</a>
не будет показан URL, с которого пришёл пользователь

Закрыть ссылку в nofollow

Поисковые системы рекомендуют закрывать в nofollow

  1. ссылки на сайты с некачественным содержимым (нарушающие авторское право (плагиат), содержащие вредоносные программы (вирусы), материал только для взрослых, связанный с наркотиками, с элементами насилия и т.п.),
  2. платные ссылки.
Тех, кто ослушается ждёт понижение в выдаче. Поэтому ссылки, оставленные посетителями (например, в комментариях) или требуют проверки, или автоматически закрываются nofollow.

Не нужно закрывать в nofollow абсолютно все внешние ссылки. Не нужно закрывать в nofollow внутренние ссылки, допустим, расположенные в меню. Если есть необходимость, то их лучше скрыть от поисковиков с помощью Ajax.

Пример: Результат:
<a href="URL" rel="nofollow">анкор</a>
<a href="https://support.google.com/webmasters/answer/96569?hl=ru" rel="nofollow">не передает ни PageRank, ни текст ссылки</a>
не передает ни PageRank, ни текст ссылки

Поясняющий текст к ссылке при наведении курсора мышки

Пример: Результат:
<a href="URL" title="всплывающая_подсказка_с_поясняющим_текстом">анкор</a>
<a href="http://shpargalkablog.ru/2013/12/title.html" title="про атрибут title: можно ли поменять его внешний вид, учитывается ли он поисковыми системами">наведи на меня</a>
наведи на меня

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

HTML анкор ссылки

Ссылка может содержать как блочные, так и строчные элементы.

Пример: Результат: Пример: Результат:
<a href="#"><div>блочный: ссылкой является вся строка</div></a>

блочный: ссылкой является вся строка

<a href="#"><span>строчный: ссылкой является только текст</span></a>
строчный: ссылкой является только текст

Как сделать изображение ссылкой? Как сделать кликабельную картинку в HTML?

В качестве анкора нужно использовать HTML код картинки. Предварительно изображение нужно загрузить на хостинг сайта или в социальную сеть (ВКонтакте, Google+ и т.п.), чтобы у рисунка появился свой адрес в интернете — URL.

Пример: Результат:
<a href="URL"><img src="URL" alt="описание изображения"/></a>
<a href="http://shpargalkablog.ru/2013/12/image-optimization.html"><img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик" title="HTML код картинки" height="32" width="32"/></a>
смайлик

На одной как сделать свою картинку меню css картинке можно сделать несколько ссылок на разные страницы.

Ссылка в CSS коде

Пример: Результат:
<style> a { color: gray; } a:link { color: blue; } a:visited { color: green; } a:hover { color: orange; } a:focus { color: red; } a:focus:hover { color: purple; } a:active { color: yellow; } </style> <a href="http://shpargalkablog.ru/2012/02/psevdoklassy-css.html">Что такое псевдоклассы в CSS</a>
Что такое псевдоклассы в CSS

С помощью стилей CSS из ссылки можно сделать кнопку, из нескольких ссылок — меню.

Как изменить цвет ссылки

Пример: Результат:
<a href="#" style="color: #ff0000;">ссылка красного цвета</a>
ссылка красного цвета

В атрибуте style нельзя работать с псевдоклассами, то есть, скажем, нельзя изменить цвет конкретной ссылки при наведении курсора мышки. Поэтому нужно установить значение атрибута id (для одной ссылки) или class (для нескольких) и прописать стиль либо в отдельном файле.css либо в теге style.

Пример: Результат:
<style> .raz3 { color: saddlebrown; }.raz3:hover { color: green; } </style> <a href="#" class="raz3">ссылка коричневого цвета, при наведении зелёного</a>
ссылка коричневого цвета, при наведении зелёного

Значение свойства color может быть указано ключевым словом, например, red, green (список поддерживаемых [developer.mozilla.org]) или в форматах RGB и HSL. Узнать код цвета: #ff0000

Подчёркивание ссылки

За подчёркивание текста отвечает свойство text-decoration, элемента — border-bottom.

Пример: Результат: Пример: Результат: Пример: Результат:
<a href="#" style="text-decoration: none; border-bottom: 1px dashed;">подчеркивание ссылки пунктиром</a>
подчеркивание ссылки пунктиром
<style>.raz5 { text-decoration: none; }.raz5:hover { text-decoration: underline; } </style> <a href="#" class="raz5">подчеркивание ссылки появляется только после наведения на неё</a>
подчеркивание ссылки появляется только после наведения на неё
<style>.raz4,.raz4:hover { position: relative; margin: 3px; padding: 3px; text-decoration: none; color: blue; }.raz4:active { background: #ccc; color: #fff; }.raz4:after,.raz4:before { content: ""; position: absolute; left: -1px; right: 0; top: -1px; bottom: 0; z-index: -1; width: 0; height: 0; margin: auto; border: 0px solid #808991; }.raz4:after,.raz4:hover:before { height: 100%; }.raz4:before,.raz4:hover:after { width: 100%; }.raz4:hover:before { height: calc(100% + 2px); border-width: 0 1px; transition:.7s; }.raz4:hover:after { width: calc(100% + 2px); border-width: 1px 0; transition:.7s; } </style> <a href="#" class="raz4">красивые текстовые ссылки</a>
трам-пам-пам красивые текстовые ссылки трам-пам-пам-пам-пам



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Как сделать прозрачный фон у картинки Блог Листочки для открытки

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

Похожие новости