Створення HTML сторінки

Віртуальна дошка Padlet 8 клас

email: voronenko@54.edu.ks.ua

ПОВТОРЕННЯ:

Мова гіпертекстової розмітки 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, значенням якого є адреса файла зображення:

де src=”img.jpg” — атрибут тега, що вказує яке саме зображення потрібно вивести на сторінці

img.jpg — це ім’я та розширення зображення, що розміщено в інтернеті або в папці поруч з файлом html.

Приклад додавання зображення і гіперпосилання

! Зверніть увагу, що в даному випадку файл розміщений у тій же папці, що і файл вебсторінки. Якщо зображення буде розміщено у деякій папці, слід указати повний шлях до файла з урахуванням папки розташування.

Результат:

Змінити розмір зображення на сторінці можна, задавши:

width– ширину елемента;
height – висоту елемента.

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

Наприклад, змінивши строку

ми отримаємо результат:

ДОДАВАННЯ ВІДЕО з YouTube

Щоб додати відео на совю сторінку, потрібно:

Відкрити відео на YouTube (я беру це https://www.youtube.com/watch?v=d0R8In8Zw2U)
Натиснути «Поділитись», потім «вбудувати».
Скопіювати код.
Вставити код в текст html документа.

Давайте спробуємо:

РОБОТА ЗА КОМП'ЮТЕРОМ

Завдання

Створіть сторінку про будь-яку країну світу за зразком.

Структура має містити:

Заголовок.
Параграф.
Зображення.
Текст з гіперпосиланням.
Відео.

ДОМАШНЄ ЗАВДАННЯ

Опрацювати матеріал сторінки.
Виконати практичне завдання й надіслати вчителю на електронну пошту: voronenko@54.edu.ks.ua

Page updated

Google Sites

Report abuse