В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов"


НазадСодержаниеВперёд

Урок 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"

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


Перейти к Уроку 7


© М.В. Гуминенко. 2008 г.
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru



Навигация по урокам

Работа с хостингом

Регистрация на Narod.ru

Регистрация на платном хостинге

Переход с одного платного хостинга на другой


Вопросы по таблицам

Таблица как основа для страницы сайта: табличные теги "width", "border"

Таблица как модуль для ссылок: ячейки и строки ("td" и "tr"), значения атрибута "align"

Атрибут "VALIGN" и его значения. Атрибуты "cellpadding" и "cellspacing"

Сложные таблицы. Атрибуты атрибуты "colspan" и "rowspan"


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

Выравнивание текста (атрибут "align"). Имя, цвет, размер шрифта (font: family, face, color, size). Абзац ("p"). Как задать отступ красной строки (немного о стиле CSS)

Как прописать шрифты и заголовки в стилях CSS

Амперсанды. Текстовые теги. Специфические символы


Делаем ссылки

Как написать код ссылки

Как задать внешний вид ссылки (шрифт, цвет, размер и пр.) в стилях CSS

Что нужно сделать, чтобы на одной странице они были разного цвета, шрифта, размера и пр. (в CSS)

Внутристраничные ссылки или закладки (якоря)

Ссылка "Наверх"


Картинки (логотипы, баннеры, фон)

Загрузка изображений на Radikal.ru

Картинки в тексте

Как сделать работающую кнопку (баннер)

Как установить логотип, задать цвет фона (таблицы, страницы сайта), установить фоновое изображение. Атрибуты bgcolor и background

Как установить логотип через документ стилей CSS

Масштабирующиеся логотипы

Масштабирующиеся рамки в обрамлении таблицы (страницы)

Размещение картинки на странице с текстом

Неподвижный фон


Вопросы по JavaScript и динамическому html

Скрытый текст с помощью JavaScript и динамического html

Бегущая строка

Простейшие фотоальбомы

Сменяющийся логотип


Несколько советов по установке форумного движка SMF на платный хостинг