Делаем обычные ссылки красивыми картинками

Краткий курс HTML для начинающего блоггераВ этом посте речь пойдет о том как сделать изображение ссылкой или придать ссылке вид красивой кнопки, а также о как выглядит HTML код самого изображения (картинки). В общем о том, с чем рано или поздно сталкивается и что должен знать, любой начинающий блоггер, так как без этого никуда. Но как говорится - буду краток и постараюсь изъяснить все на доступном для понимания языке. Итак начнем.
 Прежде всего хочу заметить, что сообщение в Blogger - это полноценный HTML документ, т.е. на его оформление можно влиять как глобально, добавляя стили и блоки во все посты, внося изменения в код шаблона, так и локально - добавляя простыни кодов и внутренних стилей непосредственно в HTML отдельно взятого сообщения. И они будут работать, естественно если соблюдены правила их написания. Но увлекаться внутренними стилями не стоит.
 1. HTML код простой ссылки имеет следующий вид:
<a href="http://какой-то веб-адрес" target="_blank" title="это ссылка">Видимый текст ссылки</a>
 target="_blank" - добавляется чтобы ссылка открывалась в новой вкладке или новом окне (зависит от пользовательских настроек браузера)
 title="..." - это всплывающая подсказка (описание ссылки) при наведении.
В Blogger это все делается инструментами создания нового сообщения - выделяете нужный текст, и нажимаете на кнопку "Ссылка"
Добавления ссылки в текст на Blogger

2.  HTML код изображения (картинки). нужно для начала загрузить изображение на хостинг и получить на него ссылку, например на Picasa или Radikal.ru (подобных сервисов много), но я использую для этих целей черновую страницу (черновик) в блоге, не публикую, а просто подгружаю туда все нужные картинки.
 Для примера возьмем вот такое изображение:Иконкасейчас это не ссылка, а просто картинка, которая имеет такой HTML код:
<img alt="Иконка" src="прямая ссылка на изображение" title="Иконка домашней страницы"/>
Тег alt нужен для альтернативного описания картинки, когда у пользователя отключен показ изображений в браузере, т.е. вместо стандартного "Изображение" будет показано ваше описание, в данном случаи - "Иконка"
 Также можно регулировать размер изображения на странице. Например: ваша картинка имеет размеры 200 X 200 пикселей, а вам нужно чтобы она отображалась как изображение с параметрами 64 Х 64 пикселей, для этого не обязательно уменьшать картинку в графическом редакторе - браузер сделает это за вас, нужно только задать свойства высоты - height и ширины - width для вашей картинки и тогда код будет таким:
 <img alt="Иконка" height="64" src="прямая ссылка на изображение" title="Иконка домашней страницы" width="64" /> 

3.  Как сделать изображение (картинку) ссылкой. У нас уже есть код ссылки и изображения, теперь их нужно объединить, покажу с ссылками - как есть, и выглядеть код будет так:

<a href="http://www.magentawave.com" target="_blank" title="Главная страница этого блога. Откроется в новой вкладке"><img alt="Иконка" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiW-DSuunLN0TF57T5X5rAnnr6PUSIJbNDdm6vsPs5EsGOkQEDK-OyD5RscooqnDPkzhFNp9iT0f26lWY94jUIlLYQtkdOROSkcsBbwGGRFagacYh1en-i5VEaimoV95kQ5LZlqezL9njU/s1600/folder_home_2637.png"  width="64" /></a>
Итог такой:
Иконка Таким образом можно делать простые кнопочки на свои социальные страницы или еще куда-нибудь. О том как сделать динамическую кнопку читайте в этой статье.

 К изображениям, как и к ссылкам можно применять внутренние свойства CSS (стили), т.е. кроме общих стилей, можно задать отдельный, для конкретного изображения или ссылки. Делается это при помощи тега style, а записывается код так.
<a href="ссылка на нужную страницу" target="_blank" title="Главная страница этого блога. Откроется в новой вкладке"><img style="border: 5px solid #FFFFE0;" alt="Иконка" height="64" src="http://картинка.png"  width="64" /></a>
И вот что получилось:
Иконка Здесь я просто добавил для примера простой контур (рамку) через свойство  border, указав его ширину и цвет.

 Подробнее ознакомится со свойствами CSS можно на этой странице

 4. Ссылка для отправки электронной почты делается просто - точно также как и обычная ссылка, но вместо адреса http://.... пишется mailto:адрес электронной почты куда будет отправлено письмо. При нажатии на такую ссылку у пользователя (посетителя) запускается почтовая программа установленная по умолчанию, а точнее форма для отправки нового сообщения на указанный в ссылке адрес. Также можно заранее задать тему сообщения, добавив после адреса и до закрывающих ковычек, ?subject= например: "Личный вопрос".
 А код будет выглядеть так:
<a href="mailto:ваш адрес@gmail.com?subject= Личный вопрос">Видимый текст ссылки</a>
 И к этой ссылке также можно добавить изображение и использовать его вместо простого текста (типа кнопочки). Пример есть в правой колонке этого блога, раздел : "Подпишись или напиши"

  Вот такие маленькие примудрости :)

6 комментариев:

  1. Хмм, а зачем же так усложнять? Мне очень хочется освоить все эти премудрости, но в Blogger есть совершенно простейший способ сделать картинку ссылкой: Вставляете картинку в сообщение своим любимым способом, кликаете по ней и она покрывается голубой пеленой, в этот момент нажмите на предоставленный инструмент Ссылка, откроется окно, в котором нужно указать URL адресс, куда перенаправляете, поставить галочку, чтобы открылось в новой вкладке, жмите OK и готово. Альт и title прописать можно в свойствах (они справа когда изображение покрыто пеленой)

    Впрочем, боюсь, что мои советы здесь выглядят глупыми. Я не скрываю, что я чайник. Но мне нравится находить решение. Желательно самое простое.

    ОтветитьУдалить
    Ответы
    1. Этот пост скорее не пособие "как добавить картинку в сообщение Blogger", а о том как выглядят эти самые картинки-ссылки в коде HTML вообще и показывает их структуру.

      Вы конечно правы и что в WYSIWYG редакторе сообщения все просто, но даже в Blogger не всегда картинки добавляются именно в пост.

      Удалить
    2. Прошу прощения за глупые комментарии

      Удалить
  2. Анонимный25.01.2014, 13:27

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

    ОтветитьУдалить
    Ответы
    1. Не за всеми, а только за теми, которые откроются в новой вкладке или окне.
      http://jsfiddle.net/229nv/

      Удалить
  3. Вы самый крутой! Спасибо!!!! Только благодаря вам я смогла за пол часа сделать то, над чем билась 3 дня! Мою рекламку событий на Блогспот! БЛАГОДАРЮ! http://www.senseylab.ru/

    ОтветитьУдалить

Следующее Предыдущее

BestProject