Форматируем текст

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

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

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

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

<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://www.board74.ru/colors/index.html
http://www.board74.ru/colors/rgb.html
http://www.board74.ru/colors/standard.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://skorpion-21.narod.ru/m/000/
http://www.butovo.com/~fiver/files/help/colors.html
http://www.stm.dp.ua/web-design/color-html.php
http://www.webclub.ru/archive/markup_refs/article-44.html
http://www.kaplya.ic.km.ua/HTML-colors-1.html

 

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

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″

As we already know, the tables are written from left to right and top to bottom. Similarly, we are moving on our web site.

Next in the course of our progress — the central cell of the second table. Here we will insert text. Optionally fill the table in that order, but in this case I have kept this order for clarity.

In order to make the text look like we have, you need to format it, you need to ask if the indentation, font, font size, and other parameters necessary for us.

 

1. Can not put any alignment, just write a text and it defaults to left-aligned. And you can specifically align text in the center, on the left, right, or the width of the text. Accordingly, the attributes that are needed for this:

align = «left» — on the left edge;

align = «center» — in the middle;

align = «right» — the right edge;

align = «justify» — the width of the text.

 

Note: If you want to put the text on the page, no table (I cited the example pages made without the table: in this novelization) — you simply put the attribute align in paragraph tag: <p align = «justify»> And then write your text no matter how much it was. The closing tag </ p> at the end of the text in this case is put is optional.

 

Since in this case we insert text into a table cell, equalization is necessary to register the attribute tag in the corresponding cell, in this case in our central cell of the second table.

It looks best text aligned to the width. That’s aligned text in books, magazines and other printed samples. Therefore put on the alignment of the cell width of the text. Tag cell would look like this:

 

<td align = «justify»> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ td>

2. Now we define the text attributes: font, font color and font size. It needs these attributes:

2.1. font — a font means;

face — the face, that is, the name of the font in the language HTML. Similarly, to set the style of the word «family», say about it later;

<font face = «Arial»> The font «Arial» </ font>

The Arial

 

2.2. color — the color;

<font color = «# f706f4»> Font color (in this case purple) </ font>

Font color (in this case, lilac)

 

2.3. The size attribute specifies the font size;

You can register the font size in points:

<font size = «+ 4»> Large font </ font>

 

Large font

 

<font size = «- 2»> Small font </ font>

 

Small font

 

But I do not recommend this way because the size will depend on the user’s browser. Users who visited with the Opera browser, which is the default 100% scale, see your text font size = «+ 4» moderately large and easy to read. A user who has come with Internet Explorer, which by default is «biggest icons» will see your text simply gigantic and will think not designed your website to the visually impaired.

It is better to set more precise parameters

 

You can register the size of the font using the style, like this: STYLE = «font-size: 24pt». If we specify the font size 20pt this way, the entire line will look like this:

<FONT STYLE = «font-size: 20pt»> Font size 20pt. </ font>

Font size 20pt.

And define both the color — purple and font size — 24pt:

<FONT COLOR = # f706f4 STYLE = «font-size: 24pt»> Font size 24pt. </ font>

Font size 24pt.

 

Please note that if you prescribe the style, the font, and size between the hyphen: font-size.

Word STILE may refer not only to the font, but also to many other values. So if you have to write a style — an attribute that indicates that you set the style is the font size («font-size: 24pt»), taken all in quotes: STILE = «font-size: 24pt»

 

Explanation: The name of a font you can take any of the relevant sections of the lessons of any HTML, either in the program Microsoft Word. But remember that not all fonts are recognized in different browsers, so get involved in exotic font is not worth it.

 

Note 2: You can set the font color and words (red, blue, green, etc.), but then it is better to write something like this:

 

<span style = «color: red;» > TEXT </ span>

 

TEXT

 

Span attribute means that we are dealing with a built-in element of the paragraph. It is used to change the appearance of the text or logical separation. For example, color.

 

The names of the colors that are able to read the browser, not so much, so I recommend using their numerical values. To know these numerical values, you can refer to the numerous color table, or to the program Photoshop.

You can use these tables colors here:

 

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://www.board74.ru/colors/index.html

http://www.board74.ru/colors/rgb.html

http://www.board74.ru/colors/standard.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://skorpion-21.narod.ru/m/000/

http://www.butovo.com/~fiver/files/help/colors.html

http://www.stm.dp.ua/web-design/color-html.php

http://www.webclub.ru/archive/markup_refs/article-44.html

http://www.kaplya.ic.km.ua/HTML-colors-1.html

 

 

And any other color table, which can find. «Dangerous» or «safe» colors — does not matter. They read all equally. The only difference is the ability to monitor each user.

 

3. list the tag inside the cell with the attributes required to define the parameters of our text. The procedure for recording the attribute into the tag is not important. The font color I ask in this case — # 000000 — black:

 

<td align = «justify»> <font face = «Arial» font color = «# 000000» style = «font-size: 14pt»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width.

</ font>

</ td>

Note: Do not forget that every tag must be closed. In this case, you first close the inner tag (</ font>), and then the outside, that is, Jacek (</ td>).

 

4. Now you have to set the paragraph and the red line.

<P> tag is «Passage» (from the word paragraph — paragraf). If you put it there, where he starts a new paragraph on the page, we will see an additional padding down. But there is no «red line» how to do here in this novelization

If it suits you, you can safely use the tag <p>. In this case, it is not necessary even to close.

The <p> tag differs from the tag <br>, because they both give the command to start a new line, and the two do not give indent the Red line.

<P> tag as it passes an empty line before the next paragraph. Why text appears to be less monolithic. Tag <br> does not, by simply takes a word or sentence on a new line.

The tag <p>, even if you put a lot of their time in a row: <p> <p> <p> <p> — make only one pass line, no more. A tag <br>, if you put it a few times — postpone the text on the same number of rows, the number of times you write this tag.

However, let us return to the problem of the red line, which no tag <br>, or <p> tag can not solve.

There is a way: it is possible to indent each row put some gaps. These are referred to here is a Kadabra: & nbsp;

In HTML, this construction is used for special characters. When the browser encounters the text here is a character (&) (it is called — the ampersand), he begins to follow it interpreted the letter as a special character code. This continues until, until a semicolon. In this case, we use the & nbsp; to add a space. By adding a few gaps, we will get the indentation.

If you add eight such structures — & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; — We get indented eight characters.

 

But, unfortunately, the text will look like exactly, but in FireFox browser and Internet Explorer. In the browser Opera, it will look like … um um … As a young bull pee … In general, it is very uneven.

If you want your text is always, in all browsers look professional, you need to resort to more sophisticated ways.

 

To indent a paragraph, you need to register for it and call it style, for example, «p1». I have already explained that the style begins with the attribute «style». Only now, this attribute will not be responsible for color or font size, and for the paragraph indentation and text. This style should be written as follows:

 

<style type = «text / css»>

.p1

{

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

text-indent: 1.5em;

text-align: justify;

}

</ style>

The value of text-indent: 1.5em; — This is our Indent. The values of the margin and padding we zero to no extra padding in our text was not.

Now you need to insert a value style of text in the page, between the <head> </ head> (this piece is at the top of the page, where it starts HTML). It will look like this:

 

<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> Our first page </ title>

</ head>

<body bgcolor = «# c0c0c0» background = «f3.gif»>

Now, all the text that you put in the tags so that’s — <p class = «p1»> TEXT </ p> will be aligned in width and have a red line indent 1.5. In this case, the paragraph tag must-closing tag: </ p>. But any text that is not within those tags will be aligned with either the default or the way you specify in the cell itself.

 

Note: Since we already have the justification, the text of a given class p1, we necessarily leave the alignment of text within a cell, and the value of the align = «justify» can be deleted to avoid unnecessary attributes. Or leave if you enter more text in a cell, but in addition to the style of p1, with other parameters.

I asked two paragraphs, that the result was more evident.

Now our fragment with two paragraphs of text will be written as follows:

 

<td> <font face = «Arial» font color = «# 000000» style = «font-size: 14pt»>

<p class = «p1»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ p>

<p class = «p1»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width.

</ p>

</ font> </ td>

5. Insert the resulting design on our web page, in the middle of the second cell of the table. At the table HTML-code will now look like this:

 

<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> Our first page </ 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»> Read the book </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/»> Article </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»> Forum </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»> As we did this site </a>

</ td>

</ tr>

</ table>

</ td> </ table>

 

</ td>

 

<td> <font face = «Arial» font color = «# 000000» style = «font-size: 14pt»>

<p class = «p1»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ p>

<p class = «p1»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width.

</ p>

</ font> </ td>

<td WIDTH = 200px> <br> Banners and ads </ td>

</ table>

 

<table width = «100%» border = «1»>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ td>

</ table>

 

</ body>

</ html>

I marked in blue style plug-p1, and red — cell with the text, for which we set the parameters.

 

6. Replace the whole HTML-code our first page completely and get this:

Our first page with text in the central cell

 

7. As you can see, it turned out not too good, because the text «sticks» to the boundaries of plates. From this can be saved in different ways. The most familiar — put text into another plate on a single cell, but ask her border = «0», and the size is not 100% and 95%. In the middle cell, which we put in the plate, for the entire cell set center alignment, that our label with the text stood exactly in the center of the cell. Then the code would look like this:

 

<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> Our first page </ 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»> Read the book </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/»> Article </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»> Forum </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»> As we did this site </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»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ p>

<p class = «p1»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width.

</ p>

</ font>

</ td> </ table>

</ td> </ table>

</ td>

<td WIDTH = 200px> <br> Banners and ads </ td>

</ table>

 

<table width = «100%» border = «1»>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ td>

</ table>

 

</ body>

</ html>

Green I marked another plate, which put to lyrics retreated from the edge of the main cell.

The only thing I forgot — is to register the background color for a table cell, which is our text. Do it now. As we prescribe the background color of a cell, not the entire table, then we insert the corresponding attribute in the tag of the cell (I marked the box in bold):

 

<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> Our first page </ 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»> Read the book </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/»> Article </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»> Forum </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»> As we did this site </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»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ p>

<p class = «p1»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width.

</ p>

</ font>

</ td> </ table>

</ td> </ table>

</ td>

<td WIDTH = 200px> <br> Banners and ads </ td>

</ table>

 

<table width = «100%» border = «1»>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ td>

</ table>

 

</ body>

</ html>

Now load the whole structure to our page and you get this:

Our first page with text in the central cell in an additional panel 95% border = «0»