Форматування тексту засобами HTML

Для оформлення HTML-документів може використовуватись багато кольорів.(див. базову таблицю кольорів.)

Для переходу на новий рядок використовується тег <BR>.

Для виділення тексту в абзаци існують теги <P> та </P>.

Текст, розміщений між тегами <B> та </B> буде жирнішим. bold

Текст, розміщений між тегами <I> та </I> буде написаний курсивом. italics

А текст, розміщений між тегами <U> та </U> буде підкресленим. underlined

Текст, розміщений між тегами <S> та </S> буде перекресленим. striken

Текст, розміщений між тегами <SUB> та </SUB> буде написаний як нижній індекс. _індекс

Текст, розміщений між тегами <SUP> та </SUP> буде виглядати як верхній індекс. ^індекс

Тег <HR> вставляє у документ горизонтальну лінію.

Цікавого оформлення сторінці надає тег <MARQUEE> та </MARQUEE> - він додає так звану "рухому стрічку". У саму стрічку, яка переміщатиметься екраном, можна вставити як текст, так і малюнки, таблиці тощо.

Крім цього, можна використовувати різне форматування шрифта за допомогою тегу <FONT>, який має параметри <FACE> - тип шрифта (наприклад: 'Lucida Sans', 'Arial', 'Monotype Corsiva', 'Times New Roman'), <SIZE> - розмір шрифта (1-7), та <COLOR> - колір шрифта.

Так виглядають шрифти різних розмірів: 1 2 3 4 5 6 7

Заголовки

Для змістового виділення елементів сторінки використовуються теги-заголовки. Заголовки в HTML бувають шести типів. Текст, розміщений всередині тегу заголовка <H1> </H1> відображатиметься відповідно до типу цього заголовка. Найбільшим є заголовок Н1, найменшим - Н6. Заголовок може розміщуватись на екрані по центру, або вирівнений по правому або лівому краю. <H2 align=center \ right \ left > </H2>

СТВОРЕННЯ ТАБЛИЦЬ.

Таблиці створюють за допомогою таких тегів:

<TABLE параметри> <ТС> Заголовок таблиці </ТС>

Тут пишемо теги для заповнення клітинок таблиці рядок за рядком </TABLE>

Для заповнення клітинок таблиці використовують такі парні теги (зауважимо, що закриваючі теги можна опускати):

<TR>...</TR> - формують рядок таблиці;

<ТН> текст </ТН> - формують клітинку-заголовок рядка чи стовпця;

<ТВ> текст </ТВ> - формують текст кожної клітинки. Використовуючи таблиці, можна створювати такі ефекти,

- як верстка в декілька колонок;

- застосування ефектів стикування картинки і фону;

- тонкі лінії на всю ширину або висоту сторінки і т.д.

Тег <TABLE> може включати такі атрибути:

WIDTH="n" - визначає ширину таблиці в пікселях або відсотках, за умовчанням ширина таблиці визначається вмістом комірок;

BORDER="n" - встановлює товщину рамки, за умовчанням п=0 таблиця малюється без рамки;

BORDERCOLOR="Konip" - встановлює колір окантовки;

BGCOLOR="Koniр" - встановлює фон для всієї таблиці;

BACKGROUND="image.gif" - заповнює фон таблиці зображенням

CELLSPACING="n" - визначає відстань між рамками елементів таблиці в пікселях;

CELLPADDING="n" - визначає відстань у пікселях між рамкою комірки та текстом;

ALIGN - визначає розташування таблиці в документі:

- left - до лівого краю сторінки (за умовчанням);

- center - по центру сторінки;

right - до правого краю сторінки;

FRAMЕ:="значення" - керує зовнішньою окантовкою таблиці, може приймати такі значення:

- void - окантовки немає (значення за умовчанням);

- above - тільки межа зверху;

- below - тільки межа знизу;

- vsides - межі зверху і знизу;

- vsides - тільки межі зліва та справа;

- Ihs - тільки ліва межа;

- rhs - тільки права межа;

- box - малюються всі чотири сторони;

- border - також всі чотири сторони.

RULES="значення" - керує лініями, що розділяють елементи таблиці. Можливі значення:

- попе - немає ліній (значення за умовчанням);~ groups - лінії тільки між групами рядків;

- rows - тільки між рядками;

- cols - тільки між колонками;

- all - між всіма рядками та колонками.

Таблиця може містити заголовок, який розташовується між тегами

<CAPTION> </CAPTION>. Він повинен бути безпосередньо після тегу <TITLE>. До заголовка можливе застосування атрибута ALIGN, що визначає його положення щодо таблиці:

- top - значення за умовчанням, заголовок над таблицею по центру;

- left - заголовок над таблицею зліва;

- right - заголовок над таблицею справа;

- bottom - заголовок під таблицею по центру.

Рядки таблиці починаються відкриваючим тегом <TR> і завершуються закриваючим </TR>, а кожен елемент таблиці починається тегом <TD> і закінчується </TD>. Дані теги можуть мати такі атрибути:

ALIGN="ЗНАЧЕННЯ" - встановлює горизонтальне вирівнювання тексту в комірках рядка. Може приймати значення:

- left - до лівого краю комірки (за умовчанням);

- center - по центру комірки;

- right - до правого краю комірки;

- justify - до обох країв;

VALIGN="значення" - встановлює вертикальне вирівнювання тексту в комірках рядка. Допустимі значення:

- top - вирівнювання до верхнього краю;

- center - вирівнювання по центру (приймається за умовчанням);

- bottom - по нижньому краю;

BGCOLOR="Konip" - встановлює колір фону рядка;

- ВАСKGROUND="lmage.gif" - заповнює фон рядка або комірки зображенням;

- WIDTH="n" - визначає ширину комірки (п у пікселях);

- HEIGHT="n" - визначає висоту комірки (п у пікселях);

COLSPAN="n" - розтягує комірку по горизонталі.

Наприклад, <TD COLSPAN="3"> означає, що комірка буде розтягнута на три колонки;

ROWSPAN="n" - розтягує комірку по рядку.

Наприклад, <TD ROWSPAN="2" означає, що комірка буде розтягнута на два рядки таблиці;

NOW RAP - текст розміщуватиметься в один рядок;

ВАСKGROUND="image.gif" - фоном комірки буде зображення;

Будь-який елемент таблиці може бути визначений не тегами <TD> </TD>, а тегами <ТН> </ТН> - Table Header (заголовок таблиці). Це звичайна комірка, але текст усередині цих тегів буде виділений напівжирним шрифтом і відцентрований.

Якщо комірка порожня, то навколо неї рамка не малюється. Якщо рамка навколо порожньої комірки все ж таки потрібна, то в неї треба ввести символьний об'єкт &nbsp; (non-breaking space - що не розриває пропуск). Комірка, як і раніше, буде порожня, а рамка навколо неї буде (&nbsp; - обов'язково повинен набиратися малими буквами і закриватися крапкою з комою).

Теги, що встановлюють шрифт (<В>, <І>, <FONT SIZE="n", FONT color="..."), необхідно повторювати для кожної комірки.

Встановлення ширини таблиці та комірок

Ширина всіх комірок в одному стовпці однакова, а в одному рядку може бути різною. Ширину таблиці задають атрибутом WIDTH у тегу <TABLE>, а комірки — за допомогою того самого атрибута у тегу <TD> або <ТН>. Ширину таблиці можна визначати як у пікселах, так і у відсотках від ширини вікна, а комірки — у пікселах або у відсотках від ширини таблиці.

Приклад 1. HTML-документ, в якому задана ширина таблиці та деяких комірок

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

<HTML>

<ТIТLЕ>Приклад встановлення ширини таблиці</ТІТLЕ>

<BODY>

<TABLE BORDER="l" WIDTH=”500”>

<TR>

<TD ROWSPAN="2" WIDTH=50%>Класи</TD>

<TD WIDTH=”250”>10-A</TD>

</TR>

<TR>

<TD>10-B</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Вся таблиця має ширину 500 пікселів. Ширина комірки з текстом «Класи» становить 50 % від ширини всієї таблиці, а комірки з текстом «10-А» — 250 пікселів. Комірка з текстом «10-Б» теж завширшки 250 пікселів (хоча для неї ширину не було задано), оскільки вона розташована в одному стовпці з попередньою.

Форматування тексту та оформлення рамок таблиці

Текст всередині комірок можна вирівнювати як по горизонталі, так і по вертикалі. Горизонтальне вирівнювання вмісту всього рядка задають за допомогою атрибута ALIGN у тегу <TR>; цей самий атрибут у тегах <TD> або <ТН> в окремих комірках виконує таку саму роль. Атрибут ALIGN може набувати значень center, right, left або justify, які задають вирівнювання вмісту таблиці відповідно по центру, за правим чи лівим краєм або за шириною.

Приклади тегів <TR> та <TD> із використанням вирівнювання: <TR ALIGN=right>;

<TD ALIGN=center> Алгебра</ TD >.

Вертикальне вирівнювання задають у тегах <TR>, <TD> або <ТН> за допомогою атрибута VALIGN, який може набувати значень top, bottom та middle, що визначають вирівнювання відповідно за верхнім та нижнім краєм і по центру.

Для оформлення зовнішньої рамки таблиці можна використовувати атрибут FRAME тегу <TABLE>. Його значення визначають, що браузер відображатиме:

box — всі чотири сторони рамки;

above — лише верхню межу рамки;

below — лише нижню межу;

lhs — лише ліву межу;

rhs — лише праву межу;

hsides — верхню й нижню межі рамки;

vsides — ліву й праву межі рамки;

void — зовнішня рамка не відображатиметься.

Відображення розділювальних ліній між стовпцями та рядками таблиці визначають за допомогою атрибута RULES тегу <TABLE>.

Він може набувати таких значень:

all — відображати всі вертикальні та горизонтальні лінії;

rows — лише горизонтальні лінії між рядками;

cols — лише вертикальні лінії між стовпцями;

попе — не показувати розділювальних ліній.

Колірне оформлення таблиць

Для оформлення комірок таблиць за допомогою кольорів застосовують атрибут BGCOLOR. Колір можна визначати, вказуючи його назву англійською мовою або символ # та шістнадцяткове число. Якщо потрібно задати колір для всієї таблиці, то атрибут BGCOLOR задають у тегу <TABLE>, для зміни кольору лише в одному рядку — в тегу <TR>, а настроювання кольору окремої комірки забезпечує наявність цього атрибута всередині тегу <TD> або <ТН>.

Колір рамки таблиці можна задати за допомогою таких атрибутів:

BORDERCOLOR — колір всієї рамки;

BORDERCOLORLIGHT — колір світлої частини рамки;

BORDERCOLORDARK — колір темної частини рамки.

Ці атрибути вставляють у тег <TABLE>. Щоб вони діяли, необхідна наявність ще й атрибута BORDER, який задає товщину рамки.

Приклад 2. HTML-документ, який містить різнокольорову таблицю

<HTML>

<ТІТLЕ>Приклад керування кольором</ТІТLЕ>

<BODY>

<TABLE BGCOLOR="#F0F0F0" BORDER=”10” BORDERCOLOR="#808080" BORDERCOLORLIGHT="#99CCFF" BORDERCOLORDARK="#9900FF">

<TR BGCOLOR=”lightblue”>

<TH COLSPAN="3">Класи</TH>

</TR>

<TR>

<TD BGCOLOR=”pink”>ll-A</TD>

<TD BGCOLOR=”cyan”>ll-B</TD>

<TD BGCOLOR-=”plum”>ll-B</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Якщо необхідно задати колір шрифту для тексту таблиці, то це можна зробити за допомогою тегу <FONT> всередині відповідних тегів <TD>.

Наприклад:

<TDBGCOLOR=”magenta”><FONT COLOR=”pink”>Teкст</FONT></TD>

Дата добавления: 2015-05-26