Фізичне форматування символів

Зміст

1. Структура HTML-документа

1.1. Розділ документа HEAD

1.2. Розділ документа BODY

2. Форматування тексту

2.1. Логічне форматування

2.2. Фізичне форматування символів

2.3. Форматування абзаців

3. Списки

3.1. Маркований список

3.2. Нумерований список

3.3. Списки означень

3.4. Вкладені списки

4. Таблиці

4.1. Елементи таблиці

4.2. Атрибути елементів рядків і стовпців

4.3. Колір у таблицях

4.4. Об’єднання комірок таблиці

5. Графіка

5.1. Колір фону сторінки і фонове зображення

5.2. Додавання зображень

5.3. Вирівнювання зображень

5.4. Розміри зображення

5.5 Відділення зображення від тексту

5.6. Рамки навколо зображень

5.7. Альтернативний текст

5.8. Додавання звуків

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

6.1. Текстові посилання

6.2. Графічні посилання

6.3. Посилання в межах одного документа

6.4. Підказка при наведенні мишки на посилання

6.5 Карти зображень

7. Фрейми

7.1. Структура документу з фреймами:

7.2. Тег <FRAME>

7.3. Розбиття сторінки на фрейми

7.4. Смуга прокрутки

7.3. Рамки між фреймами

7.4. Ширина полів фрейма

7.5. Заборона можливості зміни розміру фрейма

7.6. Навігація між фреймами

7.7. Приклад взаємодії між фреймами і окремими вікнами броузера

8. Каскадні таблиці стилів (Cascade Style Sheets – CSS)

8.1.Властивості елементів

8.2.Способи застосування стилів

Перевизначення стилю

Елемент STYLE

Посилання на зовнішній опис

Імпорт опису стилів

9. Практичні роботи до курсу

HTML (HyperText Markup Language)

Web-сторінки створюються за допомогою мови розмітки гіпертексту HTML (HyperText Markup Language). Опис web-сторінок міститься в HTML-програмі (HTML-коді), який зберігається у звичайному текстовому файлі з розширенням htm чи html. Програми мовою HTML містять інструкції (коди), що називаються тегами. Всі теги мови HTML виділяються символами-обмежувачами (< і >), між якими записується ідентифікатор (ім’я) тега і, можливо, його параметри. Більшість тегів HTML використовується попарно, тобто для окремого тега (відкриваючого) в документі є відповідний закриваючий тег, який записується так само, як і відкриваючий, але з символом / перед ім’ям тега (закриваючі теги не використовують параметри).

Структура HTML-документа

<HTML>

<HEAD>

<TITLE> Заголовок документа </TITLE>

</HEAD>

<BODY>

Тіло документа

</BODY>

</HTML>

Парою тегів <HTML>...</HTML> визначається початок і кінець документа.

1.1. Розділ документа HEAD

Визначає його заголовок, розміщений між парою тегів <TITLE> і </TITLE>, а також мета-теги.

Тег <META> містить різнорідну інформацію для броузерів, яка не відображається у вікні. Тег <STYLE>пов’язаний з використанням таблиць стилів. Тег <SCRIPT> використовується для запису сценаріїв.

Розділ документа BODY

Може мати наступні параметри

Параметр	Опис дії параметра
ALINK	Визначає колір активного посилання
LINK	Визначає колір ще не переглянутого посилання
VLINK	Визначає колір уже переглянутого посилання
BACKGROUND	Визначає адресу фонового зображення
BGCOLOR	Визначає колір фонового зображення
TEXT	Визначає колір тексту
BGPROPERTIES	Якщо встановлене значення FIXED, фонове зображення не прокручується
BOTTOMMARGIN	Встановлює межу нижнього поля в пікселях
LEFTMARGIN	Встановлює межу лівого поля в пікселях
RIGHTMARGIN	Встановлює межу правого поля в пікселях
TOPMARGIN	Встановлює межу верхнього поля в пікселях

Форматування тексту

Логічне форматування

· Тег <ACRONYM>

Використовується для визначення абревіатур. Використовується в поєднання з параметром TITLE, в якості значення якого можна використовувати повну форму запису абревіатури, яка буде з’являтися у вигляді підказки. Приклад: <ACRONYM TITLE=”Полтавський державний педагогічний університет”>ПДПУ</ACRONYM> – один з провідних педагогічних вузів України.

· Тег <CITE>

Використовується для позначення цитат, назв статей або книг, посилань на інші джерела (виводиться курсивом). Приклад: <CITE>Гарі Потер</CITE> є одним з найпопулярніших романів у жанрі фентезі.

· Тег <CODE>

Текст відображається моноширинним шрифтом. Приклад: Основні структурні теги HTML:<BR>

<CODE>HTML, HEAD, BODY</CODE>

· Тег <DFN>

Відображає фрагмент як визначення (DeFinitioN) (виділяється курсивом).

Приклад: <DFN>Internet Explorer</DFN>– це один з найпопулярніших web-броузерів

· Тег <EM>

Використовується для виділення важливих фрагментів тексту (зазвичай курсивом).

Приклад: Приклад виділення <EM> окремих слів </EM> тексту

· Тег <Q>

Виділяє короткі цитати в рядку тексту.

· Тег <SAMP>

Виділяє текст як зразок (SAMPLe). Може використовуватися для виділення кількох символів моноширинним шрифтом.

· Тег <STRONG>

Використовується для виділення важливих фрагментів напівжирним шрифтом.

· Тег <VAR>

Виділяє імена змінних програми (курсивом). Приклад: Задайте значення змінної <VAR> N </VAR>

Фізичне форматування символів

· Тег <B>

Відображає текст напівжирним шрифтом. Форма запису: <B>текст</B>

· Тег <I>

Відображає текст курсивом. Форма запису: <I> текст </I>

· Тег <TT>

Відображає текст моноширинним шрифтом. Форма запису: <TT> текст </TT>

· Тег <U>

Відображає текст підкресленим. Форма запису: <U> текст </U>

· Тег <STRIKE> і <S>

Відображає текст перекресленим горизонтальною лінією. Форма запису: <S> текст </S>

· Тег <BIG>

Виводить текст шрифтом більшого (ніж нерозмічена частина тексту) розміру.

Форма запису: <BIG> текст </BIG>

· Тег <SMALL>

Виводить текст шрифтом меншого (ніж нерозмічена частина тексту) розміру.

· Тег <SUB>

Зміщує текст у нижній індекс. Приклад: X<SUB>1</SUB>

· Тег <SUP>

Зміщує текст у верхній індекс. Приклад: Y<SUP>2</SUP>

· Тег <FONT>

Вказує параметри шрифту. Параметри тега

Назва параметра	Опис дії параметра
FACE	Вказує тип шрифту. Форма запису: <FONT FACE=”назва шрифта”> текст</FONT>
SIZE	Вказує розмір шрифту в умовних одиницях від 1 до 7 Форма запису: <FONT SIZE=число> текст</FONT>
COLOR	Вказує колір шрифту. Може задаватися як за допомогою стандартних імен, так і в форматі #RRGGBB Форма запису: <FONT COLOR=колір> текст</FONT>

· Тег <BASEFONT>

Використовується для визначення розміру, типу і кольору шрифту, використовуваного в документі за замовчуванням, не має закриваючого тега (може використовуватися в тезі <HEAD>)

Форматування абзаців

· Тег <P>

Використовується для створення абзацу. Форма запису: <P>текст абзацу</P> (</P> не обов’язковий)

· Тег <BR>

Використовується для переведення, розриву рядка (кінцевого тегу немає)

· Тег <NOBR>

Використовується для заборони розриву рядка. Форма запису: <NOBR>текст<NOBR>

· Заголовки всередині документа

Використовуються теги <H1>,<H2>,<H3>,<H4>,<H5>,<H6> (H1 – найбільший розмір, H6 – найменший). Форма запису: <H1>Заголовок розміру 1</H1>

· Горизонтальне вирівнювання тексту

Використовується параметр ALIGN в тегах <P> і <H1>…<H6>

Значення параметру ALIGN	Дія параметру
LEFT	Вирівнювання тексту по лівій межі вікна
CENTER	Вирівнювання тексту по центру вікна
RIGHT	Вирівнювання тексту по правій межі вікна
JUSTIFY	Вирівнювання тексту по ширині вікна

Приклад: <P ALIGN = RIGHT>Текст абзацу</P>

· Горизонтальні лінії

Тег <HR> проводить горизонтальну лінію

Параметри тегу <HR>	Призначення
ALIGN	Вирівнює по краю чи центру (можливі значення: LEFT, CENTER, RIGHT)
WIDTH	Встановлює довжину лінії в пікселях чи відсотках від довжини вікна
SIZE	Встановлює товщину лінії в пікселях
NOSHADE	Відміняє рельєфність лінії
COLOR	Вказує колір лінії

Приклад: <HR ALIGN = CENTER WIDTH=50% SIZE=10>

· Використання попередньо відформотованого тексту

Текст необхідно помістити в тег-контейнер <PRE>.

Форма запису: <PRE> Відформатований текст</PRE>

· Виділення великих цитат

Тег-контейнер <BLOCKQUOTE>. Текст, розмічений даним тегом, при відображенні відділяється від основного тексту пустими рядками і, як правило, виводиться з невеликим відступом вправо.

· Рухомий рядок

Тег <MARQUEE>

Форма запису: <MARQUEE параметри>текст</MARQUEE>

Параметри тега <MARQUEE>

Параметр	Призначення
WIDTH	Ширина поля рухомого рядка в пікселях або відсотках від ширини вікна
HEIGHT	Висота поля рухомого рядка в пікселях
HSPACE VSPACE	Інтервали по горизонталі і вертикалі між текстом рядка і краями його поля в пікселях
ALIGN	Положення тексту рухомого рядка в його полі. Можливі аргументи: TOP (зверху), BOTTOM (знизу), MIDDLE (посередині)
DIRECTION	Визначає напрямок руху рядка. Можливі аргументи: LEFT (справа наліво), RIGHT (зліва направо)
BEHAVIOR	Характер руху рядка. Можливі аргументи: SCROLL (текст з’являється з одного кінця і зникає за іншим), SLIDE (рядок витягується з одного кінця і зупиняється біля іншого), ALTERNATE (перемінний напрямок руху з одного кінця в інший)
LOOP	Кількість повторень тексту (число), для нескінченної кількості повторень LOOP=INFINITY
SCROOLAMOUNT	Встановлює довжину (в пікселях) „стрибка” тексту за один такт
SCROOLDELAY	Визначає величину паузи між тактами переміщення тексту в мілісекундах
BGCOLOR	Колір фону рухомого рядка

СПИСКИ

Маркований список.

Для створення маркованого списку необхідно використовувати тег-контейнер <ul> </ul>, в середині якого розміщуються всі елементи списку. Кожен елемент списку повинен починатися тегом <li>. Тег <li> не потребує відповідного закриваючого тегу.

Приклад HTML-документу з маркованим списком:

<html>

<head> <title>Приклад маркованого списку</title> </head>

<body>

<ul> <b>Знаки зодіаку:</b>

<li>Овен

<li>Тілець

<li>Близнюки

...

</ul>

</body> </html>

в тезі <ul> може використовуватися параметр type для надання різного виду маркерів, який може приймати наступні значення:

type = disc – маркери відображаються зафарбованими кругами,

type = circle – маркери відображаються незафарбованими кругами,

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

Приклад запису: <ul type = circle >.

Приклад запису: <li type = circle >.

Графічні маркери списку

В якості маркерів списку можна використовувати графічні зображення. Тут можна взагалі обійтися без тегів <li>. Достатньо буде перед кожним елементом списку вставити бажане графічне зображення. Єдиною задачею, яку необхідно буде розв’язати, буде відділення елементів списку один від одного. Для цього можна використати теги абзацу <p>, вимушеного переведення рядка <br>.

Приклад реалізації списку:

<html>

<head> <title>Приклад маркованого списку</title> </head>

<body>

<ul> <b>Знаки повітряної стихії:</b>

<img src=”шлях до файлу зображення”>Близнюки<br>

<img src=”шлях до файлу зображення”>Терези<br>

<img src=”шлях до файлу зображення”>Водолій<br>

</ul>

</body> </html>

Нумерований список

Для створення нумерованого списку необхідно використовувати тег-контейнер <ol> </ol>, в середині якого розміщені всі елементи списку. В нумерованому списку перед кожним його елементом автоматично проставляється порядковий номер. Кожен елемент нумерованого списку повинен починатися з тегу <li>.

В тезі <ol> можуть бути вказані наступні параметри: type і start. Параметр type використовується для означення виду нумерації списку. Може приймати наступні значення:

type = A – задає маркери у вигляді великих латинських літер,
type = a – задає маркери у вигляді малих латинських літер,
type = I – задає маркери у вигляді великих римських літер,
type = I – задає маркери у вигляді великих римських літер,
type = 1 – задає маркери у вигляді арабських цифр.

За замовчуванням завжди використовується значення type = 1.

Параметр start тегу <ol> дозволяє почати нумерацію списку не з одиниці. В якості значення параметру start завжди потрібно вказувати натуральне число, не залежно від виду нумерації.

Приклад запису: <ol type = A start=5>.

Приклад реалізації списку в HTML-документі:

<html>

<head> <title>Приклад нумерованого списку</title> </head>

<body>

<ol> <b>Знаки зодіаку:</b>

<li>Овен

<li>Тілець

<li>Близнюки

...

</ol>

</body> </html>

Списки означень

На відміну від інших типів списків, кожен елемент списку означень складається з двох частин. В першій частині елемента списку записується термін, а в другій частині – текст у формі словарної статті, що розкриває значення терміну.

Списки означень задаються за допомогою тега-контейнера <dl>. В середині контейнера тегом <dt> відмічається термін, а тегом <dd> – абзац з його означенням. Для тегів <dt>, <dd> можна не записувати відповідні закриваючі теги.

Взагалі, список означень записується наступним чином:

<dl>

<dt>Термін

<dd> Означення терміну

</dl>

Вкладені списки

Мова HTML не допускає автоматичну багаторівневу нумерацію списків. Тому при штучному створенню багаторівневого списку необхідно дотримуватися акуратності.

Приклад HTML-документа з вкладеними списками:

<html>

<head> <title>Приклад вкладеного списку</title> </head>

<body>

<ul> <b>Супутники деяких планет</b>

<li>Земля

<ol>

<li>Місяць

</ol>

<li>Марс

<ol>

<li>Фобос

<li>Деймос

</ol>

</ul>

</body> </html>

ТАБЛИЦІ

Елементи таблиці

Таблиці будуються за принципом вкладення і вводяться за допомогою ряду елементів. Кожна таблиця починається тегом <TABLE> і закінчується тегом </TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів <TABLE>...</TABLE> можуть вставлятися такі елементи:

· <TR> – елемент створення рядка,

· <TD> – елемент, що визначає вміст комірки даних,

· <TH> – елемент, що визначає комірку заголовка.

Приклад, що визначає шаблон створення таблиці 3*2:

<TABLE>

</TABLE>
де крапками позначається вміст кожної комірки. Усередині тегів першого рядка <TR>...</TR> замість елементів <TD> можуть розміщуватися заголовки кожного стовпця – <TH>.

Таблиця може мати і заголовок, обмежений парою тегів <CAPTION> і </CAPTION>.

· Заголовок таблиці <CAPTION>

Заголовок таблиці <CAPTION> має єдиний допустимий параметр align, який визначає розміщення заголовку:

ALIGN=TOP – заголовок над таблицею (за замовчуванням),

ALIGN=BOTTOM – заголовок під таблицею.

· Параметри тега <TABLE>

BORDER – вивід зовнішньої рамки таблиці в пікселях (за замовчуванням BORDER=1).

CELLSPACING. Форма запису: CELLSPACING = число, яке визначає відстань в пікселях між рамками сусідніх комірок як по горизонталі, так і по вертикалі (за замовчуванням CELLSPACING =2).

CELLPADDING. Форма запису: CELLPADDING = число, яке визначає розмір вільного місця (відступу) в пікселях між рамкою комірки і даними всередині комірки (за замовчуванням CELLPADDING=1).

ALIGN – задає вирівнювання таблиці у документі. Допустимі значання:

· ALIGN = LEFT – розміщення таблиці уздовж лівого краю документа,

· ALIGN = RIGHT – уздовж правого краю документа

· ALIGN = CENTER – по центру документа.

HEIGHT – задає висоту таблиці в пікселях.

WIDTH – задає ширину таблиці в пікселях чи процентах (від повної ширини вікна).
Приклад: WIDTH =200 або WIDTH = 40%.