Урок "Графіка в HTML"
Тема: Графіка для Web.
Мета: Навчити вставляти графічне зображення в HTML-документ, правильно задавати атрибути зображення, вибирати формат файлу, правильно вказувати шлях до файлу.
Використання зображень у Web-сторінках, безумовно, покращує сприйняття документів, однак графіку потрібно використовувати обережно.
Пригадуємо, які існують формати графічних файлів: BMP, GIF, JPEG, TIFF, PCX та ін. Але користувач побачить зображення на вашій сторінці лише в тому випадку, якщо його браузер підтримує даний графічний формат. Крім того, потрібно пам’ятати, що Web-сторінки передаються мережею, і швидкість обміну даними не завжди достатньо висока. Тому краще використовувати формати, які підтримує більшість браузерів, і розміри файлів із зображеннями невеликі:
GIF – являється стандартом для Web-графіки, без втрат якості висока степінь стиснення, в одному файлі можна зберігати декілька зображень і створювати прості анімації, 8-бітова схема кодування кольору обмежує глибину кольору (28=256)
JPEG – також є стандартом для Web-графіки, забезпечує високу степінь стиснення, 24-бітова схема кодування кольорів (224=16777216), дає можливість компромісу між степенем стиснення та якістю зображення.
PNG – має всі можливості формату GIF, а також ряд інших, 48-біт глибина кольору, більше стиснення.
Вставка зображення – елемент IMG – може бути розміщений у будь-якому місці елемента BODY:
<IMG src=“ім’я файлу” title="text" height=n1 width=n2 align=top>
(src – обов’язковий атрибут тега, від source – джерело)
“ім’я файлу” – вказуємо шлях до файлу одним із способів:
1) Повний шлях
<IMG src=“D:/Rose/Img/rose1.jpg">
2) Відносний шлях
<IMG src=“Img/rose1.jpg"> - це значить, що поруч з документом розташована папка Img, а в ній потрібна нам фотографія rose1.jpg.
<IMG src=“../rose1.jpg"> - а це означає, що фото розміщено на рівень вище від документа.
<IMG src=“../../rose1.jpg"> - так відповідно на два рівні вище.
<img src=http://www.site.ru/foto/foto.jpg> - можно посилатися на той чи інший інтернет ресурс.
Пропоную учням подумати, як краще вказувати шлях до файлу. Обговоривши переваги та недоліки обох способів, приходимо до висновку: для того, щоб без проблем переносити Web-сторінку на інший комп’ютер, потрібно правильно організувати збереження файлів і вказувати відносний шлях.
Розміри зображення (якщо не вказувати – зображення буде дійсного розміру)
<IMG src=“ім’я файлу” width=”30” height=”30”>
Вирівнювання зображення – атрибут align
Вертикальне
bottom – нижня границя малюнка вирівнюється по нижньому краю рядка (встановлюється за замовчанням)
middle – середина зображення вирівнюється по нижньому краю текстового рядка
top – верхня границя зображення вирівнюється по верхньому краю текста |
Горизонтальне
left – вирівнювання зображення по лівому краю сторінки, текст обтікає зображення справа;
right – вирівнювання зображення по правому краю сторінки, текст обтікає зображення зліва |
title="text" – цей необов’язковий атрибут задає текст, який потім буде відображений браузером, що не підтримує відображення графіки або з відключеною підкачкою зображень.
Атрибут hspace=5 – задає горизонтальний відступ від картинки до тексту.
Атрибут vspace=5 – задає вертикальний відступ від картинки до тексту.
Атрибут border задає товщину рамки в пікселях
Для того, щоб задати фонове зображення додаємо атрибут background у <BODY>
<BODY background="phone.gif">
Для збільшення картинок у тексті використовують один із кодів(скрипт):
<img src="img/7.jpg" width="200" height="200" title="назва малюнка" align="right" vspace=15 hspace=20 onmouseover="this.width=300; this.height=300" onmouseout="this.width=200; this.height=200">,
де width="200" – ширина картинки;
height="200" – висота картинки;
title="назва малюнка" – текст, який з’являється на картинці при наведенні мишки;
align="right" – вирівнювання картинки за правим краєм відносно тексту;
vspace=15 – відступ текста від картинки по вертикалі;
hspace=20 – відступ текста від картинки по горизонталі;
onmouseover="this.width=300; this.height=300" – ширина та висота картинки при наведенні курсора мишки на картинку;
onmouseout="this.width=200; this.height=200" – ширина та висота картинки при виведенні курсора за межі картинки.
Практична робота.
Вправа 9.1. Створити HTML-документ за допомогою найпростішого текстового редактора використовуючи текст Вправи 2.3. В тексті розташувати фото троянд. Фоном документа встановити зображення.
про публікацію авторської розробки
Додати розробку