Мова розмітки HTML

BGPROPERTIES="FIXED" - робить фонове зображення нерухомим. Якщо зміст сторінки вертикально більший за висоту вікна, то без цього параметра фонове зображення буде рухатись разом із вмістом, з цим параметром фонове зображення залишатиметься на місці.

Приклад:

<body background=file:///d:/images/fon.jpg> - фоновий малюнок з файла на комп’ютері

<body background=http://nv.org/les.jpg" bgproperties="fixed"> - малюнок з Інтернету, при цьому він із вмістом не переміщується

<body bgcolor=lightgreen> - сторінка має фоновий колір світло-зелений (без малюнку)

Частини тексту

<h№ [align=left/center/right/justify]>Текст заголовка</h№> - Заголовок заданого рівня

№ - число від 1 по 6. Вказує на рівень заголовка. Заголовок 1 рівня (<h1>) вважається найголовніший. Рівні 2,3,...,6 - підзаголовки з відповідним підпорядкуванням вищому собі рівню.

ALIGN - вирівнювання заголовка (тексту та ін. об’єкта) в рядку (по горизонталі). Допускаються наступні значення:

LEFT - по лівій стороні;
CENTER - по центру;
RIGHT - по правій стороні;
JUSTIFY - за шириною (текст вирівнюється з лівого і правого боків шляхом розтягування проміжків між словами).

<p [align=...]>Текст абзацу</p> - Організація одного абзацу

ALIGN - вирівнювання абзацу.

<br> - продовжити абзац з наступного рядка. Ставиться в абзаці перед словом, яке повинне продовжувати абзац з наступного рядка.

<hr [color=колір] [size=тобщина]> - Розділова лінія

COLOR - колір лінії. Колір можна вказувати англійською мовою (наприклад: red, green, lightgreen тощо), або його кодом.

Формат коду кольору: #RRGGBB

Кожна літера в коді, це цифра шістнадцятирічної системи числення (0, 1, 2, 3,..., 9, A, B, C, E, F). Нуль означає, що відповідний колір відсутній. Далі зростання значення кольору відповідає зростанню насиченості цього кольору.

Відповідність пар літер у коді до кольорів:

RR - червоний колір.
GG - зелений колір.
BB - синій колір.

Наприклад: #000000 - чорний, #ffffff - білий, #ff0000 - червоний, #663300 - коричневий.

SIZE - товщина лінії в пікселях. Задається товщина числом, починаючи від 1. Наприклад: size=1, size=10 тощо.

Приклад:

<hr color=#005500 size=1> - тонка розділова лінія темно-зеленого кольору.

<hr> - тонка розділова лінія сірого кольору.

Формат тексту

<font [color=колір] [size=розмір] [face=шрифт]>текст</font> - Шрифт тексту (колір, розмір, шрифт)

COLOR - колір символів

SIZE - розмір символів. Це число в межах від 1 по 7. Якщо розмір задати більшим за 7, то це впливати на символи не буде (вони залишаться на рівні розміру 7).

FACE - шрифт тексту. Приклади шрифтів: Arial, "Times New Roman", "Bookman Old Style" тощо). Якщо назва шрифту складається з декількох слів, то застосовуються лапки.

Накреслення символів:

<b> текст </b> - напівжирний

<i> текст </i> - курсив (нахилений)

<u> текст </u> - підкреслений

Гіперпосилання

<a href=адреса/файл [target=_blank]>текст/зображення</a> - гіперпосилання на вебсторінку, або файл іншого формату.

HREF - адреса вебсторінки (файла) в Інтернеті, або повна назва файла, що зберігається на комп’ютері.

TARGET=_BLANK - відкрити вебсторінку (файл) в новій вкладці (новому вікні) браузера.

Мітки на вебсторінці

Використання мітки передбачає її створення та посилання на неї.

<a name=ім’я мітки></a>текст, або інший об’єкт вебсторінки - створення мітки. Цей тег ставиться перед об’єктом, до якого потрібно організувати перехід.

<a href=#ім’я мітки>текст/зображення</a> - посилання на мітку, створену на даній вебсторінці.

<a href=адреса#мітка>текст/зображення</a> - посилання на мітку на іншій вебсторінці. Значенням параметра є url-адреса вебсторінки після якої одразу ставиться знак # і ім’я мітки.

Приклад: <a href=http://nvk.ua/tytul.html#m1>Історія закладу</a> - посилання на мітку m1 на сторінці http://nvk.ua/tytul.html. Відкриється ця сторінка й одразу відбувається перехід на зазначену мітку.

Таблиці простої структури

Структура організації простої таблиці:

<table width=ширина border=товщина> - початок організації таблиці

<tr [align=горизонтальне вирівнювання] [valign=вертикальне вирівнювання] [bgcolor=колір]> - вставка рядка

<td [align=горизонтальне вирівнювання] [valign=вертикальне вирівнювання] [bgcolor=колір]> - вставка комірки у поточний рядок

<td ...> - вставка наступної комірки у поточний рядок

...

...

</table>

WIDTH - ширина таблиці. Якщо ширину таблиці потрібно задати у пікселях, то задається тільки числове значення (допускається використання закінчення px). При цьому ширина таблиці при зміні ширини вікна змінюватись не буде. Якщо потрібно зробити ширину таблиці гнучкою відносно ширини вікна, то значення ширини таблиці потрібно задавати у відсотках (наприклад 50%, 100% тощо).

BORDER - товщина зовнішньої лінії таблиці. Варіанти значень параметра:

- 0 - внутрішні й зовнішні лінії таблиці не відображаються;
- 1 - внутрішні й зовнішні лінії таблиці тонкі;
- від 2 - внутрішні лінії тонкі, зовнішні - відповідної товщини.

ALIGN = left/center/right/justify.

VALIGN - вирівнювання тексту (зображення та ін. об’єкта) по вертикалі (відносно висоти комірки). Можливі значення:

- BOTTOM - вирівнювання по нижній межі комірки;
- TOP - по верхній межі;
- MIDDLE - по середині комірки.

BGCOLOR - колір фону комірки. Якщо цей параметр у тегу <TR>, то заданим кольором зафарбовуються усі комірки цього рядка, крім тих, що містять свій параметр BGCOLOR. Колір фону вказується англійською мовою (red, blue, lightblue тощо), або формулою #ччззсс.

Таблиці складної структури (з об’єднаними комірками)

Таблиця складної структури передбачає об’єднання комірок в одну велику. При цьому, якщо об’єднано комірки в межах стовпця (комірка 1 на мал.), то належить вона рядку, в якому починається (комірка 1 на малюнку належить першому рядку). Для об’єднання комірок використовуються параметри ROWSPAN (об’єднання комірок у стовпчику) та COLSPAN (об’єднання комірок у рядку). Наприклад, для комірки 1 (див. мал.) використано параметр ROSPAN=2, для комірки 2 - параметр COLSPAN=3.

Приклад організації складної таблиці (до таблиці на малюнку):

<td rowspan=2 valign=middle>1

<td colspan=3>2

<tr>

<td>текст

<tr>

<td>текст

</table>

ROWSPAN - вказує, скільки рядків буде займати комірка, включаючи поточний рядок.

COLSPAN - вказує, скільки стовпців буде займати комірка.

Списки

У таблиці показано, як мовою HTML організовується кожен з типів списків.

Графічні зображення на вебсторінці

SRC - графічний файл з потрібним зображенням.

WIDTH/HEIGHT - ширина/висота зображення. Задається в пікселях або у відсотках (разом з числом використовується знак "%"). Відсотки вказують розмір зображення відносно розміру вікна, наприклад: 100% - на ширину/висоту вікна, 50% - на половину ширини/висоти вікна. При цьому, під час зміни розмірів вікна, розміри зображення теж будуть змінюватися. Якщо ширина/висота зображення вказана у пікселях, то вона не змінюється при зміні розмірів вікна.

BORDER - визначає, чи буде рамка у зображення, коли воно буде у ролі гіперпосилання. При значенні цього параметра "0" зображення-гіперпосилання буде без рамки, інакше - з рамкою.

ALIGN - встановлює, з якого боку від абзацу буде розташовуватись зображення. При цьому, в гіпертексті абзац повинен слідувати за тегом вставки зображення.

VSPACE - встановлює відстань над малюнком і під малюнком до абзацу (тексту)

HSPACE - встановлює відстань ліворуч від малюнка і праворуч від малюнка до абзацу (тексту)

Графічні зображення таблицею

Для розташування зображень матрицею можна використовувати таблицю. У кожну комірку таблиці замість тексту вставляється малюнок тегом <img>.

Приклад:

<table width=100% border=0> - ширина таблиці, наприклад, на всю ширину вікна, ліній таблиці - невидимі.

<tr align=center valign=middle> - в усіх комірках поточного рядка зображення розташовуються в центрі комірки.

<td><img src=шлях/файл width=ширина у пікселях> - може бути необхідним зменшувати розмір малюнка. Саме для цього використовується параметр width.

</table>