1 of 21

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

Нова українська школа

Урок 20

Інформатика 6

teach-inf.com.ua

за підручником

Морзе Н.В. та ін.

2 of 21

Створюємо вебресурси

Ключове питання

Як утворювати гіпертекст?

Пригадай

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

Розділ 3

§ 20

3 of 21

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

Якими бувають тексти?

Чим різняться тексти у друкованих та електронних виданнях?

Які дії виконують із текстом у середовищі текстового процесора, а які у вікні браузера?

Які відмінності має друкований та електронний текст?

Розділ 3

§ 20

4 of 21

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

Для створення вебсторінок, використовують спеціальну мову — HTML (англ. HyperText Markup

Language — мова розмітки гіпертексту). Коли створюється вебсторінка, пишеться HTML-код, що повідомляє браузеру, як відображати на екрані заголовки, підзаголовки, абзаци чи зображення в цифровому вигляді.

Розділ 3

§ 20

5 of 21

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

Першу версію HTML як мову для структурування документів у форматі, який люди могли читати та розуміти, написав вчений на ім’я Тім Бернерс-Лі. Він використав HTML-код для створення першого вебсайту, який був запущений у 1991 р. Вебсайт все ще працює, і його можна переглянути за адресою info.cern.ch у браузері.

Цікаво

Розділ 3

§ 20

6 of 21

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

Командами мови HTML є теги. Теги — це аналог скелету людини. Нам потрібні кістки, щоб підтримувати нас і становити структуру людського тіла.

HTML є скелетом вебсторінки. Він використовується для побудови структури вебсторінки. Ми можемо наповнювати цю структуру так, щоб вебсайти набували звичного для нас вигляду.

Розділ 3

§ 20

7 of 21

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

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

Розділ 3

§ 20

8 of 21

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

Теги — це спеціальні слова, взяті у кутові дужки < >. Вони бувають парними і непарними. Уяви собі торт.

Одинарний тег

Парний тег

Розділ 3

§ 20

9 of 21

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

Два коржі торту — це приклад парного тегу: відкриваючого та закриваючого.

Зазвичай, у торті зверху є якісь прикраси. В тегах HTML — це атрибути. Вони вказують на значення властивостей тегу. Їх розміщують у відкриваючому тезі.

Між коржами торту є крем — це аналог непарного тегу.

Розділ 3

§ 20

10 of 21

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

Тег записують так:

<title> Моя перша вебсторінка </title>

Пару тегів (відкриваючий і закриваючий) називають контейнером.

Відкриваючий тег

Заголовок, який буде показано на вебсторінці

Закриваючий тег

Розділ 3

§ 20

11 of 21

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

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

<Тег1 >текст 1 <Тег2>текст 2 </Тег2>продовження тексту1 </Тег1 >

Розділ 3

§ 20

12 of 21

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

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

Для початку потрібно повідомити браузеру, що сторінка створена мовою HTML. Наприклад, для версії мови HTML5 слугує спеціальний непарний тег <!DOCTYPE html>.

А далі парний тег

вказує, що ми будуємо скелет вебсторінки. Зверни увагу на теги.

Розділ 3

§ 20

13 of 21

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

Чи можеш ти розпізнати призначення тегів?

<!DOCTYPE html>-повідомлення браузеру, що сторінка створена мовою HTML

<HTML> — заголовок файла;

<HEAD> — заголовок документа;

<TITLE> Моя перша сторінка </TITLE>-Заголовок, який буде показано на вебсторінці

</HEAD>

<BODY>

Тут може бути текст, малюнки, відео,

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

</BODY>

</HTML>

Розділ 3

§ 20

14 of 21

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

Створювати вебсторінки мовою HTML можна трьома способами:

за допомогою спеціального редактора HTML, у якому є заготовки (у вигляді тегів) та фрагменти готового коду, наприклад htmlg.com/html-editor

писати безпосередньо на HTML, наприклад у програмі текстового редактора Блокнот.

У цьому разі файл зберігають із розширенням htm і відкривають його за допомогою браузера

використовувати онлайновий редактор, у якому можна одразу бачити сторінку так, як вона виглядатиме в браузері, наприклад w3schools.com

Розділ 3

§ 20

15 of 21

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

Редактор, який запропоновано на сайті w3schools.com.

Із головної сторінки сайту після натискання кнопки Try it Yourself (Спробуй сам), можна перейти у режим редактора.

Розділ 3

§ 20

16 of 21

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

Після редагування сторінки, у лівій частині вікна редактора та запуску коду (Run), у правій отримуємо вигляд сторінки.

Розділ 3

§ 20

17 of 21

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

Для встановлення типу накреслення використовують-ся такі контейнери:

…

напівжирний

…

курсив

…

підкреслений

…

нижній індекс

…

верхній індекс

Розділ 3

§ 20

18 of 21

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

Розмітка

Розділ 3

§ 20

19 of 21

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

Розділ 3

§ 20

20 of 21

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

Сторінка

107-109

Розділ 3

§ 20

21 of 21

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

Нова українська школа

Урок 20

Інформатика 6

teach-inf.com.ua

за підручником

Морзе Н.В. та ін.