 |
|
Вивчення нового матеріалу та виконання практичних завдань.
Перш ніж перейти до знайомства з тегами вставки графічних зображень необхідно знати декілька важливих моментів.
Питання до учнів з досвідом роботи в мові HTML:
5. Про що необхідно пам’ятати, використовуючи графічні зображення на веб-сторінці?
(Швидкість появи зображення на екрані залежить від розміру файлу необхідно використовувати зображення типу JPEG або GIF. Конвертацію графіки у ці формати можна здійснити за допомогою редакторів растрових зображень. Допустимими зображеннями є такі, розмір яких не перевищує 40-50 Кбайт).
На HTML-сторінках графіку можна розміщувати різними способами.
Вбудовані зображення – це графічні зображення, які завжди залишаються в одному і тому самому місці сторінки і не обрамляються текстом. Для того, щоб помістити на веб-сторінці вбудоване зображення використовується елемент <IMG SRC=URL_зображення>. Наприклад:
<IMG SRC=”001.jpg”>.
Файл, що містить дане зображення, знаходиться у тому самому каталозі, що і сам HTML-файл.
За замовчуванням текст вирівнюється по нижній частині зображення. Для зміни типу вирівнювання використовують дескриптор IMG з атрибутом ALIGN.
Перегляньте на дошці таблицю з атрибутами:
| Атрибут | Вирівнювання |
| TOP | Вирівнює текст по верхньому краю зображення |
| MIDDLE | Вирівнює текст по середній частині зображення |
| BOTTOM | Вирівнює текст по нижньому краю зображення |
Перед переглядом таблиці стовпчик вирівнювання закритий. Учням пропоную пригадати, де і коли ми використовували такі атрибути. По мірі пригадування відповідні комірки стовпчика „вирівнювання „ відкриватимуться.
( Дані атрибути використовуються при вирівнюванні табличних даних.)
Наприклад: <IMG SRC=”malunoc.jpg” ALIGN =MIDDLE>
Практичне завдання
1. Виберіть графічні зображення, запропоновані групою „естетів” і встановлені на вашому комп’ютері.
2. Перевірте: чи задовольняють вибрані зображення вимогам
3. Розмістіть його в папку з вашими html-файлами.
4. Вставити відповідні зображення до перерахованих у п. 1 сторінок, використовуючи різні атрибути вирівнювання.
5. Проаналізувати отримані результати враховуючи естетичність, доцільність та оптимальність вибраних зображень.
6. Чи все вас задовольняє в одержаних результатах? Чи бажаєте ви, щоб зображення не стояло окремо від тексту, а обрамлялося їм так, як це ми робили у Word?
7. Якщо так, то є необхідність знайомства з плаваючими зображеннями.
Плаваючі зображення – це зображення, що не прив’язуються до одного рядка тексту, а ніби „плавають” вздовж одного з полів і обрамляються текстом.
8. Для створення плаваючих зображень використовується дескриптор IMG з атрибутом ALIGN. Для плаваючих зображень значення цього атрибута можуть бути:
LEFT
CENTER
RIGHT
Наприклад: <IMG SRC=”0001.jpg” ALIGN = RIGHT>
У дескрипторі <IMG > можна використовувати атрибути HEIGHT (висота) і WIDTH (ширина) для завдання висоти та ширини зображення в пікселях. За допомогою цих атрибутів ”повідомляється” розмір зображення. Це дозволяє браузеру підготувати макет сторінки до розміщення тексту до того, як будуть завантажені всі зображення. Так, наприклад, для збільшення зображення необхідно в атрибутах HEIGHTі WIDTH вказати більші величини, ніж реальні розміри зображення. Зауважимо, що зменшувати розмір зображення таким методом недоцільно, оскільки розмір файла, а отже і час завантаження при цьому не змінюється.
1. Вставити вибрані зображення до своєї домашньої сторінки, використовуючи різні атрибути вирівнювання <IMG SRC=” ” ALIGN = RIGHT>( LEFT,CENTER) та WIDTH, HEIGHT
Мова HTML надає можливість використання графічного фону. Для створення графічного фону використовується атрибут BACKGROUND дескриптора <BODY>. У цьому атрибуті потрібно вказати ім’я файла графічного зображення.
Наприклад: <BODY BACKGROUND =”fon.gif”>.
Зауваження: використовуючи атрибут background,будьте дуже обережними. Графічний фон не повинен заважати сприймати інформацію, розташовану на сторінці, втомлювати та дратувати зір.
2. Виберіть файл з графічним фоном, що відповідає зауваженим вимогам.