Тема pівня 1 Тема pівня 6

<BASEFONT> - цей тег визначає базовий (основний розмір шрифту). Усередині елемента необхідно вказати атрибут: size=Базовий розмір шрифту

Величина атрибута може лежати в межах від 1 до 7. За замовчуванням використовується величина 3. Установка, виконувана цим елементом, має значення для елемента FONT, який дозволяє задавати відносний розмір шрифту.

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

size=Абсолютний розмір шрифту

Розмір шрифту може задаватися відносно базового:

size=+ число

size=-число

При такому визначенні величини для size необхідно враховувати величину базового розміру. Обидві вони в сумі повинні відповідати одному з абсолютних розмірів. Так для базового розміру, рівного 3, відносний розмір може перебувати в межах від -2 до +4. Якщо величина виходить за допустиму межу, то використовується або шрифт розміру 7, або шрифт розміру 1.

Для тега FONT можна використовувати атрибут кольору:

color=''Колір''

Атрибут face (вид) дозволяє задавати тип шрифта:

face=''Назва шрифту''

Якщо в системі не встановлений шрифт точно з такою ж назвою, то браузер використовує свій стандартний. Він має два призначених за замовчуванням шрифти: один пропорційний, інший моноширинний.

Інші теги форматування тексту:

<B> </B> - виділення тексту напівжирним шрифтом.

<BIG> </Big> - збільшений розмір шрифту.

<SMALL> </Small> - зменшений розмір шрифту.

<I> </I> - виділення тексту курсивом.

Теги <EM> </Em> і <DFN> </dfn> - означають виразність фрагмента тексту і визначення чого-небудь. Обидва елементи аналогічні за своєю дією елементу I, тобто, в більшості випадків дозволяють виділити текст курсивом. Вони можуть стати в нагоді тільки для того, щоб одноманітно виділити однакові за призначенням (або змістом) фрагменти тексту, що знаходяться в різних частинах документа або навіть на різних сторінках. Розробник в цьому випадку не може точно знати, який саме шрифт буде використаний: це визначається кожним броузером по-своєму. Але він може бути точно впевнений, що всі фрагменти тексту будуть відформатовані однакові.

<TT> </Tt> - позначає текст телетайпу. Його особливість полягає у використанні моноширинного шрифту.

<U> </U> - підкреслене накреслення тексту.

<STRONG> </Strong> - відповідає за виділення тексту. Зазвичай його застосування рівносильне використання елемента для виділення напівжирним.

<SUB> </Sub> - створює ефект нижнього індексу.

<SUP> </Sup> - створює ефект верхнього індексу.

2.4 Списки

Список відрізняється від звичайного тексту перш за все тим, що користувачеві не треба думати про нумерацію його пунктів: це завдання бере на себе програма. Якщо список додається новими пунктами або коротшає, нумерації коригується автоматично. У випадку ненумерованих списків програма ставить перед кожним пунктом маркери: кружечки, прямокутники, ромби або інші зображення. У результаті список приймає легкий для читання, "фірмовий вигляд". Теги для створення списків можна умовно розділити на дві групи: одні визначають загальний вид списку (і дозволяють використовувати атрибути), а інші ставлять його внутрішню структуру. Існує кілька різновидів списків:

1. Ненумерованний список (unordered list):

<UL>

<LI> Пункт 1 списку

<LI> Пункт 2 списку

<LI> Пункт 3 списку

</UL>

Елемент UL є своєрідним обрамленням списку і дозволяє відокремлювати один список від іншого.

Елемент LI позначає кожен з пунктів.

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

<OL type=''I''>

<LI> Пункт 1

<LI> Пункт 2

<LI> Пункт 3

<LI> Пункт 4

</OL>

Спосіб нумерації задається за допомогою атрибуту type.

Атрибут Послідовність нумерації

type ='' 1'' - 1, 2, 3, 4, ...

type ='' i'' - i, ii, iii, iv, ...

type ='' I'' - I, II, III, IV, ...

type ='' a'' - a, b, c, d, ...

type ='' A'' - A, B, C, D, ...

Наведемо приклад упорядкованого (нумерованого) списку:

   Пункт 1

   Пункт 2

   Пункт 3

   Пункт 4

3. Списки з визначеннями (definition lists):

<DL>

<DT> Пункт 1

<DD> Визначення пункту 1

<DD> Інше визначення пункту 1

<DT> Пункт 2

<DD> Визначення пункту 2

<DT> <Пункт 3

<DD> Визначення пункту 3

</DL>

Кожен пункт списку може бути доповнений одним або кількома блоками тексту за допомогою тегів DD. Кожен блок автоматично розміщується з нового рядка. Термін "визначення" носить умовний характер. Абзаци, розміщені в списку, можуть бутивизначеннями, доповненнями, роз'ясненнями пунктів. По суті, пункт являє собою заголовок, а визначення - довільний текст під заголовком.

2.5 Таблиці в HTML-документі

Загальний синтаксис побудови таблиць такий:

<TABLE BORDER=відступ WIDTH=розмір%>

<CAPTION> Назва таблиці </CAPTION>

текст_табліци

</TABLE>

Обов'язковий параметр BORDER задає ширину рамки таблиці в пікселах. Необов'язковий параметр WIDTH задає розмір таблиці у відсотках щодо розміру вікна браузера.

Структура таблиці будується з тегів завдання рядка - TR і комірки - TD:

<TR>

<TD> Комірка 1 </TD>

<TD> Комірка 2 </TD>

<TD> Комірка 3 </TD>

</TR>

Тут визначено рядок з трьома комірками.

Приклад таблиці:

<HTML>

<HEAD>

    <TITLE> Приклад таблиці </TITLE>

</HEAD>

<BODY>

    <TABLE BORDER=5 BGCOLOR=white>

    <CAPTION> Таблиця </CAPTION>

    <TR>

    <TD> Комірка 1</TD>

    <TD> Комірка 2 </TD>

    <TD> Комірка 3 </TD>

    <TD> Комірка 4 </TD>

    </TR>

    <TR>

    <TD> Комірка 5 </TD>

    <TD> Комірка 6 </TD>

    <TD> Комірка 7 </TD>

    <TD> Комірка 8 </TD>

    </TR>

    </TABLE>

</BODY>

</HTML>

Результат:

Таблиця
Комірка 1	Комірка 2	Комірка 3	Комірка 4
Комірка 5	Комірка 6	Комірка 7	Комірка 8

 Атрибути дескриптора TABLE:

• align - вирівнювання по горизонталі (left, center, right),

• bgcolor - колір фону (наприклад # 000000 - чорний),

• background - фонова графіка (малюнок у форматі GIF або JPEG),

• border - товщина рамки таблиці,

• bordercolor - колір рамки таблиці (IE),

• bordercolordark - темний колір рамки (IE),

• bordercolorlight - світлий колір рамки (IE),

• cellspacing - відстань між осередками таблиці,

• cellpadding - відстань між вмістом комірки і рамкою,

• width - ширина таблиці,

• height - висота таблиці.

Табличні рядки формуються дескриптором <TR>

Атрибути дескриптора TR:

• align - вирівнювання по горизонталі (left, center, right),

• bgcolor - колір фону,

• bordercolor - колір рамки рядки,

• bordercolordark - темний колір рамки рядка (IE),

• bordercolorlight - світлий колір рамки рядка (IE),

• valign - вирівнювання по вертикалі (top, center, bottom, baseline).

Комірки даних формуються дескриптором <TD>.

Атрибути дескриптора TD:

• align - вирівнювання по горизонталі (left, center, right),

• background -фонова графіка,

• bgcolor - колір фону,

• bordercolor - колір рамки рядки,

• bordercolordark - темний колір рамки рядка (IE),

• bordercolorlight - світлий колір рамки рядка (IE),

• colspan - охоплюваних осередком стовпці,

• rowspan - охоплюваних осередком рядки,

• nowrap - вимкнення розриву рядків,

• valign - вирівнювання по вертикалі (top, center, bottom, baseline),

• width - ширина комірки,

• height - висота комірки.

Тег заголовка таблиці <TH>. Його атрибути такі-ж, як і у тега <TD>.

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

Гіпертекстові посилання (гіпеpзв’язки) - це покажчик на визначене місце в поточному або іншому документі.

Для вбудовування гіперзв'язки використовується наступний загальний синтаксис: <A HREF="адрес_ресурса "> Маршрутизатор </A>

де адpес_pесуpса - URL-адpес, з яким встановлюється гіпеpзв’язок;

Маршрутизатор - це текст або інший об'єкт, при натисканні на який мишею виконується перехід за адресою, вказаною в адресі ресурса посилання.

Рекомендується укласти значення атрибута адрес_ресурса в лапки (або одинарні, або подвійні). Рядок в лапках не повинен містити такі ж лапки всередині себе.

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

Існує тpи основних типу гіперзв’язків:

• посилання на дpугое місце всередині одного документа: <BODY>           <A HREF ="#метка "> маpшpутизатоp

</A>

               Текст документа

                      . .

<A NAME="метка">

</A>

                      . . <! - В це місце буде здійснено перехід

</BODY>

• посилання на інший Internet-документ (файл):

  <A> HREF = "http://www.hitachi.com>

        монітори

</A>

При натисканні мишею в тексті HTML-документа на виділений текст "монітори" відбувається автоматичний перехід в мережі Internet на сторінку фірми Hitachi, зазначену в адресі ресурсу.

• посилання на певне місце іншого документа (файла):  <A> HREF = "http://www.hitachi.com/index.html # мітка>

Монітори

</A>

При цьому в документі index.html повинна бути позначка <A NAME="метка"> </A>

Тег <BASE>.

Цей тег призначений для установки базової адреси (URL) для посилань. Це дозволяє опускати їх початкову частину. Для використання елемента необхідна наступна конструкція:

<BASE Href=''http://компьютер/путь1''>

Фрагмент путь1 не є обов'язковим.

Якщо треба задати базову адресу для локального диску (наприклад, C:), повинна бути використана така конструкція:

<BASE href=''file://C:\путь\''>

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

У виразі абсолютної посилання можна також опустити вказівку на схему доступу (file :/ /). В цьому випадку будуть враховуватися тільки ліва частина абсолютної посилання до першого лівого символу "\", то є ім'я локального диска.

2.7. Вставка графічних і мультимедійних об'єктів.

Графічні файли можуть бути безпосередньо вбудовані в HTML-документ. Для вбудовування посилань на гpафіческіе файли використовується наступний синтаксис:

<IMG SRC="імя.файла" ALT="текстовий опис"

ALIGN="місцезнаходження">,

де IMG - тег посилання на графічний файл, шлях пошуку якого визначається значенням атрибута SRС.

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

Необов'язковий атрибут ALIGN призначений для завдання розташування виведеного текстового опису образу і може приймати значення: BOTTOM, TOP, MIDDLE. Можна задавати малюнок всередині тега, що задає гіперпосилання, в якості маршрутизатора.

<A HREF="URL"> <IMG SRC="filename.gif"> </A>

Наприклад:

<A HREF="http://www.kture.ua"> <IMG SRC="../Image/View.jpg"> </A>

Загальний синтаксис тега підключення аудіо- та відеофайлів має такий вигляд:

<A HREF="ім’я_файла"> виділений текст </A>

Коли користувач клацне кнопкою миші на виділеному тексті, бpаузеp прийме вказаний файл зі звуковим фрагментом або відео і запустить зовнішню пpогpаму для його перегляду (залежно від використовуваного формату).