HTML з нуля: як вставити зображення в HTML. Урок №5 Overcod.net

HTML з нуля: як вставити зображення в HTML. Урок №5

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

Зображення на веб-сторінках можуть бути фоновими або звичайними. У чому їх відмінність?

Фонове зображення — це картинка, яка розміщується на задньому плані веб-сторінки. Зверху можна додавати текст, зображення, таблиці та інші елементи.
Звичайне зображення — це окремий елемент, який відштовхує інші елементи сторінки.

Для веб-сторінок рекомендується використовувати формати зображень: JPEG (JPG), GIF, PNG.

Як зробити картинку фоном в HTML

Для цього використовується атрибут <background> у тега <body>:

<body background="назва_зображення.jpg">

Приклад: файл картинки «fon.jpg» має знаходитись поруч із HTML-файлом.

<html>
<head>
  <title>Моя перша HTML-сторінка на overcod.net</title>
</head>
<body background="fon.jpg">
  Вітаю, це моя перша сторінка на overcod.net.
</body>
</html>

Важливо: Назва файлу має бути написана латиницею!

Як вставити зображення в HTML

Для вставки зображення використовується тег <img> з атрибутом src, який вказує шлях до файлу:

<img src="назва_зображення.jpg">

Приклад:

<html>
<head>
  <title>Моя перша HTML-сторінка на overcod.net</title>
</head>
<body>
  <img src="kartinka.jpg">
  Вітаю, це моя перша сторінка на overcod.net.
</body>
</html>

Як вставити зображення з папки

Якщо зображення знаходиться в папці, вкажіть шлях:

<img src="img/назва_зображення.jpg">

Для зображень з інших сайтів:

<img src="https://www.overcod.net/images/example.jpg">

Як вирівняти картинку в HTML

Використовуйте атрибут align:

left — по лівому краю, текст обтікає праворуч.
right — по правому краю, текст обтікає ліворуч.

<img src="kartinka.jpg" align="right">

Як зробити відступи від зображення

Використовуйте атрибути hspace (горизонтальні відступи) та vspace (вертикальні відступи):

<img src="kartinka.jpg" hspace="20" vspace="20">

Як задати розмір зображення

Атрибути width та height задають ширину та висоту:

<img src="kartinka.jpg" width="100" height="50">

Як додати рамку до зображення

Атрибут border задає товщину рамки:

<img src="kartinka.jpg" border="3">

Повний приклад

Об’єднаємо все перераховане:

<html>
<head>
  <title>Моя перша HTML-сторінка на overcod.net</title>
</head>
<body background="fon.jpg">
  <h2>Моя мрія!</h2>
  <img src="https://www.overcod.net/images/example.jpg" 
       title="Ласкаво просимо на overcod.net!" 
       align="right" hspace="20" vspace="20">
  <p>У мене є мрія:</p>
    <p>&#8594; Подорожувати світом;</p>
    <p>&#8594; Створювати цікаві проекти;</p>
    <p>&#8594; Заробляти більше;</p>
    <p>&#8594; Мати більше часу для творчості.</p>
</body>
</html>

Спробуйте реалізувати ці приклади самостійно! 🌟