Розміщення й вирівнювання зображень на веб-сторінках.
!!! Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.!!!
Для роботи можна скористатися будь-яким онлайн редактором для написання html сторінок (наприклад https://html5css/edithtm/ або https://liveweave.com/ ), встановленою програмою (блокнот, Notepad++ і т.д.) або записати в зошит.
Фото або файл з виконаним завданням надіслати на пошту вчителя інформатики
Кравчук Тетяна Володимирівна: admin@ck19.ukr.education
Дорда Вікторія Олександрівна: vika@ck19.ukr.education
Завдання 1
Створення фотогалереї
Створимо у HTML-документі таблицю, в комірки якої вставимо ілюстрації до веб-сайту “Моє хобі”:
Хлопці використовують зображення машин, техніки або риби(для рибалок).
Дівчата можуть використати зображення квітів, літературних героїв, домашніх тварин.
Скачайте необхідну кількість зображень одного формату у папку “foto” Назвіть їх наприклад 1..jpg, 2..jpg і т.д.
Створіть до кожного фото відповідний HTML-документ у папці “foto”.
Наведемо приклад одного з таких документів (наприклад для фото 3.jpg) —
Отже, малюнок у комірці таблиці та пов'язаному з ним HTML- документі однаковий, але в таблиці його розміри значно менші реальних — 180x150 пікселів. Кожний такий малюнок супроводжується альтернативним текстом.
Створимо у HTML-документі таблицю, в комірки якої вставимо ілюстрації до веб-сайту “Моє хобі”:
Усі зображення розміщені в поточній папці в підкаталозі foto. Кожний малюнок, вставлений у комірку таблиці, є посиланням, що вказує на HTML-документ, тіло якого містить тег вставляння того самого малюнка-гіперпосилання.
HTML-документи, пов'язані з гіперпосиланнями, відкриваються в окремому вікні: цього досягають наданням атрибуту TARGET значення blank. Зображення в них мають суттєво більші розміри, наприклад, ширина — 900 пікселів, а висота — 750. Розміри малюнка, що відкривається в окремому вікні, підбирають так, щоб він мав ширину та висоту, достатні для детальнішого ознайомлення з ним. При цьому слід пильнувати, щоб не відбулося спотворення картинки, тому часто розміри залишають реальними, не використовуючи атрибутів WIDTH та HEIGHT.
На рис. 3.11 показано, який вигляд має вікно браузера після того, як користувач вибрав одну з фотографій для детальнішого ознайомлення.
