Графіка для веб-середовища

За навчальною програмою 2018 року

Урок 14

10

(11)

Актуалізація опорних знань і життєвого досвіду

Розділ 3 § 14

Розкажіть, що Вам уже відомо про комп’ютерну графіку:

Про комп’ютерну графіку я знаю...

Растрове графічне зображення — це...

Векторне графічне зображення має такі відмінності від растрового...

Про кодування графічних даних мені відомо...

Я знаю такі формати растрових і векторних зображень...

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

Веб-сторінка стає більш цікавою і зручною, якщо її оформити малюнками та графічними елементами.

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

Для розміщення на веб-сторінках в Інтернеті використовують растрові зображення у форматах:

JPG

GIF

PNG

Оскільки ці формати передбачають стискання даних і файли мають менший обсяг, ніж відповідні файли форматів без стискання.

9

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

Формати файлів растрових зображень:

(англ. Joint Photographic Expert Group — об'єднана експертна група в галузі фотографії) — під час кодування використовуються ефективні алгоритми стиснення даних, що дає змогу зменшити розмір графічних файлів за рахунок втрати частини даних і погіршення якості зображення. Стандартні розширення імен файлів — jpg або jpeg.

JPEG

(англ. Graphics Interchange Format — графічний формат для обміну) — під час кодування використовуються ефективні алгоритми стиснення без втрати даних. Призначений для зберігання зображень, що мають до 256 кольорів (наприклад, мальовані ілюстрації), а також анімованих зображень. Стандартне розширення імен файлів — gif.

GIF

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

(Продовження…) Формати файлів растрових зображень:

(англ. Portable Network Graphic — портативна мережева графіка) — універсальний формат графічних файлів. Файли мають високий ступінь стиснення даних без їх втрати. Під час кодування використовують значно більше кольорів, ніж у форматі GIF. Стандартне розширення імен файлів цього типу — png.

PNG

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

Щоб вставити малюнок на веб-сторінку, необхідно скористатися тегом:

<img src="my.jpg">

Замість my.jpg можна вставити ім'я будь-якого іншого файла з малюнком з розширенням:

Де my.jpg — ім'я графічного файла, який міститься в одній папці з файлом html-документа.

.jpg

.gif

.png

.bmp

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

Якщо малюнок і html-файл не знаходяться в одній папці, то:

• малюнок знаходиться у вкладеній папці images:

<img src="images/my.jpg">

• малюнок знаходиться у зовнішній папці images:

<img src="../images/my.jpg">

• малюнок знаходиться у папці images на сайті http://teach-inf.at.ua:

<img src=" http://teach-inf.at.ua/images/my.jpg">

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

Деякі атрибути тегу img:

Якщо встановити вказівник миші на малюнок, з'явиться вказаний текст — моє фото. Крім того, значення параметра alt буде виведене на екран браузером замість малюнка, якщо відображення малюнків вимкнуте.

• опис малюнка:

<img src=pr1.png alt="моє фото">

• ширина малюнка 100 пікселів:

<img src=pr1.png width=100>

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

Продовження…

• висота малюнка 20 % від висоти робочої області браузера:

<img src=pr1.png height=20%>

• товщина рамки навколо малюнка 5 пікселів:

<img src=pr1.png border=5>

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

Деякі атрибути тегу img:

src

Вказує URL-адресу зображення

width

Вказує ширину зображення

height

Вказує висоту зображення

alt

Вказує альтернативний текст для зображення

usemap

Визначає зображення як зображення на стороні клієнта

ismap

Визначає зображення у вигляді зображення на стороні сервера

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

Типи графічних вставок:

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

Для створення ілюстрованих веб-сторінок застосовують такі оператори (теги):

<html>, </html>

починають і закривають сторінку;

<body backgrounds = «ім’я графічного файла»>

заповнює сторінку фоновим рисунком із файла з указаним іменем;

<table border = 0>

відрисовує таблицю, в колонках та стовпчиках якої буде розташовано потрібні зображення та пояснювальні тексти;

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Графіка для веб-середовища

Розділ 3 § 14

Продовження…) Для створення ілюстрованих веб-сторінок застосовують такі оператори (теги):

</table>

закриває таблицю;

<tr>, <td>, </tr>, </td>

відкривають та закривають рядки та стовпчики вказаної таблиці;

<img>

вставляє зображення в рядки та стовпчики таблиці, що розмічає веб-сторінку,

fixed

параметр, який вказує, чи буде фон нерухомим під час пересування тексту, чи буде рухатися.

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Запитання для самоперевірки знань

Розділ 3 § 14

1. Що нового я дізнався про графіку у веб-середовищі?

2. Чому я навчився на уроці?

3. Що заважало мені працювати ще краще?

4. З якими труднощами мені вдалося поратися на уроці?

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Домашнє завдання

Розділ 3 § 14

Запланувати дії з вивчення графіки веб-середовища у щоденнику самоосвіти. Провести необхідні

дослідження, знайти і проаналізувати необхідну інформацію

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Працюємо за комп’ютером

Розділ 3 § 14

10�(11)

© Вивчаємо інформатику teach-inf.at.ua

Дякую за увагу!

За навчальною програмою 2018 року

Урок 14

10

(11)