Презентація - HTML програмування. Друга з 4-х презентацій по темі.

Сучасні браузери можуть працювати з різними форматами зображення, але найбільш прийнятні – Для світлин краще використовувати формат JPEG для малюнків та и піктограмм - GIF .GIF .JPEG

GIF – (Graphics Interchange Format) формат обміну графікою. Преваги: Кодування платформено-незалежне (Windows, Macintosh, Unics). При створені файлу застосовується особлива технологія стискування, яка істотно скорочує його розмір, що дуже прискорює передачу його в мережі. GIF-зображення легко анімувати, використовувати прозорість та спливання. Недоліки: обмежений набір кольорів.  використовується для піктограм та невеликих малюнків. 7 Кб 159 Кб 113 Кб

JPEG - (Joint Photographic Expert Group) – організація по стандартизації Преваги: Кодування платформено-незалежне (Windows, Macintosh, Unics). При створенні файлу застосовується особиста технологія стискування, яка суттєво скорочує його розмір, що дуже прискорює передачу його в мережі. Підтримує десятки тисяч кольорів 37 Кб 20 Кб

Тег - вставка зображення Атрибути: Src - обов'язковий, значення - адреса зображення Зазвичай файли з малюнками поміщають в туж папку що й сама сторінка або окрему папку: alt – визначає альтернативний текст, який з'являється на місті малюнку у вікні браузера, якщо вивід малюнку неможливий або заблокований користувачем. Значення alt – рядок тексту, довжиною 1024 символів. Лапки обов'язкові. Alt= “Собака на сіні “ Це текст також з'явиться у вигляді спливаючої підказки, коли вказівник миші направлений на малюнок.

align – вирівнювання. Положення зображення краще завжди вказувати явно. Значення: left, right – по лівому або по правому краю. top – верхня межа зображення встановлюється на рівні верхньої межі самого високого елементу рядка. middle – середина зображення вирівнюється з серединою рядка. bottom – (по замовчуванню) нижній край зображення вирівнюється з базовою лінією тексту.

border – встановлює або прибирає (для гіперпосилань) рамку навколо зображення border= товщина рамки в пікселях border=0 – прибрати рамку height, width – висота та ширина зображення в пікселях. Розміри можуть бути більші або менші відносно реальних розмірів зображення. Браузер автоматично масштабує його. Значення можливо вказувати в % по відношенню до вікна. width = “100%” height= 20 – полоса на все вікно шириною 20 пікселів. Якщо вказати тільки width = “30%”, то висоту браузер підбере сам пропорційна малюнку. Якщо малюнок не завантажився, то на екрані залишається порожня область з завданими атрибутами height, width. hspace, vspace – задають відстань в пікселях між малюнком та текстом по вертикалі та горизонталі.

Центрування зображення Вирівняти зображення по центру можливо виділивши його з тексту тегами абзаців, розділів або новим рядком. 1 спосіб: Текст

Володимир Сосюра Любіть Україну Обтікання зображення текстом Значення left и right атрибуту align розташовує зображення з лівого або правого боку документу. Потім браузер виводить залишки вмісту документу у вільний простір, сумісний із зображенням,  текст обтікає зображення. Любіть Україну, як сонце, любіть,
як вітер, і трави, і води…
Любіть Україну, як сонце, любіть, як вітер, і трави, і води… В годину щасливу і в радості мить, любіть у годину негоди. Любіть Україну у сні й наяву, вишневу свою Україну, красу її, вічно живу і нову, і мову її солов'їну.

Володимир Сосюра Любіть Україну Любіть Україну, як сонце, любіть, як вітер, і трави, і води… В годину щасливу і в радості мить, любіть у годину негоди. Любіть Україну у сні й наяву, вишневу свою Україну, красу її, вічно живу і нову, і мову її солов'їну. Якщо у тегу не вказувати атрибут align=left або right, то текст на сайті буде розташовано наступним чином:

Володимир Сосюра Любіть Україну

Можливо розмістити малюнки одночасно з обох сторін документу. В такому випадку малюнки задаються перед текстом.

Кішки дуже забавні тварини.
Вони створюють уют в будинку, радуючи нас.
Особливо приємно дивитись на маленьких котят.

Пояснення: Обидва малюнки мають значення атрибуту width="25%" , але правий малюнок помітно меньший за лівий. Це відбувається тому, що 25% для правого малюнку розраховується від ширини яка залишилась після друку лівого малюнку тобто від 75% ширини вікна браузера. Для того, щоб текст виводився після усіх малюнків а не між ними, використовуємо

Якщо виконується вивід декількох малюнків з однаковим вирівнюванням (left або right), то наступне зображення позиціонується відносно попереднього.