Итак, кое-что мы уже знаем. Теперь самая пора наполнить наш сайт содержимым. Я надеюсь, вы уже решили о чем будете писать? Если нет, возьмите какой-нибудь небольшой текст, с заголовками и, открыв наш любимый shablon.html, вставьте его между тегами <BODY> и </BODY>. Можете даже набрать этот текст в Word.
Обычно я так и делаю. Порою текст приходится неоднократно править, что-то добавлять, исправлять ошибки и неточности. А потом, уже окончательный вариант копирую, и вставляю в Notepad.
Я немного подумала, и решила для примера вставить главу из книги Н.В. Гончаренко "Гений в искусстве и науке". Очень уж мне она нравится. Надеюсь, понравится и вам…
Вот как я набрала в Word:
Что ж.. в Ворде получилось и неплохо. Теперь я это скопирую и помещу в Notepad между <BODY> и </BODY>, вот так:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
Глава 5
ГЕНИАЛЬНЫЕ ЖЕНЩИНЫ
Все сказанное о гениях мужчинах верно и по отношению к женщинам.
"Тогда зачем писать о них отдельно?" - спросит читатель. Он был бы прав,
если бы доказанное в теории стало везде фактом реальной жизни. Но долг
мужчин женщинам еще не выплачен. Их тысячелетиями не допускали на
мужскую половину - и в клубе, в обществе, даже в доме. Всю силу фантазии,
умения и искусства они должны были использовать на слишком узком поле
деятельности - в кулинарии (и то не всегда), в изготовлении одежды (и тоже не
всегда),
в поддержании чистоты жилища, в уходе за мужем и детьми.
Смысл жизни женщины - мужчина, он ее судьба, все ее запросы должны замыкаться на
том, чтобы обеспечить ему максимум удобств независимо от того, оба ли они свободны
или лишены свободы, и вырастить детей. Эта непререкаемая догма утвердилась со времен
патриархата.
Никто с такой страстью не возносил женщину до небес, не осыпал похвалами ее тонкий
вкус, глубину чувств и разнообразие ее способностей, как мужчины. Но никто и не
сделал больше, чем мужчины, чтобы не дать этим способностям проявиться. И хотя
социальные условия не у всех классов были неблагоприятны, однако почти никогда
женщины не имели равенства с мужчиной. Даже социальная эмансипация женщины
не стала эмансипацией для мужской психологии, не устранила тысячелетиями
складывающихся традиций, груз которых несла и во многом еще продолжает нести
женщина…
Автор: Н.В. Гончаренко
</BODY>
</HTML>И сохраним этот файл, скажем под именем "text.html", затем откроем этот файл в окне браузера и что же мы увидим? А увидим мы примерно следующее (рис. 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>
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<BODY>
<IMG src="myfoto.jpg">
Ура! Привет мир!
</BODY>
</HTML><HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<H4 align=center>Глава 5</H4>
<H2 align=center>ГЕНИАЛЬНЫЕ ЖЕНЩИНЫ</H2>
<P>
Все сказанное о гениях мужчинах верно и по отношению к женщинам.
"Тогда зачем писать о них отдельно?" - спросит читатель. Он был бы прав,
если бы доказанное в теории стало везде фактом реальной жизни. Но долг
мужчин женщинам еще не выплачен. Их тысячелетиями не допускали на
мужскую половину - и в клубе, в обществе, даже в доме. Всю силу фантазии,
умения и искусства они должны были использовать на слишком узком поле
деятельности - в кулинарии (и то не всегда), в изготовлении одежды (и тоже не
всегда), в поддержании чистоты жилища, в уходе за мужем и детьми.
</P>
<P>
Смысл жизни женщины - мужчина, он ее судьба, все ее запросы должны замыкаться
на том, чтобы обеспечить ему максимум удобств независимо от того, оба ли они
свободны или лишены свободы, и вырастить детей. Эта непререкаемая догма
утвердилась со времен патриархата.
</P>
<P>
Никто с такой страстью не возносил женщину до небес, не осыпал похвалами ее
тонкий вкус, глубину чувств и разнообразие ее способностей, как мужчины. Но
никто и не сделал больше, чем мужчины, чтобы не дать этим способностям проявиться.
И хотя социальные условия не у всех классов были неблагоприятны, однако почти
никогда женщины не имели равенства с мужчиной. Даже социальная эмансипация
женщины не стала эмансипацией для мужской психологии, не устранила
тысячелетиями складывающихся традиций, груз которых несла и во многом еще
продолжает нести женщина.
</P>
<P align=right>
<I>Автор:</I> <B><I>Н.В. Гончаренко</I></B>
</P>
</BODY>
</HTML>
Сохраним наш документ под именем "text2.html", и посмотрим, что же у нас вышло (рис. 11):
Вот кажется то, что и нужно! А теперь попробуем еще некоторые теги:
<BR> - тег перевода строки, непарный тег;
<U> </U> - тег подчеркивания;
<STRIKE></STRIKE> - тег зачеркивания;
<BIG></BIG> - большой текст;
<SMALL></SMALL> - маленький текст;
<ADDRESS></ADDRESS> - этот тег служит для сведения об авторе и/или
авторских правах.
Рассмотрим эти теги на примере одного стихотворения:
Это не сложно
Это не важно
Просто отважно
В небо шагнуть
И осторожно
Там, где возможно
Темного облака
Край отогнуть.
Стертые лица,
Забытые профили
И многоточий упрямая нить.
Свет разливается
И проявляется
То, что уже никогда не забыть.
Откроем опять shablon.html в блокноте и впишем:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<CENTER>
<U><BIG>Стихотворение</BIG></U>
<STRIKE><SMALL>БЕЗ НАЗВАНИЯ</SMALL></STRIKE>
</CENTER>
<P align=left>
Это не сложно <BR>
Это не важно <BR>
Просто отважно <BR>
В небо шагнуть <BR>
</p>
<P align=center>
И осторожно <BR>
Там, где возможно <BR>
Темного облака <BR>
Край отогнуть. <BR>
</p>
<P align=right>
Стертые лица, <BR>
Забытые профили <BR>
И многоточий упрямая нить. <BR>
Свет разливается <BR>
И проявляется <BR>
То, что уже никогда не забыть. <BR>
</p>
<ADDRESS>Ирина Лео</ADDRESS>
</BODY>
</HTML>Сохраним этот файл под именем "text3.html", и откроем в окне браузера. Получится примерно следующее (рис. 12):
В общем, вроде как хотели, так и получилось.
Шрифты
Тег <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 |
Ну а теперь от слов к практике?
Возьмем то же самое стихотворение, и поставим перед собой задачу:
- Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
- Каждый куплет стихотворения раскрасим в свой цвет: первый - в синий, второй - в зеленый, ну а третий - в желтый. Причем, цвет первого куплета дадим в простом названии "blue", второй и третий - в числовом эквиваленте зеленого и желтого цветов.
- Первый куплет напишем шрифтом "Impact"
- Размер второго куплета дадим размером в абсолютном размере 4 пункта
- Размер третьего куплета дадим в относительном размере +1 пункт
- Ну и автора задвинем в тег ADDRESS
Задача ясна? Ну тогда поехали!
Открываем наш незаменимый шаблон shablon.html и вставляем туда то, что нам надо:
<HTML>
<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):
Прошу прощенья за дизайн. Вряд ли он может выдержать даже самую мягкую критику. Но, согласитесь, зато сразу стало многое понятно. Не только как правильно форматировать текст, но и то, что не нужно смешивать в одном тексте разные стили, размеры и цвета.
Вот и подошел к концу наш очередной урок. Он был не таким уж и легким, согласитесь! Но зато мы теперь знаем самое необходимое для того, чтобы красиво оформить любой текст.
А в следующем уроке мы научимся работать с фоном. И это будет последнее, что необходимо для нашей первой странички.