1 of 25

Мова гіпертекстової розмітки

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

Урок 7

10

(11)

2 of 25

Актуалізація опорних знань і життєвого досвіду

Розділ 2 § 7

Розкажіть, що Вам відомо про НТМL, або мову гіпертекстової розмітки.

Про поняття НТМL мені відомо...

Я самостійно вивчав...

Попередні роки на уроках інформатики про НТМL ми розгля дали...

10�(11)

3 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

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

10�(11)

4 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

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

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

10�(11)

5 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

Текст html-файла набирають у будь-якому редакторі, наприклад у Блокноті, та зберігають із розширенням:

або

10�(11)

6 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

Можна зберегти у форматі html.

Документи Word

Презентації PowerPoint

Таблиці Excel

10�(11)

7 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

Тег — це записана в кутових дужках команда мови HTML, яку виконує браузер.

<HTML>

<HEAD>

<TITLE> Найпростіша веб-сторінка

</TITLE>

</HEAD>

<BODY>

Ця сторінка створена за допомогою простих тегів

</BODY>

</HTML>

10�(11)

8 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

З тегами html зручно працювати у спеціалізованих редакторах:

Atom

Notepad++ та ін.

10�(11)

9 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

Тегами мови HTML можна визначити вигляд об'єктів, зокрема текстових фрагментів, на веб-сторінці.

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

Парними (контейнери)

Непарними

b — парний тег

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

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

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

10�(11)

10 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

Тег, що починається із символу «/», називають закриваючим. Дія html-тегу залежить від значень його параметрів, так званих атрибутів.

Атрибут — це додаткова інформація, що записується біля відкриваючого тега.

10�(11)

11 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

Тег body з атрибутами кольору фону (bgkolor) і кольору тексту (text):

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

У вікні браузера

Привіт!

</body>

</htm>

10�(11)

12 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

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

10�(11)

13 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

Для правильного відображення браузером веб-сторінки необхідно дотримуватись такої структури html-документа:

<html> початок документа

<head> заголовок документа зі службовою інформацією

<title> містить назву, що відображатиметься на вкладці </title>

</head> кінець заголовка документа

<body> «тіло» документа: все, що відображається на веб-сторінці </body>

</html> кінець документа

10�(11)

14 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

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

Дія

Тег

Запис

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

<br>

Непарний

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

<p>

Непарний

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

<h>

Парний

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

<b>

Парний

Курсив

<i>

Парний

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

<u>

Парний

Розмір (size 1..7) і колір (color) шрифту

<font>

Парний

10�(11)

15 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

Теги, що визначають структуру сторінки:

тег створення заголовка на веб-сторінці.

тег вставлення на веб-сторінку зображення та встановлення значень його властивостей.

тег створення абзацу на веб-сторінці.

<р> ... </р>

тег виділення фрагмента тексту напівжирним накресленням.

тег створення гіперпосилання.

<а href=«...»> ... </а>

10�(11)

16 of 25

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

Розділ 2 § 7

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

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

У вікні браузера

<li>Іванов</li>

<li>Бойко</li>

<li>Шевченко</li>

</ul>

<li>Інформатика</li>

<li>Фізика</li>

<li>Хімія</li>

</ol>

10�(11)

17 of 25

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

Розділ 2 § 7

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

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

"disk"

"circle"

"square"

•

о

■

10�(11)

18 of 25

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

Розділ 2 § 7

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

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

“ 1 "

" А "

" І "

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

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

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

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

10�(11)

19 of 25

Мова гіпертекстової розмітки

Розділ 2 § 7

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

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

У вікні браузера

<h1>Розділ 6<h1>

<p>§21 HTML

<br>

<font color="red" size="3"

<b><i><u> Застосування тсгів </u></i></b>

</font>

<br>

<b>Teг</b> - <font color="greer"> це команда HTML</font>

</body>

10�(11)

20 of 25

Який вигляд має код розмітки веб-сторінки мовою HTML?

Розділ 2 § 7

Переглянути HTML-код веб-сторінки, відкритої у вікні браузера Google Chrome, можна, вибравши в контекстному меню сторінки команду Переглянути джерело сторінки.

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

9

21 of 25

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

Розмітка

Розділ 2 § 7

10�(11)

22 of 25

Запитання для рефлексії

Розділ 2 § 7

Яких знань я набув на уроці?

Яких умінь я набув на уроці?

Що я не зрозумів з матеріалу, який вивчався на уроці?

10�(11)

23 of 25

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

Розділ 2 § 7

Продовжити вивчення тегів і створення документу HTML

10�(11)

24 of 25

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

Розділ 2 § 7

10�(11)

25 of 25

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

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

Урок 7

10

(11)