2. Форматування тексту

• Шрифти: гарнітура, розмір, колір

• Оформлення тексту

• Заголовки

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

• Вирівнювання тексту

• Вправа

Шрифти: гарнітура, розмір, колір

За допомогою HTML-розмітки можна написати текст різного зображення (гарнітури), розміру і кольору. Для цього використовується тег <font>, що має декілька параметрів:

• face – для завдання гарнітури

• size – для завдання розміру

• color – для завдання кольору.

Аби задати потрібний шрифт, розмір або колір, необхідно відповідному параметру привласнити потрібне значення:

параметр="значення"

Гарнітура

Наприклад, аби написати текст шрифтом Times New Roman, необхідно вставити перед потрібним текстом тег <font> і привласнити його параметру face значення Times New Roman, а оскільки тег <font> – парний, то після необхідного тексту обов'язково потрібно вставити закриваючий тег:

<font face="Times New Roman">Текст із зображенням Times New Roman</font>

В результаті браузер відображуватиме цей рядок так:

Текст із зображенням Times New Roman

Параметру face можна привласнити декілька значень через кому:

face="Times New Roman, Times, serif"

В такому разі, браузер спочатку спробує відображувати текст шрифтом Times New Roman. Якщо такий шрифт відсутній на комп'ютері користувача, то браузер спробує відображувати текст шрифтом Times і так далі.

Розмір

Аби написати текст розміром 4, необхідно вставити перед потрібним текстом тег і привласнити його параметру size значення 4:

<font size="4">Текст розміру 4</font>

В результаті браузер відображуватиме цей рядок так:

Текст розміру 4

Що ж означає ця загадкова цифра 4?

Параметр size може набувати значень від 1 до 7. Це умовні одиниці. Середній розмір, використовуваний за умовчанням, відповідає size="3".

Отже, розмір тексту 4 – це середній розмір, збільшений на 1 умовну одиницю, а розмір 2 - це середній розмір, зменшений на 1 умовну одиницю і так далі Величина тексту, задана в такий спосіб, називається абсолютною.

Але є і інший спосіб зменшити або збільшити розмір тексту відносно розміру за умовчанням. Для цього потрібно привласнити параметру size значення "-1" або "+1" відповідно. При такому способі завдання розміру величина тексту називається відносною.

Отже, аби отримати розмір тексту 5, можна скористатися двома способами:

<font size="5">Текст розміру 5</font> або <font size="+2">Текст розміру 5</font>

Окрім перерахованих існує ще декілька способів задати розмір тексту.

Збільшити текст можна за допомогою тегу <big>:

<big>Збільшений текст</big>

В результаті браузер відображуватиме цей рядок так:

Збільшений текст

Зменшити текст можна за допомогою тегу <small>:

<small>Зменшений текст</small>

В результаті браузер відображуватиме цей рядок так:

Зменшений текст

Теги <small> і <big> можна повторити кілька разів для посилення ефекту. Наприклад, якщо в результаті рядка:

<big>Великий текст</big>

текст недостатньо великий:

Великий текст

можна написати так:

<big><big>Большой текст</big></big>

І в результаті вийде більший текст:

Великий текст

Колір

Тепер про задання кольору тексту. Аби написати текст червоним кольором, необхідно вставити перед потрібним текстом тег <font> і привласнити його параметру color значення red:

<font color="red">Червоний текст</font>

В результаті браузер відображуватиме цей рядок так:

Червоний текст

Але колір можна задати не лише по назві, але і по цифровому значенню в шістнадцятирічному форматі, який виглядає як знак # і 6 символів (цифри 0-9 і букви латинського алфавіту A-F) після нього.

Наприклад, червоному кольору відповідає шістнадцятирічне значення #FF0000. Тобто написати текст червоним кольором можна двома способами:

<font color="red">Красный текст</font> або <font color="#FF0000">

червоний текст</font>

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