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 предоставляет такие возможности создания
веб-страниц, которых не было в предыдущих версиях. И хотя некоторые старые
программы просмотра не в силах адекватно отобразить страницы, написанные с
использованием особенностей новой версии, все же подавляющее большинство
читателей сегодня пользуются новыми броузерами. Мы будем ориентироваться именно
на них.
|