Теоретична довідка до лабораторної роботи № 4
Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів є парними, як наприклад, тег означення HTML-файлу: <HTML>... </HTML>.
Усередині парного тегу <HEAD>...</HEAD> створюють заголовок документа. Основною частиною заголовка документа є заголовок Windows-вікна, який задають усередині парного тегу <TITLE>...</TITLE>. Усередині парного тегу <BODY параметри>...</ВОDY> тобто програмують те, що має відображатися у вікні.
Основні параметри тега BODY:
BACKGROUND = "шлях до графічного файлу“ – задає картинку для фона;
BGCOLOR = "blue" – задає колір фону (у даному разі блакитний), якщо не використовується картинка як фон;
TEXT = "red" – задає колір тексту (у даному разі червоний) на сторінці.
Тег <!- – ’текст --> позначає коментар. Текст усередині тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст </COMMENT>.
Дизайн тексту для Web-сторінок
Спочатку розглянемо основні одинарні теги для розміщення тексту:
<Р> – цей тег означає початок нового абзацу, але його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного по лівому краю, абзацу без відступу.
<BR> – наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка.
<HR> – буде проведена горизонтальна лінія.
Розглянемо парні теги форматування символів тексту:
<В> текст </В> – жирний шрифт тексту;
<І> текст </І> – шрифт -курсив;
<U> текст </U> – підкреслений шрифт;
<SUB> текст </SUB> – нижній індекс, наприклад, Н20;
<SUP> текст </SUP> – верхній індекс, наприклад, Н20;
<BIG> текст </ВIG> – великий шрифт, НАПРИКЛАД;
<SMALL> текст </SMALL> – малий шрифт, наприклад;
<ЕМ> текст </ЕМ> – виділений курсивом текст (те саме, що тег І);
<В> <І> текст </І></В> – жирний курсив. Цей приклад демонструє застосування принципу вкладення тегів.
Зауважимо, що тег <Р> може використовуватися як парний:
<Р> текст абзацу </Р>.
Теги заголовків наведені у табл.4.1.
| Таблиця 4.1 | |
| Теги | Результат у вікні |
| <Н1>Заголовок 1</Н1> | 
|
| <Н2>Заголовок 2</Н2> | 
|
| <Н3>3аголовок 3</Н3> | 
|
Заголовок за замовчуванням вирівнюється по лівому краю вікна.
Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:
<CENTER> елемент </CENTER> – вирівнювання по центру;
<LEFT> елемент </LEFT> – вирівнювання по лівому краю;
<RIGHT> елемент </RIGHT> – вирівнювання по правому краю.
Тег задання параметрів шрифту FONT
Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT з параметрами
FACE – тип шрифту;
SIZE – розмір шрифту;
COLOR – колір шрифту.
Наприклад,
<FONT FACE = " Monotype Corsiva, Verdana, Courier " SIZE = +2 COLOR = "green"> текст </FONT>.
Якщо на комп’ютері клієнта встановлено шрифт Monotype Corsiva, то він буде застосований до даного тексту, якщо цей шрифт відсутній – браузер застосує шрифт Verdana, далі – Courier, інакше – деякий стандартний шрифт, наприклад, Times New Roman.
Розміри символів шрифту можуть бути від 1 до 7. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, ніж стандартний, тобто п’ятий, число -2 означатиме перший розмір шрифту – на дві одиниці менший, ніж стандартний. Колір тексту буде зелений. Назви основних кольорів мовою HTML наведені у табл.4.2.
| Таблиця 4.2 | |
| Ім’я кольору | Назва кольору українською мовою |
| black | чорний |
| green | зелений |
| navy | темно-синій |
| teal | бірюзовий |
| silver | сірий |
| lime | яскраво-зелений |
| blue | синій |
| aqua | блакитний |
| magenta | малиновий |
| olive | темно-зелений |
| purple | бузковий |
| gray | темно-сірий |
| red | червоний |
| yellow | жовтий |
| fushsia | рожевий |
| white | білий |
Колір можна задавати шістнадцятковими кодами, особливо відтінки в графічних редакторах прийнято задавати шістнадцятковими кодами, наприклад, один з відтінків сірого кольору має код #ff7800.
