ПРИГАДАЙТЕ
Які ви знаєте властивості цих об’єктів?
Властивості залежать від типу об’єкта на вебсторінці:
- Для тексту: шрифт (гарнітура), розмір, колір, накреслення (напівжирний, курсив) та вирівнювання (по лівому краю, по центру, по правому краю, за шириною).
- Для зображень і відео: розміри (ширина та висота), положення на сторінці, обтікання текстом та адреса джерела файлу.
Як здійснюється форматування об’єктів у текстовому документі?
Форматування здійснюється шляхом виділення потрібного об’єкта та вибору відповідних команд на панелі інструментів текстового процесора (наприклад, зміна шрифту, розміру, кольору) або через контекстне меню.
Що розуміють під словом «розмітка»?
Під розміткою розуміють нанесення спеціальних позначок, символів, ліній або кодів (тегів), які визначають структуру, межі та правила розміщення і відображення елементів у документі або просторі.
Де та для чого використовується це поняття?
- На дорогах: дорожня розмітка регулює та організовує рух транспорту й пішоходів.
- У спорті: розмітка поля визначає ігрові зони та межі майданчика.
- У вебтехнологіях (мова HTML): розмітка структурує вміст сторінки (заголовки, абзаци, таблиці, списки, медіа), щоб браузер міг коректно його відтворити.
Дайте відповіді на запитання
1. Що визначає HTML-код сторінки?
HTML-код визначає структуру, зміст та взаємне розташування елементів на вебсторінці. Він указує веббраузеру, які саме об’єкти (текст, заголовки, зображення, посилання тощо) і в якому порядку слід відобразити.
2. Що таке тег? Як записують теги? Як записують парні теги? Як записують теги з атрибутами?
- Тег — це команда (інструкція) мови HTML, яка визначає спосіб відображення або структуру елемента сторінки.
- Запис тегу: записується в кутових дужках, наприклад
<p>. - Парні теги: складаються з відкриваючого та закриваючого тегів. У закриваючому тезі перед назвою ставиться символ скісної риски
/, наприклад:<h1>Заголовок</h1>або<p>Текст абзацу</p>. - Теги з атрибутами: атрибути записуються у відкриваючому тезі через пропуск після імені тегу. Значення атрибута вказується в лапках після знака «=», наприклад:
<a href="https://example.com">або<img src="image.jpg" alt="Опис">.
3. Який тег призначено для вставлення зображення з файлу на вебсторінку?
Для вставлення зображення використовують непарний тег <img> з обов’язковим атрибутом src, у якому вказується шлях до файлу зображення:
<img src="photo.jpg" alt="Моє фото">4. Який тег призначено для створення гіперпосилання?
Для створення гіперпосилання використовують парний тег <a> з атрибутом href, де значенням є URL-адреса сторінки або ресурсу:
<a href="https://urok.in.ua">Перейти на сайт</a>5. Як можна переглянути HTML-код сторінки?
- Відкрити файл вебсторінки (
.html) у будь-якому текстовому редакторі (Блокнот, Notepad++, VS Code). - У браузері клікнути правою кнопкою миші на сторінці та обрати пункт «Переглянути джерело сторінки» (або натиснути комбінацію клавіш
Ctrl + U).
Обговоріть і зробіть висновки
1. Із чим може бути пов’язана поява нових версій мови HTML?
Поява нових версій зумовлена стрімким розвитком інтернет-технологій, появою нових типів пристроїв (смартфони, планшети) та потребою у спрощенні роботи з мультимедіа (відео, аудіо без додаткових плагінів). Оновлення стандартів здійснює Консорціум Всесвітнього павутиння (W3C), найпопулярнішим сучасним стандартом є HTML5.
2. Чи може бути доступна для перегляду користувачами інтернету ваша сторінка, створена засобами текстового редактора, під час розробки? Чи може бути доступна сторінка, що створюється в онлайн-редакторі?
- Локальний текстовий редактор: сторінка зберігається лише на вашому комп’ютері і не доступна в інтернеті, доки ви не завантажите її на вебсервер (хостинг).
- Онлайн-редактор: більшість сучасних онлайн-сервісів (наприклад, Replit, CodePen, Google Sites) одразу генерують тимчасове або постійне посилання, тому така сторінка може бути доступна іншим користувачам за посиланням.
Виконайте завдання
Завдання 1. Аналіз структури вебсторінки
При аналізі HTML-коду сторінки використовують такі базові теги:
<title>— назва сторінки (відображається на вкладці браузера).<body>— основне тіло сторінки, де розміщується весь видимий вміст.<h1>…<h6>— заголовки різного рівня.<a>— гіперпосилання.
Завдання 2. Створення заголовка, розділової лінії та посилання
Приклад HTML-коду для файлу 5.2.2.html:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Мій населений пункт</title>
</head>
<body>
<h1>Київ</h1>
<hr>
<p>
<a href="https://kyivcity.gov.ua/" target="_blank">Офіційний сайт адміністрації міста</a>
</p>
</body>
</html>Завдання 3. Оформлення сторінки персоналії та посилання на Вікіпедію
Приклад HTML-коду для сторінки з відображенням прізвища, назви школи та посилання:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Шевченко</title>
</head>
<body>
<h1>Шевченко Тарас</h1>
<h2>Середня школа №123</h2>
<p>
<strong>Українська Вікіпедія</strong> — це вільна енциклопедія.
</p>
<p>
<a href="https://uk.wikipedia.org" target="_blank">Перейти до Вікіпедії</a>
</p>
<hr>
</body>
</html>Завдання 4. Створення сторінки з корисними посиланнями для навчання
Приклад коду за зразком завдання 5.2.4:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Навчальні ресурси</title>
</head>
<body>
<h1>Корисні посилання для навчання</h1>
<hr>
<p>На цьому сайті ви знайдете багато цікавого:</p>
<ul>
<li><a href="https://disted.edu.vn.ua/" target="_blank">Дистанційна підтримка навчання</a></li>
<li><a href="https://vseosvita.ua/" target="_blank">Всеосвіта</a></li>
<li><a href="https://naurok.com.ua/" target="_blank">На Урок</a></li>
</ul>
</body>
</html>Завдання 5. Теги для створення таблиць
Для роботи з таблицями в HTML застосовують:
<table>— створення самої таблиці.<caption>— заголовок (назва) таблиці.<tr>— рядок таблиці (table row).<th>— клітинка-заголовок стовпця (table header).<td>— звичайна клітинка з даними (table data).
Завдання 6. Створення нумерованого та маркованого списків
Приклад коду для файлу 5.2.6.html (дні тижня та пори року):
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Списки в HTML</title>
</head>
<body>
<h1>Дні тижня</h1>
<!-- Нумерований список -->
<ol>
<li>Понеділок</li>
<li>Вівторок</li>
<li>Середа</li>
<li>Четвер</li>
<li>П'ятниця</li>
<li>Субота</li>
<li>Неділя</li>
</ol>
<h1>Пори року</h1>
<!-- Маркований список -->
<ul>
<li>Зима</li>
<li>Весна</li>
<li>Літо</li>
<li>Осінь</li>
</ul>
</body>
</html>Готуємось до вивчення нового матеріалу
1. Назвіть етапи розробки вебсайту.
- Постановка завдання: визначення мети створення сайту, його цільової аудиторії та тематики.
- Розробка структури: планування розділів, сторінок та навігації (мапа сайту).
- Дизайн сайту: створення візуального макета оформлення (колірна гама, шрифти, графіка).
- Верстка та програмування: перетворення макета на HTML/CSS-код та додавання інтерактивності.
- Наповнення вмістом (контентом): написання та публікація текстів, зображень, відео.
- Тестування та публікація: розміщення на хостингу, перевірка роботи в різних браузерах.
2. Які ви знаєте сучасні тренди вебдизайну?
- Адаптивність (коректний вигляд на мобільних телефонах, планшетах і ПК).
- Темна тема (Dark Mode).
- Мінімалізм і «чистий» інтерфейс з великою кількістю вільного простору.
- Якісна типографіка з чіткими заголовками.
- Плавні мікроанімації та інтерактивні елементи при наведенні.
3. Документи яких типів можуть бути створені з використанням сервісів Google?
- Google Документи: текстові документи, реферати, звіти.
- Google Таблиці: електронні таблиці, розрахунки, діаграми.
- Google Презентації: слайдові презентації для виступів.
- Google Форми: опитування, анкетування та тести.
- Google Сайти: швидке створення простих вебсторінок і навчальних сайтів.