Форматирование текста в HTML. | Печать |  E-mail
(4 голоса, среднее 4.00 из 5)
Создание статического сайта - Основы HTML. тэгов Надстрочный надстрочный
10.01.2011 00:00

Форматирование текста в HTML.

Будем двигаться дальше по пути создания своего сайта. Для этого рассмотрим некоторые теги форматирования текста в HTML. Мы с Вами остановимся на создании заголовков, Вы узнаете, как задаётся размер, цвет, начертание (гарнитура) шрифта в html и как абсолютно и относительно изменить размер шрифта. По ходу также рассмотрим и много других всяких полезностей.

Создание параграфов. Он же абзац. Тег <p>.

Параграфы или абзацы в html задаются парой тегов <p> … </p>. Следует заметить, что закрывающий тег </p> не является обязательным, т.к. начало следующего параграфа (абзаца) закрывает предыдущий. По умолчанию, если не указать явно, с помощью атрибута align, выравнивание в абзаце будет слева, а правый край – «как получится». При форматировании, для выравнивания текста в абзаце, также как и в таблицах html используется атрибут align. Он может принимать значения: left - слева, center – по центру, right - справа, justify – во всю ширину. А теперь пример форматирования текста в html при помощи тега <p>.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ru">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Форматирование текста в HTML</title>
</head>
<body>
<p>В первом абзаце обычно следует обозначить цели занятия, будь то лекция,
практикум или какое либо другое методическое пособие.
<p>Во втором абзаце следует разместить вступительную часть или плавно
переходить к основному материалу, если вступление уже состоялось.
</body>
</html>


Тег <p>

Принудительное завершение строки. Тег <br>.

Для того чтобы остаться в абзаце, но перейти на новую строку при форматировании текста в html используется тег <br>. Закрывающей пары для тега <br> не существует в принципе. Тег <br> часто используют для стихотворных форм или для набивания пустых строк. Поэкспериментируйте с этим тегом самостоятельно. Кроме того тег <br> имеет атрибут clear, который предназначен для различных способов обтекания объектов текстом.

Создание заголовков. Теги <H1>, <H2>, <H3>, <H4>, <H5>, <H6>.

Ну, кто не знает, для чего нужны заголовки? Они нужны для обозначения разделов, подразделов и т.д. В нашем же случае, поскольку мы ещё собираемся и зарабатывать в Интернете, то заголовки имеют важное значение и при оптимизации страниц.

При форматировании текста в html выделяют 6 уровней заголовков. Заголовки задаются тегами <H1> ... </H1>, <H2> ... </H2> и т.д. <H6> ... </H6>. Заголовок, окружённый тегами <H1>… </H1> является заголовком 1-го уровня, имеет самое крупное начертание и самый большой вес. Соответственно <H6> … </H6> - это заголовок 6-го уровня и будет иметь самое мелкое начертание и наименьший вес среди заголовков.

А вот и пример того как задать заголовки в html.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ru">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Теги <H1>, <H2>, <H3>, <H4>, <H5>, <H6></title>
</head>
<body>
<H1>Такой заголовок должен быть один на странице</H1>
<H2>Заголовок HTML 2-го уровня</H2>
<H3>Заголовок HTML 3-го уровня</H3>
<H4>Заголовок HTML 4-го уровня</H4>
<H5>Заголовок HTML 5-го уровня</H5>
<H6>Заголовок HTML 6-го уровня</H6>
</body>
</html>

Теги h1, h2, h3, h4, h5, h6

Предварительное форматирование. Тег <pre>.

При помощи тега <pre> у разработчика возникает возможность предварительно отформатировать текст либо другие элементы. В блоке, окружённом тегами <pre> … </pre>, сохраняются все элементы форматирования и пробелы, идущие подряд, что является роскошью для остальных тегов. Шрифт на выходе, обычно, моноширинный.

Пример использования тега <pre>.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ru">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Тег pre</title>
</head>
<body>
<pre> ||||||| |||||| ||||||| ||||||| |||||| ||||| ||||| || || || || || || || || || || || || || || || || || || || || ||||||| |||||| ||||||| ||||||| |||||| ||||| |||||| || |||| || || || || || || || || || || || || || || || || || || || || ||||||| ||||||| |||||| ||||| || || </pre>
</body>
</html>

Тег pre

Размер, цвет и гарнитура (начертание) шрифта в html. Как изменить размер шрифта. Теги <font> и <basefont>.

Тег <font> позволяет разработчику управлять размером, цветом и начертанием используемого шрифта. В последнее время веб разработчики больше используют стили, но тег <font> востребован и сегодня. Он поддерживается всеми типами браузеров.

Тег <font> имеет три атрибута. Размер шрифта в html задаётся при помощи атрибута size, начертание шрифта – с помощью атрибута face и цвет шрифта устанавливается атрибутом – color.

Пример форматирования текста при помощи тега <font>.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ru">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Форматирование текста в HTML</title>
</head>
<body>
<p><font size="6" color="blue" face="Tahoma">Р</font>азмер шрифта первой буквы равен 6, цвет шрифта – голубой, начертание шрифта - Tahoma.</p>
</body>
</html>

Тег font

В html размер шрифта можно менять и относительно. С помощью тега <bacefont> можно изменить базовый размер, который по умолчанию равен 3. Для изменения размера шрифта достаточно указать в атрибуте size любое число от 1 до 7 со знаком + или -. Тегу <basefont> присущи такие же атрибуты, что и тегу <font>.

Пример относительного изменения размера шрифта.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ru">
<head>
<meta content="text/html; charset=windows -1251" http-equiv="content-type">
<title>Форматирование текста в HTML</title>
</head>
<body>
<basefont size=5>
Базовый размер шрифта установлен в 5.
<br>
<font size=+6>Размер шрифта увеличен на 6 единиц.
</font>
<br>
<font size=-3>Размер шрифта уменьшен на 3 единицы.
</font>
</body>
</html>

Тег basefont

Примечание: проверяйте результат своей работы при использовании тега <basefont>. Не все типы браузеров поддерживают этот тег корректно.

 

Обновлено 07.02.2011 23:48
 
Rambler's Top100
Main page Contacts Search Contacts Search