1. Тема заняття:Тема заняття:
Включення графікиВключення графіки
додо webweb-с-сторінкиторінки
Мета:Мета: Вивчити основні теги для додавання
графіки до web-документу .. ;
• Продемонструвати використання цих
команд на конкретних прикладах
оформлення WEB -сторінок;
2. Додавання графіки
• Для додавання графіки на web-сторінку
використовується тег <img>.
Обов'язковим є лише параметр src.
3. Атрибути тегу <img>.
• 1) SRC – задає адресу малюнку;
• 2) WIDTH – ширина малюнку;
• 3) HEIGHT – висота малюнку;
• 4) ALT – додавання коментаря, який
буди відображатися при наведенні
курсора на зображення;
• 5) BORDER – визначає товщину рамки
навколо зображення.
4. Розміщення зображень на
сторінці
• За допомогою необов’язкового атрибута
ALIGN тега <IMG…> можна керувати
розміщенням зображення на сторінці.
• ALIGN=LEFT|RIGHT|MIDDLE|BOTTOM|
…
• LEFT – зображення вирівнюється по
лівому краю вікна, а текст обтікає його
справа;
5. Розміщення зображень на
сторінці
• RIGHT – зображення вирівнюється по
правому краю вікна, текст обтікає його
зліва;
• MIDDLE – текст вирівнюється по центру
зображення;
• BOTTOM – текст вирівнюється по
нижній частині зображення.
6. Ширина і висота зображень
• За допомогою атрибутів WIDTH і HEIGHT
можна задавати розміри зображення в пік
селях, щоб при завантажені документа
програма перегляду відразу відвела для
нього необхідний простір на сторінці.
• Слід відмітити, якщо розміри зображення не
задані, то щоб їх дізнатися, програма
перегляду повинна спочатку завантажити
весь графічний файл (інколи це займає
декілька хвилин), і тільки після цього –
наступний за зображенням текст.
7. Зображення з графічного
файлу
• У HTML-документах можна використовувати
формати файлів gif, jpeg, jpg.
• GIF - один з перших графічних форматів. Він і
сьогодні продовжує залишатися самим часто
вживаним форматом запису графіки і простий
анімації для Інтернет-сайтів. Перевагою
формату GIF є його універсальність - на
сьогоднішній день всі Інтернет-браузери
підтримують отбражений картинок у форматі
GIF.
8. Зображення з графічного
файлу
• У HTML-документах можна
використовувати формати файлів gif,
jpeg, jpg.
• Загальноприйнятим стало застосування
назви JPEG до файлів, записаних у
форматі JFIF. JPEG (або JFIF) - це
формат запису зображень,
застосовуваних як на Інтернет-сайтах,
так і для типографського друку, а також
у цифровій фотографії
9. Типові графічні елементи Web сторінок
Фон
• <BODY BgColor= «yellow»>
Фон жовтого кольору.
• <BODY Background= « image1.gif»>
Фон документа з файлу.
10. Типові графічні елементи Web сторінок
Ілюстрація, фотознімок
• Говорячи про включення графіки в Web
сторінку, найчастіше мають на увазі
розміщення в документі Ілюстрації або
фотознімка.
• Розміщення ілюстрації з прозорим
фоном
• Анімація на Web сторінках
• Галерея мініатюр
• Розсічення картинки
11. Типові графічні елементи Web сторінок
Клавіша, кнопка
• Важливим графічними елементами на Web
сторінках є клавіші навігації. Це невеликі
картинки, що представляють собою
посилання до інших документів
• Клацання клавіші миші на такий клавіші
зазвичай викликає завантаження іншого
документа
• Клавіші навігації є графічними елементами,
які повинні добре вписуватися в фон сторінки,
і разом з тим виділятися і полегшувати
навігацію в Інтернеті завдяки однаковості їх
інтерпретації.
12. Рекламний банер
• Прямокутні картинки, що містять рекламу
або візитки Інтернет-сайтів, називаються
банерами (banner - прапор,
транспарант). Метою розміщення банерів
на Web сторінках
є запрошення інтернавтів відвідати
рекламовану сторінку. Дуже часто банери
насичені анімацією - адже вони
«зобов'язані» кидатися в очі.
• Найчастіше банери буваю наступних
розмірів: 400 * 50, 468 * 60 пікселів, або
більш дрібні - 120 * 40 пікселів і т.д. Дуже
важливо, щоб розмір файлу, в якому
записаний банер, не був великим.
13. Фонові малюнки
• Більшість браузерів дозволяє включати в
документ фоновий малюнок, що буде
моделюватися і відображатися на тілі всього
документа. Деякі користувачі люблять
фонову графіку, деякі ні. Ненав'язливий
напівпрозорий малюнок (шпалера) звичайно
добре виглядає як тіло для більшості
документів.
• Опис фонового малюнка включається в тег
BODY і виглядає так:
• <BODY BACKGROUND="picture.gif >
• За допомогою тега <img> можна також
вставляти відеофільми.
Для цього використовується параметр dynsrc
• <img dynsrc=“адреса відеофайлу”>
14. Практичне завдання
• Створіть веб-сторінку мовою
HTML, яка б містила посередині
малюнок Windows.jpg, що
знаходиться на диску D: в папці
Малюнки. Ширину задайте
• 500 пікселів, висоту – 400
пікселів,
• рамка найтонша навколо
малюнку
15. Домашнє завдання
• Опрацювати конспект
• оформити власну веб-сторінку
на тему “Моє хобі” з
використання тегів для
створення таблиці в HTML-
документі
