При помощи HTML-разметки можно написать текст разного начертания
(гарнитуры), размера и цвета. Для этого используется тег <font>,
имеющий несколько параметров:
Чтобы задать нужный шрифт, размер или цвет, необходимо
соответствующему параметру присвоить нужное значение:
Чтобы написать текст размером 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>
Здесь можно скачать таблицу цветов, в которой приведены основные
цвета, их названия и соответствующие им шестнадцатеричные значения.
Оформление текста
Для оформления текста существуют следующие теги, именуемые
тегами форматирования.
Теги <b> и <strong> позволяют написать жирный
текст:
<strong>Жирный текст</strong> или <b>Жирный
текст</b>
В результате оба этих варианта в браузере будут выглядеть так:
Жирный текст
Теги <i> и <em> позволяют написать текст курсивом:
<i>Текст курсивом</i> или <em>Текст курсивом</em>
В результате оба этих варианта в браузере будут выглядеть так:
Текст курсивом
Тег <u> позволяет написать подчеркнутый текст:
<u>Подчеркнутый текст</u>
В браузере увидим:
Подчеркнутый текст
Этот тег полезно использовать для выделения ссылок.
Тег <strike> позволяет написать зачеркнутый текст:
<strike>Зачеркнутый текст</strike>
В браузере увидим:
Зачеркнутый текст
Теги <sup> и <sub> позволяют написать верхний
индекс или нижний индекс соответственно. Эти теги уменьшают размер
текста и сдвигают его относительно базовой линии вверх или вниз.
Например, их можно использовать для написания формул:
E = mc<sup>2</sup> или C<sub>2</sub>H<sub>5</sub>OH
В браузере увидим:
E = mc2 или C2H5OH
Теги форматирования можно использовать совместно.
Например, чтобы сделать текст жирным и курсивным одновременно,
достаточно написать:
<b><i>Жирный курсивный текст</i></b>
И в браузере мы увидим:
Жирный курсивный текст
Обратите внимание: если тег <b> стоит первым, то
закрывающий тег </b> должен стоять в конце. Т.е. теги "вкладываюся"
друг в друга как матрешки. Именно поэтому парные теги еще называют
контейнерами.
Сводная таблица тегов форматирования:
Тег |
Действие |
Пример использования |
Результат |
<b> |
Делает текст жирным |
<b>Текст</b> |
Текст |
<strong> |
Делает текст жирным |
<strong>Текст</strong> |
Текст |
<i> |
Делает текст курсивным |
<i>Текст</i> |
Текст |
<em> |
Делает текст курсивным |
<em>Текст</em> |
Текст |
<u> |
Делает текст подчеркнутым |
<u>Текст</u> |
Текст |
<strike> |
Делает текст зачеркнутым |
<strike>Текст</strike> |
Текст |
<sup> |
Верхний индекс |
E = mc<sup>2</sup> |
E = mc2 |
<sub> |
Нижний индекс |
C<sub>2</sub>H<sub>5</sub>OH |
C2H5OH |
Заголовки
Чтобы как-то выделить заголовки в тексте, в html существуют
специальные теги заголовка. Эти теги изменяют размер текста,
сверх и снизу заголовка делаются отступы, пропорциональные его
размеру, а также после заголовка делается перенос строки. Вот эти
теги: <h1>, <h2> : <h6>. <h1> - самый
большой заголовок, <h6> - самый маленький.
Т.е. если написать:
<h1>Текст в виде большого заголовка</h1> и <h6>Текст
в виде маленького заголовка</h6>
Браузер отобразит это так:
Текст в виде большого
заголовка
и
Текст в виде маленького заголовка
Теги переноса строки и форматирования абзаца
Вот еще несколько полезных теги для форматирования текста.
Полезно знать:
Если в тесте html-документа поставить перенос
строки, то браузер его проигнорирует и отобразит
весь текст в одну строку.
Например, в тесте html-документа написано:
Идет бычок, качается,
Вздыхает на ходу...
А браузер отобразит этот текст следующим образом:
Идет бычок, качается, Вздыхает на ходу...
Тут-то нас и спасет тег <br>. Это непарный тег, означающий
переход на новую строку.
Т.е написав:
Идет бычок, качается,<br>
Вздыхает на ходу...
или
Идет бычок, качается,<br>Вздыхает на ходу...
В браузере мы увидим:
Идет бычок, качается,
Вздыхает на ходу...
С помощью этого тега можно не только перенести тест на новую
строку, но и делать отступы между разными элементами документа.
Достаточно просто вставить не один тег <br>, а два и т.д.
Полезно знать:
Если в тесте html-документа подряд стоят несколько
пробелов, то браузер их проигнорирует и отобразит
только один.
Например, в тесте html-документа написано:
Здравствуй, дорогой друг!
А браузер отобразит этот текст следующим образом:
Здравствуй, дорогой друг!
Тег <pre> используется, когда требуется написать текст как
есть, включая все пробелы и переносы строки.
Т.е. если написать:
<pre>Идет бычок, качается,
Вздыхает на ходу...</pre>
То браузер отобразит этот текст следующим образом:
Идет бычок, качается,
Вздыхает на ходу...
Но!
Не стоит злоупотреблять тегом <pre>. И по
возможности обходиться без него.
Любой текст можно, а иногда и нужно, разбить на абзацы. В html
такую функцию выполняет тег <p>. Если поместить текст между
открывающим тегом <p> и закрывающим тегом </p>, то
сверху и снизу от этого теста появится отступ, т.е. этот кусок
текста отделится от общей массы текста и образуется параграф.
По умолчанию параграф выровнен по левому краю.
Выравнивание текста
Всего в html можно задать 4 типа выравнивания: по левому краю,
по правому краю, по центру, по ширине. Чтобы
задать тип выравнивания нужно параметру align тега <p>
присвоить одно из значений:
- left (выравнивание по левому краю),
- right (выравнивание по правому краю),
- center (выравнивание по центру),
- justify (выравнивание по ширине).
Вот примеры текста с различным типом выравнивания:
по левому краю |
по правому
краю |
по центру |
по ширине |
<p align="left">Хотя Карлсон и
был лучшим в мире специалистом по
паровым машинам, денатурат он
наливал весьма неуклюже и даже
пролил его, так что на полке
образовалось целое денатуратное
озеро.</p>
|
<p align="right">Хотя Карлсон и
был лучшим в мире специалистом по
паровым машинам, денатурат он
наливал весьма неуклюже и даже
пролил его, так что на полке
образовалось целое денатуратное
озеро.</p>
|
<p align="center">Хотя Карлсон и
был лучшим в мире специалистом по
паровым машинам, денатурат он
наливал весьма неуклюже и даже
пролил его, так что на полке
образовалось целое денатуратное
озеро.</p>
|
<p align="justify">Хотя Карлсон и
был лучшим в мире специалистом по
паровым машинам, денатурат он
наливал весьма неуклюже и даже
пролил его, так что на полке
образовалось целое денатуратное
озеро.</p>
|
Результат в браузере |
Хотя Карлсон и был лучшим в мире
специалистом по паровым машинам,
денатурат он наливал весьма неуклюже
и даже пролил его, так что на полке
образовалось целое денатуратное
озеро.
|
Хотя Карлсон и был лучшим в мире
специалистом по паровым машинам,
денатурат он наливал весьма неуклюже
и даже пролил его, так что на полке
образовалось целое денатуратное
озеро.
|
Хотя Карлсон и был лучшим в мире
специалистом по паровым машинам,
денатурат он наливал весьма неуклюже
и даже пролил его, так что на полке
образовалось целое денатуратное
озеро.
|
Хотя Карлсон и
был лучшим в мире специалистом по
паровым машинам, денатурат он
наливал весьма неуклюже и даже
пролил его, так что на полке
образовалось целое денатуратное
озеро.
|
Т.к. по умолчанию задано выравнивание по левому краю, то в первом
примере параметр align="left" можно не писать.
Для задания выравнивания по ширине существует еще один тег
<center>:
<center>Хотя Карлсон и был лучшим в мире
специалистом по паровым машинам, денатурат он
наливал весьма неуклюже и даже пролил его, так что
на полке образовалось целое денатуратное
озеро.</center>
И в браузере текст отобразится по центру. Правда в таком случае
утратится свойство параграфа: отступ сверху и снизу. Но ведь оно и
не всегда требуется.
Упражнение
Скачайте файл в формате RTF, создайте
по его образу html-документ с соблюдение всех элементов оформления
текста.