Сьогодні о 18:00
Вебінар:
«
Нейротренажери для мозку - цікавинки на літо для дітей
»
Взяти участь Всі події
Урок:

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

22.10.2021
0 0
Вміст уроку:
1
2
3

Урок не містить жодного завдання. Додайте завдання.

Щоб додати завдання, оберіть категорію завдання на панелі запитань.

1

ОПРАЦЮВАТИ ТЕОРІЮ

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

1. Для чого використовують графіку на web-сторінках?

Зображення можуть нести певну інформацію, та і просто надають Web-сторінці привабливому вигляду. Приведемо найбільш поширені випадки застосування зо-бражень:
• логотип компанії на діловій сторінці;
• графіка для рекламного оголошення;
• різні малюнки;
• діаграми і графіки;
• художні шрифти;
• підпис автора сторінки;
• застосування графічного рядка як горизонтальна розділова лінія;
• застосування графічних маркерів для створення красивих маркірованих списків.

2.Графічні формати web-сторінок.

Основними форматами рисунків, що відображаються програмами браузерів, є GIF (скорочення від «Graphics Interchange Format» — графічний формат обміну) і JPEG (скорочення від «Joint Photographic Experts Group» — об’єднана група експертів фотографії).
Файли формату GIF (розширення .gif) мають малий обсяг завдяки тому, що в них використовується палітра з 256 кольорів і застосовується алгоритм стиснення без втрат Лемпеля — Зіва. Цей алгоритм особливо ефективний під час обробки простих ілюстрацій з великими ділянками одного кольору. Формат GIF широко застосовується для створення «прозорих» рисунків, а також зображень, що завантажуються черезрядковим методом. Приклади черезрядкового завантаження ви, напевно, бачили при перегляді Web-сторінок в Інтернеті: спочатку завантажується простий варіант рисунка з великим розміром точок зображення, потім у процесі завантаження рисунка точки зображення зменшуються, і рисунок ніби виявляється. Ще однією перевагою GIF-формату є можливість використання анімації. У файлі GIF можна створити послідовність рисунків — кадрів «мультфільму», що є найпростішим способом додавання анімації на Web-сторінки.
Інший графічний формат, JPEG (розширення .jpg або .jpeg), звичайно застосовується для зображень з більшою кількістю кольорів, наприклад, для фотографій. У цьому форматі застосований метод стиснення з втратами. При збереженні високоякісних зображень JPEG займає на диску набагато менше місця, ніж GIF. Однак формат JPEG не підтримує функції прозорості й анімації.
Існує ще один формат створення рисунків для Web-сторінок — це PNG (скорочення від «Portable Network Graphics» — мережна графіка, що переноситься). Подання зображень у вигляді PNG-файлів застосовується як альтернатива формату GIF і є перспективним для застосування в мережних додатках. Перевагою цього формату порівняно з форматом GIF є компактність файлів і достатня якість передачі кольорів.

Основний синтаксис додавання зображень на сторінку:

<img src=”шлях/до/зображення.jpg” атрибути>

<img> – непарний тег, і “src” – обов’язковий атрибут з адресою зображення.

Також часто використовують атрибути: “alt”, “title”, “width”, “height”, і т.д.
“alt” – альтернативний текст для зображення, тобто текст, який буде показуватись, якщо картинка не може бути завантажена.
“title” – текст, який буде показано, при наведенні вказівника миші на картинку.
“width” – довжина зображення.
“height” – висота зображення.

Атрибути

align

Визначає як малюнок буде вирівнюватися по краю і спосіб обтікання текстом

alt

Альтернативний текст для зображення.

border

Товщина рамки навколо зображення.

height

Висота зображення.

hspace

Горизонтальний відступ від зображення до навколишнього контенту.

ismap

Каже браузеру, що картинка є серверної картою-зображенням.

longdesc

Вказує адресу документа, де міститься анотація до картинки.

lowsrc

Адреса зображення низької якості.

width

Ширина зображення.

src

Шлях до графічного файлу.

vspace

Вертикальний відступ від зображення до навколишнього контенту.

usemap

Посилання на тег <map> , що містить координати для клієнтської карти-зображення.

2

ОПРАЦЮВАТИ ПРЕЗЕНТАЦІЮ

11 КЛАСС ГРАФІКА У ВЕБ СЕРИДОВИЩІ.pptx

3

ПОЧИНАЮЧИ З ЦЬОГО УРОКУ БУДЕМО СТВОРЮВАТИ ВЛАСНИЙ САЙТ

ЗА ДОПОМОГОЮ РЕСУРСУ GOOGLE САЙТИ

ЗАВДАННЯ НА СЬОГОДНІШНІЙ УРОК

1 СТВОРИТИ САЙТ НА ГУГЛ САЙТІ

https://sites.google.com/new

2 ДАТИ ЙОМУ НАЗВУ

3 НАЛАШТУВАТИ ТЕМУ ( ВСАНОВИТИ ЛОГОТИП, ЗАСТАВКА БАННЕРА)

4 ОПУБЛІКУВАТИ САЙТ, ТА СКОПІЮВАТИ ПОСИЛАННЯ НА САЙТ

5 ВСТАВИТИ ПОСИЛАННЯ НА ВАШ САЙТ НИЖЧЕ

Рефлексія від 10 учнів

Сподобався:

0

Так: 10

Ні: 0

Зрозумілий:

0

Так: 10

Ні: 0

Потрібні роз'яснення:

0

Ні: 8

Так: 2

Рекомендуємо

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

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

39

Аватар профіля Vitenko Ihor
Інформатика
10 клас

50 грн

Розміщення графіки, аудіо-інформації на веб- сторінках

Розміщення графіки, аудіо-інформації на веб- сторінках

292

Аватар профіля Чернишева Антоніна Вікторівна
Професійна освіта
11 клас та II курс

75 грн

Веб-програмування

Веб-програмування

74

Аватар профіля Vitenko Ihor
Інформатика
10 клас

50 грн

Етапи створення веб-сайтів. Конструювання веб- сайтів

Етапи створення веб-сайтів. Конструювання веб- сайтів

422

Аватар профіля Лизько Валентина Степанівна
Інформатика
9 клас

25 грн

Види комп’ютерної графіки

Види комп’ютерної графіки

210

Аватар профіля Балюк-Дмітрієва Олена Миколаївна
Інформатика
6 клас

31 грн

ГР2 Растрова графіка

 ГР2  Растрова графіка

214

Аватар профіля Лизько Валентина Степанівна
Інформатика
8 клас

35 грн

Схожі уроки

Впорядкування, пошук і фільтрування даних.

Впорядкування, пошук і фільтрування даних.

1277

Аватар профіля Вожга Ірина Леонідівна
Інформатика
9 клас

Створення й уведення структури таблиць. Поняття таблиці, поля, запису. Створення таблиць, означення полів і ключів у середовищі СКБД. Властивості полів, типи даних.

Створення й уведення структури таблиць. Поняття таблиці, поля, запису. Створення таблиць, означення полів і ключів у середовищі СКБД. Властивості полів, типи даних.

1095

Аватар профіля Савка-Ржематорська Оксана Василівна
Інформатика
9 клас

Цикли з передумовою у вкладених циклах

Цикли з передумовою у вкладених циклах

1337

Аватар профіля Вожга Ірина Леонідівна
Інформатика
6 клас

Налаштування часових параметрів аудіо- та відеоряду.

Налаштування часових параметрів аудіо- та відеоряду.

490

Аватар профіля Солодовнікова Катерина Олексіївна
Інформатика
8 клас

Елемент керування «кнопка». Поняття об’єкту та його властивостей і методів (на прикладі елементів екранної форми). Властивості і методи елементів керування.

Елемент керування «кнопка». Поняття об’єкту та його властивостей і методів (на прикладі елементів екранної форми). Властивості і методи елементів керування.

645

Аватар профіля Пилипенко Олена Володимирівна
Інформатика
8 клас

Елемент керування кнопка

Елемент керування кнопка

272

Аватар профіля Пилипенко Олена Володимирівна
Інформатика
8 клас