Здравствуйте. Думаю, что сегодня стоит поговорить о форматировании текста.

Форматирование текста - это то, с чем мы часто встречаемся при создании и написании материалов на свой сайт. Обычно к этому процессу относятся следующие действия: выделение жирным, курсив, изменение цвета, изменение "семейства" шрифта и им подобные.

Грамотное форматирование помогает улучшить читабельность и восприятие наших статей. Поэтому все теги и атрибуты, связанные с данным действием, мы должны знать на зубок.

Тег FONT

Описание:

Тег, отвечающий за изменение размера, цвета и "семейства" определённого текста.

Атрибуты:

color - изменение цвета
face - изменение "семейства"
size - изменение размера

Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Форматирование</title>
</head>
<body>
<font color="#CC0099">Грамотное форматирование</font> помогает улучшить читабельность и восприятие наших статей.
</body>
</html>

Результат:

Грамотное форматирование помогает улучшить читабельность и восприятие наших статей.

Теперь попробуем изменить размер и цвет всей фразе, но слово "читабельность" выделить отдельным цветом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Форматирование</title>
</head>
<body>
<font color="#CC0099">Грамотное форматирование помогает улучшить <font color="#006666" size="5">читабельность</font> и восприятие наших статей.</font>
</body>
</html>

Получаем:

Грамотное форматирование помогает улучшить читабельность и восприятие наших статей.

Заметили, что в одном теге FONT присутствует другой? Это говорит о том, что вся фраза должна быть розового цвета, кроме слова "читабельность".

Аналогичным образом меняется и "семейство":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Форматирование</title>
</head>
<body>
<font face="Georgia, Tahoma" color="#CC0099">Грамотное форматирование помогает улучшить <font color="#006666" size="5">читабельность</font> и восприятие наших статей.</font>
</body>
</html>

Имеем:

Грамотное форматирование помогает улучшить читабельность и восприятие наших статей.

Например, браузер анализирует нашу страницу и видит, что в основном теге прописан розовый цвет и размер, а во вложенном прописан только цвет. Поэтому цвет, указанный у вложенного тега будет зелёный, а вот размер не указан, поэтому размер, указанный в главном теге, действует и на вложенный.

Тег EM

Описание:

Тег предназначен для выделения шрифта курсивом.

Атрибуты:

Отсутствуют

Для примера предлагаю взять нашу фразу, над которой мы работали ранее, и оформить её курсивом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Курсив</title>
</head>
<body>
<em><font face="Georgia, Tahoma" color="#CC0099">Грамотное форматирование помогает улучшить <font color="#006666" size="5">читабельность</font> и восприятие наших статей.</font></em>
</body>
</html>

Результат:

Грамотное форматирование помогает улучшить читабельность и восприятие наших статей.

Тег STRONG

Описание:

Тег предназначен для выделения шрифта жирным начертанием.

Атрибуты:

Отсутствуют

В нашей фразе предлагаю выделить слово "статей" жирным. Для этого поместим слово в STRONG:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Жирное начертание</title>
</head>
<body>
<em><font face="Georgia, Tahoma" color="#CC0099">Грамотное форматирование помогает улучшить <font color="#006666" size="5">читабельность</font> и восприятие наших <strong>статей</strong>.</font></em>
</body>
</html>

Результат:

Грамотное форматирование помогает улучшить читабельность и восприятие наших статей.

Вот это винегрет(:

Тег P

Описание:

Тег, который создаёт текстовый абзац. Текст, который заключен в данный тег, будет отображаться с новой строки.

Атрибуты:

align - определяет выравнивание текста

Параметры атрибуты ALIGN:

left - выравнивание по левому краю (по умолчанию)
right - выравнивание по правому краю
justify - выравнивание по и левому краю, и по правому

Вот наглядный пример применения параграфов при форматировании:

Применение параграфов при форматировании в HTML

Разобьём теперь сами данный текст на абзацы:

Кстати, в слове "читабельность" тоже изменилось "семейство". Это говорит о том, что атрибуты главного тега FONT действуют и на вложенные, но только в том случае, если во вложенном данный атрибут не указан. Например, браузер анализирует нашу страницу и видит, что в основном теге прописан розовый цвет и размер, а во вложенном прописан только цвет. Поэтому цвет, указанный у вложенного тега будет зелёный, а вот размер не указан, поэтому размер, указанный в главном теге, действует и на вложенный.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Абзацы</title>
</head>
<body>
<p>Кстати, в слове "читабельность" тоже изменилось "семейство". Это говорит о том, что атрибуты главного тега FONT действуют и на вложенные, но только в том случае, если во вложенном данный атрибут не указан.</p>
<p>Например, браузер анализирует нашу страницу и видит, что в основном теге прописан розовый цвет и размер, а во вложенном прописан только цвет. Поэтому цвет, указанный у вложенного тега будет зелёный, а вот размер не указан, поэтому размер, указанный в главном теге, действует и на вложенный.</p>
</body>
</html>

Отлично, с этим разобрались. Теперь осталось поговорить о выравнивании. Различают несколько вариаций выравнивания.

По правому краю:

По левому краю:

По обеим краям:

По умолчанию текст выравнивается по левому краю, поэтому если вы и задумали выравнивать по этому краю, то не стоит прописывать align

Пример кода по выравниванию с обеих сторон:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Выравнивание</title>
</head>
<body>
<p align="justify">Кстати, в слове "читабельность" тоже изменилось "семейство". Это говорит о том, что атрибуты главного тега FONT действуют и на вложенные, но только в том случае, если во вложенном данный атрибут не указан.</p>
<p align="justify">Например, браузер анализирует нашу страницу и видит, что в основном теге прописан розовый цвет и размер, а во вложенном прописан только цвет. Поэтому цвет, указанный у вложенного тега будет зелёный, а вот размер не указан, поэтому размер, указанный в главном теге, действует и на вложенный.</p>
</body>
</html>

Часто встречаю вместо параграфов следующую запись:

<p>Первый текст<br/><br/>Второй текст</p>

В таких случаях нужно избегать тега BR и стоит использовать два параграфа:

<p>Первый текст</p>
<p>Второй текст</p>

На этом у меня всё. До новых встреч!

Урок №10 - Форматирование текста

Тег FONT

Описание:

Атрибуты:

Тег EM

Описание:

Атрибуты:

Тег STRONG

Описание:

Атрибуты:

Тег P

Описание:

Атрибуты:

Параметры атрибуты ALIGN:

Добавление комментария:

Популярные статьи

Популярные уроки

Copyright ©2009, Selkin Vitaly. Design by Selkin Vitaly. Hosting of Best-Hoster. Cyclonet