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

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

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

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

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

HTML-документ

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

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

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

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

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

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

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

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

<Ь»...</Ь> — парний тег накреслення жирний (рис. 21.2). <br> або <br/> — непарний тег розриву рядка.

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

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

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

Застосуємо атрибути text (колір тексту) і bgcolor (колір тла) (рис. 21.3):

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

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

Для створення маркованого списку використовують тег <ul>...</ul> з атрибутом type, який задає вигляд маркера:

Для створення нумерованих списків використовують тег <оі>...</оі> з атрибутами type (тип нумерації: "1" — арабські цифри, "А" — латинські літери, "І" — римська нумерація тощо) і start (задання початкового номера в списку арабськими цифрами).

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

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

1. Що таке HTML?

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

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

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

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

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

Вправа 21

Створити HTML-документ із відформатованим текстом.

1) Запустіть текстовий редактор Блокнот і введіть у документ набір тегів базової структури HTML-документа (див. рис. 21.1).

2) Збережіть створений документ як HTML-файл: Файл —»• Зберегти як —>• Тип файлу (всі файли) —*• Ім'я: Вправа 21.html.

3) Відкрийте папку зі збереженим файлом і за допомогою браузера відкрийте HTML-файл Вправа 21.

4) Змініть HTML-код так, щоб нумерований список відображався на синьому тлі, колір шрифта — жовтий, тип накреслення — жирний (рис. 21.6).

5) Збережіть файл Вправа 21.html і оновіть сторінку браузера.

6) За потреби відкоригуйте HTML-код відповідно до п. 4.

Комп'ютерне тестування

Виконайте тестове завдання 21 із автоматичною перевіркою результату.

Це матеріал з підручника Інформатика 8 клас Бондаренко (2021)