1 of 23

Поняття про мову гіпертекстової розмітки

За навчальною програмою 2017 року

Урок 31

8

teach-inf.com.ua

2 of 23

Розмічання тексту засобами HTML

Розділ 4 § 21

Текстові редактори мають інструменти для форматування. Як відбувається форматування гіпертексту для відображення у вікні браузера?

8

3 of 23

Поняття про мову HTML

Розділ 4 § 21

Щоб браузер потрібним чином відображав дані на вебсторінках, застосовують спеціальні позначки — теги, сукупність яких разом із правилами їх використання називають мовою розмітки гіпертексту.

HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — це набір тегів та правила їх застосування для створення гіпертекстових документів.

8

4 of 23

Поняття про мову HTML

Розділ 4 § 21

Таким чином, вебсторінка сайту являє собою текстовий документ, розмічений тегами HTML для відображення у вікні браузера.

HTML не є мовою програмування.

8

5 of 23

HTML-документ

Розділ 4 § 21

HTML-документ (HTML-файл) є текстовим документом, тому створити його можна в будь-якому текстовому редакторі, з яким ви працювали.

або

8

6 of 23

HTML-документ

Розділ 4 § 21

Тег — це позначка (мітка) мови HTML, записана в кутових дужках <>, яку опрацьовує браузер.

8

7 of 23

HTML-документ

Розділ 4 § 21

Базову структуру HTML-документа визначають такі теги:

Початок документа

<html>

Початок заголовка — службової частини коду

<head>

Назва, що виводитиметься на вкладці браузера

<title>

Кінець назви

</title>

Кінець заголовка

</head>

Початок тіла документа, яке виводить браузер

<body>

Кінець тіла документа

</body>

Кінець документа

</html>

8

8 of 23

HTML-документ

Розділ 4 § 21

Один із варіантів відображення вебсторінки.

У вікні текстового редактора

Вигляд у вікні браузера

8

9 of 23

Форматування тексту

Розділ 4 § 21

Текст із тегами можна розташовувати довільно: розбивати на абзаци, виділяти відступи. У HTML-документі розмір і накреслення символів, які відображаються у вікні браузера, визначаються розміткою.

8

10 of 23

Форматування тексту

Розділ 4 § 21

Теги мови HTML визначають вигляд і функціонування об’єктів на вебсторінці сайту.

Теги бувають:

Парними

Непарними

складається із відкривального тегу і закривального тегу, який починається символом «/»

Теги з помилками або такі, що не підтримуються браузером, ігноруються.

8

11 of 23

Форматування тексту

Розділ 4 § 21

b — парний тег

<b>...</b> напівжирного шрифту

br — непарний тег

<br> або <br/> переведення рядка

Фрагмент HTML-коду у вікні текстового редактора

Вигляд у вікні браузера

8

12 of 23

Форматування тексту

Розділ 4 § 21

Розглянемо деякі теги форматування тексту:

Дія

Тег

Запис

Переведення рядка

<br>

Непарний

Новий абзац із відступом

<p>

Непарний

Заголовок: <h6> - найменший, <h1> - найбільший

<h>

Парний

Напівжирний шрифт

<b>

Парний

Курсив

<i>

Парний

Підкреслений шрифт

<u>

Парний

8

13 of 23

Форматування тексту

Розділ 4 § 21

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

Значення атрибутів, що містять пропуски, беруть в одинарні або подвійні лапки. Для решти значень це не обов’язково.

8

14 of 23

Форматування тексту

Розділ 4 § 21

Застосуємо атрибути text (колір тексту) і bgсolor (колір тла):

Фрагмент HTML-коду у вікні текстового редактора

Вигляд у вікні браузера

8

15 of 23

Форматування тексту

Розділ 4 § 21

Розглянемо приклад застосування атрибутів:

Фрагмент HTML-коду у вікні текстового редактора

Вигляд у вікні браузера

8

16 of 23

Марковані та нумеровані списки

Розділ 4 § 21

Для створення маркованого списку використовують тег:

З атрибутом type, який задає вигляд маркера:

"disk"

"circle"

"square"

•

о

■

8

17 of 23

Марковані та нумеровані списки

Розділ 4 § 21

Для створення нумерованих списків використовують тег:

З атрибутами type, який задає тип нумерації:

“ 1 "

" А "

" І "

арабські цифри

латинські літери

римська нумерація

Та трибутом Start для задання початкового номера в списку арабськими цифрами.

8

18 of 23

Марковані та нумеровані списки

Розділ 4 § 21

Елементи списку розмічають тегами <l i>…</ l i>

Фрагмент HTML-коду у вікні текстового редактора

Вигляд у вікні браузера

8

19 of 23

Розгадайте ребус

Розмітка

Розділ 4 § 21

8

20 of 23

Питання для самоперевірки

Що таке HTML?

Що таке тег? Наведіть приклади парних і непарних тегів.

Назвіть складові базової структури HTML-документа

Що таке атрибут тегу?

Розділ 4 § 21

Якими засобами HTML можна змінити колір тла вебсторінки?

Які теги використовують для створення списків?

8

21 of 23

Домашнє завдання

Проаналізувати

§ 21, ст. 139-142

Розділ 4 § 21

8

22 of 23

Працюємо за комп’ютером

Розділ 4 § 21

Сторінка

142

8

23 of 23

Дякую за увагу!

За навчальною програмою 2017 року

Урок 31

8

teach-inf.com.ua