Дизайн тексту для Web-сторінок

Теоретична довідка до лабораторної роботи № 4

Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів є парними, як наприклад, тег означення HTML-файлу: <HTML> ... </HTML>.

Усередині парного тегу <HEAD>...</HEAD> створюють заголовок документа. Основною частиною заголовка документа є заголовок Windows-вікна, який задають усередині парного тегу <TITLE>...</TITLE>. Усередині парного тегу <BODY параметри>...</ВОDY> тобто програмують те, що має відображатися у вікні.

Основні параметри тега BODY:

BACKGROUND = "шлях до графічного файлу“ – задає картинку для фона;

BGCOLOR = "blue" – задає колір фону (у даному разі блакитний), якщо не використовується картинка як фон;

TEXT = "red" – задає колір тексту (у даному разі червоний) на сторінці.

Тег <!- – ’текст --> позначає коментар. Текст усередині тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT>текст</COMMENT>.

Дизайн тексту для Web-сторінок

Спочатку розглянемо основні одинарні теги для розміщення тексту:

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

  – наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка.

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

Розглянемо парні теги форматування символів тексту:

<В> текст </В> – жирний шрифт тексту;

<І> текст </І> – шрифт-курсив;

 текст  – підкреслений шрифт;

 текст  – нижній індекс, наприклад, Н₂₀;

 текст  – верхній індекс, наприклад, Н²⁰;

<BIG> текст </ВIG> – великий шрифт, НАПРИКЛАД;

 текст  – малий шрифт, наприклад;

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

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

Зауважимо, що тег <Р> може використовуватися як парний:
<Р> текст абзацу </Р>.

Теги заголовків наведені у табл.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 – колір шрифту.

Наприклад,

 текст .

Якщо на комп’ютері клієнта встановлено шрифт 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.
⇐ Назад
123
4
Далее ⇒