Графіка всередині HTML–документа

Створення списків

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

Нумерований список утворюють за допомогою тега–контейнера <OL>…</OL>. Кожний елемент списку починається з тега <LI>. Список може мати заголовок, який охоплюється парним тегом <LH>…</LH>. Схематично нумерований список має такий вигляд:

<LH> заголовок списку </ LH>

<OL>

<LI> Перший пункт списку

<LI> Другий пункт списку

<LI> Третій пункт списку

..............................................

</OL>

Тег <OL> може мати параметр TYPE, який задає спосіб нумерації. Можливі такі значення параметра TYPE :

I – нумерація великими Римськими цифрами (I, II, III...);

i – нумерація малими Римськими цифрами (i, ii, iii...) ;

a – нумерація малими латинськими літерами (а, b, c...);

А – нумерація великими латинськими літерами (A, B, C...);

1 – нумерація малими арабськими цифрами (1, 2, 3...).

В маркерованих списках для виділення його елементів використовують спеціальні символи, які називають маркерами списку. Для створення маркерованого списку використовують тег–контейнер <UL>…</UL>, всередині якого розміщають усі елементи списку. Кожен елемент списку починається з тега <LI>. Схематично маркерований список має такий вигляд:

<UL>

<LI> Перший пункт списку

<LI> Другий пункт списку

<LI> Третій пункт списку

…………………………….

</UL>

Тег <UL> може мати параметр TYPE, який визначає зовнішній вигляд маркера. Типовими значеннями маркера є такі:

TYPE=disc – маркери відображаються зафарбованими кільцями;

TYPE= circle – маркери відображаються не зафарбованими кільцями;

TYPE=square – маркери відображаються зафарбованими квадратиками.

Наприклад:

<UL TYPE=square>

<LI> Перший пункт списку

<LI> Другий пункт списку

<LI> Третій пункт списку

…………………………....

</UL>

.

Для створення вбудованих зображень у HTML–документі необхідно використати тег IMG, який має один обов’язковий параметр SRC, що вказує на адресу URL–файлу із зображенням. Найпростіший приклад вбудовування зображення:

<IMG SRC= “picture.gif” >.

Для доступу до віддалених файлів, які є на серверах у мережі Internet, адресу записують із значенням назви протоколу доступу http і адреси файлу. Наприклад:

<IMG SRC= “http://www.lac.lviv.ua/pic.gif”>.

Тег <IMG> може мати ряд інших параметрів. Найважливішими є наступні.

HEIGHT і WIDTH – визначають відповідно ширину і висоту зображення; (значення параметрів можна задавати як у пікселях, так і у відсотках від розмірів вікна перегляду). Якщо вказані значення не співпадають з реальним розміром зображення, зображення масштабується.

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

ALIGN – вказує спосіб вирівнювання зображення в документі (параметр ALIGN може приймати значення: left, right, center, вказані в табл. 3).

NAME – визначає ім'я зображення, унікальне для даного документа.

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

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

Для опису фонового зображення використовується параметр BACKGROUND тега BODY, значенням якого є ім'я файла, в якому місититься фонове зображення. Наприклад:

<BODY BACKGROUND= “picture.gif”>.

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

Щоб задати кольори посилань, необхідно включити в тег <BODY> відповідний параметр (LINK, ALINK, VLINK) (табл.1). Колір задається шестизначним числом в шістнадцятковому форматі за схемою RGB (Red, Green, Blue). Наприклад: <BODY BGCOLOR=“#000000” TEXT=“#FFFFFF” LINK=“#9690CC”>. Даний рядок визначає білий колір фону документа, чорний текст і сріблясті посилання.

Створення та розміщення таблиць в HTML–документі

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

Опис таблиці розміщається всередині тега <BODY>.

Кожна таблиця задається парою тегів <TABLE>…</TABLE>. Всередині цієї пари тегів розташовується опис вмісту таблиці. Кожен рядок обрамлюється парою тегів <TR>…</TR>, окрема клітинка ­– парою тегів <TD>…</TD>. Для клітинок–заголовків використовується пара тегів <TH>…</TH>.

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

Таблиця може мати заголовок, який поміщається між парою тегів <CAPTION>…</CAPTION>. Опис заголовку таблиці повинен розміщатися всередині пари тегів <TABLE>…</TABLE> у будь–якому місці, однак, поза зоною опису будь–якого з парних тегів <TR>, <TD> або <TH>.

Тег <CAPTION> має один допустимий параметр ALIGN, який приймає значення TOP (заголовок над таблицею) або BOTTOM (заголовок під таблицею). У більшості випадків в якості заголовку таблиці використовується текст, однак, між тегами <CAPTION>…</CAPTION> можна записувати будь–які HTML–елементи, що використовуються в розділі <BODY>.

Для розміщення таблиці на сторінці використовують параметри тега <TABLE>, наведені в табл.5. В найпростішому випадку тег <TABLE> використовується без параметрів, їх значення приймають за замовчуванням.

Таблиця 5

Призначення параметрів тега <TABLE> та їх можливі значення

Параметр Призначення параметра та можливі його значення
ALIGN задає спосіб горизонтального вирівнювання таблиці в області перегляду. Можливі значення: left, сеnter, right. Значення за замовчуванням – left.
VALIGN задає спосіб вертикального вирівнювання таблиці в області перегляду. Можливі значення: top, bottom, middle.
BORDER задає ширину зовнішньої рамки таблиці (в пікселях). При значенні BORDER=“0” або за відсутності цього атрибута рамка відображатися не буде.
CELLPADDING задає відстань (в пікселях) між рамкою клітинки таблиці і даними всередині клітинки
CELLSPACING задає відстань (в пікселях) між межами сусідніх клітинок
WIDTH задає ширину таблиці. Ширина задається або в пікселях, або в процентному відношенні до ширини вікна браузера.
HEIGHT задає висоту таблиці. Висота задається або в пікселях, або в процентному відношенні до висоти вікна браузера.
BGCOLOR задає колір фону елементів таблиці. Задається або RGB– значенням в шістнадцятковій системі, або значенням одного з 16 базових кольорів.
BACKGROUND дозволяє використати для заповнення фону таблиці зображення. Як значення необхідно вказати URL–адресу рисунка.

Для форматування даних всередині клітинок таблиці передбачені параметри, наведені в табл.6.

Таблиця 6

Призначення та можливі значення параметрівформатування даних

всередині таблиці

Назва параметра Призначеня та можливі значення параметрів
ALIGN вказує спосіб горизонтального вирівнювання вмісту клітинки; можливі значення: left, сеnter, right (за замовчуванням спосіб вирівнювання визначається значенням атрибута ALIGN елемента TR)
VALIGN вказує спосіб вертикального вирівнювання вмісту клітинки. Можливі значення: top, bottom, middle (за замовчуванням відбувається вирівнювання по центру (VALIGN="middle"), якщо значення цього атрибута не було задано раніше в елементі TR)
BGCOLOR вказує колір фону клітинки (задається або RGB–значенням в шістнадцятковій системі, або значенням одного з 16 базових кольорів)
WIDTH вказує ширину клітинки (задається в пікселях або в процентному відношенні до ширини таблиці)
HEIGHT вказує висоту клітинки (задається в пікселах або в процентному відношенні до висоти таблиці)
BACKGROUND заповнює клітинки фоновим рисунком (необхідно вказати ім'я файла, в якому міститься фонове зображення)