1.3. Как написать
веб-страницу
Как же приступить к созданию веб-страницы? Вообще
говоря, главное — придумать и представить себе то, что на этой странице должно
содержаться. В этой книге мы больше не будем обращать ваше внимание на этот момент,
однако стоит помнить, что приведенные примеры являются лишь иллюстрацией
возможностей, а уж как эти возможности применять — решать только вам. В любом
случае никогда не стоит применять тот или иной трюк только ради того, чтобы его
применить. Всегда исходите из содержания, стиля оформления и удобства
пользователя.
Итак, начнем. В принципе, даже если написать
простой текст в любом текстовом редакторе, то он уже может отображаться
программой просмотра веб-страниц. Например, воспользуйтесь программой Блокнот
(Пуск > Программы > Стандартные > Блокнот) и напишите:
Домашняя страница Сергея Сергеева.
Сергей Сергеев - писатель юморист, автор 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 предоставляет такие возможности создания веб-страниц, которых не было
в предыдущих версиях. И хотя некоторые старые программы просмотра не в силах
адекватно отобразить страницы, написанные с использованием особенностей новой
версии, все же подавляющее большинство читателей сегодня пользуются новыми браузерами. Мы будем ориентироваться именно на них.
