Як вставити картинку в текст html

Як вставити картинку в текст html

Зображення не є обов’язковим атрибутом повідомлення в блозі або на сайті, проте приємно пожвавлюють весь текст і надають йому наочність. Для оформлення зображень використовуються спеціальні HTML-теги.

Інструкція

  1. Найпростіший тег для вставки зображення в режимі HTML виглядає так: <img src=»http://site/…jpg»>

    Http: / / і далі — це адреса самої картинки в мережі. Якщо ви його не знаєте, клацніть правою кнопкою миші по зображенню і натисніть кнопку «Відкрити у новій вкладці». Відкрийте вкладку і скопіюйте посилання з адресного рядка.

    При вставці зображення за допомогою цього тега розмір буде співпадати з оригінальним. Тому вибирайте зображення невеликого розміру (до 500 пікселів по більшій стороні або близько того).
  2. Великі зображення оформляються приблизно за тим же тегом, але, щоб відрегулювати зображення відповідно до ширини екрану, потрібно вставка додаткового тега «width» — ширина. Модифікований тег буде виглядати так: <img src=»http://site/…jpg»width=1000>

    У прикладі 1000 — це ширина зображення в пікселях. Ви можете змінити розмір відповідно до своїх потреб. Висота підганяється автоматично (пропорції зберігаються).
  3. При вище описаних тегах текст розташовується під картинками. Додаткові теги дозволяють розмістити текст ліворуч або праворуч від зображення — left і right відповідно. Повний тег буде виглядати так: <img src=»http://site/…jpg»width=1000 align=left hspace=20>

    При такому оформленні картинка буде розташовуватися ліворуч, а текст праворуч, на відстані 20 пікселів від зображення. Саме зображення буде мати ширину 1000 пікселів по ширині.

    Змініть відповідні параметри, щоб розмістити зображення праворуч від тексту, на зручному для вас відстані.