1 of 38

Поняття про мову розмічання гіпертекстового документа

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

Урок 28

10

2 of 38

Поняття про мову розмічання гіпертекстового документа

Розділ 4 § 23

Пригадай

особливості веб-сторінки;
призначення текстового редактора Блокнот;
розширення файла веб-сторінки;
що називають кодом.

Ти дізнаєшся

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

9

3 of 38

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

Розділ 4 § 23

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

Microsoft

Word

Microsoft PowerPoint

Microsoft

Excel

10

4 of 38

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

Розділ 4 § 23

Але писати безпосередньо на HTML нескладно.

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

10

5 of 38

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

Розділ 4 § 23

Мова HTML існує в декількох варіантах і продовжує розвиватися, але конструкції HTML, найімовірніше, будуть використовуватися й надалі.

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

10

6 of 38

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

Розділ 4 § 23

Типовий простий веб-документ складається з:

Більш складні веб-документи містять фрейми (структуровані сторінки), елементи управління (кнопки, перемикачі, поля діалогу), динамічні ефекти та графічні рухомі об’єкти тощо.

текстових блоків (абзаців, списків, таблиць)

малюнків невеликих розмірів

горизонталь-них розмежу-вальних ліній

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

10

7 of 38

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

Розділ 4 § 23

Основою мови HTML є дескриптори — команди, що вказують на правила, за якими форматуються документи. Команди мови HTML називають тегами.

Отже, крім текстових даних, веб-сторінка містить невидимий для користувача HTML-код, тобто набір тегів. Під час відкриття веб-сторінки браузер використовує цей набір для відображення її елементів у заданому порядку.

10

8 of 38

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

Розділ 4 § 23

Назва кожного тега — це одна або декілька літер, взятих у кутові дужки (< та >), яким відповідають певні англійські слова, що пояснюють їх призначення.

Наприклад, назва тега <BODY> виникла від англійського слова body — тіло, головна частина, а сам тег використовується для створення вмісту веб-сторінки.

10

9 of 38

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

Розділ 4 § 23

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

<Тег> ...текст... </ Тег >

Слово <Тег>(так званий відкриваючий тег) позначає місце початку дії тега на сторінці,

фрагмент тексту, до якого буде застосовано форматування

(закриваючий тег) визначає місце закінчення дії тега на сторінці.

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

10

10 of 38

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

Розділ 4 § 23

Закриваючий тег відрізняється від відкриваючого лише тим, що в коді перед його іменем ставиться символ:

Більшість тегів є парними, однак існують й одинарні.

/

10

11 of 38

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

Розділ 4 § 23

Один тег може мати кілька параметрів — атрибутів. Наприклад,

<Тег параметр_1= значення_1

параметр_2 = значення_2 >...текст, що відображається на сторінці... </Тег>

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

10

12 of 38

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

Розділ 4 § 23

Правила запису параметрів: після назви тега після пропуску зазначається ім'я параметра наприклад,

ім'я параметра, який вказує на спосіб вирівнювання тексту

ALIGN

Далі вказують «=» й у лапках записують значення параметра наприклад,

ALIGN= «center»

За необхідності далі вказують інші параметри через пропуск. Після останнього параметра ставлять символ:

>

10

13 of 38

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

Розділ 4 § 23

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

<Тег1>...текст...<Тег2>...текст... </Тег2>...текст... </Тег1>

Для підготовки найпростішого htm-файла можна використати текстовий редактор Блокнот, після написання коду в якому слід задати ім'я файла та вказати розширення — htm.

10

14 of 38

Як створити простий HTML-документ?

Розділ 4 § 23

Програма мовою HTML має таку структуру:

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

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

<TITLE> — назва сторінки;

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

</TITLE>

</HEAD>

<BODY> — тіло;

Вміст веб-сторінки

</BODY>

</HTML>

10

15 of 38

Як створити простий HTML-документ?

Розділ 4 § 23

Основними параметрами тега <BODY> є:

задає картинку для фону за шляхом 1.jpg;

BACKGRAUND="1.jpg"

BGCOLOR="white"

задає колір фону — білий;

TEXT="black"

задає колір тексту — чорний.

10

16 of 38

Як створити простий HTML-документ?

Розділ 4 § 23

Для зручного сприймання всі теги набирають великими літерами, хоча браузер однаково сприймає теги, написані й малими літерами. Не є обов’язковим також і написання тегів з нового рядка, проте код, записаний в одному рядку, читається гірше, особливо тими, хто цей код не створював.

У багатьох випадках для складних сторінок між окремими блоками коду вставляють порожні рядки, поділяючи його на фрагменти, щоб полегшити читання коду.

10

17 of 38

Як створити простий HTML-документ?

Розділ 4 § 23

Особливе значення має тег <META>, особливість якого полягає в тому, що розміщені за його допомогою фрагменти тексту сприймаються браузером як службова інформація й не відображаються на екрані.

Такою інформацією може бути:

тип кодування документа

ім’я автора

назва програми, що використовувалась для створення документа

10

18 of 38

Як створити простий HTML-документ?

Розділ 4 § 23

Для цього тег МЕТА має атрибут NAME, який може набувати таких значень:

задає перелік ключових слів, які використовуються в документі;

keywords

дає змогу ввести стислу анотацію змісту документа.

description

Для визначення списку ключових слів та анотації використовується атрибут content, наприклад,

content= "список ключових слів".

10

19 of 38

Як створити простий HTML-документ?

Розділ 4 § 23

Крім того, у цьому тегу можна задати вид кодування. Наприклад, тег:

<META http-equiv="Content-Type" content="text/html;

charset=windows-1251">

Задає браузеру інформацію про кодування, у якому написано текст HTML-документа. У даному прикладі задано стандартне кодування Windows.

10

20 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

Процес структурування сторінки можна розглядати з декількох позицій:

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

заголовки

вирівнювання

новий рядок

абзац

примусове розміщення

лінія

Де n = 1…6. При n = 1 отримуємо заголовок найвищого рівня, відповідно при n = 6 — заголовок найнижчого рівня.

10

21 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

Об’єкти сторінки можуть бути вирівняні за допомогою атрибута ALIGN, який має чотири значення, що визначають спосіб вирівнювання тексту:

center

по центру;

left

ліворуч;

right

праворуч;

justify

за шириною.

10

22 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

На відображення документа в браузері не впливають символи кінця рядка, які отримують натискуванням клавіші Enter або Shift+ Enter, а також пропуски. Для перенесення тексту на новий рядок використовують одинарний тег .

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

<Р>…</Р>

При використанні тега <Р> спочатку вставляється порожній рядок, далі текст виводиться з початку нового рядка. Якщо вжито тег , то порожній рядок не вставляється.

10

23 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

Для виділення тексту, який має певне розміщення символів (наприклад, шаблон документа), використовують тег:

<PRE> текст із вимушеними пропусками та перенесенням у рядки </PRE>

10

24 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

Щоб відділити одну ділянку тексту від іншої, зазвичай використовують підкреслення горизонтальною лінією. Тег <HR> зображує на екрані горизонтальну лінію. Наприклад,

лінія по центру, розміром 3 пункти (позначається «пт»), яка займає 50 % ширини сторінки;

<HR ALIGN="center" WIDTH="400"

SIZE="5" COLOR="red">

Лінія по центру червоного кольору, довжиною 400 пікселів, розміром 5 пт.

10

25 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

Як видно з прикладів, графічний об’єкт може мати такі атрибути:

розмір

у пунктах;

ширину WIDTH

у відсотках або пікселях;

колір

назвами кольорів англійською мовою або їх кодів (наприклад, #0000FF — бірюзовий).

10

26 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

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

тип шрифту;

колір шрифту;

розмір шрифту;

накреслення.

10

27 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

Тег використовують для роботи із символами. Гарнітура шрифту задається за допомогою атрибута FACE. Його можливі значення — назви шрифтів (наприклад, Arial) або ключові слова, які визначають зовнішній вигляд шрифту, наприклад:

Serif

із насічками;

San_serif

без насічок;

Monospace

непропорційний;

Cursive

рукописний.

10

28 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

Якщо вказується ключове слово, то зі списку шрифтів на комп’ютері користувача браузер вибирає для веб-сторінки найбільш відповідний.

Якщо вказувати конкретну гарнітуру, то такого шрифту на комп’ютері користувача може не виявитися, і він в такому разі не зможе переглянути текст. Тому можна вказувати декілька шрифтів:

Браузер спочатку намагатиметься знайти шрифт Verdana, а потім — Arial. Якщо жодного зі шрифтів не знайдено, то встановлюється будь-який шрифт.

10

29 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

Колір шрифту задається за допомогою атрибута COLOR за назвою кольорів:

aqua — бірюзовий;

black — чорний;

blue — світло-синій;

fuchsia — бузковий;

gray — сірий;

green — зелений;

lime — салатовий;

mroon — бордовий;

navy — синій;

olive — оливковий;

purple — фіолетовий;

red — червоний;

silver — сріблястий;

teal — сіро-зелений;

white — білий;

yellow — жовтий.

10

30 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

Розмір шрифту задається за допомогою атрибута SIZE, що може набувати таких значень:

цілі числа від 1 до 7, де числу 1 відповідає розмір шрифту 8 пт, числу 2 — 10 пт, 3 — 12 пт, 4 — 14 пт, 5 — 18 пт, 6 — 24 пт, 7 — 36 пт;

числа від 1 до 6 та від –6 до –1, на скільки одиниць шрифт має відрізнятися від встановленого за замовчуванням (у більшості за замовчуванням розмір шрифту 3 — 12 пт).

10

31 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

Розміри шрифту можна змінювати за допомогою тегів:

<BIG>

збільшує розмір шрифту щодо прийнятого за замовчуванням на одиницю

зменшує розмір шрифту щодо прийнятого за замовчуванням на одиницю

10

32 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

Тег <BASEFONT> дає змогу встановити базові параметри шрифту. Так, запис:

Означає, що для всього коду до закриваючого тега </BASEFONT> значення шрифту становитиме 14 пт, крім тих фрагментів, де це значення змінюється тегом .

10

33 of 38

Як форматувати текст у�HTML-документі?

Розділ 4 § 23

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

…

напівжирний;

…

курсив;

…

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

…

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

…

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

10

34 of 38

Як працювати зі списками в�HTML-документі?

Розділ 4 § 23

HTML-документа можна вставляти маркований і нумерований списки. Для цього використовуються відповідні теги:

Маркований список

Нумерований список

<UL>

<LI> Елемент списку</LI>

.......

<LI> Елемент списку</LI>

</UL>

<OL>

<LI> Елемент списку</LI>

.......

<LI> Елемент списку</LI>

</OL>

10

35 of 38

Дайте відповіді на запитання

Розділ 4 § 23

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

Як створити простий HTML-документ?

Як форматувати текст у HTML-документі?

Як працювати зі списками в HTML-документі?

10

36 of 38

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

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

§ 23, ст. 213-218

Розділ 4 § 23

10

37 of 38

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

Розділ 4 § 23

Сторінка

215-216

10

38 of 38

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

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

Урок 28

10