Практична робота: Створення та розширене редагування сторінок HTML

 

Практична робота: Створення та розширене редагування сторінок HTML

Мета: Опанувати навички створення структури HTML-документа, форматування тексту за допомогою тегів та атрибутів, навчитися створювати гіперпосилання та вставляти об'єкти.

1. Підготовчий етап: Налаштування робочого середовища

Перш ніж почати, важливо правильно підготувати файл. Використовуйте Блокнот або Notepad++.

Алгоритм збереження:

  1. Відкрийте редактор.

  2. Оберіть Файл -> Зберегти як...

  3. У полі "Тип файлу" обов'язково встановіть "Усі файли (.)".

  4. Назва файлу: my_page.html.

  5. Кодування: UTF-8 (щоб українські літери відображалися правильно).

Завдання 1. Створення повної структури

Ми створимо основу сайту, використовуючи парні теги.

Кроки:

  1. Введіть базовий "скелет" сторінки:

    <html>
  <head>
    <title>Сторінка про ІТ-свята</title>
  </head>
  <body>
    Сьогодні я починаю створювати свій перший сайт!
  </body>
</html>

  2. Підзавдання 1.1: Змініть текст у тегу <title> на власне прізвище та ім'я.

  3. Підзавдання 1.2: Додайте всередині <body> ще одне речення про те, який сьогодні день.

  4. Перевірте результат, відкривши файл у браузері.

Пояснення:

  • <html> — повідомляє браузеру, що це документ мовою HTML.

  • <head> — містить дані, які не відображаються на самій сторінці (наприклад, назву вкладки).

  • <body> — основна частина, де ми розміщуємо весь текст та картинки.

Завдання 2. Робота з кольорами та тегом

Навчимося керувати увагою користувача за допомогою кольору.

Кроки:

  1. Знайдіть у коді текст усередині <body>.

  2. Використайте тег <font> з атрибутом color:

    Вітаю! Це моя <font color="red">перша спроба</font> створити сайт. 
Мені дуже <font color="blue">цікаво</font> вивчати теги.

  3. Підзавдання 2.1: Додайте третє речення та виділіть слово у ньому зеленим (green) та помаранчевим (orange) кольорами.

  4. Підзавдання 2.2: Спробуйте використати назву кольору purple для всього першого речення.

Пояснення: Атрибут color додається всередині тегу <font>. Назви кольорів пишуться англійською мовою в лапках.

Завдання 3. Керування розміром та шрифтом

Навчимося робити акценти через зміну масштабу тексту.

Кроки:

  1. Додайте до тегу <font> атрибут size:

    <font color="darkblue" size="5">Цей текст став більшим!</font>
<font size="2">А цей — меншим.</font>

  2. Підзавдання 3.1: Створіть "сходинки": три слова, кожне з яких більше за попереднє (використовуйте size="1", size="4", size="7").

  3. Підзавдання 3.2: Застосуйте відносний розмір, наприклад size="+2" (це означає "на 2 рівні більше за стандарт").

Пояснення: Атрибут size приймає значення від 1 (найменший) до 7 (найбільший). Стандартний розмір зазвичай дорівнює 3.

Завдання 4. Структурування за допомогою заголовків

Вебсторінка повинна мати чітку ієрархію.

Кроки:

  1. На початку <body> додайте головний заголовок:

    <h1>Все про День програміста</h1>

  2. Додайте підзаголовок нижче:

    <h3>Чому це важливо?</h3>

  3. Підзавдання 4.1: Створіть три абзаци тексту, використовуючи тег <p>.

  4. Підзавдання 4.2: Порівняйте заголовок <h1> та <h6>. Який з них виглядає солідніше?

Пояснення:

  • <h1>...<h6> — заголовки. Чим більша цифра, тим менший розмір заголовка.

  • <p> — тег абзацу. Він автоматично додає порожній рядок до і після тексту.

Завдання 5. Внесення тестів та редагування тексту

Робота з розривами рядків та змістовним наповненням.

Кроки:

  1. Напишіть коротку інформацію про День програміста (використовуйте знання з підручника).

  2. Використайте тег <br> для перенесення тексту без створення нового абзацу:

    <p>Програмування — це круто!<br>
Це мова майбутнього.<br>
Я хочу стати професіоналом.</p>

  3. Підзавдання 5.1: Виділіть у цьому тексті число "256" червоним кольором та збільшеним розміром.

Пояснення: <br> — непарний тег. Він просто "штовхає" наступний текст на новий рядок.

Завдання 6. Створення посилання на іншу сторінку

Зробимо наш документ частиною всесвітньої мережі.

Кроки:

  1. В кінці сторінки створіть перехід на Вікіпедію:

    <p>Більше про комп'ютерні свята: 
   <a href="[https://uk.wikipedia.org/wiki/День_програміста](https://uk.wikipedia.org/wiki/День_програміста)">Читати тут</a>
</p>

  2. Підзавдання 6.1: Створіть ще одне посилання, але цього разу посиланням має бути ціле речення "Перейти до пошуку Google".

  3. Підзавдання 6.2 (Додатково): Якщо у вас є файл зображення, спробуйте вставити його за допомогою тегу <img src="назва_файлу.jpg">.

Пояснення:

  • <a> — тег посилання.

  • href — атрибут, що вказує точну URL-адресу сайту.

Контрольні запитання (для самоперевірки):

  1. Який символ у тегу вказує на те, що він закриваючий?

  2. Чим відрізняється дія тегів <p> та <br>?

  3. Які атрибути має тег <font>?

  4. Чи обов'язково закривати тег <img>?

Коментарі

  1. Анонім28 квітня 2026 р. о 03:50

    https://docs.google.com/presentation/d/1ddwQlzJWeMKGtVVDrp8ZV3TGpLOVZ1hbwwTAFaokcTs/edit?usp=sharing

    ВідповістиВидалити
  2. Анонім28 квітня 2026 р. о 03:57

    https://docs.google.com/presentation/d/1eGRqvKfUNf4JcUvQK_sKVToOh5wRqqAHYeN2s-RKrW0/edit?usp=sharing

    ВідповістиВидалити
  3. Анонім28 квітня 2026 р. о 04:04

    https://docs.google.com/presentation/d/19jRpgiLCV4UHlm3DHjsH1FHGuLLgrybd9qqCOhNrYT4/edit?usp=sharing

    ВідповістиВидалити

Дописати коментар