Опрацювати теоретичний матеріал
Для форматування тла у вигляді малюнка у тегу <BODY> використовують атрибут BACKGROUND, значення якого є URL-адреса файлу зображення. Наприклад, тег <BODY BACKGROUND= “1.jpg”> визначає, що для фонового заповнення веб-сторінки буде використано файл 1.jpg.
Далі наведено приклад HTML-коду сторінки, в якої тло оформлене у вигляді малюнка,
що міститься у файлі mone.jpg
<HTML>
<TITLE> Моя фірма</TITLE>
<BODY BACKGROUND= “
mone.jpg ”>
</BODY>
</HTML>
Якщо зображення достатньо великого розміру, то воно заповнить всю
веб-сторінку, якщо ж маленького, то отримаємо заповнення мозаїкою з копій цього
зображення.
Для розміщення малюнків у HTML-документ використовують одинарний тег <IMG>. Цей тег має обов’язковий атрибут SRC,
значенням якого є URL-адреса файлу зображення. За замовчуванням малюнок
відображається у своїх реальних розмірах. Щоб налаштувати розміри малюнка
використовують атрибути WIDTH та HEIGHT, відповідно визначають ширину та висоту малюнка
(потрібно враховувати пропорцію вихідного зображення, щоб не спотворити його
при відображення на веб-сторінці). Атрибут ALT
містить альтернативний текст зображення (його опис).
Наприклад:
<HTML>
<BODY BACKGROUND=”flamingo.jpg”>
<IMG SRC=”2.jpg” WIDTH=300 HEIGHT=200 ALT= «Фламінго»>
</BODY>
</HTML>
Щодо розміщення зображення у тексті, то в тегу <IMG> використовується атрибут ALIGN,
який може мати наступні значення:
left – зображення
розміщене в лівій частині сторінки, а текст справа
right – зображення
розміщене в правій частині сторінки, а текст зліва
top – нема обтікання
текстом зображення, зображення розміщене
у тексті, відповідний рядок якого розміщений у верхній частині зображення
bottom - нема обтікання
текстом зображення, зображення розміщене
у тексті, відповідний рядок якого розміщений у нижній частині зображення
middle - нема
обтікання текстом зображення, зображення
розміщене у тексті, відповідний рядок якого розміщений посередині
зображення
Атрибути HSPASE та VSPASE
задають відступи до зображення у пікселях
Для того, щоб картинка стала гіперпосиланням потрібно тег <IMG> помістити
між тегами <A>
</A>
Практичне завдання
1. Знайти у мережі Інтернет зображення, котре можна використовувати для фону веб-сторінки та завантажте його на власний ПК у папку з веб-сторінкою (веб-сторінку можна завантажити тут).
3. Розмістіть зображення бембі (попередньо слід перемістити зображення у папку з веб-сторінку) на своїй сторінці, скориставшись різними варіантами розташування та вирівнювання.
4. Відправити на перевірку всі файли (веб-сторінку і два зображення) створеної веб-сторінки на електронну скриньку kovjuli4389@gmail.com
Немає коментарів:
Дописати коментар