HTML. Текст, списки

1. HTML

2.

HTML (HyperText Markup Language – Мова розмітки
гіпертексту) – стандартна мова розмітки документів у WWW;
система верстки, яка визначає, як і які елементи повинні
розміщатися на веб-сторінці. HTML є похідною мовою від SGML,
успадкувавши від неї визначення типу документу та ідеологію
структурної розмітки тексту.
• мова означає, що вона може бути прочитана як людиною, так
і комп’ютером;
• розмітка означає, що код пишеться з допомогою ключових
слів;
• гіпертекст означає, що він використовує HTTP як частину
Інтернет.
Мова HTML була розроблена британським вченим Тімом
Бернерсом-Лі приблизно в 1991-1992 роках в Європейському
інституті ядерних досліджень в Женеві. HTML створювалась як
мова для обміну науковою та технічною документацією,
придатна для використання людьми, які не є спеціалістами в
області верстки.

3.

Тег – це елемент мови розмітки гіпертексту, в основному для
задання того, як буде відображатися текст (сторінка).
Загальний синтаксис написання тегів:
<тег атрибут1="значення" атрибут2="значення">
<тег атрибут1="значення" атрибут2="значення">...</тег>
Н.:
<a href=“https://www.google.com.ua” alt=“”> Google </a>
<img src=“1.png”>
<br>
Теги бувають двох типів: одинарні і парні (контейнери).
Одинарний тег використовується самостійно, а парні можуть
містити всередині себе інші теги (вкладені) або текст. Парні теги
вимагають закриваючого тегу.
При написанні тегів можна використовувати як великі так і
малі літери. Вміст тегу можна відображати в декількох рядках.
Грає роль порядок тегів. Закриваючі теги: обов’язкові,
необов’язкові, не потрібні.

4.

Для
розширення
можливостей
деяких
елементів
застосовуються атрибути.
Є два типи атрибутів: атрибут зі значенням і логічний атрибут,
у якого немає значення.
Атрибути пишуться всередині відкриваючого тега, декілька
атрибутів розділяються пробілом, їх порядок значення не має.
Згідно специфікації HTML всі значення атрибутів слід
записувати в подвійних або одинарних лапках.
Кожен атрибут для одного тегу повинен бути єдиним і не може
повторюватись. У атрибута може бути тільки одне значення. При
заданні значень атрибутів слід дотримуватися правильних типів
(текст, число, шлях до файлу...)
Універсальні атрибути class, id, lang, style, title та ін.
Невідомі теги і атрибути (або невірно написані) будуть
браузером проігноровані і текст буде відображатися так, ніби тег
не був написаний.
Довільна кількість пробілів, які написані підряд, в
браузері відображається як один. Текст займає всі ширину
вікна браузера.

5.

Структура HTML-документа:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>… </title>
</head>
<body>
…
</body>
</html>
<html> ... </html> – вказують на те, що Web-сторінка створена
засобами HTML;
<head> ... </head> – початок і кінець заголовка документа. Крім
назви документа в цей розділ може включатися службова інформація;
<title> ... </title> – все, що знаходиться між тегами <title> і </title>,
сприймається браузером як назва документа. Відображається в рядку
заголовка браузера. Рекомендується назва не довше 64 символів.
<body> ... </body> – початок і кінець тіла HTML-документа, яке
визначає вміст документа.

6.

<h1> ... </h1> – <h6> ... </h6> – описують заголовки шести різних
рівнів. Заголовок 1-го рівня – найкрупніший, 6-го рівня – найдрібніший
<p> ... </p> – все, що знаходиться між ними, сприймається як один
абзац.
<br> – встановлює переведення рядка в тому місці, де цей тег
знаходиться. На відміну від тегу абзацу <p>, використання тегу <br> не
додає пустий відступ перед рядком.
<pre> ... </pre> – текст відображається з постійною шириною
символу, не пропускає пропуски, табуляції і перенесення рядків,
залишаючи текст таким, яким він був відформатований раніше.
<sub> … </sub> – перетворює текст між тегами у нижній індекс.
<sup> … </sup> – перетворює текст між тегами у верхній індекс.
Н.:
H<sub>2</sub>SO<sub>4</sub>
<blockquote> ... </blockquote> – для наведення цитат, характерний
збільшеним відступом зі всіх сторін (40 рх зліва і справа).
<wbr> або  – вказує браузеру місце, де можна зробити
перенесення слова в тексті. Різниця в тому, що  додає при
переносі дефіс, а <wbr> – ні.

7.

<
>
"
&
 

Спецсимволи
знак «менше»
знак «більше»
подвійна лапка
амперсанд
нерозривний пробіл
м’яке перенесення слів
<abbr> – вказує, що послідовність символів є абревіатурою. З
допомогою атрибуту title дається росшифровка скорочення. Крім того,
пошукові системи індексують повнотекстовий варіант скорочення, що
може використовуватись для підвищення рейтингу документа.
Н.: <p> Я купила <abbr title="Compact Disc">CD</abbr>.</p>
<hr> – для задання горизонтальної лінії.

8.

Списки
В html є три види списків:
– ненумеровані (невпорядковані, марковані);
– нумеровані (впорядковані);
– списки визначень.
Ненумерований список:
<ul>
<li> перший елемент списку </li>
<li> другий елемент списку </li>
<li> третій елемент списку </li>
...
</ul>
За замовчуванням маркером ненумерованого списку виступає круг
чорного кольору. Для зміни маркера використовується атрибут type,
який може приймати значення:
disc (чорний круг), square (квадрат) і circle (коло).
Параметр type можна записувати як в тегу <ul> для задання певного
маркера для всього списку, так і для тегу <li> для задання даного
маркера.

9.

Нумерований список
<ol>
<li> перший елемент списку </li>
<li> другий елемент списку </li>
<li> третій елемент списку </li>
...
</ol>
Атрибут type задає тип нумерації:
type=“1” – тип нумерації арабськими цифрами: 1, 2, 3...
type=“a” – тип нумерації латинськими буквами: а, b, c...
type=“A” – тип нумерації латинськими буквами верхнього регістру:
A, B, C...
type=“I” – тип нумерації римськими цифрами нижнього регістру: i, ii,
iii, iv...
type=“I” – тип нумерації римськими цифрами верхнього регістру I, II,
III, IV...
Щоб почати список з певного
атрибут start з відповідним номером.
Н.: <ol type="I" start="8">
значення,
використовується

10.

Списки визначень
Використовуються для опису визначень і термінів.
<dl>
<dt>Teрмін 1</dt>
<dd>Визначення першого терміну</dd>
<dt>Teрмін 2</dt>
<dd>Визначення другого терміну</dd>
...
</dl>

English Русский Правила