Графіка всередині 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 | заповнює клітинки фоновим рисунком (необхідно вказати ім'я файла, в якому міститься фонове зображення) |