Розміщення графічних зображень на веб-сторінках

Матеріал з Фізмат Вікіпедії
Перейти до: навігація, пошук

Підготувала студентка МІ-53 Чемерис Н.С.
Мета уроку: навчити учнів добавляти графічні зображення до web-сторінки; сприяти соціалізації учнів, їх адекватній підготовці до функціювання в суспільстві; вчити учнів застосовувати набуті знання на практиці; виховувати самостійність, наполегливість у роботі.
Тип уроку: лекція
Обладнання:
1. Комп’ютери з встановленою програмою CatsHTML.
2. Картки-завдання.

І. Підготовка до навчально-пізнавальної діяльності.

1. Які основні теги мови HTML, які використовуються для написання коду будь-якої сторінки?
2. Як встановити колір фону web-сторінки? Який атрибут і якого тега треба використати?
3. Як використати малюнок фоном сторінки?
4. Як задати заголовок на сторінці?
5. Як вирівняти абзац, заголовок по центру сторінки? По правому краю?

ІІ. Вивчення нового матеріалу.

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 є компактність файлів і достатня якість передачі кольорів. На жаль, формат PNG підтримується поки що не всіма браузерами.
3.Використання графіки в HTML.
Тепер розглянемо як вставити зображення в Web-сторінку. Тегом HTML, який примушує браузер виводити зображення, є <IMG> з обов’язковим атрибутом SRC (SouRCe, джерело). Ім’я файлу є ім’ям графічного файлу, що виводиться. Замикаючий тег не потрібний.
Приклад вставки зображення:
<IMG SRC=”image.gif” ALT=”ИЗОБРАЖЕНИЯ”>

Ккккк.jpg

Атрибути і їх аргументи.
Тег зображення має один обов’язковий атрибут SRC і необов’язкові: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.
Атрибут SRC Указує файл зображення і шлях до нього; зображення повинне бути завантажене в браузер і розміщене в тому місці документа, де розташований тег зображення. Атрибут ALT Дозволяє вказати текст, який виводитиметься замість зображення браузерамі, нездібними представляти графіку. В деяких випадках при недостатній пропускній спроможності ліній зв’язку користувачі відключають відображення графіки. Наявність назв замість картинок полегшує сприйняття Web-сторінок в такому режимі. Атрибут АLIGN Визначає положення зображення щодо оточуючого його тексту. Можливі значення аргументу – [„left” | „right” | „top” | „middle”| „bottom”. ALIGN=”left” визначає зображення, що огинається текстом. Зображення розташовується уздовж лівої межі документа, а подальші рядки тексту огинають його справа.
ALIGN=”right” визначає зображення, що огинається текстом. Зображення розташовується уздовж правої межі документа, а подальші рядки тексту огинають його зліва.

ALIGN=”top” вирівнює верх зображення по верхньому краю найвищого елементу в рядку навколишнього тексту точно так, як і при використанні стандартного набору атрибутів.

ALIGN=”middle” вирівнює центр зображення по базовій лінії рядка навколишнього тексту точно так, як і при використанні стандартного набору атрибутів.

ALIGN=”bottom” вирівнює нижній край зображення по базовій лінії рядка навколишнього тексту точно так, як і при використанні стандартного набору атрибутів.

Атрибут BORDER
Цілочисельне значення аргументу визначає товщину рамки навколо зображення. Якщо значення рівне нулю, рамка відсутня. Щоб не вводити користувачів в оману, не варто задіювати BORDER=0 в зображеннях, які є частиною елементу якоря, оскільки малюнки, вживані як гіперпосилання, зазвичай виділяються кольоровою рамкою. Атрибут HSPACE
Цілочисельне значення цього атрибуту задає горизонтальну відстань між вертикальною межею сторінки і зображенням, а також між зображенням і огинаючим його текстом. Атрибут VSPACE
Цілочисельне значення цього атрибуту задає вертикальну відстань між рядками тексту і зображенням. Атрибути WIDTH і HEIGHT
Обидва атрибути задають цілочисельні значення розмірів зображення по горизонталі і по вертикалі відповідно. Це дозволяє зменшити час завантаження сторінки з графікою. Браузер відразу відводить рамку для зображення і продовжує завантажувати текст на сторінку. Поки завантажується графіка, користувач може почати читати текст. Визначити розмір зображення неважко, для цього досить скористатися будь-якою програмою перегляду графічних файлів, наприклад ACDSee або графічним редактором Corel PhotoPaint або Adobe Photoshop. Відкрийте файл в графічному редакторові і визначте розмір картинки в пікселах. У тегі зображення слід вказати ширину і висоту картинки. <IMG SRC=”image.gif” ALT=”зображення” WIDTH=”100” HEIGHT=”200” HSPACE=”10” VSPACE=”10” BORDER=”2” ALIGN=”left”>.

ІІІ. Закріплення одержаних знань (виконання практичного завдання).

Учні отримують картки з завданням:
Завдання.
Назва сторінки "Дивен світ"
Фоновий малюнок: block.jpg
На сторінці розмістити малюнки і текст внизу малюнка:

Заголовок 1 рівня Дивен світ
Tar02.jpg Два медведі
Tar03.jpg Киця мура
Tar04.jpg МЕТЕЛИКИ
Tar05.jpg Мій друг
Tar06.jpg Леопард на полюванні
Tar07.jpg Вийшов Зайчик погуляти

Малюнки розміщені в папці С: /Мої документи/урок.
Файл зберегти в тій же папці з ім’ям tvarunu.html.

Учні, яким важко зробити завдання самостійно, одержують картки – підказки.
Учитель перевіряє виконання завдання та оцінює роботи учнів.

ІV. Домашнє завдання.

Вивчити конспект. Закінчити створення сторінки, яку почали робити на уроці (для бажаючих).