Презентація "Додавання зображень на вебсторінці"

Про матеріал

Презентація до уроку з інформатики 8 клас за темою "Додавання зображень на вебсторінці" до підручника Інформатика 8 клас (Казанцева О.П., Стеценко І.В.).

Перегляд файлу

Попередній слайд 1 / 8 Наступний слайд

Зміст слайдів

Номер слайду 1

Додавання зображень на вебсторінці

Номер слайду 2

ФОН ВЕБСТОРІНКИВебсторінка стає більш наочною та цікавою, якщо її доповнити зображеннями та графічними елементами. Для формування фону веб-сторінки у вигляді зображення використовують атрибут background для тегу .. Тут URL — адреса файла зображення. Так з допомогою коду буде створено фон вебсторінки, заповнений зображенням. Тут fon.jpg — файл, що містить дане зображення.

Номер слайду 3

ФОН ВЕБСТОРІНКИЯкщо зображення міститься у деякій папці, наприклад, img, необхідно вказати повний шлях до файла з урахуванням папки розташування. Наприклад, img/1.jpg.

Номер слайду 4

ДОДАВАННЯ ЗОБРАЖЕНЬДля вставки зображень використовують тег . Даний тегмає обов’язковий атрибут src, значенням якого є адреса файлазображення: . Так з допомогою коду буде додано зображенняноутбука. Тут laptop.png —файл, що містить дане зображення. Зверніть увагу, що в даному випадку файл розміщений у тій же папці, що і файл вебсторінки. Якщо зображення буде розміщено у деякій папці, слід указати повний шлях до файла з урахуванням папки розташування.

Номер слайду 5

РОЗМІРИ ЗОБРАЖЕНЬДля зміни розмірів зображень використовуються атрибути width,що визначає ширину зображення, та атрибут height, для встановлення висоти зображення. Так, у коді зображення буде мати ширину 200 пікселів, а висоту 100 пікселів. Але в цьому випадку розміри зображення не завжди є пропорційними. Якщо вказати лише один із розмірів, ширину або висоту, то другий вимір браузер обчислить самостійно, виходячи з пропорцій зображення.

Номер слайду 6

РОЗМІРИ ЗОБРАЖЕНЬРозмір зображення можна також задавати у відсотках. Це значення встановлюється відносно розмірів ширини та висоти сторінкибраузера. Цей спосіб є зручним, коли необхідно, аби при зменшенніабо збільшенні сторінки зображення пропорційно змінювало свій роз-мір. Наприклад, при використанні даного коду ширина зображення буде мати50% свого початкового розміру, тобто зменшена у два рази, відповідно його висота буде змінена пропорційно до зміни розмірів ширини.