|
Как же приступить к созданию веб-страницы? Вообще говоря, главное — придумать
и представить себе то, что на этой странице должно содержаться. В этой книге мы
больше не будем обращать ваше внимание на этот момент, однако стоит помнить, что
приведенные примеры являются лишь иллюстрацией возможностей, а уж как эти возможности
применять — решать только вам. В любом случае никогда не стоит применять тот или
иной трюк только ради того, чтобы его применить. Всегда исходите из содержания,
стиля оформления и удобства пользователя.
Итак, начнем. В принципе, даже если написать простой текст в любом текстовом редакторе,
то он уже может отображаться программой просмотра веб-стравиц. Например, воспользуйтесь
программой Блокнот (Пуск > Программы > Стандартные > Блокнот) и напишите:
Домашняя
страница Сергея Сергеева.
Сергей Сергеев - писатель юморист, автор 20 рассказов.
В жизни большой любитель собак и компьютерных игр.
Теперь сохраните этот файл с расширением имени .html
. 
Рис. 1.2. Простой
текст, загруженный в броузер
Теги HTML
Пользователь увидит эту страничку так, как показано на рис. 1.2. Это уже что-то,
хотя и не слишком привлекательно: во-первых, исчезло форматирование текста (абзацы),
во-вторых, — как-то скучно смотрится. Кроме того, есть такие строгие броузеры,
которые вообще не отобразят этот текст, если не увидят в нем подтверждение того,
что он написан на языке HTML (языке гипертекстовой разметки, на котором и пишутся
веб-страницы). Расширение .html такой броузер может посчитать недостаточным подтверждением,
поэтому придется написать несколько дополнительных строк:
<HTML>
<BODY>
Домашняя страница Сергея Сергеева
Сергей Сергеев - писатель-юморист, автор 20 рассказов.
В жизни большой любитель собак и компьютерных игр.
</BODY>
</HTML>
Слова, заключенные в угловые скобки, являются служебными словами языка HTML. Их
принято называть тегами (tags). Теги никогда не отображаются при просмотре страницы
— они служат для управления оформлением.
Существуют разные транскрипции слова browser, означающего просто программу просмотра
веб-странип. Некоторые пишут “броузер”, а другие — “браузер”. Мы будем придерживаться
второго варианта.
Тег
<HTML>
, который вы видите в первой строке, означает, что наш текст действительно написан
на языке HTML. Большинство тегов языка HTML — парные. Они обязательно требует
присутствия закрывающего тега. Например, в этом примере в первой строке стоит
открывающий тег
<HTML>
, а в последней — закрывающий тег </HTML>. Все, что расположено между ними,
считается .HTML-документом.
В языке HTML совершенно не имеет значения, строчными или прописными буквами записаны
теги. Можно написать
</HTML>
или
<html>
— для броузера это одно и то же. Однако принято писать теги HTML прописными буквами,
чтобы они лучше выделялись на фоне основного текста.
В рассмотренном примере вы видите еще один тег —
<BODY>
. Все, что расположено между ним и его закрывающим тегом (
</BODY>
), считается “телом” документа и отображается на экране. HTML,-документы, помимо
“тела”, обычно содержат еще и заголовок, в котором заключена различная служебная
информация. Заголовок располагается между тегами
<HEAD>
и
</HEAD>
. Например, следующий код будет отображен в броузере так, как показано на рис.
1.3.
<HTML>
<HEAD>
<ТIТLЕ>Домашняя страница Сергея Сергеева </TITLE>
</HEAD>
<BODY>
Домашняя страница Сергея Сергеева.
Сергей Сергеев - писатель-юморист, автор 20 рассказов.
В жизни большой любитель собак и компьютерных игр.
</BODY>
</HTML> 
Рис. 1.3. Простейшая
страничка: текст и заголовок
Обратите внимание на то, что в заголовке окна броузера также появились слова “Домашняя
страница Сергея Сергеева”. Это произошло потому, что в разделе заголовка
<HEAD>
мы поместили
этот текст между тегами
<TITLE>
и
</TITLE>
Теперь вспомним о том, что при отображении в броузере наш текст потерял форматирование.
Это произошло потому, что броузер игнорирует перевод строки. Однако если вы все
же хотите видеть свой текст с таким же разбиением на строки, какое было в редакторе
Блокнот, нужно заключить его между тегами <PRE> и </PRE>:
>
<HTML>
<HEAD>
<ТIТLЕ>Домашняя страница Сергея Сергеева</ТIТLЕ>
</HEAD>
<BODY>
<PRE>
Домашняя страница Сергея Сергеева
Сергей Сергеев - писатель-юморист, автор 20 рассказов.
В жизни большой любитель собак и компьютерных игр.
</PRE>
</BODY>
</HTML>
Результат показан на рис. 1.4. Уже лучше, не правда ли? Однако есть два момента,
из-за которых мы не советовали бы без крайней необходимости употреблять тег <PRE>.
Во-первых, как видно из рисунка, текст теперь отображается так называемым моноширинным
шрифтом, похожим на шрифт пишущей машинки. Большинство броузеров отображают текст,
Рис. 1.4. Страничка, отформатированная с помощью тега
<PRE>
заключенный между тегами
<PRE>
и
</PRE>
, именно так. Во-вторых (и это главное), в том, что броузер игнорирует разбиение
текста на строки, есть свой глубокий смысл. Например, написанная строка может
не поместиться в окне просмотра, и тогда, если бы не было тега
<PRE>
, броузер автоматически перенес бы ее часть на следующую строку, чтобы пользователю
было удобно читать весь текст. Тег
<PRE>
не позволяет этого сделать, и если строка “вылезет” за пределы окна просмотра,
то для ее чтения придется воспользоваться горизонтальной полосой прокрутки, что
неудобно и обычно раздражает. Другими словами, если вы используете тег
<PRE>
, вам придется
специально заботиться о длине строк, а это затруднительно, поскольку никто заранее
не знает, какой размер окна броузера будет у пользователя. Без тега
<PRE>
броузер позаботится об удобстве просмотра сам (это будет проиллюстрировано далее
на рис. 1.6).
Для форматирования текста существует множество специальных тегов. Сейчас рассмотрим
самый простой из них — тег
<BR>
. В том месте, где он стоит, происходит принудительный переход на новую строку.
(Причем в исходной записи можно продолжать текст на этой же строке — это не имеет
значения.) Тег
<BR>
не имеет закрывающего парного тега, он употребляется сам по себе. Вот как сохранить
наше форматирование текста без использования тега
<PRE>
<HTML>
<HEAD>
<ТIТLЕ>Домашняя страница Сергея Сергеева.</TITLE>
</HEAD>
<BODY>
Домашняя страница Сергея Сергеева.
<BR>
<BR>
Сергей Сергеев - писатель-юморист, автор 20 рассказов.<BR>
В
жизни большой любитель собак и компьютерных игр.
</BODY>
</HTML>
Результат показан на рис. 1.5. Как видите, форматирование текста сохранено, шрифт
остался пропорциональным и не превратился в моноширинный, а кроме того, если пользователь
почему-либо будет просматривать страничку в очень узком окне, он все равно увидит
весь текст (рис. 1.6).
И, наконец, еще одна деталь: иногда броузеры или другие программы обработки требуют,
чтобы в начале HTML-документа обязательно стоял служебный тег
<!DOCTYPE>
, в атрибутах которого должна быть указана версия языка и некоторая другая информация.
Так что в корректном виде наша страничка будет выглядеть вот так:
рuc. 1.5. Страничка с простейшим
Рис. 1.6. Та же страничка в форматированием текста узком окне броузера
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТIТLЕ>Домашняя страница Сергея Сергеева </TITLE>
</HEAD>
<BODY>
Домашняя страница Сергея Сергеева <BR><BR>
Сергей Сергеев - писатель-юморист, автор 20 рассказов.<BR>
В
жизни большой любитель собак и компьютерных игр.
</BODY>
</HTML>
В данном случае в первой строке стоит указание, что в документе использована версия
4.0 языка HTML. В дальнейшем мы будем ориентироваться именно на нее, хотя приведенный
выше пример с таким же успехом мог бы быть написан и с использованием версии 3.2,
и даже более ранней. Однако HTML 4.0 предоставляет такие возможности создания
веб-страниц, которых не было в предыдущих версиях. И хотя некоторые старые программы
просмотра не в силах адекватно отобразить страницы, написанные с использованием
особенностей новой версии, все же подавляющее большинство читателей сегодня пользуются
новыми броузерами. Мы будем ориентироваться именно на них. |
