Практична робота
«Розміщення графічних об’єктів на веб-сторінці»
!!! Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.!!!
Для роботи можна скористатися будь-яким онлайн редактором для написання html сторінок (наприклад https://liveweave.com/), встановленою програмою (блокнот, Notepad++ і т.д.) або записати в зошит.
Виконайте завдання
Фото виконаного завдання надішліть вчителеві інформатики на пошту
Кравчук Тетяна Володимирівна: admin@ck19.ukr.education
Дорда Вікторія Олександрівна: vika@ck19.ukr.education
Завдання
Створіть веб-сайт, на якому мають міститися графічні зображення як посилання. Головна сторінка сайту повинна складатися з двох частин: у лівій розташовані малюнки-посилання, у правій — місце, де відкриватимуться сторінки відповідно до вибраних гіперпосилань.
Для роботи використайте текстове і графічне наповнення веб-сайту
Порядок роботи
- Створіть папку Урок №16 та розмістіть у ній файли малюнків про тварин.
Зображення для веб-сторінок сайту
- richi.png
- bonya.png
- frosya.png
- amadini.png
Зображення для навігаційної панелі
1.png
2.png
3. png
4.png
- 2) Відкрийте програму Adobe PhotoShop і створіть п'ять зображень тла — для сторінки навігаційної панелі та кожної сторінки розділу (або збережіть зображення подані нижче). Збережіть їх у файлах із відповідними іменами.
t1.png
t2.png
t3.png
t4.png
t5.png
- 3) Створіть HTML-документи для сторінок про папужку (richi.html), кролика (bonya.html), амадінів (amadiny.html) та рибку (frosya.html).
richi.html
bonya.html
amadiny.html
frosya.html
4) Для кожної веб-сторінки у тегу <BODY> за допомогою атрибута BACKGROUND задано своє зображення тла.
5) Створіть файл np.html для навігаційної панелі, в якій малюнки будуть гіперпосиланнями.
- np.html
У тегу <A> використаний атрибут TARGET, значенням якого є ім'я фрейму, в якому відображатимуться сторінки сайту.
- 6) Створіть головну сторінку index.html, поділену на два фрейми. Після першого завантаження цієї сторінки відвідувач побачить зображення-гіперпосилання у лівому фреймі, а правий буде порожнім доти, доки він не вибере певне посилання.
- index.html
3a бажанням для першого завантаження у правий фрейм можна помістити спеціально створену для цього веб-сторінку.
- 7) Відкрийте у вікні браузера файл index.html і перевірте, як діють гіперпосилання. На рис. 3.25 показано головну сторінку сайту «Домашні улюбленці», коли вибрано посилання на сторінку про амадіни.
5. Підбиття підсумків уроку
Оцінювання робіт учнів.
6. Домашнє завдання
- Повторити теоретичний матеріал.
- Підготуватися до тестування.
Тест
- 1. Зробити малюнок тлом веб-сторінки можна за допомогою тегу:
а) <BODY BACKGROUND="URL-aдpeca графічного файлу">;
б) <IMG SRC=”URL-адреса графічного файлу">;
в) <BODY IMG SRC=”URL-адреса графічного файлу">;
г) <IMG BACKGROUND="URL-anpeca графічного файлу">;
д) <BODY BGCOLOR="URL-aдрeсa графічного файлу">.
- 2. Розмістити на веб-сторінці малюнок можна за допомогою тегу:
а) <BODY BACKGROUND="URL-aдрeсa графічного файлу">;
б) <IMG SRC="URL-aдрeсa графічного файлу">;
в) <BODY IMG SRC="URL-aдрeсa графічного файлу">;
г) <BODY BGCOLOR="URL-aдрeсa графічного файлу">;
д) <IMG BACKGROUND="URL-aдрeсa графічного файлу">.
- URL-адресу файлу зображення задають за допомогою атрибута:
а) SRC;
б) HREF;
в) IMG;
г) BACKGROUND;
Д) BODY.
- Висоту та ширину графічного об'єкта, розміщеного на веб-сторінці, можна задати:
а) у дужках після URL-адреси файлу зображення;
б) за допомогою атрибутів WIDTH та HEIGHT у тегу IMG;
в) за допомогою атрибута ALT;
г) за допомогою атрибута SRC;
д) за допомогою атрибутів WIDTH та HEIGHT у тегу BODY.
- Малюнок 1.jpg можна перетворити на гіперпосилання на веб-сторінку 1.html за допомогою коду:
а) <А HREF="1.html"><IMG SRC = "1.jpg"></A>;
б) <А HREF="1.jpg"><IMG SRC = "1.html"></A>;
в) <A HREF="1.jpg"><IMG SRC="1.html" NAME="1.jpg"></A>;
г) <A HREF="1.jpg"><IMG SRC="1.jpg" NAME="1.html"></A>;
д) <A HREF="1.jpg"><IMG NAME="1.html"></A>,
- Графічна карта посилань — це:
а) зображення карти певної місцевості на веб-сторінці;
б) схема розміщення всіх гіперпосилань на сторінках вебсайту;
в) велике зображення, повністю поділене на області-гіперпосилання;
г) веб-сторінка, поділена на комірки певної конфігурації;
д) одне графічне зображення, використане для визначення кількох гіперпосилань.
- Атрибут USEMAP у тегу <IMG>:
а) задає URL-адресу зображення для використання його як карти посилань;
б) визначає ім'я карти посилань;
в) задає адресу для гіперпосилання, пов'язаного з областю карти;
г) визначає тип області карти гіперпосилань;
д) має збігатися зі значенням атрибута NAME у тегу <МАР>.
- Гарячі області карти посилань — це:
а) ділянки визначеної форми у зображенні карти, що є гіперпосиланнями;
б) веб-сторінки, пов'язані з картою гіперпосилань;
в) пояснювальний текст під картою посилань;
г) частини малюнка, пов'язані з іншими веб-сторінками;
д) назви інших веб-сторінок, що пов'язані з картою гіперпо- силань.
- Атрибутами тегу <AREA> є:
а) HREF, SHAPE, COORDS;
б) RECT, POLYGONE, CIRCLE;
в ) USEMAP , NAME;
г) SHAPE, RECT, POLYGONE, CIRCLE;
д) HREF, USEMAP, NAME.