ЧЕТВЕРТЫЙ УРОК

Работа с текстом

Итак, кое-что мы уже знаем. Теперь самая пора наполнить наш сайт содержимым. Я надеюсь, вы уже решили о чем будете писать? Если нет, возьмите какой-нибудь небольшой текст, с заголовками и, открыв наш любимый shablon.html, вставьте его между тегами <BODY> и </BODY>. Можете даже набрать этот текст в Word. Обычно я так и делаю. Порою текст приходится неоднократно править, что-то добавлять, исправлять ошибки и неточности. А потом, уже окончательный вариант копирую, и вставляю в Notepad.

<html lang="ru"> <HEAD> <TITLE></TITLE> </HEAD> <BODY> Вот сюда вставьте текст… </BODY> </HTML>

Я немного подумала, и решила для примера вставить главу из книги Н.В. Гончаренко "Гений в искусстве и науке". Очень уж мне она нравится. Надеюсь, понравится и вам…

Вот как я набрала в Word:

Что ж.. в Ворде получилось и неплохо. Теперь я это скопирую и помещу в Notepad между <BODY> и </BODY>, вот так:

<html lang="ru"> <HEAD> <TITLE></TITLE> </HEAD> <BODY> Глава 5 ГЕНИАЛЬНЫЕ ЖЕНЩИНЫ Все сказанное о гениях мужчинах верно и по отношению к женщинам. "Тогда зачем писать о них отдельно?" - спросит читатель. Он был бы прав, если бы доказанное в теории стало везде фактом реальной жизни. Но долг мужчин женщинам еще не выплачен. Их тысячелетиями не допускали на мужскую половину - и в клубе, в обществе, даже в доме. Всю силу фантазии, умения и искусства они должны были использовать на слишком узком поле деятельности - в кулинарии (и то не всегда), в изготовлении одежды (и тоже не всегда), в поддержании чистоты жилища, в уходе за мужем и детьми. Смысл жизни женщины - мужчина, он ее судьба, все ее запросы должны замыкаться на том, чтобы обеспечить ему максимум удобств независимо от того, оба ли они свободны или лишены свободы, и вырастить детей. Эта непререкаемая догма утвердилась со времен патриархата. Никто с такой страстью не возносил женщину до небес, не осыпал похвалами ее тонкий вкус, глубину чувств и разнообразие ее способностей, как мужчины. Но никто и не сделал больше, чем мужчины, чтобы не дать этим способностям проявиться. И хотя социальные условия не у всех классов были неблагоприятны, однако почти никогда женщины не имели равенства с мужчиной. Даже социальная эмансипация женщины не стала эмансипацией для мужской психологии, не устранила тысячелетиями складывающихся традиций, груз которых несла и во многом еще продолжает нести женщина… Автор: Н.В. Гончаренко </BODY> </HTML>

И сохраним этот файл, скажем под именем "text.html", затем откроем этот файл в окне браузера и что же мы увидим? А увидим мы примерно следующее (рис. 10):


Рис. 10. Вот что у нас получилось без тегов форматирования!

Ну и где же, спрашивается, наш текст, любовно разбитый на абзацы? Где табуляция, где выделенные и помещенные в центр заголовки? Почему наш текст расползся по окну браузера, подобно манной каше? Да, должна вас огорчить - ваш (да и мой) браузер не распознает все то, что мы сейчас перечислили.

Но не переживайте! Сейчас к нам на помощь придут теги форматирования! Только позовите!

 


Теги форматирования

Итак, чтобы нам разбить текст на абзацы, всего-навсего нужно поставить перед каждым абзацем тег <P>. Хочу вас обрадовать, что этот тег может и не иметь закрывающего собрата с косой чертой.

А чтобы выделить отдельные слова, нужно эти слова заключить в контейнер с тегами, каждый тег отвечает за один параметр. Так, например, тег <B> отвечает за жирный текст, <I> - за наклонный, и, кроме того существуют специальные теги для заголовков. Всего для заголовков существует 6 уровней: от <H1> до <H6>. Самый крупный - <H1>, самый мелкий - <H6>. Не забывайте только, что у всех этих тегов существуют парные теги, то есть после того слова, который вы хотите выделить нужно не забыть поставить закрывающийся тег с косой чертой. Контейнеры можно вставлять один в другой, только вставлять нужно правильно, как маленькую матрешку - в большую. Например, будет правильно написать:

<В><I>Правильно</I></B>;

а вот так неправильно:

<B><I>Неправильно</B></I>

Хочу заметить, что в настоящее время более употребительней является <strong>, так что <В> слегка устарело. Хотя, в принципе, это одно и то же.

Для того, чтобы наши заголовки, либо отдельный текст разместить по центру, необходимо добавить атрибут выравнивания <align>:

<align=center> - размещает заголовок по центру окна браузера;

<align=right> - по правой стороне окна;

<align=left> - соответственно по левой. Впрочем, по умолчанию, браузер и так пристроит ваш текст к левому краю.

Теперь откроем наш файл "text.hml" и внесем необходимые изменения:

<html lang="ru"> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <H4 align=center>Глава 5</H4> <P> <H2 align=center>ГЕНИАЛЬНЫЕ ЖЕНЩИНЫ</H2> <P> Все сказанное о гениях мужчинах верно и по отношению к женщинам. "Тогда зачем писать о них отдельно?" - спросит читатель. Он был бы прав, если бы доказанное в теории стало везде фактом реальной жизни. Но долг мужчин женщинам еще не выплачен. Их тысячелетиями не допускали на мужскую половину - и в клубе, в обществе, даже в доме. Всю силу фантазии, умения и искусства они должны были использовать на слишком узком поле деятельности - в кулинарии (и то не всегда), в изготовлении одежды (и тоже не всегда), в поддержании чистоты жилища, в уходе за мужем и детьми. <P> Смысл жизни женщины - мужчина, он ее судьба, все ее запросы должны замыкаться на том, чтобы обеспечить ему максимум удобств независимо от того, оба ли они свободны или лишены свободы, и вырастить детей. Эта непререкаемая догма утвердилась со времен патриархата. <P> Никто с такой страстью не возносил женщину до небес, не осыпал похвалами ее тонкий вкус, глубину чувств и разнообразие ее способностей, как мужчины. Но никто и не сделал больше, чем мужчины, чтобы не дать этим способностям проявиться. И хотя социальные условия не у всех классов были неблагоприятны, однако почти никогда женщины не имели равенства с мужчиной. Даже социальная эмансипация женщины не стала эмансипацией для мужской психологии, не устранила тысячелетиями складывающихся традиций, груз которых несла и во многом еще продолжает нести женщина. <P align=right> <I>Автор:</I> <B><I>Н.В. Гончаренко</I></B> </BODY> </HTML>

Сохраним наш документ под именем "text2.html", и посмотрим, что же у нас вышло (рис. 11):


Рис. 11. Отформатированный текст

Вот кажется то, что и нужно! А теперь попробуем еще некоторые теги:

<BR> - тег перевода строки, непарный тег;
<U> </U> - тег подчеркивания;
<STRIKE></STRIKE> - тег зачеркивания;
<BIG></BIG> - большой текст;
<SMALL></SMALL> - маленький текст;
<ADDRESS></ADDRESS> - этот тег служит для сведения об авторе и/или авторских правах.

Рассмотрим эти теги на примере одного стихотворения:

Это не сложно
Это не важно
Просто отважно
В небо шагнуть

И осторожно
Там, где возможно
Темного облака
Край отогнуть.

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

Откроем опять shablon.html в блокноте и впишем:

<html lang="ru"> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <CENTER> <U><BIG>Стихотворение</BIG></U> <STRIKE><SMALL>БЕЗ НАЗВАНИЯ</SMALL></STRIKE> </CENTER> <P align=left> Это не сложно <BR> Это не важно <BR> Просто отважно <BR> В небо шагнуть <BR> <P align=center> И осторожно <BR> Там, где возможно <BR> Темного облака <BR> Край отогнуть. <BR> <P align=right> Стертые лица, <BR> Забытые профили <BR> И многоточий упрямая нить. <BR> Свет разливается <BR> И проявляется <BR> То, что уже никогда не забыть. <BR> <ADDRESS>Ирина Лео</ADDRESS> </BODY> </HTML>

Сохраним этот файл под именем "text3.html", и откроем в окне браузера. Получится примерно следующее (рис. 12):


Рис. 12. Файл "text3.html"

В общем, вроде как хотели, так и получилось.


Шрифты

Тег <FONT> определяет все атрибуты шрифта. С его помощью мы можем указать тип, размер, цвет и некоторые другие свойства.

По умолчанию браузеры используют шрифт Times Roman, но если вы захотите изменить шрифт, это несложно сделать с помощью атрибута <face>, но нужно иметь ввиду, что тот шрифт, какой вы укажете, может отсутствовать у пользователя, читающего вашу страничку, может не оказаться такого шрифта в системе, и он увидит тогда ваш текст в той кодировке, которая у него установлена по умолчанию. Но эту проблему можно решить другим способом: указать браузеру не один, а несколько похожих шрифтов.

Вот некоторые шрифты: Verdana, Arial, Helvetica, Courier, Times New Roman, Impact, Comic Sans MS, Half и многие-многие другие. Мы можем написать один и тот же текст разными способами:

<FONT face="Verdana">Стихотворение</FONT> <BR>
<FONT face="Arial">Стихотворение</FONT> <BR>
<FONT face="Helvetica">Стихотворение</FONT> <BR>
<FONT face="Courier">Стихотворение</FONT> <BR>
<FONT face="Impact">Стихотворение</FONT> <BR>

и у нас получится:

Стихотворение

Стихотворение

Стихотворение

Стихотворение

Стихотворение

И в окне браузера вы заметите, что на самом деле, Стихотворение написано будет по-разному.

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

<FONT face="Verdana, Arial, Helvetica">Стихотворение</FONT>

И будьте уверены, браузер пользователя сначала поищет у себя шрифт Verdana, и если такого шрифта не обнаружит, побежит искать Arial. Если и такого шрифта не отыщется, попробует последний шанс - Helvetica. Если же и этого шрифта не окажется, то тогда поставит тот шрифт, который у пользователя установлен по умолчанию. И на этом успокоится.


Размер шрифта

По умолчанию размер шрифта равняется 3 пунктам. Но, при желании мы можем увеличить или уменьшить его размер с помощью атрибута <size>. Для этого есть два пути. Абсолютный и относительный. Абсолютный, это когда мы прямым текстом говорим, сколько пунктов должен иметь наш текст. Так, например, выражение "FONT size=5" говорит о том, что наши буквы должны иметь размер 5 пунктов. Ни больше ни меньше! Так попытайтесь угадать, какой размер должен иметь текст "FONT size=2"? Совершенно правильно! Два пункта! А сколько "FONT size=20"? Думаете 20? Ничего подобного. Всему есть предел! Вот и тут тоже предел от 1 до 7.

Как и говорила, есть еще один путь - относительный. Это если за основу взять те три пункта, которые приняты по умолчанию. И прибавляя, либо отнимая число пунктов, можно увеличивать или уменьшать наши пунктики. А вот и примеры:

<FONT size= +2> означает 3+2=5 пунктов
<FONT size= +4> означает 3+4=7 пунктов
<FONT size= -1> означает 3-1=2 пункта

Может я вас немного запутала, но, приноровившись, вы будете щелкать эти задачки как орешки. Заодно и арифметику вспомните, а с нею и школьную юность…


А теперь расскрасим наш текст!

Для этого существует атрибут <color>. Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый - можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно - и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить "решетку"! Так, цвет "blue" имеет свое числовое значение "#0000ff", цвет "red" - значение "#FF0000" и так далее. То есть если мы напишем:

<FONT color="red">Стихотворение</FONT>

или

<FONT color="#ff0000">Стихотворение</FONT>

Обе эти записи будут идентичны. И в окне браузера слово "Стихотворение" будет красным.

Приведу таблицу некоторых цветов:

цвет color код

aква

Aqua 00FFFF

черный

black 000000

Синий

blue 0000FF

Фуксия

fuchsia FF00FF

Серый

gray 808080

Зеленый

green 008000

Известь

lime 00FF00

Темно-бордовый

maroon 800000

Темно-синий

navy 000080

Оливковый

olive 808000

фиолетовый

purple 800080

Красный

red FF0000

Серебряный

silver C0C0C0

Чирок

teal 008080

Белый

white FFFFFF

желтый

yellow FFFF00

Ну а теперь от слов к практике?

Возьмем то же самое стихотворение, и поставим перед собой задачу:

1. Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.

2. Каждый куплет стихотворения раскрасим в свой цвет: первый - в синий, второй - в зеленый, ну а третий - в желтый. Причем, цвет первого куплета дадим в простом названии "blue", второй и третий - в числовом эквиваленте зеленого и желтого цветов.

3. Первый куплет напишем шрифтом "Impact"

4. Размер второго куплета дадим размером в абсолютном размере 4 пункта

5. Размер третьего куплета дадим в относительном размере +1 пункт

6. Ну и автора задвинем в тег ADDRESS

Задача ясна? Ну тогда поехали!

Открываем наш незаменимый шаблон shablon.html и вставляем туда то, что нам надо:

<html lang="ru"> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <FONT color=red face="Comic Sans MS" size=7> <CENTER>Стихотворение</CENTER> </FONT> <FONT color=blue> Это не сложно <BR> Это не важно <BR> Просто отважно <BR> В небо шагнуть <BR> </FONT> <FONT color="#008000" size=4> И осторожно <BR> Там, где возможно <BR> Темного облака <BR> Край отогнуть. <BR> </FONT> <BR> <FONT color="#ffff00" size=+2> Стертые лица, <BR> Забытые профили <BR> И многоточий упрямая нить. <BR> Свет разливается <BR> И проявляется <BR> То, что уже никогда не забыть. <BR> </FONT> <ADDRESS>Ирина Лео</ADDRESS> </BODY> </HTML>

Сохраним наш файл под именем "text4.html" и затем откроем этот файл в окне браузера (рис. 13):


Рис. 13. Вот они, цвета радуги!

Прошу прощенья за дизайн. Вряд ли он может выдержать даже самую мягкую критику. Но, согласитесь, зато сразу стало многое понятно. Не только как правильно форматировать текст, но и то, что не нужно смешивать в одном тексте разные стили, размеры и цвета.

Вот и подошел к концу наш очередной урок. Он был не таким уж и легким, согласитесь! Но зато мы теперь знаем самое необходимое для того, чтобы красиво оформить любой текст.

А в следующем уроке мы научимся работать с фоном. И это будет последнее, что необходимо для нашей первой странички.


К списку всех уроков

(В. Ахметзянова, 2005 г)