#4 Зображення
Доволі часто зміст веб сторінки доводиться ілюструвати зображеннями.
Для того, щоб вставити зображення необхідно помістити зображення
в теку з вашим сайтом, а в самому HTML документі застосувати тег IMG
<img src="файл зображення">
Типи графічних файлів які розміщують в HTML документі:
- .GIF файл - растрове зображення з можливістю ефекту анімації.
- .JPEG файли - растрове зображення з 16 - бітною кольоровою схемою. (у властивостях файлу відображається як jpeg, але в імені файлу треба записувати jpg)
- .PNG має найбільший розмір, але найбільшу якість.
Файл JPG - стиснутий файл (60-70%) без суттєвої втрати якості і з достатньо глибокою кольоровою схемою. Як правило використовують для додавання фотографій. Не підходить для схем та логотипів, так як цей формат не передає прозоре тло.
Наприклад:
<img src="college.jpg">
Файл GIF - Має слабку кольорову схему (256 кольорів). Браузери відображають прозоре тло файлів. GIF файли можуть бути як статичними так і анімаційними, що робить цей формат привабливим для створення логотипів, схем, рекламних роликів і ще багато чого.
Наприклад:
<img src="bienvenidos.gif">
Файл PNG . Растрові зображення високої якості. Кольоролва схема може мати 24 біта. Браузер відображає прозоре тло даних файлів. Цей тип файлів найбільш привабливий в якості статичного растрового зображенн для WEB
Наприклад:
<img src="zoom.png">
Атрибути.
Всі елементи мають певні налаштування за замовченням. Але, якщо вони не влаштовують, то їх можна і треба змінювати.
Атрибути - це властивості тегів значення яких можна змінювати.
Розглянемо атрибути елемента зображення. Один атрибут вже відомий - це атрибут src який вказує на файл зображення. Треба, зауажити, що у випадку, коли файл зображення не знайдеться, браузер нічого не відобразить.
Атрибут align
Ця властивість вказує як розташується зображення відносно тексту поряд.
<img src ="файл зображення" align = "left" >
align = "left" означає, що зображення знаходитиметься ліворуч, а текст обтикатиме його праворуч.
<img src ="файл зображення" align = "right" >
align = "right" означає, що зображення знаходитиметься праворуч, а текст обтикатиме його ліворуч.
<img src = "файл зображення" align = "middle" >
align = "middle" означає, що середина зображення вирівняється по базовій лінії тексту.
Атрибути width та height
Властивості width та height встановлюють розміри зображення у пікселях - px
<img src = "файл зображення" width = "100px" height = "100px" >
Якщо вказати лише один габарит, то другий зміниться пропорційно.
Перевір себе
Дайте відповіді на питання тесту
Виконайте вправу
Завантажте 1october.zip в цьому файлі макет статті та три зображення в окремих файлах.
- Створіть папку тв збережіть в ній файли зображень.
- Створіть новий HTML документ з таким же розташуванням тексту і зображень як у макеті.
- Збережіть цей html файл у створену вами папку.