Додавання зображень на вебсторінці
ФОН ВЕБСТОРІНКИВебсторінка стає більш наочною та цікавою, якщо її доповнити зображеннями та графічними елементами. Для формування фону веб-сторінки у вигляді зображення використовують атрибут background для тегу
.. Тут URL — адреса файла зображення. Так з допомогою коду буде створено фон вебсторінки, заповнений зображенням. Тут fon.jpg — файл, що містить дане зображення.
ФОН ВЕБСТОРІНКИЯкщо зображення міститься у деякій папці, наприклад, img, необхідно вказати повний шлях до файла з урахуванням папки розташування. Наприклад, img/1.jpg.
ДОДАВАННЯ ЗОБРАЖЕНЬДля вставки зображень використовують тег . Даний тегмає обов’язковий атрибут src, значенням якого є адреса файлазображення:
. Так з допомогою коду
буде додано зображенняноутбука. Тут laptop.png —файл, що містить дане зображення. Зверніть увагу, що в даному випадку файл розміщений у тій же папці, що і файл вебсторінки. Якщо зображення буде розміщено у деякій папці, слід указати повний шлях до файла з урахуванням папки розташування.
РОЗМІРИ ЗОБРАЖЕНЬДля зміни розмірів зображень використовуються атрибути width,що визначає ширину зображення, та атрибут height, для встановлення висоти зображення. Так, у коді зображення буде мати ширину 200 пікселів, а висоту 100 пікселів. Але в цьому випадку розміри зображення не завжди є пропорційними. Якщо вказати лише один із розмірів, ширину або висоту, то другий вимір браузер обчислить самостійно, виходячи з пропорцій зображення.
РОЗМІРИ ЗОБРАЖЕНЬРозмір зображення можна також задавати у відсотках. Це значення встановлюється відносно розмірів ширини та висоти сторінкибраузера. Цей спосіб є зручним, коли необхідно, аби при зменшенніабо збільшенні сторінки зображення пропорційно змінювало свій роз-мір. Наприклад, при використанні даного коду ширина зображення буде мати50% свого початкового розміру, тобто зменшена у два рази, відповідно його висота буде змінена пропорційно до зміни розмірів ширини.
Домашнє завдання. Проаналізувати§ 25, с. 110-113
Дякую за увагу!
