Поняття про мову гіпертекстової розмітки. Розмічання тексту
Нова українська школа
Урок 11
Інформатика 8
teach-inf.com.ua
за підручником
Бондаренко О.О. та ін.
Розмічання тексту засобами HTML
Текстові процесори мають інструменти для форматування тексту.
А як відбувається форматування гіпертексту для відображення у вікні браузера?
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Поняття про мову HTML
Щоб браузер належно відображав дані на вебсторінці, до її неформатованого тексту додають спеціальні позначки — теги. Вони та правила їх використання утворюють мову розмітки. Одну з мов розмітки, а саме HTML, ми й розглянемо далі.
HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — набір тегів та правила їх застосування для створення гіпертекстових документів.
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Поняття про мову HTML
Отже, вебсторінка сайту являє собою текстовий документ, розмічений тегами HTML для відображення у вікні браузера.
Як видно з назви, HTML не є мовою програмування.
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
HTML-документ
Існують спеціалізовані HTML-редактори:
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
HTML-документ
Онлайн HTML-редактори:
Проте оскільки HTML-документ (HTML-файл) є текстовим документом, то створити його можна й у будь-якому текстовому редакторі, з яким ви вмієте працювати.
Online HTML Editor
HTML Instant
Real-Time HTML Editor та інші.
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
HTML-документ
Тег — це позначка (мітка), записана в кутових дужках о, яку опрацьовує браузер.
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
HTML-документ
Один із варіантів відображення вебсторінки.
У вікні текстового редактора
Вигляд у вікні браузера
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
HTML-документ
Тут використано тільки теги, які визначають структуру НТМL-документа:
Початок і кінець документа
<html> і </html>
Початок і кінець заголовка — службової частини коду
<head> і </head>
Початок і кінець назви, що виводитиметься на вкладці браузера
<title> і </title>
Початок і кінець тіла документа, яке виводить браузер у робочому полі вікна
<body> і </body>
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Форматування тексту
Текст із тегами в HTML-документі можна розташовувати довільно: розбивати на абзаци, робити відступи. Це не вплине на вигляд вебсторінки у вікні браузера, адже її вигляд залежить тільки від розмітки.
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Форматування тексту
Теги мови HTML визначають вигляд і функціонування об’єктів на вебсторінці сайту.
Теги бувають:
Парними
Непарними
складається із відкривального тегу і закривального тегу, який починається символом «/»
Теги з помилками або такі, що не підтримуються браузером, буде знехтувано.
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Форматування тексту
<b>...</b> – парний тег жирного накреслення
<br> або <br/> – непарний тег розриву рядка
Фрагмент HTML-коду у вікні текстового редактора
Вигляд у вікні браузера
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Форматування тексту
Розглянемо деякі теги форматування тексту:
Парний
<р>
<h1>
Новий абзац із відступом
Парний
Заголовок: <h1> — найвищий рівень, <h6> — найнижчий
<і>
Парний
Курсив
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Форматування тексту
Тег може містити атрибути, значення яких впливають на його дію. Атрибути записують у відкривальному тегу після назви, відокремлюючи один від одного пропусками.
Значення атрибутів, що містять пропуски, беруть в одинарні або подвійні лапки. Для решти значень це не обов’язково.
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Форматування тексту
Застосуємо атрибути text (колір тексту) і bgсolor (колір тла):
Фрагмент HTML-коду у вікні текстового редактора
Вигляд у вікні браузера
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Форматування тексту
Розглянемо приклад застосування атрибутів:
Фрагмент HTML-коду у вікні текстового редактора
Вигляд у вікні браузера
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Марковані та нумеровані списки
Для створення маркованого списку використовують тег:
<ul>...</ul>
З атрибутом type, який задає вигляд маркера:
"disk"
"circle"
"square"
•
о
■
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Марковані та нумеровані списки
Для створення нумерованих списків використовують тег:
<ol>...</ol>
З атрибутами type, який задає тип нумерації:
"1"
"А"
"І"
арабські цифри
латинські літери
римська нумерація
Та атрибутом start (задання початкового номера в списку з нумерацією арабськими цифрами).
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Марковані та нумеровані списки
Елементи списку розмічають тегами <li>…</li>
Фрагмент HTML-коду у вікні текстового редактора
Вигляд у вікні браузера
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Ознайомтесь з цікавою інформацією
А термін «гіпертекст» увів 1965 року американський учений
Тед Нельсон.
Ідею гіпертексту вперше описав 1941 року аргентинський письменник Хорхе Луїс Борхес.
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Питання для самоперевірки
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Розгадайте ребус
Розмітка
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Домашнє завдання
Проаналізувати
с. 52-56
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Працюємо за комп’ютером
Сторінка
56
Розділ 2
§ 9
© Вивчаємо інформатику teach-inf.com.ua
Успіхів�у навчанні!
Нова українська школа
Урок 11
Інформатика 8
teach-inf.com.ua
за підручником
Бондаренко О.О. та ін.