GTGM - Lecture - 03 - Fin - 2023-Ukr

Гіпертекст і гіпермедіа
Основи HTML
Лекція 3
1
Гіпертекст і гіпермедіа
провідний лектор 1-го потоку
Єрохін Андрій Леонідович
лектор 2-го потоку

Доцент кафедри програмної інженерії, кандидат технічних наук
Груздо Ірина Володимирівна
2
https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRrGX5b2pMS_8bg3l5
a6ylWiyb_5nLGZRe4CQ&usqp=CAU
ЗМІСТ
синтаксис
та
класифікація тегів
Огляд тегів
1) теги для відкриття/закриття
документів чи їхніх частин
<html>………</ html > – початок і кінець документа

<head>………</head> – заголовок
<body>………</body> – тіло документа
4
Огляд тегів
Структура HTML документу
<html>
<head>
<title> Мій перший крок </title>
</head>
<body>
Привіт, це моя перша сторінка.
<br>
Ласкаво просимо!
</body>
</html>
5
Приклад
<html>
веб-документу
<head>
<title> Це заголовок документа
</title>
</head>
<body>
Це тіло документа
</body>
</html>
6
Вставка коментарів в
HTML-документ
<! - іа ia -> - такий тег використовується для додавання
коментарів на сторінці, для корисних пояснень, які не
відображаються в браузері.
Приклад:
• <HTML>

<BODY>
...
</BODY>

</HTML>
Коментарі, розташовані всередині елемента TITLE (як, втім, і
будь-які інші теги) трактуються як текст і будуть видні в
заголовку вікна. 7
Тег <! - -> всередині TITLE не діє.
2. Теги форматування
Види розмітки документа
Розмітка документа ділиться на 2 види:
логічна та фізична.
Фізичне форматування – це форматування,

яке забезпечується буквальним виконанням
браузером тегів форматування
Логічне форматування – залежить від змісту

та структури документа
Наприклад:
<сomment>… </сomment>–форматує текст
так, начебто це листинг програми
8
логічне (1)
і фізичне (2)
форматування
(1)<strong> Розставляє акценти в тексті, виділяючи
напівжирним.
<div> - Використовується для угруповання блокових
елементів з метою форматування стилями.
<span> - Контейнер для малих елементів. Можна
використовувати для форматування уривків тексту,
наприклад, виділення кольором окремих слів.
<p> … </p> – параграф
<b> … </b> – жирний шрифт
<i> … </i> – курсив
<u> … </u> – підкреслений
<del> – видалений текст
<blink> … </blink> – мигтіння
9
логічне (1)
і фізичне (2)
форматування
<sup>Текст</sup> Верхній індекс e=mc2
<sub>Текст</sub> Нижній індекс H2O
Текст пишеться як є,
<pre>Текст</pre> Текст
включаючи всі пробіли
<em>Текст</em> Курсив тексту Текст
Виділення
<strike></strike> приклад
переккреслюванням
Текст із великим розміром
<big></big>
літер (використовується рідко) приклад
Текст із малим розміром літер
<small></small> приклад
(використовується рідко)
10
3.Текстові блоки
Для масштабування кеглю шрифта
<hx> текст </hx> – где x=1,2,…,6
H1..H6
<h1>–найбільший кегль,
<h6>– найменший,
<h3>–за замовчанням.
Тег параграфу <p> </p>
Вимикання оброблення тегів форматування браузера

<pre> </pre>
Для подання тексту програми
<listing>
<plaintext>
<xmp>
Горизонтальна лінія на всю ширину екрана <hr>
<hr noshade=‘noshade’>
Перехід на новий рядок

<br> 11
4. Cписки
В HTML існують три типи списків:
1) <ol>…</ol> – нумерований список
<ol> <li> red
<li> green
<li> blue
</ol>
Для задання типу нумерації (1., 1), I):

<ol type=‘1’>
12
2)<ul>… </ul>–невпорядкований список
<ul type=‘square’> – елементи списку відділяються

квадратами
3)Списки-визначення (словник термінів)
<dl>
<dt> термін
<dd> визначення терміну
и т. д.
</dl>
Пример: <dl>
<dt> <u>Програмна інженерія </u>
<dd> – це спеціальність 21 століття
</dl> 13
4. Cписки
Вид маркера визначається атрибутом type.
У нумерованому списку маркери (значення атрибута type)
такі:
1 - нумерація арабськими цифрами (за замовчуванням);
A - великими латинськими літерами за алфавітом;
a - маленькими латинськими буквами;
I - великими римськими цифрами;
i - маленькими римськими цифрами.
Приклад
< ol type="a"> a. Перший елемент.
< li> Перший елемент.< /li> b. Другий елемент.
< li> Другий елемент.< /li> c. Третій елемент.
< li> Третій елемент.< /li>
< /ol>
14
4. Cписки
Вид маркера визначається атрибутом type.
У маркірованих списках значення атрибута type такі:
disc - зафарбоване коло (за замовчуванням);
circle - зафарбоване коло;
square - зафарбований квадрат.
Приклад
< ul type="square">
< li> Перший елемент.< /li>
< li> Другий елемент.< /li>
< li> Третій елемент.< /li>
< /ol>  Перший елемент.
 Другий елемент.
 Третій елемент.
15
4. Cписки
Як і інші теги HTML, списки можна вкладати один в
одного. Виходять багаторівневі вкладені списки.
Приклад
< ol type="a">
< li> Перший елемент.< /li>
< li>
< ul type="square">
< li> Другий елемент.< /li>
a. Перший елемент.
< li> Третій елемент.< /li> b.
< li> Четвертий елемент.< /li> Другий елемент.
< /ul> Третій елемент.
< /li> Четвертий елемент.
< li> П’ятий елемент.< /li> c. П’ятий елемент
< /ol>
16
5. Якірні теги
Синтаксис якірного тега:
<a атрибут=“значення”> … </a>
<h3> <a
name="Підзаголовок"></a>Підзаголовок</h3>
<a href=”#мітка”></a>
<h3 id='Підзаголовок'>Підзаголовок></h3>
Якірні теги застосовуються для задання гіперпосилань
Маршрутизатором гіперпосилання називається
текстовий фрагмент, рисунок або інший об’єкт,
після фокусу або виборі якого виконується
перехід до новому ресурсу, який вказано в URL
17
URI - URL
для задання місцезнаходження ресурсів на •
серверах використовується URL- Uniform
Resourse Locator
scheme: // host.domain [:port] / path / filename
де scheme – схема доступу:

• file - файл в локальній системі, або файл на anonymous FTP сервері
• http
• gopher
• ftp
• telnet
18
Три типи гіперпосилань
1) Гіперпосилання на інший веб-документ
<a href=”URL”> маршрутизатор гіерпосилання </a>

URL – адреса документу, який необхідно завантажити
2) Гіперпосилання на інше місце в поточному доркументі
< a href=“# ім’я_мітки”> маршрутизатор </a>

Задання мітки :
<a name=“імя мітки”>
3) Гіперпосилання на визначене місце іншого документа
<a href=”URL/ім’я файла #мітка”> маршрутизатор </a>

Задання мітки в іншому документі:
<a name=“ім’я_мітки”> 19
Три типи гіперпосилань
1) Гіперпосилання на інший веб-документ
<a href="https://translate.google.com"> Гугл Транслейт </a>
2) Гіперпосилання на інше місце в поточному доркументі
<A NAME="up"></A>
<A HREF="#chap1"> Розділ 1</A><br>
<A HREF="#chap2"> Розділ 2</A><br>
<A NAME="chap1"></A>
<H1> Розділ 1</H1>
Це текст глави 1. Це текст глави 1.
Це текст глави 1. Це текст глави 1.<BR>
<A HREF="#up"> Вгору </A>
<A NAME="chap2"></A>
<H1> Розділ 2</H1>
Це текст глави 2. Це текст глави 2.
Це текст глави 2. Це текст глави 2.<BR> 20
<A HREF="#up"> Вгору </A>
7. Таблиці
<table атрибут=“значення”>
<caption> заголовок таблиці </caption>
тіло таблиці
</table>
Всередині <table> розмітка таблиці

виконується за допомогою
<td> … </td> і <tr>…</tr>
<td> </td> – задання комірки

<tr> <t/r> – задання рядка
21
Атрибути (параметри) таблиці
22
Тег <th> - задає заголовок таблиці або заголовок
елемента таблиці
Синтаксис
<table>
<tr>
<th>...</th> 
</tr>
</table>
Атрибути colspan="..."
rowspan="..."
для тегів <td> і <tr> призначені для обєднання

чарунок таблиці в групи, які позначені рамкою
23
Приклад таблиці, яка займає по ширині
весь екран браузера:
<table border="l" width="100%">
<tr>
<td colspan="2">
<p align="center">
Дві клітинки, об'єднані по горизонталі
</td>
</tr>
<tr>
<td rowspan="2" valign="middle">
Дві клітинки, об'єднані по вертикалі
</td>
<td>
no лівому краю
</td>
</tr>
<tr>
<td>
<p align="right">
no правому краю
</td>
</tr> 24
</table>
25
Приклад таблиці зі смугастим
фоном
<table cellspacing="1" border="0" width="200">
<tr bgcolor="#c0c0c0" align="center">
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr bgcolor="#dadada">
<td> </td><td> </td><td> </td><td> </td>
</tr>
</tr>
</tr>
</tr>
</table>
- вставка нерозривного пропуску 26
27
Способи кодування кольорів
16-кове подання кольору
Колір кодується по шаблону:
#ХХХХХХ
R G B
28
Ім’я кольору (16 кольорів)
Приклад:
<body bgcolor=" black"
29
7. Теги та атрибути для завдання
колірної гами документа
• HTML колір тексту визначається за допомогою
CSS атрибутів (для управління кольором на веб-
сторінках в даний момент краще використовувати CSS,
але іноді бувають такі ситуації, коли використання СSS
недоступно).
• HTML колір тексту може бути заданий в режимі HEX,
наприклад, color: # cc0000.
• Колір тексту в HTML також може бути заданий словом,
наприклад, color: Black.
• HTML фон тексту визначається значенням атрибута
background-color.
30
Будьте обережні, використовуючи кольори для
оформлення HTML документів, не всі кольори
поєднуються один з одним і не кожен колір буде
приємний відвідувачам вашого сайту.
Для цього не забувайте про поєднання кольорів,
використовуйте як мінімум для цього
Кольоровий круг
(https://www.hudozhnik.online/blog/chvetovoi_krug
https://www.youtube.com/watch?v=pgb8T6QdZqI).
В ідеалі необхідно знати основи ВЕБ-дизайну !!

31
Не варто забувати, що оформлення повинно бути
відокремлене від вмісту, тому для маніпуляції кольором
на HTML сторінках краще використовувати CSS.
Зараз же подивимося, які засоби є в HTML для управління
кольором на сторінках сайту.
Колірна гамма документа задається в тезі
<body атрибут="значеня">
Атрибути:
<body bgcolor= " код кольору" – колір фону
background="url" – фоновий рисунок
text=“колір_тексту " 32
Список колірних моделей, що використовуються в IT (не тільки в HTML і
CSS):
Модель RGB. Дана модель отримала дуже широке поширення і, мабуть, є
одним з найбільш зручних і поширених способів маніпуляції кольором
HTML елементів.
Модель RGBA. Дана модель дуже схожа на модель RGB, але включає в себе
альфа-канал кольору. Особливість моделі RGBA полягає в тому, що вона
дозволяє регулювати не тільки колір HTML елемента, але і його прозорість
за рахунок наявності альфа-каналу. Модель RGBA була додана в CSS3 і не
підтримується старими браузерами.
Модель HSL. Особливість моделі HSL полягати в тому, що колір ми задаємо за
допомогою його параметрів: відтінку, пихатості і світлини. Дана модель
дещо складніша в розуміння, ніж модель RGB.
Модель HSLA. Дана модель дуже схожа на модель HSL, але вона так само, як і
модель RGBA дозволяє працювати з альфа-каналом кольору, тому за
допомогою HSLA ми можемо задавати не тільки колір HTML елемента33на
сторінці, а й його прозорість.
Список колірних моделей, що використовуються в IT (не тільки в HTML
і CSS):
• Модель HSV (HSB). Дану модель не варто плутати з моделлю HSL.
Відзначимо, що перші чотири моделі можна використовувати в HTML або
CSS для оформлення веб-сторінок, а ось модель HSV - немає. Модель HSV
була розроблена одним із засновників студії Pixar в 1978 році і дуже схожа
на HSL.
• Модель CMY або CMYK. Дана модель використовується у всіх
кольорових принтерах для друку. В основі моделі CMYK лежить правило,
полягають в тому, що друк відбувається на білих аркушах паперу. Будь-
який колір моделі CMYK виходить з змішування кольорів Cyan (блідо-
блакитний, бірюзовий), Magenta (пурпурний) і жовтого. У кожного
кольору в моделі CMY є характеристика непрозорості (кількість фарби),
що вимірюється у відсотках. Але крім трьох перерахованих квітів, модель
CMYK використовує ще й чорний колір.
34
• Всі перераховані вище колірні моделі є апаратно-
залежними, тобто якщо ви задаєте колір HTML
елемента за допомогою моделі RGB або HSL, то не
можна з точністю стверджувати, який саме
відтінок кольору побачить відвідувач вашого
сайту, так як монітори у всіх користувачів різні і
передають вони кольору по різному. Також
відзначимо, що в основі всіх перерахованих вище
моделей лежить модель RGB і будь-який колір,
заданий в будь-який з моделей (крім HSLA і
RGBA через наявність альфа-каналу), можна
конвертувати в RGB. 35
Атрибути
link
vlink
alink - колір гіперпосилань в документі
За замовчанням:
link - blue (#0000FF)
vlink - purple (#800080)
alink - red (#FF0000)
36
Атрибути
За допомогою HTML атрибутів можемо маніпулювати кольором елементів:
HTML атрибут color. Даний атрибут дозволяє змінювати колір тексту, що
знаходиться всередині HTML елемента. Атрибут може приймати значення в
вигляді називання HTML кольорів і за допомогою кодів моделі RGB в
шістнадцятковій системі числення і в десятковій системі числення. Атрибут color -
це унікальний HTML атрибут, який дозволяє змінювати колір тексту усередині
деяких HTML елементів.
HTML атрибут text. Даний атрибут є унікальним атрибутом тега <body>. Тег <body>
разом з тегами <html> і <head> утворюють структуру HTML документа. Якщо ви
пам'ятаєте, то всередині контейнера <body> розміщуються елементи, які потім
відображаються браузером в області перегляду. Атрибут text дозволяє задати колір
тексту за замовчуванням для всієї HTML сторінки.
HTML атрибут bgcolor. Також являє унікальним HTML атрибутом і дозволяє
змінювати колір фону деяких HTML елементів.
HTML атрибут vlink. Даний атрибут унікальний і застосовується тільки до Тегу
<body>, щоб змінити колір посилання, яку вже відвідав користувач.
HTML атрибут alink. Цей атрибут також унікальний і застосовується лише до тегу
<body>. Атрибут alink змінює колір активного HTML посилання.
HTML атрибут link. Атрибут link використовується тільки разом з тегом <body> і
служить для зміни кольору посилань HTML сторінки, які ще не відвідував
37
користувач.
<html>
<head>
<title> Приклад </title>
</head>
<body text='#ff0000'>
Текст документа по умолчанию будет красным
</body>
</html>
38
<html>
<head>
<title> Приклад </title>
</head>
<body bgcolor='green'>
Приклад
</body>
</html>
39
<html>
<head> <title> Пример </title> </head>
<body text='#ff0000'>
<table border='0'>
<tr>
<td background='kture.gif' height='120' width='1020'> </td><td></td>
</tr>
</table>
<table border='0'>
<tr>
<td>Текст документа красного цвета </td>
<td>Текст документа красного цвета </td>
</tr>
</table>
</body> </html>
40
Таблиця базових кольорів в
HTML: їх імена і RGB коди
ТАБЛИЦЯ HTML КОЛЬОРІВ -- HTTPS://HTML-CSS.CO.UA/HTML/COLOR-IN-HTML/

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

GTGM - Lecture - 03 - Fin - 2023-Ukr

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GTGM - Lecture - 03 - Fin - 2023-Ukr

Uploaded by

Copyright:

Available Formats

Гіпертекст і гіпермедіа

лектор 2-го потоку

Груздо Ірина Володимирівна

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

Фізичне форматування – це форматування,

Логічне форматування – залежить від змісту

<sub>Текст</sub> Нижній індекс H2O

<em>Текст</em> Курсив тексту Текст

Вимикання оброблення тегів форматування браузера

Перехід на новий рядок

Для задання типу нумерації (1., 1), I):

<ul type=‘square’> – елементи списку відділяються

3)Списки-визначення (словник термінів)

scheme: // host.domain [:port] / path / filename

де scheme – схема доступу:

<a href=”URL”> маршрутизатор гіерпосилання </a>

2) Гіперпосилання на інше місце в поточному доркументі

< a href=“# ім’я_мітки”> маршрутизатор </a>

3) Гіперпосилання на визначене місце іншого документа

<a href=”URL/ім’я файла #мітка”> маршрутизатор </a>

<a href="https://translate.google.com"> Гугл Транслейт </a>

2) Гіперпосилання на інше місце в поточному доркументі

Всередині <table> розмітка таблиці

<td> </td> – задання комірки

для тегів <td> і <tr> призначені для обєднання

Колір кодується по шаблону:

В ідеалі необхідно знати основи ВЕБ-дизайну !!

ТАБЛИЦЯ HTML КОЛЬОРІВ -- HTTPS://HTML-CSS.CO.UA/HTML/COLOR-IN-HTML/

You might also like