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

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

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

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

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

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

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

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

Картинка 201 увеличенная

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»

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

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