Елемент (тег) BODY

У середині пари тегів < BODY па­раметри> … < /BODY> записують увесь текст сторінки. Цей текст відображатиметься у вікні броузера.

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

Розглянемо головні параметри тега BODY:

BACKGROUND =" d: \myweb\ptcturel.ipj" - Задає шлях до картинки для тла

BGCOLOR == " white" - Задає білий колір тла, якщо не використовується тло-картинка

BGPROPERTIES = " fixed" - Фонове зображення не прокручується

TEXT = " black" - Задає колір тексту (тут чорний) на сторінці

11.5 Форматування тексту для web - сторінок

Розглянемо теги, які використовують для форматування тексту.

Теги форматування символів тексту (вони парні):

< В> текст < /В> Товстий шрифт тексту

< І> текст < /! > Шрифт- курсив

< U> текст < /U> Підкреслений шрифт

< SUB> текст < /SUB> Нижній індекс. Наприклад, щоб отримати в ираз H2O, пишуть H< SUB> 2< /SUB> O

< SUP> текст < /SUP> Верхній індекс, наприклад, 1а вулиця, а2

< BIG> текст < /BIG> Великий шрифт

< SMALL> текст < /SMALL> Малий шрифт

< ЕМ> текст < /ЕМ> Виокремлений курсивом текст (те саме, що тег І)

< В> < І> текст < /І> < /В> Товстий курсив. Цейприклад демонструє застосування принципу вкладення тегів

Теги для розміщення тексту (вони одинарні):

< Р> - цей тег означає початок нового абзацу. Йогоможна записувати в кінці попереднього. Наступне після тега < Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег < Р> може використовуватися як парний: < Р> текст абзацу < /Р>.

< BR> Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка

< HR> у рядку буде проведена горизонтальна лінія

11.6 Заголовки і теги вирівнювання

Заголовок - окремий тип абзацу. Є шість видів заголовків, які відрізняються розмірами символів:

< Н1> Заголовок 1< /Н1> Заголовок 1

< Н2> Заголовок 2< /Н2> Заголовок 2

< Н3> Заголовок 3< /Н3> Заголовок 3

< Н4> Заголовок 4< /Н4> Заголовок 4

< Н5> Заголовок 5< /Н5> Заголовок 5

< Н6> Заголовок 6< /Н6> Заголовок 6

Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:

< CENTER> елемент < /CENTER> Вирівнювання до центру

< LEFT> елемент < /LEFT> Вирівнювання до лівого краю

< RIGHT> елемент < /RIGHT> Вирівнювання до правого краю

Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту.

12.1 Версії мови HTML

12.2 Шрифти, списки і таблиці

12.3 Вирівнювання елементів.

12.4 Графічні об'єкти і гіперпосилання

12.5 Адреси файлів.

12.6 Поняття про динамічні ефекти.

12.1 Версії мови HTML

Мова HTML виникла у наслідок тривалих процесів розвитку й удосконалення гіпертекстових інформаційних систем. В основі синтаксису мови лежить стандарт ISO 8879: 1986 „Information processing. Text and of­fice systems. Standard Generalized Markup Language (SGML)". Однак на практиці відхилення від стандарту майже всіма фірмами стало звичним явищем. Сьогодні нагляд за розвит­ком мови здійснює консорціум W3C - некомерційна організа­ція, створена у 1994 році з метою розробки стандартів і засо­бів для web - технологій. W3C очолює автор сучасної web - кон­цепції Тім Бернерс Лі, а учасниками консорціуму є близько 200 організацій, зокрема провідні у світі фірми Microsoft і Netscape. Під егідою консорціуму було створено низку версій мови: HTML 3.2 (1996), HTML 4 (1997), HTML 4.01 (1999). У мову були введені нові елементи: таблиці стилів, засоби ство­рення форм і фреймів, засоби, що полегшили доступ до web людям з обмеженими фізичними можливостями і та ін. З но­винками і результатами роботи консорціуму можна ознайо­митися на сайті www.w3.org. Ми дотримуватимемось синтаксису версії HTML 4.

12.2 Шрифти, списки і таблиці

Щоб задати назву конкретного шрифту, його розмір і колір, використову­ють парний тег FONT із параметрами FACE, SIZE та COLOR, наприклад,

< FONT FACE = " Decor, Arbat, Kudriashov"

SIZE = +2 COLOR - " red" >

Уміст контейнера (текст)

< /FONT>

Дія тега. Якщо на комп'ютері клієнта встановлено шрифт Decor, то він буде застосований до цього тексту, інак­ше броузер застосує шрифт Arbat чи Kudriashov, або деякий свій стандартний шрифт, наприклад Times New Roman.

Розміри символів шрифту можуть бути від 1 до 7. Роз­мір 3 вважається стандартним, він орієнтовно відповідає 10 пунктам. Розмір 7 - найбільший. Число 2 як значення па­раметра SIZE означає другий розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, аніж стандартний, тобто п'ятий, число -2 означатиме перший розмір шрифту - на дві одиниці менший, аніж стандартний. Для зміни стандартного розміру шрифту застосовують оди­нарний тег BASEFONT, який має ті самі параметри, що і тег FONT. Колір тексту буде червоний.

Основні кольори мають такі назви:

black - чорний

green – зелений

navy - темно-синій

teal – бірюзовий

silver - сірий

lime - яскраво-зелений

blue – синій

aqua – блакитний

maroon – малиновий

olive - темно-зелений

purple – бузковий

gray - темно-сірий

red - червоний

yellow – жовтий

fushsia – рожевий

while - білий

Різних можливих відтінків цих кольорів є 16 мільйонів. Відтінки задають спеціальними шістнадцятковими кодами, як це прийнято в графічних редакторах, наприклад, один з відтінків сірого кольору має код #ff7800.

Створення списків. Є три типи списків: ненумерований, нумерований, тлумачення. Список може мати заголовок, який охоплюють тегами < LH>...< /LH>, наприклад

< LH> Це заголовок списку< / LH>.

Ненумерований список утворюють за допомогою парного тега < UL>...< /UL> і одинарних тегів < LI>, наприклад, так:

< LH> Мої улюблені предмети: < / LH>

< UL>

< LI> і нформатика

< LI > англійська мова

< LI > історія

< /UL>

Нумерований список створюють за допомогою парного

тега< OL>... < /OL> з необов'язковим параметром TYPE і одинарних тегів < LI> так:

< LH> Мої улюблені предмети: < /LH>

< OL TYPE=" 1" >

< LI> Інформатика

< LI> Англійська мова

< LI> Історія

< /OL>

На екрані отримаємо:

Мої улюблені предмети:

1. Інформатика

2. Англійська мова

3. Історія

Значення " і" чи " І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі, iv,...) чи великими (І, II, III, IV,...) цифрами, а значення " а" чи " А" - латинськими малими (a, b, c, d,...) чи великими (А, В, С,...) літерами.

Список тлумачень використовують для пояснення термі­нів, створення словників тощо. Його утворюють за допомогою парного тега< DL>...< /DL> і двох одинарних тегів< DT> і < DD>.

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

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

< TABLE параметри>

< ТС> Заголовок таблиці < /ТС>

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

< /TABLE>

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

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

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

< TD> Tекст< /TD> Формують текст кожної клітинки.

Заголовки рядків і стовпців виводитимуться товстішим шрифтом.

Щоб об'єднати у рядку декілька послідовних клітинок, наприклад, дві в одну, у відповідному першому тезі < ТН> чи < TD> записують параметр ROWSPAN = 2. А щоб об'єднати у стовпці дві клітинки в одну, використовують параметр COLSPAN=2.

Колір рамки таблиці задають параметром BORDERCOLOR = " колір рамки", а колір тла клітинок - па­раметром BGCOLOR=" колір фону". Товщину рамки в пікселях задають параметром BORDER=" товщина рамки, 3". Як­що значення параметра - число нуль або параметра немає, то рамка буде невидимою.

12.3 Вирівнювання елементів

За замовчуванням більшість елементів на сторінці, наприклад, текст, таблиці, списки, текст у клітинках таблиці, броузер вирівнює до лівого краю екрана чи клітинки. Часто тип вирівнювання потрібно змінити. Лінії можна вирівнювати до центру екрана чи до правого краю. Таблиці вирівнюють відносно екрана або текс­ту, який її облямовує. Текст у клітинках таблиці вирівнюють до центру чи до країв у горизонтальному чи вертикальному напрямках. Для цього до об'єктів застосовують теги вирівню­вання CENTER, LEFT, RIGHT або у відповідних тегах < HR>, < TABLE>, < TH>, < TD> та в інших використовують параметр ALIGN зі значеннями " left" - зліва, " center" - до центру, " right" - справа, " top" - угорі, " middle" - посередині, " bottom" - унизу. Значення " top", " middle", " bottom" може мати також параметр VALIGN, який забезпечує вирівнюван­ня у вертикальному напрямку.

Для вдалого розташування таблиць чи рисунків варто поекспериментувати з параметрами WIDTH і HEIGHT, які задають ширину і висоту елемента в пікселях або відсотках до розмірів усього екрана, наприклад, < TABLE WIDTH=300> задає ширину таблиці 300 пікселів; < TABLE WIDTH=50%> задає ширину таблиці півсторінки у горизонтальному напрямку.

Параметр SUMMARY=”текст" використовують для ін­формації про призначення і структуру таблиці для клієнських броузерів, що здійснюють невізуальне подання сторінки для осіб з фізичними обмеженнями, синтезують звук чи базу­ються на принципах азбуки Бройля.

Щоб створити заголовок таблиці, застосовують елемент CAPTION з параметром ALLIGN, наприклад, так:

< CAPTION ALLIGN=" bottom" > Цe моя таблиця < /CAPTION>.

Параметри WIDTH і SIZE застосовують також для про­ведення ліній різної довжини і товщини, наприклад, тег < HR SIZE=30 COLOR=" red" > замість звичайної лінії дає червону смугу товщиною 30 пікселів.

Довідка. Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега < PRE>...< /PRE>. Текст у середині цього тега оформляють засобами табуляції. Броузер такий текст переформатовувати не буде.

12.4 Графічні об'єкти і гіперпосилання

Вставляння графічних і відеофайлів. Графічні зобра­ження, такі як фотографії, картинки, піктограми тощо, збері­гаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на web - сторінці за допо­могою тега < IMG> з параметрами:

< IMG SRС=" адреса графічного файлу"

ALT = " альтернативний текст"

ALIGN=" left"

WIDTH=240 HEIGHT=200>

Дія тега. Обов'язковим є лише перший параметр SRC. Альтернативний текст - це текст, який виводитиметься за­мість картинки, якщо броузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено. Пара­метр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT - її розміри за шириною і висо­тою в пікселях або відсотках.

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

Для створення рамки навколо зображення призначений пара­метр BORDER= " товщина рамки в пікселях".

Праворуч і ліворуч від картинки, яку обгортає текст, можна зробити вільний простір: HSPACE = " кількість піксе­лів". Можна створити вільний простір також над і під рисун­ком: VSPACE = " кількість пікселів".

За допомогою тега IMG можна вставити також відео-фільм, який запускатиметься в момент відкриття web - сторінки:

< IMG DYNSRС=" адреса відеофайлу”>.

12.5 Адреси файлів

Для виклику віддалених файлів, тобто файлів, які є на серверах у мережі Інтернет, адресу за­писують із зазначеням назви протоколу доступу http і URL-адреси файлу, наприклад,

SRC = " https://www.polynet.lviv.ua/ourpage.htm".

Для доступу до файлів на локальному диску використо­вують протокол доступу file: SRC = " file: ///диск: /шлях до фай­лу". Наприклад, SRC= " file: ///d: /mycatalog/mypage.htm". Наз­ву протоколу можна інколи не писати, наприклад, SRC = " c: /windows98/forest.bmp".

Якщо графічні чи інші файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву фай­лу, наприклад, SRC = " myfoto.gif". Якщо файл є в деякому сусідньому каталозі images, то шлях до нього подають так:

"../images/myfoto.gif". Отже, тег IMG може мати такий вигляд:

< IMG SRC=" c: /windows98/forest.bmp" АLТ=" Ліс" >.

Вставляння гіперпосилань. Гіперпосилання є двох видів:

1) на файл;

2) на деяке місце на певній сторінці:

• початок сторінки (top),

• кінець сторінки (bottom),

• позначений текст.

Гіперпосилання вставляють за допомогою парного тега < А параметр>...< /А>, де параметр HREF = " адреса файлу". Тут замість адреси можуть бути слова top чи bottom чи текст, що є позначкою.

Гіперпосиланням може бути текст або картинка. Розглянемо випадок, коли гіперпосиланням е текст. Не­хай у реченні " Мене звуть Світлана" слово " Світлана" потрібно зробити гіперпосиланням на файл " file2.htm" чи " newinf.htm", що містить додаткові відомості про Світлану. Це роблять так:

Мене звуть < А HREF == " newinf.htm" > Світлана< /А>. У наслідок цього на web - сторінці слово Світлана буде підкреслене і зображене іншим кольором.

12.6 Поняття про динамічні ефекти

Динамічними назива­ються ефекти, коли графічні зображення на web - сторінці змі­нюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишею, текст " бі­жить" уздовж екрана тощо.

Розглянемо ефект рухомого тексту у смузі, що має висо­ту HEIGHT " висота в пікселях" і тло BGCOLOR =" колір тла". Ефект створюється за допомогою парного тега < MARQUEE>...< /MARQUEE>, а саме:

< MARQUEE BGCOLOR=" green" HEIGHT = 40> Хай завжди буде coнце! < /MARQUEE>

Текст " Хай завжди буде сонце! " буде рухатись в смузі справа наліво, заходитиме за край екрана і з'являтиметься справа. Цей тег варто застосовувати до заголовків сторінки.

Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = " alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра " slide".

Значення " right" параметра DIRECTION забезпечить ефект руху у протилежний бік.

Обмеження кількості проходів задається параметром LOOP= п, де п — кількість проходів.

Смугу можна відцентрувати за допомогою параметрів HSPASE і VSPACE.

Швидкість руху задає параметр SCROLLAMOUNT= п, де п — конкретне значення, яке вибирають з діапазону від 1 (повільно) до 10 (швидко).

Зауваження. Інші динамічні ефекти створюють за допо­могою процедур з використанням мов програмування Visual Basic Script чи JavaScript. Немає єдиного стандарту мови HTML. Деякі теги чи їхні параметри не діють у всіх броузерах. Деякі теги і параметри для різних броузерів називають­ся по-різному. Якщо в написанні тега, назви параметра чи в його значенні допущено синтаксичну помилку, то тег чи па­раметр не діятимуть.