ПРИГАДАЙТЕ
Які ви знаєте властивості цих об’єктів?
Властивості залежать від типу об’єкта на вебсторінці. На мою думку, для тексту основними властивостями є шрифт, розмір, колір, накреслення та вирівнювання. Для зображень та відео — це розмір (ширина та висота), положення на сторінці та обтікання текстом.
Як здійснюється форматування об’єктів у текстовому документі?
Форматування здійснюється шляхом виділення об’єкта та використання інструментів текстового процесора (кнопок на стрічці меню або контекстного меню). Це дозволяє змінити зовнішній вигляд об’єкта (наприклад, колір чи стиль шрифту) та його розташування (відступи, інтервали).
Що розуміють під словом розмітка?
Під словом розмітка розуміють нанесення певних знаків, ліній або кодів для визначення структури, меж або правил поведінки об’єктів у просторі чи документі. Це спосіб вказати, де і як мають розміщуватися елементи.
Де та для чого використовується це поняття?
Це поняття використовується в різних сферах для організації простору та правил. Наприклад, на дорозі дорожня розмітка регулює рух транспорту, у спорті розмітка поля визначає ігрові зони, а в текстових документах та вебсторінках вона структурує вміст для правильного відображення.
ПРИГАДАЙТЕ
Які об’єкти можуть бути розміщені на вебсторінках?
На вебсторінках можуть бути розміщені заголовки, абзаци тексту, гіперпосилання, списки, таблиці, зображення та відео.
Які ви знаєте властивості цих об’єктів?
Об’єкти вебсторінок (текст, зображення, відео) мають такі властивості: розмір, колір, гарнітура та стиль шрифту, вирівнювання на сторінці та URL-адреса (джерело файлу).
Як здійснюється форматування об’єктів у текстовому документі?
Форматування здійснюється шляхом виділення потрібного об’єкта та вибору відповідних команд на панелі інструментів (зміна шрифту, кольору, накреслення) або через контекстне меню.
Що розуміють під словом розмітка?
Під розміткою розуміють набір спеціальних позначок, знаків або кодів, які визначають структуру документа та вказують, як саме об’єкти мають відображатися.
Де та для чого використовується це поняття?
Це поняття використовується на дорогах (дорожня розмітка) для організації руху транспорту, а також в Інтернеті (мова HTML) для опису структури вебсторінок, щоб браузер міг їх правильно відтворити.
Дайте відповіді на запитання
1. Що визначає HTML-код сторінки?
HTML-код визначає структуру та контент вебсторінки, а також вказує браузеру, які саме об’єкти (заголовки, абзаци, зображення, посилання тощо) і в якому порядку слід розмістити у вікні.
2. Що таке тег? Як записують теги? Як записують парні теги? Як записують теги з атрибутами?
Тег — це елемент мови HTML, який є інструкцією для браузера щодо розміщення та відображення об’єктів на сторінці. Теги записують у кутових дужках, наприклад <ім'я_тегу>. Парні теги складаються з відкриваючої та закриваючої частин, де в закриваючій частині перед іменем ставиться символ «/», наприклад: <ім'я_тегу> текст </ім'я_тегу>. Теги з атрибутами записують так: після імені тегу через пропуск додають назву атрибута, а його значення вказують у лапках після знака «=», наприклад: <ім'я_тегу атрибут="значення">.]
3. Який тег призначено для вставлення зображення з файлу на вебсторінку?
Для вставлення зображення використовують непарний тег <img> з атрибутом src, у якому вказують адресу файлу.
4. Який тег призначено для створення гіперпосилання?
Для створення гіперпосилання використовують парний тег <a> з атрибутом href, де значенням атрибута є URL-адреса ресурсу.
5. Як можна переглянути HTML-код сторінки?
Переглянути HTML-код можна, відкривши файл вебсторінки за допомогою текстового редактора (наприклад, Блокнот чи Notepad++) або скориставшись інструментами перегляду коду безпосередньо в браузері.
Обговоріть і зробіть висновки
1. Із чим може бути пов’язана поява нових версій мови HTML?
Поява нових версій мови HTML пов’язана з розробкою та впровадженням нових стандартів для різних напрямів веброзробки Консорціумом Всесвітнього павутиння (W3C). Наприклад, у 2014 році було впроваджено актуальний стандарт п’ятої версії — HTML5.
2. Чи може бути доступна для перегляду користувачами інтернету ваша сторінка, створена засобами текстового редактора, під час розробки сторінки? Чи може бути доступна для перегляду сторінка, що створюється в онлайн-редакторі?
Сторінка, створена в текстовому редакторі на локальному комп’ютері, не буде доступна користувачам інтернету до її розміщення на сервері та публікації. Натомість в онлайн-редакторах зазвичай передбачені спеціальні засоби для публікації, тому такі сторінки можуть бути доступні для перегляду в мережі.
Виконайте завдання
1. Як проаналізувати HTML-код сторінки та заповнити таблицю?
Для аналізу коду сторінки kievoi.ippo.kubg.edu.ua натисніть праву кнопку миші на сторінці та оберіть «Переглянути код сторінки». У таблиці файлу завдань вкажіть тег <title> для назви вкладки, <body> для основного контенту, <h1> для головних заголовків та <a> для посилань.
2. Який код потрібно додати для створення заголовка, лінії та посилання на сайт міста?
У файл завдання 5.2.2.html додайте теги: <h1>Назва міста</h1> для заголовка, <hr> для горизонтальної лінії та <a href="адреса_сайту">Текст посилання</a> для переходу на сайт адміністрації.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Мій населений пункт</title>
</head>
<body>
<!-- Заголовок першого рівня -->
<h1>Київ</h1>
<!-- Горизонтальна лінія -->
<hr>
<!-- Посилання на сайт адміністрації -->
<p>
<a href="<https://kyivcity.gov.ua/>">Офіційний сайт адміністрації міста</a>
</p>
</body>
</html>
3. Які зміни внести в код для відображення прізвища та посилання на Вікіпедію?
Змініть вміст тегів так: <title>Прізвище</title>, <h1>Прізвище Ім’я</h1>, <h2>Назва школи</h2>. Для напівжирного тексту використайте <b>Українська Вікіпедія</b>, адресу посилання змініть на https://uk.wikipedia.org, а тег <hr> поставте в самому кінці коду після посилання.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<!-- У заголовку браузера відображається прізвище -->
<title>Шевченко</title>
</head>
<body>
<!-- У заголовку першого рівня — прізвище та ім’я -->
<h1>Шевченко Тарас</h1>
<!-- У заголовку другого рівня — назва закладу освіти -->
<h2>Середня школа №123</h2>
<p>
<!-- Напівжирне накреслення -->
<b>Українська Вікіпедія</b> — це вільна енциклопедія.
</p>
<p>
<!-- Гіперпосилання на головну сторінку Вікіпедії -->
<a href="<https://uk.wikipedia.org/>">Перейти до Вікіпедії</a>
</p>
<!-- Горизонтальна лінія під посиланням -->
<hr>
</body>
</html>
4. Як створити сторінку за зразком та описом у завданні 5.2.4?
Використайте текст із файлу-заготовки, обгорнувши заголовок у тег <h1>, основні абзаци в <p>, а для створення гіперпосилань на ресурси застосуйте тег <a> з відповідними адресами в атрибуті href.
<!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/>">Дистанційна підтримка навчання</a></li>
<li><a href="<https://vseosvita.ua/>">Всеосвіта</a></li>
<li><a href="<https://naurok.com.ua/>">На Урок</a></li>
</ul>
</body>
</html>
5. Які імена тегів використовують для створення таблиць?
Для створення таблиці використовують тег <table>, для її загального заголовка — <caption>, для формування рядка — <tr>, а для створення окремої клітинки — <td>.
6. Які теги призначені для списків та як створити сторінку з днями тижня і порами року?
Нумерований список створюють тегом <ol>, маркований — <ul>, а кожен елемент списку — тегом <li>. У коді сторінки 5.2.6.html дні тижня запишіть усередині <ol><li>...</li></ol>, а пори року — усередині <ul><li>...</li></ul>.
<!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. Назвіть етапи розробки вебсайту.
Створення вебсайту зазвичай включає такі етапи: постановка завдання (визначення мети та аудиторії), розробка структури (створення мапи сайту), створення дизайн-макета (вибір оформлення та стилю), верстка або безпосереднє створення сторінок із контентом, а також публікація сайту в інтернеті на хостингу.
2. Які ви знаєте сучасні тренди вебдизайну
До сучасних трендів належать адаптивний дизайн для різних екранів, використання темного режиму, впровадження штучного інтелекту та голосового пошуку, оригінальна типографіка з великими заголовками, яскраві колірні рішення з градієнтами, анімація, інтерактивність та мінімалізм у композиції.
3. Документи яких типів можуть бути створені з використанням сервісів Google?
За допомогою сервісів Google можна створювати текстові документи (Google Документи), електронні таблиці (Google Таблиці), презентації (Google Презентації), опитування та тести (Google Форми), а також власні вебсайти (Google Сайти).