2.3. Теги фізичного форматування тексту

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

Так, тег-контейнер <В> виділяє укладений всередині його текст напівжирним шрифтом. Аналогічно теги <1> і <U> означають курсивне накреслення і підкреслення тексту відповідно, а тег <ТТ> - моноширинний шрифт. Теги <STRIKE> і <5> збігаються за призначенням і забезпечують перекреслення фрагмента тексту горизонтальною лінією, як наміченого до видалення. Треба відзначити, що всі ці теги є застарілими і не рекомендуються до застосування. Так, замість тегу <В> краще використовувати тег логічного форматування тексту <STRONG>, замість <STRIKE> або <5> - <DEL>, а замість <ТТ> - <CODE>.

З інших тегів «шрифтового оформлення» відзначимо <BIG> і <SMALL> які збільшують або зменшують кегль шрифту на одну одиницю, <SUB> і <SUP>, що розміщують символи вище або нижче рівня рядка. Більш універсальним у цій групі є тег <ЕОМТ>, який має три параметри: FACE, SIZE і COLOR. Перший параметр дозволяє вказати використовувану в текстовому фрагменті гарнітуру, причому, якщо така гарнітура не встановлена ​​на комп'ютері, то параметр ігнорується. Можна ставити декілька найменувань гарнітур, розділяючи їх комами, тоді буде використовуватися перша за списком з наявних. Другий параметр задає розмір (але не кегль) шрифту. Всього в мові HTML передбачено сім розмірів, з яких третій номер використовується за умовчанням. Останній параметр указує колір групи символів тексту і може задаватися у вигляді групи з семи символів, як зазначалося вище, або в найменуваннях колірних тонів. Наведемо кілька прикладів:

<FONT FACE='Arial','Courier' SIZE=5 COLOR=red> текст

</ FONT>.

<FONT FACE='Times' SIZE=2 COLOR=#ffOOOO> текст </ FONT>.

<FONT FACE='Times'> 5 <SOP> <SMALL> 2 </ SMALL> </ SOP> </ FONT>.

У першому прикладі символи тексту, що містяться всередині контейнера, будуть відображатися гарнітурою Arial, якщо вона встановлена ​​на комп'ютері, а в іншому випадку, гарнітурою Courier. Розмір символів буде досить великий і вони будуть червоного кольору. У другому прикладі буде використана гарнітура Times, розмір символів буде на одиницю менше нормального і символи будуть того ж самого червоного кольору. В останньому випадку у вікні браузера буде відображатися 52, причому розмір показника ступеню буде на одиницю менше, ніж його основа.

Третій приклад ілюструє й іншу важливу властивість тегів-контейнерів фізичного форматування текстових символів: контейнери можуть бути вкладені один в іншій, причому глибина вкладень формально не обмежена. При написанні HTML-документа вручну необхідно тільки ретельно стежити, щоб контейнери чітко розміщувалися один всередині іншого. Дійсно, у прикладі контейнер <SMALL> і </ SMALL> розташований всередині <SUB> і </ SUB>, а останній вкладено в контейнер <FONT> і </ FONT>.

Всі розглянуті вище теги фізичного форматування, якщо їх дію розглядати подібно до функцій текстових редакторів, відносяться до шрифтового оформлення текстових фрагментів. Тому далі слід зупинитися на тегах, що виконують функції, подібні до форматування абзацу. До них, зокрема, відноситься тег поділу документа на абзаци <Р>, який поміщається перед початком чергового абзацу. Закриваючий тег </ Р> не обов'язковий. Браузери зазвичай відділяють абзаци один від одного символом нового рядка. Параметром цього тегу є ALIGN, тобто вирівнювання. Параметри вирівнювання: LEFT, CENTER, RIGHT і JUSTIFY.

При відображенні документів у вікні браузера місце переведення рядка визначається автоматично, відповідно до реальних розмірів його вікна. У тих випадках, коли потрібно виконати примусове переведення рядка в певному місці, використовується тег <BR>, у якого немає закриваючого тегу. Тег <BR>, зокрема, використовується при роботі з віршованими рядками. На відміну від тегу <Р>, при використанні тегу <BR> браузер не генерує на екрані порожній рядок.

Навпаки, в тих випадках, коли перенесення на інший рядок всередині фрагмента тексту неприпустиме, слід використовувати тег-контейнер <NOBR> і </ NOBR>. Текст, що знаходиться всередині контейнера, не переноситься на інший рядок, тобто не розривається. Якщо такий рядок виходить дуже довгим, то у вікні перегляду браузера автоматично з'являється смуга прокрутки.

Розмір тексту, вміщеного всередині HTML-документа, формально не обмежений, тобто він може бути еквівалентний безлічі друкованих сторінок. На практиці це призводить до появи довгих сторінок, для перегляду яких потрібна вертикальна смуга прокрутки. Тому передбачена можливість розбивки такого тексту на окремі розділи і параграфи з допомогою заголовків різного рівня.

Для розмітки заголовків служать шість тегів-контейнерів <Н1>. . <Н6>, причому теги з меншими номерами визначають заголовки більш високого рівня. Всі ці теги відносяться до рівня блоку, тобто не можуть використовуватися для розмітки окремих слів. Як єдиний параметр цих тегів використовується ALIGN, який задає спосіб вирівнювання заголовка (точно так само, як в тезі <Р>). Наприклад,

<Hl ALIGN=CENTER> Заголовок 1-го рівня </ Н1>

<НЗ ALI6N = LEFT> Заголовок 3-го рівня </ НЗ>.

У першому прикладі заголовок вирівнюється по центру і в ньому використовується найбільший розмір кегля шрифту, такий як в тезі <FONT SIZE=7>. У другому випадку текст заголовка вирівнюється по лівому краю, а розмір шрифту відповідає значенню параметру SIZE = 5. У всіх випадках заголовки виділяються світлим простором у вигляді пропущеного рядка до і після рядка заголовка і напівжирним шрифтом самого заголовка. Нарешті, тег заголовка акумулює функції тегу абзацу, тобто немає необхідності у використанні одночасно з тегом <НЗ> ще й тегу <Р>.

Крім заголовків, для поділу документа на окремі розділи можуть використовувати горизонтальні лінії, що відіграють ту ж роль, що й орнаментальні лінійки в друкованих виданнях, де такі лінійки використовуються в кінці певних розділів, відокремлюючи попередній фрагмент від наступного. Для генерації таких ліній в електронному документі використовується тег <ВР>, який не є контейнером. У тегові можуть використовуватися п'ять різних параметрів. Параметр вирівнювання ALIGN може приймати значення LEFT, CENTER і RIGHT. Параметр WIDTH задає довжину лінії в пікселях або у відсотках від ширини вікна браузера, що зазвичай краще, a SIZE визначає товщину лінії в пікселях. Параметр COLOR визначає колірні характеристики лінії, тобто реалізує ті ж функції, що й аналогічний параметр в тезі <Р>. Нарешті, параметр NOSHADE скасовує рельєфний характер лінії, причому у нього значення відсутній, сама наявність в тегові цього параметру характеризує відсутність рельєфу. Приклад запису тегу:

<ВР ALIGN = CENTER WIDTH = 75% SIZE = 8 COLOR = # 800080>

На практиці ми іноді стикаємося з випадками, коли в HTML-документ необхідно включити вже відформатований текст, причому він повинен відображатися браузером так, як він був підготовлений в текстовому редакторі. Для цього передбачено тег-контейнер <PRE>. Після цього тегу можна включити попередньо відформатований текст, який повинен у тому ж вигляді виводитися у вікні браузера.

Для включення великих (багато сотень символів) призначений тег-контейнер <BLOCKQUOTE>.

Це - тег рівня блоку. Браузери виділяють текст, розміщений всередині такого контейнера, порожніми рядками до і після і невеликим відступом зліва по відношенню до основної частини документа. Тому тег <BLOCKQUOTE> можна використовувати не тільки для довгих цитат, але й для виділення деяких блоків тексту.

З інших тегів рівня блоку, використовуваних для виділення фрагментів документа, можна відзначити <DIV>. Використовуючи контейнер з цим тегом, можна управляти параметрами даного фрагмента шляхом призначення стилів, наприклад

<DIV STYLE='color: green'> (Фрагмент документа) </ DIV>

виділить всі текстові елементи зазначеного фрагмента зеленим кольором.

Тег-контейнер рівня блоку <CENTER> призначений для горизонтального вирівнювання всіх вміщених у нього елементів посередині вікна перегляду браузера. Зокрема, він використовується для вирівнювання по центру таблиць.

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

Специфічним видом тексту, який іноді включають в електронне видання і цінність якого, на наш погляд, сумнівна, є рухомий рядок. Зате на Web-сторінках такі фрагменти нерідко використовуються, переважно в рекламних цілях. Для створення рухомого рядка використовується тег-контейнер <MARQUEE>. У тегові використовується ряд параметрів: DIRECTION, BEHAVIOR, WIDTH, HEIGHT, LOOP, SCROLLDELAY, BGCOLOR. Перший параметр визначає напрямок руху рядки і приймає значення LEFT або RIGHT. Параметри WIDTH і HEIGHT дозволяють задати розміри вікна, в якому рухається рядок тексту. Розміри задаються в пікселях або у відсотках від ширини і висоти сторінки. Параметр LOOP задає число повторів циклу переміщення рядки, якщо він взагалі не згадано, то число повторів нескінченно. Параметр SCROLLDELAY визначає період повторення зображення рухомого тексту в мілісекундах. Нарешті, значення BGCOLOR дозволяє стандартним способом визначити колір фону вікна, в якому рухається рядок тексту. Якщо потрібно змінити гарнітуру, кегль, інші параметри шрифту рухомого рядка, то слід тег-контейнер <MARQUEE> помістити всередину тег-контейнера <FONT>, в якому і задати всі характеристики шрифту.