Skip to main content

Основи роботи з графічними файлами

Тут ви дізнаєтесь як вбудовувати зображення у вебзастосунок. Зверніть увагу, що ми розглядатимемо лише один формат та спосіб вбудувати його. Інші згодом.
Вебпереглядач вміє відображати кілька форматів зображень. Раніше ми вже говорили про те, що таке формат. Сьогодні ми працюватимемо із растровим зображенням у форматі PNG. Це поширений формат збереження зображень у високій якості. Поняття растровий означає що зображення складається з окремих точок – пікселів, забарвлених кольором.
Для того, щоб вбудувати зображення у веб застосунок, потрібно використовувати тег <img>.

Зверніть увагу

Це перший тег, який не потрібно закривати із тих з якими ми працюватимемо.
З минулого уроку ви пам‘ятаєте що у тегів є атрибути. Так от у тега img є атрибут src, який вказує на джерело зображення.
Є кілька варіантів вказати джерело, в нашому випадку ми завантажили зображення на наш сервер і воно доступне за адресою: https://techno4.online/images/kickstarter0.png.
Ось приклад коду, скопіюйте його і вставте його у новий файл вашого застосунку:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Techno4. Мікродвіж Початківець. Частина 3. Основи роботи з графічними файлами.</title>
        <link rel="icon" type="image/x-icon" href="https://techno4.online/images/favicon.ico" />
    </head>
    <body>
        <h1>Вітання! Далі йде зображення.</h1>
        <img src="https://techno4.online/images/kickstarter0.png" />
        <style>
            h1 {
                color: blue;
            }
        </style>
    </body>
</html>
Збережіть файл і відкрийте застосунок у браузері. Очікується що ви побачите заголовок та зображення.
Тепер можете замінити значення атрибута src на https://techno4.online/images/kickstarter1.png.
Ваше зображення змінилось на інше. Спробуйте розмістити на сторінці застосунку два зображення.

Успішним виконанням уроку вважається наступне

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