ПОВТОРЕННЯ:
Мова гіпертекстової розмітки HTML розшифровується, як Hyper Text Markup Language — це мова розмітки гіпертексту для подальшого його відображення у вікні браузера. Являє собою сукупність тегів та правил їхнього застосування.
Тег — це основний елемент мови HTML. Теги визначають спосіб розташування або форматування об’єктів на вебсторінці. Тег розміщується між символами < >.
На минулому уроці ми вивчили такі теги
<!DOCTYPE html> — тип документу за новими нормами
<html>…</html> — мова документу (стара норма)
<head>…</head> — Службова інформація (вміст цього блока не відображається на сторінці, але використовується браузером) в блоці <head> вказують мета-данні сторінки, підключають скрипти та файли стилей.
<title>…</title> — ім’я сторінки, яке відображається в ярлику сторінки браузера, а також у видачі пошукової системи.
<body>…</body> — «тіло» веб-сторінки (вміст цього блоку відображається на веб-страниці)
< h1>…</h1> — заголовок 1 рівня (назва сторінки, може зустрічатись лише 1 раз)
< h2>…</h2> — підшаголовок або заголовок 2 рівня (може зустрічатись кілька разів на сторінці) Заголовки можуть мати декілька рівнів вкладеності, кожен з яких буде автоматично форматуватись певинм чином.
<p>…</p> — параграф
<b>…</b> або <strong>…</strong>— виділення тексту жирним
<i>…</i> або <em>…</em>— виділення тесту курсивом
<u>…</u> — підкреслений текст
<center>…</center> — вирівнювання тексту по центру.
ПОВТОРЕННЯ:
Для надання шрифту документа привабливого вигляду його піддають форматуванню.
В мові HTML для цього також є спеціальні теги.
Існують випадки, коли до фрагментів тексту слід застосувати два або відразу три типи накреслення. Наприклад, зробити шрифт напівжирним курсивом або підкресленим курсивом. Для цього використовують обидва теги, наприклад:
<b><i> текст </i></b>
У цьому випадку слід пам’ятати правило вкладених тегів, відповідно до якого їх потрібно закривати у зворотному до відкриття порядку. Тобто якщо спершу відкрити тег напівжирне накреслення, а потім тег курсиву, то спочатку слід закривати тег курсиву, а потім тег напівжирне накреслення.
Сьогодні вивчимо ще три нові теги:
<img> додавання зображення
<a>…</a> додавання гіперпосилання
<br> перехід на нову строку (абзац)
ПЕРЕХІД НА НОВУ СТРОКУ
Тег <br> можна використовувати для створення абзацу без розриву тега <р>, наприклад:
ДОДАВАННЯ ГІПЕРПОСИЛАННЯ
Для додавання гіперпосилань використовують тег з атрибутом href, значення якого є адресою посилання. Після атрибута href можна вказати посилання на будь-який інший сайт.
! браузер автоматично форматує гіперпосилання певним чином.
Конструкція тега гіперпосилання:
<a href=”https://sites.google.com/view/54-school/”> Сайт Вороненко О.Б.</a>
В цій конструкції:
<a>…</a> це тег гіперпосилання, між яким может бути розміщено текст або зображення чи цілий блок;
href=”https://inform54.wordpress.com/” це атрибут тега, який вказує куди саме (на яку сторінку) буде вести гіперпосилання
Атрибути тегів html — це додаткові значення, які можуть задавати певні налаштування основного елемента.
ДОДАВАННЯ ЗОБРАЖЕНЬ
Для вставки зображень використовують тег <img>.
Даний тег має обов’язковий атрибут src, значенням якого є адреса файла зображення:
<img src=”img.jpg”>
де src=”img.jpg” — атрибут тега, що вказує яке саме зображення потрібно вивести на сторінці
img.jpg — це ім’я та розширення зображення, що розміщено в інтернеті або в папці поруч з файлом html.
Приклад додавання зображення і гіперпосилання
! Зверніть увагу, що в даному випадку файл розміщений у тій же папці, що і файл вебсторінки. Якщо зображення буде розміщено у деякій папці, слід указати повний шлях до файла з урахуванням папки розташування.
Результат:
Змінити розмір зображення на сторінці можна, задавши:
width– ширину елемента;
height – висоту елемента.
При роботи з зображеннями достатньо змінити один з параметрів, задавши його в пікселях або у відсотках.
Наприклад, змінивши строку
ми отримаємо результат:
ДОДАВАННЯ ВІДЕО з YouTube
Щоб додати відео на совю сторінку, потрібно:
Відкрити відео на YouTube (я беру це https://www.youtube.com/watch?v=d0R8In8Zw2U)
Натиснути «Поділитись», потім «вбудувати».
Скопіювати код.
Вставити код в текст html документа.
Давайте спробуємо:
РОБОТА ЗА КОМП'ЮТЕРОМ
Завдання
Створіть сторінку про будь-яку країну світу за зразком.
Структура має містити:
Заголовок.
Параграф.
Зображення.
Текст з гіперпосиланням.
Відео.
ДОМАШНЄ ЗАВДАННЯ
Опрацювати матеріал сторінки.
Виконати практичне завдання й надіслати вчителю на електронну пошту: voronenko@54.edu.ks.ua
Пройти тестування.