Открыть меню

Изучаем, как вставить картинку на сайт

Всем привет! Несмотря на обилие информации в Интернете, новичку бывает сложно разобраться, как вставить картинку в HTML на свой сайт, например, в сайдбар. В этом коротком посте я доходчиво в простой форме покажу, как это сделать.

Встретил на одном из форумов: как вставить картинку в HTML в сайдбаре блога WordPress? Удивился, что человек задает такой вопрос, ведь информации в интернете много на эту тему, однако, взглянув на результаты Яндекса и Google, понял, что проблема действительно есть. Дело в том, что мастера кода считают это настолько элементарным, что не утруждают себя, что называется, «на пальцах» объяснить новичкам, как вставить картинку.

Если речь идет о вставке картинки в статье блога на WordPress, то вопросов не возникнет, технология очень похожа на текстовый редактор Word, но допустим перед нами задача разместить картинку в сайдбаре, что делать?

Как разместить картинку на сайте в сайдбаре

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

Когда картинка уже находится на хостинге, вам необходимо скопировать путь к ней. Посмотреть его можно в строчке над окном с файлами, как указано на картинке (если ваш хостинг Timeweb):

kak-vstavit-kartinku-na-sajt-1

Если вы пользуетесь услугами другого провайдера, не беда, посмотрите повнимательнее, наверняка на экране где-то указывается путь к папке, в которой вы находитесь.

Теперь нам необходимо записать URL-адрес картинки. Он состоит из названия пути к картинке и, собственно, самого названия картинки (вместе с расширением).

Например, в моем случае это выглядит так:

kak-vstavit-kartinku-na-sajt-2

URL-адрес картинки будет иметь вид:

«http:// blog-webmastera.ru/public_html/saydbar/image1.jpg»

Разберем, что есть что:

1) http:// — это обязательная приставка (настоящее название протокол передачи данных, но запоминать не обязательно, она просто должна быть);

2) blog-webmastera.ru/public_html/saydbar/ — адрес папки на хостинге, в которой лежит картинка;

3) image1.jpg – имя файла картинки с расширением (пишется через точку).

Теперь уберем лишнюю часть адреса, которая не несет никакого смысла, речь идет о «public_html/», тогда окончательный вариант будет иметь вид:

«http://blog-webmastera.ru/saydbar/image1.jpg»

Это и есть код, который мы будем вставлять в виджет сайдбара.

Теперь приступим непосредственно к размещению. Войдите в админ-панель вашего сайта и перейдите во вкладку «внешний вид» = > «виджеты».

kak-vstavit-kartinku-na-sajt-3

Найдите в списке доступных виджетов «Текст» и нажмите кнопку «Добавить» или просто перетащите мышкой этот виджет в столбик сайдбара (вариант зависит от вашей версии WordPress).

kak-vstavit-kartinku-na-sajt-4

В открывшем окне вы можете ввести заголовок виджета (он будет отображаться над картинкой). В поле «текст» будем вставлять HTML-код.

kak-vstavit-kartinku-na-sajt-5

Чтобы картинка была видна пользователю, необходимо вставить простой  HTML-код:

<img src=»путь к файлу» alt=»альтернативный текст»>

Где «alt» — альтернативный текст, который увидит человек в случае, если картинка не загрузится (например, при медленном интернет-соединении).

Для нашей подопытной картинки этот код будет иметь вид:

<img src=»http://blog-webmastera.ru/saydbar/image1.jpg» alt=»Забавный смайлик»>

Если вы хотите расположить картинку посередине, то достаточно заключить кусочек кода в тег «<center>», вот так:

<center><img src=»http:// blog-webmastera.ru/ saydbar/image1.jpg» alt=»Забавный смайлик»></center>

Вставляем полученный код в текстовое поле:

kak-vstavit-kartinku-na-sajt-6

И выбираем позицию нашего блока в сайдбаре:

kak-vstavit-kartinku-na-sajt-7

И нажимаем кнопку «Сохранить виджет»

kak-vstavit-kartinku-na-sajt-8

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

kak-vstavit-kartinku-na-sajt-9

То скорее всего в URL-адрес картинки в HTML-коде вкрались лишние пробелы, достаточно их удалить.

Если после корректировки картинка вдруг выходит за пределы сайдбара:

kak-vstavit-kartinku-na-sajt-10

Необходимо дописать еще два пункта в код, а именно, размеры картинки:

<center><img src=»http://blog-webmastera.ru/saydbar/image1.jpg» width=»200″ height=»200″ alt=»Забавный смайлик»></center>

Расшифруем:

width=»200″ – ширина картинки (может соответствовать ширине сайдбара)

height=»200″ – высота картинки

В итоге у нас должен получиться вот такой забавный смайлик:

kak-vstavit-kartinku-na-sajt-11

Теперь вы сможете с легкостью вставить картинку на сайт с использованием HTML-кода.

Если у вас возникли трудности, или появились дополнительные вопросы, пишите их в комментариях! До встречи на страницах Блога вебмастера!

Спасибо, что поделились статьей в социальных сетях!

Обсуждение: 2 комментария
  1. Спасибо! Очень доступно и понятно для начинающих.

    Ответить
    1. Алена, пожалуйста! Я всегда стараюсь давать информацию на максимально простом и доступном языке

      Ответить

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

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

© 2017 Блог вебмастера · Копирование материалов сайта без разрешения запрещено
Дизайн и поддержка: GoodwinPress.ru