Основні правила оформлення і їх значення.

Правила стилю	Група властивостей шрифту
1	2
font-family	Назва шрифту: Comic Sans MS, Arial, Tahoma, Monotype Corsiva, Georgia і так далі всі шрифти які встановлені в операційній системі
font-size	Розмір шрифту. Найчастіше указується в – пунктах(pt, 1pt=1/72 дюйми), але його можна указувати і в інших одиницях вимірювання, таких як дюйми (in), сантиметри (cm), міліметри (mm), а також і пікселах (px). Назва одиниці вимірювання пишеться відразу після вказівки розміру: 12pt, 10mm, 1cm
font-weight	Жирність зображення значення normal | bold. За умовчанням застосовується normal
font-style	Курсив normal | italic. За умовчанням застосовується normal
Властивості шрифту
text-decoration	Підкреслений – underline; закреслений – line-through; риска зверху – overline; мерехтіння – blink; без прикраси – none. Можуть використовуватися як поодинці, так і групою, наприклад: text-decoration: underline overline;
font-variant	Малі прописні small-caps
text-transform	Всі прописні – uppercase, перші прописні – capitalize
Міжзнаковий інтервал
letter-spacing	Значення встановлюються в цифрах: 1pt. Розряджений міжзнаковий інтервал задається позитивним значенням “3pt”. Ущільнений міжзнаковий інтервал позначається знаком мінуса “-“ перед числом і отримуємо “-2pt”. Звичайний міжзнаковий інтервал задається значенням “0pt” і є встановленим за умовчанням
Властивості блока тексту
text-align	Вирівнювання тексту по лівому, правому краям або по ширині, або по центру виконується встановленням відповідного значення атрибута left, right, center або justify

Закінчення таблиці 10.4

1	2
Відступи оформлення блока тексту
text-indent		Перший рядок задається числовим значенням 10mm або 1cm
margin-left		Відступ зліва задається числовим значенням 10mm або 1cm
margin-right		Відступ справа задається числовим значенням 10mm або 1cm
Інтервал оформлення абзацних відступів. Задається числовим значенням 10mm або 1cm. За умовчанням вимірюється в пікселах і указується без типу розмірності.
margin-top		Перед абзацом
margin-bottom		Після абзацу
word-spacing		Між слів
line-height		Міжрядковий інтервал. Вимірюється у відсотках або разах, але можна задавати в cm, mm, in, px або pt. Одинарний 120% або 1.2 (за умовчанням) Полуторний 150% або 1.5 Подвійний 200% або 2
Колірне оформлення
color		Колір символів, див. таблицю квітів
background-image		Фоновий малюнок. Приклад: background-image:url('Паркет.bmp')
background-color		Колір фону абзацу

Приклад. Застосування атрибуту style до параграфа

<p align="justify" style="color: red; background-color: #FFFF00; text-transform: capitalize; letter-spacing: 3pt; font-family: Comic Sans MS; text-indent:2px">Текст абзаца</p>.

Заголовки. Елементи h1 ... h6

У мові HTML існує шість рівнів заголовків з 1-го по 6-ий, які дозволяють розбивати інформацію HTML-документа на логічні блоки. Заголовок 1-го рівня – <h1> – є найбільш значущим і відображається великим за розміром шрифтом, з його допомогою документ розбивається на «Розділи». Далі слідує заголовок 2-го рівня, який відображається меншим розміром шрифту і визначає в документі розділи, заголовок 3-го рівня визначає параграфи і так далі. Приклад використання елемента заголовків наведено на рис. 10.9.

Приклад. Використання заголовків

<html>

<head>

<title>Приклад HTML-документа з заголовками</title>

<meta http-equiv="Content-Language" content="ru">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="keywords" content="Заголовок, глава, параграф">

</head>

<body>

<p align="center"><b>HTML-документ з використанням заголовків.</b></p>

<h1>Заголовок 1-го рівня - це ГЛАВА</h1>

<h2>Заголовок 2-го рівня - це РОЗДІЛ</h2>

<h3>Заголовок 3-го рівня - це ПАРАГРАФ чи ПІДРАЗДІЛ</h3>

<h4>Заголовок 4-го рівня</h4>

<h5>Заголовок 5-го рівня</h5>

<h6>Заголовок 6-го рівня</h6>

</body>

</html>

Рис. 10.9. Приклад використання заголовків

Заголовки можуть використовувати атрибут align для вирівнювання тексту заголовка щодо сторінки, що підтримує значення (left, right, center, justify).

Елемент гіперпосилання <a>

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

Гіперпосилання задається тегами <a></a> і має формат:

<a href=адреса_ресурсу>Назва ресурсу або його опис</a>

Крім загальних атрибутів, eлемент a ще може мати ланцюжок наступних атрибутів:

href – адреса ресурсу, на який необхідно посилатися.

target – визначає, вікно браузера, в яке завантажується ресурс. Найчастіше використовується спільно з фреймами(вивчаються в одному з подальших занять) і може набувати наступних значень:

_blank – ресурс завантажується в нове вікно;

_parent – ресурс завантажується в батьківському вікні поточного документа;

_top – ресурс завантажується у вікні верхнього рівня фреймової структури;

_self – ресурс завантажується в поточному вікні і є значенням за умовчанням;

"ім'я вікна" – ресурс завантажується в заданому вікні (фреймі).

Способи адресації

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

Абсолютне локальне посилання. Указує адресу ресурсу на поточному комп'ютері і має формат

file://диск:\папка\...\папка\файл

HTTP-посилання. Указує адресу ресурсу доступного по протоколу HTTP. Використовується наступний формат:

http://хост/папка/.../папка/файл

Поштове гіперпосилання. Запускає діалогове вікно поштового клієнта для створення нового повідомлення електронної пошти. Формат поштового гіперпосилання має вигляд:

mailto:користувач@хост

Відносне посилання. Використовується для вказівки місцеположення ресурсу щодо поточної папки. Застосовуються наступні позначення:

/ – кореневий каталог web-сервера або логічного диска;

./ – поточний каталог;

../ – батьківський каталог;

папка/ – дочірній каталог.

Елемент зображення <img>

Використовується для вставки зображень в HTML-документ. Елемент допускає вставку зображень у форматах JPEG (зокрема progressive jpeg) і Compuserve GIF (включаючи прозорі і анімації), також можна використовувати формат PNG. Елемент IMG не має кінцевого тега і задається тегом <img>.

Обов'язковим атрибутом елемента img є src. У нім указується URL‑адреса файла із зображенням.

height і width – визначають ширину і висоту зображення відповідно. Якщо вказані значення не співпадають з реальним розміром зображення, то зображення масштабується.

hspace і vspace – визначають відступ картинки (у пікселах) по горизонталі і вертикалі від інших об'єктів документа. Це необхідно в разі обтіканні зображення текстом.

align – обов'язковий атрибут. Указує спосіб вирівнювання зображення в документі. Може набувати наступних значень:

left – вирівнює зображення по лівому краю документа. Прилеглий текст обтікає зображення справа;

right – вирівнює зображення по правому краю документа. Прилеглий текст обтікає зображення зліва;

top і texttop – вирівнюють верхню кромку зображення з верхньою лінією поточного текстового рядка;

middle – вирівнює базову лінію поточного текстового рядка з центром зображення;

absmiddle – вирівнює центр поточного текстового рядка з центром зображення;

bottom і baseline – вирівнює нижню кромку зображення з базовою лінією поточного текстового рядка;

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

alt – визначає текст, що відображається браузером на місці зображення, якщо браузер не може знайти файл із зображенням або включений в текстовий режим. Як значення задається текст з описом зображення;

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

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

<img src="/img/picture.gif" width="45" height="53" alt="Пума" hspace="10" align="left"> Цей текст обтікає картинку справа і знаходиться від неї на відстані 10 пікселів.

Приклад використання зображення як гіперпосилання

<A HREF="carlson.html"> <IMG src="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Емблема університету"> </A>

Елементи списків OL, UL, DL.

Існують три основні види списків в HTML-документі:

нумерований (впорядкований), елемент ol;

маркірований (неврегульований), елемент ul;

список визначень, елемент dl.

Також вирішується комбінування всіх видів списків, створення вкладених списків, використання різних елементів списків і повторення одних списків усередині інших. Для цього просто необхідно розмістити одну пару тегов відповідного елемента списку усередині другої. Для створення заголовка списку використовується спеціальна пара тегов <lh></lh>.

Створення нумерованого списку. Елемент OL

У нумерованому списку браузер автоматично вставляє номери елементів по порядку. Якщо видаляється один або декілька пунктів пронумерованого списку, то решта номерів пунктів автоматично буде перерахована.

Нумерований список визначається парою тегов <ol> і </ol>. Кожен пункт списку починається з тега <li>. Елемент OL має наступні атрибути:

Атрибут	Значення атрибуту
type	Вид лічильника A – великі латинські букви (A,B,C,...) а – маленькі латинські букви (а,b,c,...) I – великі римські цифри (I,II,III,...) i – маленькі римські цифри (i,ii,iii,...) 1 – звичайні цифри (1,2,3,...)
start	Число, з якого починається відлік start=3

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

<ol type=i start=4> <li>Проблема</li> <li>Аналіз проблеми</li> <li>Постановка задачі</li> <li>Рішення задачі</li> <li>Аналіз результату</li> <li>Вирішення проблеми</li>

Проблема Аналіз проблеми Постановка завдання Рішення задачі Аналіз результату Вирішення проблеми

Створення маркірованого списку. Елемент UL.

У маркірованих списках браузер використовує маркери для позначки пунктів списку. Вид маркера задається в атрибутах елемента UL.

Маркірований список визначається парою тегов <ul> і </ul>. Кожен пункт списку починається з тега <li>. Елемент UL має один атрибут type:

type – визначає зовнішній вигляд маркера. За умовчанням (disc), круглий (circle) або квадратний (square). Type =“circle”.

Приклад використання списку

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Сонячна система. Приклад використання списку</title>

</head>

<body>

<ul type="square">

<lh><i>Планети сонячною системи:</i></lh><br>

<li>Меркурій

<ul type="circle">

<li>Знаходиться на відстані 57,9 мільйонів кілометрів від сонця.</li>

<li>Діаметр 4878 км..</li>

<li>Супутників не має.</li>

</ul>

</li>

<li>Венера

<ul type="circle">

<li>Знаходиться на відстані 108 мільйонів кілометрів від сонця.</li>

<li>Супутників не має.</li></li>

</ul>

</li>

<li>Земля

<ul type="circle">

<li>Знаходиться на відстані 149.6 мільйонів кілометрів від сонця.</li>

<li>Діаметр 12 756 км..</li>

<ol>

<lh>Супутники планети</lh>

<li>Луна.</li>

</ol>

</li>

</ul>

</li>

<li>Марс

<ul type="circle">

<li>Знаходиться на відстані 227.9 мільйонів кілометрів від сонця.</li>

<li>Має два супутники:

<ol type="1">

<lh>Супутники планети</lh>

<li>Фобос.</li>

<li>Деймос.</li>

</ol>

</li>

</ul>

</li>

</ul>

</body>

</html>

<head>

Рис. 10.10. Використання списку з різними типами лічильників

Створення списку визначень. Елемент DL

Списки визначень, так звані словники спеціальних термінів, в HTML представляються особливим видом списків. Вони представляють текст у формі словарної статті, що складається з визначуваного терміну і абзацу, що розкриває його значення. Такий список зручний для складання каталогу, опису функцій підрозділів організації або словника термінів. Елемент списку визначень DL є контейнером і забезпечує відділення списку від решти тексту порожніми рядками. Усередині контейнера тегом <dt> позначається визначуваний термін, а тегом <dd> – абзац з його визначенням. На рис. 10.11 наведено приклад використання елемента DL.

Приклад створення списку визначень

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; char-set=windows-1251">

<style>

dd {font-weight: bold;}

dt{

margin-left: 20mm;

text-align: justify;

font-family: "Monotype Corsiva";}

</style>

<title>Створення спиcку визначень. Елемент DL.</title>

</head>

<body>

<p align="center"><b>Створення спиcку визначень. Елемент DL.</b></p>

<dl>

<dd>Тег</dd>

<dt>Текстова мітка певного вигляду, що відзначає межі, – початку і кінця деякого змісту. Наприклад, для позначення початку таблиці, використовується тег <tabel>, а для його завершения – </table>.</dt>

<dd>Елемент </dd>

<dt>Називається сукупність що відкривного і закривного тегів і їх вмісту. Вмістом елемента може бути не тільки простий текст, а і вкладені в нього інші елементи.</dt>

<dd>Атрибут </dd>

<dt>Властивість елемента. Атрибути записуються в початковому тегі елемента і визначають зовнішній вигляд вмісту. </dt>

<dl>

</dl>

</dl>

</body>

</html>

Рис. 10.11. Відображення списку DL в браузері

Елемент таблиця TABLE

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

Елемент таблиця задається тегами <table>...</table>. За умовчанням таблиця не має обрамлення і роздільників. Обрамлення додається атрибутом border.

Рядки таблиці задаються тегами: <tr>...</tr>. Кількість рядків таблиці визначається кількістю пар тегів <tr>, що зустрічаються </tr>. Рядки можуть мати атрибути align і valign, які описують візуальне положення вмісту рядків в таблиці.

Комірки рядка таблиці задаються тегами: <td>...</td>. Комірка таблиці може бути, описана тільки всередині рядка таблиці. Кожна комірка повинна бути пронумерована номером колонки, для якої вона описується. Якщо в рядку відсутні одна або декілька комірок для деяких колонок, то браузер відобразить порожню комірку. Розташування даних у комірці за умовчанням визначається атрибутами align=left і valign=middle. Дане розташування може бути виправлене як на рівні опису рядка, так і на рівні опису комірки.

Заголовок таблиці задається тегами: <th>...</th>. Комірка заголовка таблиці має ширину всієї таблиці, текст в даній комірці має атрибут bold і align=center.

Назва таблиці задається тегами: <caption>...</caption>. Тег <caption> повинен бути присутнім усередині <table>...</table>, але зовні опису якого-небудь рядка або комірки. За умовчанням <caption> має атрибут align=top, але може бути явно встановлений в align=bottom. align визначає, де – зверху або знизу таблиці – буде поставлений підпис, при цьому підпис завжди центрований в рамках ширини таблиці. Атрибути тега <table> наведені у таблиці 10.5.

Таблиця 10.5