Обкладинка: Інформатика, 9 клас — Морзе Н. В., Барна О. В.

ГДЗ · Інформатика · 9 клас

Сторінка 136

Інформатика, Морзе Н. В., Барна О. В., 2026 · № 8–19 · 12 завдань

Повні розв’язки, як у зошиті. Хочеш розібратися самостійно — під кожним завданням є «Пояснення з репетитором».

Сторінка 136

Завдання 8

Створення ескізу сайту в Canva

Реалізувати ескіз сайту (створений у текстовому документі за матеріалом параграфа) у середовищі Canva. Виконати кроки: 1) Вхід до Canva; 2) Створення нового проєкту типу «Вебсайт» та вибір шаблону; 3) Редагування тексту та зображень (заголовки, абзаци, картинки); 4) Додавання нових секцій (сторінок); 5) Додавання посилань; 6) Публікація сайту у форматі «Прокручування» та отримання посилання.

Розв’язання

  1. Відкрийте браузер, перейдіть на сайт Canva.com, увійдіть у обліковий запис або зареєструйтеся.

  2. У рядку пошуку введіть «Вебсайт», виберіть тип дизайну та оберіть шаблон (наприклад, «Портфоліо»), натисніть «Налаштувати цей шаблон».

  3. Редагуйте заголовки та текст у секціях сайту, замінюйте зображення на власні або додавайте ілюстрації через меню «Елементи».

  4. Натисніть значок плюса (+), щоб додати нову секцію для наступного блоку (наприклад, «Контакти»), налаштуйте її і збережіть.

  5. У верхньому правому куті натисніть «Поділитися», виберіть тип публікації «Вебсайт» -> «Прокручування» та отримайте посилання.

Відповідь:

Готове посилання на сайт (наприклад, my.canva.site/ваша_назва), яке генерується після публікації у форматі прокручування.

Завдання 9

Ознайомлення з мовою HTML

Прочитати текст про HTML та перевірити знання у вікторині (в інтерактивному додатку). Зрозуміти, що HTML — це мова розмітки вебсторінок, яка складається з тегів (команд для браузера), парних контейнерів (<Тег>...</Тег>) та атрибутів.

Розв’язання

  1. Прочитайте визначення HTML як мови розмітки та основні принципи роботи з тегами.

  2. Запам'ятайте правило парних тегів: відкриваючий тег починає дію, закриваючий — завершує її.

  3. Визначте призначення атрибутів (параметрів), які уточнюють властивості тегів (наприклад, колір або вирівнювання).

Відповідь:

HTML — це мова розмітки вебсторінок, що складається з парних тегів та атрибутів; для перевірки знань потрібно пройти вікторину в електронному додатку.

Завдання 10

Аналіз HTML-коду заповідника «Замки Тернопілля

Відкрити вебсторінку національного заповідника «Замки Тернопілля» (https://qr.orioncentr.com.ua/9I3j3), знайти в ній заголовок, титульну назву, малюнок, звичайний текст, відформатований текст, посилання та список. Використати функцію «Переглянути джерело сторінки» для аналізу структури коду.

Розв’язання

  1. Відкрийте посилання на сайт заповідника у браузері та натисніть праву кнопку миші, вибравши «Переглянути код».

  2. У вікні коду знайдіть тег <TITLE> для титульної назви (він зберігається вкладки браузера) та <H1> для головного заголовка на сторінці.

  3. Знайдіть теги <IMG> для малюнків, <P> для звичайного тексту, <A HREF="..."> для посилань та <UL><LI> або <OL><LI> для списків.

  4. Порівняйте знайдені елементи у тексті коду з їхнім візуальним відображенням на сторінці.

Відповідь:

У коді заголовок відповідає тегу <H1>, титульна назва — <TITLE>, малюнки — <IMG>, звичайний текст — <P>, посилання — <A>, списки — <UL> або <OL>.

Завдання 11

Підготовка простого HTML-файлу

Прочитати правила створення найпростішого HTML-файлу в текстовому редакторі (наприклад, Блокнот). Зрозуміти структуру документа: обов'язковий <!DOCTYPE html>, кореневий тег <HTML>, службовий блок <HEAD> та видимий контент у <BODY>.

Розв’язання

  1. Створіть текстовий файл у редакторі, додайте першу рядок <!DOCTYPE html>.

  2. Додайте парний тег <html lang="uk"> та всередину нього розділи <head> і <body>.

  3. У <head> вкажіть метатеги (наприклад, charset) та заголовок сторінки у тегу <title>.

  4. У <body> розмістіть перший елемент контенту, наприклад, заголовок <h1>.

Відповідь:

Простий HTML-файл складається з <!DOCTYPE html>, тега <html>, блоку <head> (для службової інформації) та блоку <body> (для видимого контенту).

Завдання 12

Створення простого HTML-файлу

Використати наведений зразок коду для створення простої сторінки власного проєкту або скористатися підказками. Зразок містить <!DOCTYPE html>, <html>, <head> з мета-тегами та заголовком, <body> з тегом <h1> та <p>.

Розв’язання

  1. Відкрийте текстовий редактор (наприклад, Блокнот) і створіть новий файл.

  2. Вставте код з підручника, замінюючи текст у <title> та <h1> на власний зміст.

  3. Збережіть файл з розширенням .html (або .htm).

Відповідь:

Створено базову HTML-сторінку з заголовком, мета-тегами для кодировки та текстовим абзацом у тілі документа.

Завдання 13

Карта знань «Структурування вебсторінки

За текстом підручника створити карту знань, обговорити її складові в парі та порівняти з прикладом. Матеріал включає теги заголовків <Hn>, вирівнювання ALIGN, перенесення рядка <BR>, абзаци <P>, тег <PRE> для фіксованого розміщення, а також горизонтальні лінії <HR>.

Розв’язання

  1. У центрі аркуша (або цифрового документу) напишіть тему «Прийоми структурування вебсторінки».

  2. Додайте гілки з тегами заголовків <H1>–<H6> та поясненням їхнього рівня.

  3. Додайте блоки про вирівнювання (ALIGN), перенесення рядка (<BR>) та абзаци (<P>).

  4. Включіть приклад використання тегу <HR> для відділення блоків тексту.

Відповідь:

Карта знань містить теги заголовків (H1–H6), атрибути вирівнювання, теги абзаців та перенесення рядка, а також опис використання горизонтальних ліній для візуального розділення контенту.

Завдання 14

Доповнення сторінки текстом

Доповнити власну HTML-сторінку текстом відповідно до ідеї, яку ви спланували раніше (наприклад, для портфоліо чи особистого сайту). Використати елементи структурування та відформатувати текст.

Розв’язання

  1. Відкрийте файл, створений у завданні 12.

  2. Додайте тег <H2> для підзаголовка нової секції.

  3. Вставте текст у тег <P>, використовуючи атрибут ALIGN="center" або "left".

  4. Збережіть файл і відкрийте його в браузері, щоб перевірити відображення тексту.

Відповідь:

Сторінка доповнена новим текстовим блоком з власним заголовком та візуально структурованим абзацом.

Завдання 15

Порівняння теорії з онлайн-підручником

Прочитати матеріал про форматування символів (шрифт, колір, розмір) та порівняти його із розділами онлайн-підручника за посиланням. Звернути увагу на теги <FONT>, <BASEFONT>, <BIG>, <SMALL> та атрибути FACE, COLOR, SIZE.

Розв’язання

  1. Ознайомтеся з переліком кольорів та типів шрифтів у підручнику.

  2. Зверніть увагу на правило запису декількох шрифтів (наприклад, Verdana, Arial).

  3. Порівняйте опис тегів <BIG> і <SMALL> з прикладами використання в коді.

Відповідь:

У підручнику пояснено, що тег <FONT> дозволяє налаштувати шрифт, колір та розмір тексту, а теги <BIG> та <SMALL> змінюють базовий розмір на одиницю відповідно.

Завдання 16

Застосування тегів форматування до тексту

Доведеться застосувати теги форматування (шрифт, колір, розмір, накреслення) до власного тексту на сторінці. Потрібно продемонструвати роботу в парі та надати поради щодо покращення.

Розв’язання

  1. Створіть у текстовому редакторі (наприклад, Блокнот) новий файл і впишіть туди кілька речень на власну тему.

  2. Виділіть потрібні частини тексту та застосуйте теги форматування: `<FONT FACE="Arial" COLOR="red" SIZE="4">`, `<B>`, `<I>` тощо.

  3. Перевірте результат у браузері, відкривши файл як HTML-документ (розширення `.html`), і проаналізуйте, чи чітко передається ваше повідомлення.

Відповідь:

Текст має містити змішане використання тегів `<FONT>`, `<B>`, `<I>`, `<U>` для акцентування важливих слів; приклад коду: `<p><FONT FACE="Arial" COLOR="blue"><B>Важлива думка</B></FONT></p>`.

Завдання 17

Обговорення використання форматування на прикладі сайту

Необхідно обговорити, як використати приклад форматування вебсторінки (мал. 9.2) для створення власних сайтів. Потрібно висловити припущення, перевірити його та мінятися ролями в діалозі.

Розв’язання

  1. Відкрийте посилання на приклад сайту та уважно вивчіть використання кольорів, шрифтів та розмірів тексту.

  2. Висловіть гіпотезу: «Я думаю, що червоний колір використано для привернення уваги до акцій».

  3. Перевірте припущення, порівнявши його з іншими елементами дизайну, і обговоріть у парі, як би ви покращили цей стиль, наприклад, змінивши шрифт для кращої читабельності.

Відповідь:

План діалогу: висловлення припущення про функцію кольорів/шрифтів → перевірка через аналіз інших елементів дизайну → висновок про ефективність вибору стилю; зразок відповіді: «Червоний колір використовується для акцентування важливих новин, що підтверджується його розміщенням на банері».

Завдання 18

Створення списків у HTML-документі

Потрібно прочитати теорію про списки та попрактикуватися в онлайновому тренажері. Додати до власної сторінки маркований або нумерований список.

Розв’язання

  1. Відкрийте онлайновий тренажер за посиланням і ознайомтеся з інструкцією щодо додавання списків.

  2. Напишіть код для маркованого списку, наприклад: `<ul><li>Перший пункт</li><li>Другий пункт</li></ul>`.

  3. Додайте цей код у свій HTML-файл і перевірте, чи правильно відобразився список у браузері.

Відповідь:

У файлі має бути присутній блок `<ul>` або `<ol>`, що містить кілька елементів `<li>`; приклад коду: `<ol><li>Крок 1</li><li>Крок 2</li></ol>`.

Завдання 19

Додавання графіки та обговорення засобів HTML

Переглянути відео про додавання графіки до вебсторінок, обговорити використані засоби для отримання сторінки (мал. 9.3) та перевірити себе в онлайновому тренажері з попереднього завдання.

Розв’язання

  1. Перегляньте відео про додавання графіки та визначте ключові теги та атрибути, які використовуються для вставки зображень.

  2. Обговоріть у парі, як саме ці засоби допомагають зробити сторінку живою (наприклад, використання карток-посилань або ілюстрацій).

  3. Пройдіть тестування в онлайновому тренажері, щоб закріпити навички роботи з графікою та посиланнями.

Відповідь:

Основні засоби включають тег `<IMG>` для зображень, атрибути `ALT` для опису картинки та використання гіперпосилань для інтерактивності; приклад коду: `<img src="photo.jpg" alt="Опис фото">`.

Наприклад: