Как вставить картинку в html в блокноте Notepad++ и добавить на сайт

Как вставить картинку в html в блокноте Notapd++ и добавить на сайт

Как вставить картинку в html блокноте? Сделать это просто с использованием простого кода. В данной статье мы рассмотрим вставку картинки в hml с помощью программы Notepad++ и установим изображение на сайт.

Для чего вставляют картинки в hml на сайт

Доброго времени суток, гости и читатели блога! Иногда, возникает необходимость вставлять картинки на сайт в html. Это делают в некоторых случаях: когда нужно установить код картинки для страниц одностраничного сайта или отдельных страниц блога.

Кроме того, визуальные изображения в формате html делают веб-страницы красочными и позволяют лучше передавать суть содержимого в документе. С помощью html картинок вы так же сможете передать своим подписчикам информацию в виде графики, различных схем и других материалов.

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

Как вставить картинку в html блокноте Notepad++

Итак, как вставить картинку в html блокноте? Сначала скачайте и установите программу Notepad++ https://notepad-plus.ru/download.html. Она поможет вам редактировать код картинки. Установка программы простая. Есть еще статья обзор по программам, которые работают с веб-страницами.

Далее запустите программу на компьютере. В открытую программу прописываете этот код.

Как вставить картинку в html блокноте -1

Пишите все полностью, чтобы не было ошибок. Указанный адрес заменяете на другой. Это можно сделать так: Откройте любую картинку на фотостоках или в поиске браузера. Нажмите по ней левой кнопкой компьютерной мыши далее правой. Затем выбираете из меню команду: «Копировать ссылку на изображение» или «Копировать адрес изображения».

как скопировать адрес картинки-2

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

 

Теперь, данную ссылку можно вставить в код изображения, который показан выше. Если вы хотите получить ссылку на свое фото, в таком случае используйте сервисы получения ссылок на картинки. Они простые и бесплатные. Достаточно на них загрузить картинку и получите на нее ссылку. Несколько проверенных ресурсов:

  • Сервис Wru  https://wampi.ru/;
  • Ресурс ru.imgbb.com https://ru.imgbb.com/ ;
  • и другие сервисы.

После того, как вы вставите адрес изображения в код, нажмите кнопку «Файл» далее «Сохранить как».

как сохранить документ Нотепад -3

В следующем окне пропишите в поле index.html далее выберите, например, «Рабочий стол» и нажмите «Сохранить».

что такое index hml-4

Чтобы посмотреть картинку с локального компьютера, нажмите по данному файлу правой кнопкой мыши, далее «Открыть с помощью» и выберите нужный браузер. Если картинка откроется в браузере, значит, вы все сделали правильно.

Далее установим код изображения на страницу сайта в Вордпресс.

Как добавить код картинки html на сайт

Если у вас есть сайт или блог, зайдите в админ панель вашего ресурса. Нажмите, например, кнопку «Страницы», далее «Добавить новую». Пишем, например, название страницы «Черновик», чтобы показать для примера, как вставляется код изображения.

Далее выделяете написанный вами ранее код в Нотепад и копируете его. Затем вставляете в пустое поле страницы на Вордпресс.

код картинки -5

Далее нажимаете кнопку «Сохранить» или «Опубликовать», чтобы добавить изображение на сайт. Когда код будет добавлен и сохранен, нажмите «Выйти из редактора кода». Чтобы посмотреть страницу с изображением в браузере, нажимаете «Просмотреть», далее «Предпросмотр в новой вкладке».

При необходимости вы можете изменить размеры картинки. Для этого пропишите, например, в коде атрибут width=600PX и укажите после него нужные размеры. После изменений, сохраните код в блокноте, нажав на кнопку сохранения.

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

изменить размер картинки -6

Кроме того, можно установить изображение по центру, по левому или правому краю, также по ширине.

Заключение

В статье рассмотрен вопрос, как вставить картинку в html блокноте. С редактированием кода нам помогла программа Notepad++. После чего мы установили код картинки на сайт. Как видите, это делается быстро. Главное, без ошибок перепишите код изображения, чтобы картинка вставилась для просмотра на вашем ресурсе.

Спасибо за внимание!

С вами был, Александр Сонин

Понравилась статья? Поделиться с друзьями:
Добавить комментарий
Оцените статью*

:) :D :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:

Мы принимаем ваши cookie - Ваше согласие? ОК