Урок 6. Форматируем текст

Как мы уже знаем, таблицы пишутся слева направо и сверху вниз. Точно так же двигаемся мы по странице нашего сайта.
Следующая по ходу нашего продвижения - центральная ячейка второй таблицы. Сюда мы будем вставлять текст. Необязательно заполнять таблицу именно в таком порядке, но в данном случае я соблюдаю этот порядок для наглядности.
Для того, чтобы текст выглядел так, как нам нужно, необходимо его отформатировать, задать если нужно отступ, шрифт, размер шрифта и прочие необходимые нам параметры.

1. Можно не ставить никакого выравнивания, просто написать текст и он по умолчанию выровняется по левому краю. А можно специально выровнять текст по центру, по левому, по правому краю или по ширине текста. Соответственно, атрибуты, которые для этого нужны:
align ="left" - по левому краю;
align ="center" - по центру;
align ="right" - по правому краю;
align ="justify" - по ширине текста.

Примечание: Если вы хотите поставить текст на страницу, без таблицы (я приводила пример страницы, сделанной без таблицы: как в этой Новеллизации ) - вы просто ставите атрибут выравнивания в тег абзаца: <p align="justify"> И далее пишете ваш текст, сколько бы его ни было. Закрывающий тег </p> в конце текста в данном случае ставить необязательно.

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

<div align="center"> Текст, выровненный по центру </div>

Выглядеть такой текст будет так:

Если нужный нам текст мы вставляем в ячейку таблицы, атрибут выравнивания нужно прописать в тэге соответствующей ячейки, в данном случае в центральной ячейке нашей второй таблицы.
Лучше всего смотрится текст, выровненный по ширине. Именно так выравнивается текст в книгах, журналах и прочих печатных образцах. Поэтому поставим выравнивание в ячейке по ширине текста. Тэг ячейки будет выглядеть так:

<td align ="justify"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </td>

2. Теперь зададим атрибуты самого текста: шрифт, цвет шрифта и размер шрифта. Для этого нужны такие атрибуты:
2.1. font - означает шрифт;
face - лицо, то есть, наименование шрифта в языке HTML. Аналогично для задания стиля используется слово "family", о нём скажем позднее;
<font face="Arial"> Шрифт "Arial" </font>
Шрифт Arial

2.2. color - цвет;
<font color="#f706f4"> Цвет шрифта (в данном случае сиреневый) </font>
Цвет шрифта (в данном случае, сиреневый)

2.3. Атрибут size задаёт размер шрифта;
Можно прописать размер шрифта в пунктах:
<font size="+4"> Крупный шрифт </font>

Крупный шрифт

<font size="-2"> Мелкий шрифт </font>

Мелкий шрифт

Но я не рекомендую пользоваться таким способом, потому что размер шрифта будет зависеть от браузера пользователя. Пользователь зашедший с браузера Опера, где по умолчанию стоит масштаб 100%, увидит ваш шрифт font size="+4" умеренно крупным и легко читаемым. Пользователь, зашедший с Internet Explorer, на котором по умолчанию стоит "Самые крупные значки" увидит ваш текст просто гигантским и станет думать, не рассчитан ли ваш сайт на слабовидящих.
Лучше задать более точные параметры

Можно прописать размер шрифта при помощи стиля, вот так: STYLE="font-size:24pt". Если мы зададим размер шрифта 20pt таким способом, то вся строчка будет выглядеть так:
<FONT STYLE="font-size:20pt"> Размер шрифта 20pt. </font>
Размер шрифта 20pt.
И зададим одновременно цвет - сиреневый и размер шрифта - 24pt:
<FONT COLOR=#f706f4 STYLE="font-size:24pt"> Размер шрифта 24pt. </font>
Размер шрифта 24pt.

Обратите внимание, что если вы прописываете стиль, то между font и size ставится дефис: font-size.
Слово STILE может относиться не только к шрифту, но и ко множеству других значений. Поэтому если вы прописываете стиль - атрибут, указывающий на то, что вы задаёте стиль именно размера шрифта ("font-size: 24pt"), берётся в кавычки весь: STILE="font-size: 24pt"

Пояснение: Название шрифта вы можете взять либо из соответствующих разделов любых уроков HTML, либо в программе Microsoft Word. Но помните, что далеко не все шрифты отражаются в разных браузерах, поэтому увлекаться экзотическими шрифтами не стоит.

Пояснение 2: цвет шрифта можно задавать и словами (red, blue, green и т.п.), но тогда лучше писать вот так:

<span style="color: red;" > ТЕКСТ </span>

ТЕКСТ

Атрибут span означает, что мы имеем дело со встроенным элементом абзаца. Он используется для изменения вида текста или его логического выделения. Например, цветом.

Названий цвета, которые в состоянии прочесть браузер, не так много, поэтому рекомендую пользоваться их числовыми значениями. Для того, чтобы узнать эти числовые значения, можно обратиться к многочисленным таблицам цветов, либо к программе Фотошоп.
Можно воспользоваться вот этими таблицами цветов:

http://www.artlebedev.ru/tools/colors/
http://www.antula.ru/palitra.htm
http://fantasyflash.ru/index.php?&kontent=palitra2
http://webmastertools.narod.ru/OnlineTools/palettes.html
http://mytopics.narod.ru/palette/index.html
http://www.antula.ru/colour-name_2.htm
http://www.antula.ru/colour-name_3.htm
http://he-lp.narod.ru/cvetinazvanie.htm
http://www.stm.dp.ua/web-design/color-html.php


И любые другие таблицы цветов, какие только сможете найти. "Опасные" или "безопасные" цвета - значения не имеет. Они читаются все в равной степени. Разница состоит лишь в возможностях монитора каждого пользователя.

3. Пропишем внутрь ячейки тэг с атрибутами, необходимыми для того, чтобы задать параметры нашего текста. Порядок записи атрибутов внутрь тэга не важен. Цвет шрифта я задаю в данном случае - #000000 - чёрный:

<td align ="justify"> <font face="Arial" font color="#000000" style="font-size: 14pt"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </font> </td>

Примечание: не забывайте, что каждый тэг нужно закрыть. В данном случае, вы сперва закрываете внутренний тэг ( </font> ), а потом наружный, то есть ячеку (</td> ).

4. Теперь надо задать абзац и красную строку.
Тэг <p> означает "Абзац" (от слова параграф - paragraf). Если поставить его там, где должен начинаться новый абзац, на странице мы увидим дополнительный отступ вниз. Но нет "красной строки", Как сделано вот в этой новеллизации
Если вас это устраивает, можете смело употреблять тэг <p> . В этом случае, его даже закрывать не нужно.
Чем тэг <p> отличается от тэга <br>, ведь они оба дают команду начать текст с новой строки и оба не дают отступа Красной строки.
Тэг <p> как бы пропускает пустую строку перед следующим абзацем. Отчего текст выглядит менее монолитным. Тэг <br> этого не делает, от просто переносит слово или предложение на новую строку.
Тэг <p>, даже если вы поставите их много раз подряд: <p> <p> <p> <p> - сделает лишь один пропуск строки, не более. А тэг <br>, если вы поставите его несколько раз подряд - отодвинет текст на столько же строк, сколько раз вы написали этот тэг.
Однако, вернёмся к проблеме Красной строки, которую ни тэг <br>, ни тэг <p> решить не могут.
Есть такой способ: можно перед каждым отступом Красной строки поставить несколько пробелов. Они обозначаются вот такой кадаброй: &nbsp;
В языке HTML эта конструкция используется для ввода специальных символов. Если браузер встречает в тексте вот такой знак (&) (он называется - амперсанд), он начинает интерпретировать следующие за ним буквы как код специального символа. Так продолжается до тех пор, пока не встретится точка с запятой. В данном случае мы используем &nbsp; для добавления пробела. Добавив несколько пробелов, мы получим отступ.
Если добавить восемь таких конструкций - &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - у нас получится отступ на восемь знаков.

Но, к сожалению, этот текст будет выглядеть ровно, только в браузерах FireFox и Internet Explorer. В браузере Opera, он будет выглядеть... м-м-м... Как молодой бычок пописал... В общем, очень неровно.
Если вы хотите чтобы ваш текст всегда, во всех браузерах выглядел профессионально, вам нужно прибегнуть к более сложному способу.

Для того, чтобы задать отступ абзаца, нужно прописать для него стиль и назвать его, к примеру, "p1". Я уже объясняла, что стиль начинается с атрибута "style". Только сейчас этот атрибут будет отвечать не за цвет или размер шрифта, а за абзац и отступ текста. Этот стиль нужно записать так:

<style type="text/css"> .p1 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-indent: 1.5em; text-align: justify; } </style>

Значение text-indent: 1.5em; - это и есть наш отступ. Значения margin и padding мы обнуляем, чтобы никаких лишних отступов в нашем тексте не было.
Теперь нужно вставить значение стиля текста в код страницы, между <head> </head> (этот фрагмент находится в самом верху страницы, там, где начинается HTML). Выглядеть это будет так:

<html> <head> <style type="text/css"> .p1 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-indent: 1.5em; text-align: justify; } </style> <title> Наша первая страница </title> </head> <body bgcolor="#c0c0c0" background="f3.gif">

Теперь весь текст, который вы поставите в тэги вот таким образом - <p class="p1"> ТЕКСТ </p> будет выровнен по ширине и иметь отступ красной строки 1,5. В данном случае, тэг абзаца нужно обязательно закрыть тэгом: </p> . А любой текст, который не стоит внутри этих тэгов, будет либо выровнен по умолчанию, либо так, как вы укажете в самой ячейке.

Примечание: поскольку мы уже задали выравнивание по ширине, задав класс текста p1, нам необязательно оставлять выравнивание текста в самой ячейке и значение align ="justify" можно удалить, чтобы не было лишних атрибутов. Или оставить, если вы будете вводить в ячейку ещё текст, но помимо стиля p1, с другими параметрами.
Я задала два абзаца, чтобы результат был более нагляден.
Теперь наш фрагмент с двумя абзацами текста будет записываться так:

<td> <font face="Arial" font color="#000000" style="font-size: 14pt"> <p class="p1"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p> <p class="p1"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p> </font> </td>

5. Вставляем полученную конструкцию на нашу страницу, в среднюю ячейку второй таблицы. Вместе с таблицей HTML-код теперь будет выглядеть так:

<html> <head> <style type="text/css"> .p1 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-indent: 1.5em; text-align: justify; } </style> <title> Наша первая страница </title> </head> <body bgcolor="#c0c0c0" background="f3.gif"> <table width="100%" border="3" VALIGN=top> <td> <table width="100%" border="1"> <td align="left"> <img src="logo.jpg" border="0"> </td> <td WIDTH=200px> <table width="100%" border="3" VALIGN=top> <td> <table width="100%" bgcolor=#e5e5e7 border="0"> <tr> <td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td> </tr> <tr> <td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a> </td> </tr> </table> </td> </table> </td> </table> <table width="100%" border="1"> <td WIDTH=200px VALIGN=top> <table width="100%" border="3"> <td> <table width="100%" bgcolor=#e5e5e7 border="0"> <tr> <td align="center" WIDTH=19px> <a href="http://forum.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://forum.dugward.ru"> Форум </a> </td> </tr> <tr> <td align="center" WIDTH=19px> <a href="http://lezione.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://lezione.dugward.ru"> Как мы делали этот сайт </a> </td> </tr> </table> </td> </table> </td> <td> <font face="Arial" font color="#000000" style="font-size: 14pt"> <p class="p1"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p> <p class="p1"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p> </font> </td> <td WIDTH=200px> Баннеры <br> и реклама </td> </table> <table width="100%" border="1"> <td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td> </table> </body> </html>

Синим цветом я обозначила вставляемый стиль p1, а красным - ячейку с текстом, для которого мы задавали параметры.

6. Заменяем весь этот HTML-код нашей первой страницы полностью и получается вот что:
Наша первая страница с текстом в центральной ячейке

7. Как видите, получилось не слишком красиво, потому что текст "прилипает" к границам таблички. От этого можно спастись разными способами. Самый привычный - положить текст в ещё одну табличку на одну ячейку, но задать ей border="0", а размер не 100%, а 95%. При этом в средней ячейке, в которую мы вставляем эту табличку, для всей ячейки задать выравнивание по центру, чтобы наша табличка с текстом встала строго по центру ячейки. Тогда код будет выглядеть так:

<html> <head> <style type="text/css"> .p1 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-indent: 1.5em; text-align: justify; } </style> <title> Наша первая страница </title> </head> <body bgcolor="#c0c0c0" background="f3.gif"> <table width="100%" border="3" VALIGN=top> <td> <table width="100%" border="1"> <td align="left"> <img src="logo.jpg" border="0"> </td> <td WIDTH=200px> <table width="100%" border="3" VALIGN=top> <td> <table width="100%" bgcolor=#e5e5e7 border="0"> <tr> <td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td> </tr> <tr> <td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a> </td> </tr> </table> </td> </table> </td> </table> <table width="100%" border="1"> <td WIDTH=200px VALIGN=top> <table width="100%" border="3" VALIGN=top> <td> <table width="100%" bgcolor=#e5e5e7 border="0"> <tr> <td align="center" WIDTH=19px> <a href="http://forum.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://forum.dugward.ru"> Форум </a> </td> </tr> <tr> <td align="center" WIDTH=19px> <a href="http://lezione.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://lezione.dugward.ru"> Как мы делали этот сайт </a> </td> </tr> </table> </td> </table> </td> <td> <table width="100%" border="3"> <td align="center"> <table width="95%" border="0" VALIGN=top> <td align="center"> <font face="Arial" font color="#000000" style="font-size: 14pt"> <p class="p1"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p> <p class="p1"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p> </font> </td> </table> </td> </table> </td> <td WIDTH=200px> Баннеры <br> и реклама </td> </table> <table width="100%" border="1"> <td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td> </table> </body> </html>

Зелёным цветом я обозначила ещё одну табличку, которую вставила для того, чтобы текст отступил от края основной ячейки.
Единственное, что я забыла - это прописать цвет фона для ячейки таблицы, в которой стоит наш текст. Сделаем это сейчас. Поскольку мы прописываем цвет фона ячейки, а не всей таблицы, то и вставляем мы соответствующий атрибут в тег ячейки (я обозначила вставку жирным шрифтом):

<html> <head> <style type="text/css"> .p1 { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-indent: 1.5em; text-align: justify; } </style> <title> Наша первая страница </title> </head> <body bgcolor="#c0c0c0" background="f3.gif"> <table width="100%" border="3" VALIGN=top> <td> <table width="100%" border="1"> <td align="left"> <img src="logo.jpg" border="0"> </td> <td WIDTH=200px> <table width="100%" border="3" VALIGN=top> <td> <table width="100%" bgcolor=#e5e5e7 border="0"> <tr> <td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td> </tr> <tr> <td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a> </td> </tr> </table> </td> </table> </td> </table> <table width="100%" border="1"> <td WIDTH=200px VALIGN=top> <table width="100%" border="3" VALIGN=top> <td> <table width="100%" bgcolor=#e5e5e7 border="0"> <tr> <td align="center" WIDTH=19px> <a href="http://forum.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://forum.dugward.ru"> Форум </a> </td> </tr> <tr> <td align="center" WIDTH=19px> <a href="http://lezione.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td> <td align="left" VALIGN=top> <a href="http://lezione.dugward.ru"> Как мы делали этот сайт </a> </td> </tr> </table> </td> </table> </td> <td> <table width="100%" body bgcolor=#e5e5e7 border="3"> <td align="center"> <table width="95%" border="0" VALIGN=top> <td align="center"> <font face="Arial" font color="#000000" style="font-size: 14pt"> <p class="p1"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p> <p class="p1"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p> </font> </td> </table> </td> </table> </td> <td WIDTH=200px> Баннеры <br> и реклама </td> </table> <table width="100%" border="1"> <td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td> </table> </body> </html>

Теперь загрузим всю эту конструкцию на нашу страницу и получится вот что:
Наша первая страница с текстом в центральной ячейке, внутри дополнительной таблички 95% border="0"

Урок окончен.

Наверх