|
Как
же приступить к созданию веб-страницы? Вообще говоря, главное
— придумать и представить себе то, что на этой странице должно
содержаться. В этой статье мы больше не будем обращать ваше внимание
на этот момент, однако
стоит помнить, что приведенные примеры являются лишь иллюстрацией
возможностей, а уж как эти возможности применять — решать только
вам. В любом случае никогда не стоит применять тот или иной трюк
только ради того, чтобы его применить. Всегда исходите из содержания,
стиля оформления и удобства пользователя.
Итак, начнем.
В принципе, даже если написать простой текст в любом текстовом
редакторе, то он уже может отображаться программой просмотра веб-стравиц.
Например, воспользуйтесь программой Блокнот (Пуск > Программы
>
Стандартные > Блокнот) и напишите:
Домашняя страница
Сергея Сергеева.Сергей Сергеев - писатель юморист, автор 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> броузер позаботится об удобстве просмотра сам (это
будет проиллюстрировано далее на рис. 1.6).
Для форматирования
текста существует множество специальных тегов. Сейчас рассмотрим
самый простой из них — тег <BR>. В том месте, где он стоит,
происходит принудительный переход на новую строку. (Причем в исходной
записи можно продолжать текст на этой же строке — это не имеет
значения.) Тег <BR> не имеет закрывающего парного тега,
он употребляется сам по себе. Вот как
сохранить наше форматирование текста без использования тега <PRE>
<HTML>
<HEAD>
<ТIТLЕ>Домашняя
страница Сергея Сергеева.</TITLE>
</HEAD>
<BODY>
Домашняя страница
Сергея Сергеева.
<BR>
<BR>
Сергей Сергеев
- писатель-юморист, автор 20 рассказов.<BR>
В жизни большой
любитель собак и компьютерных игр.
</BODY>
</HTML>
Результат показан
на рис. 1.5. Как видите, форматирование текста сохранено, шрифт
остался пропорциональным и не превратился в моноширинный, а кроме
того, если пользователь почему-либо будет просматривать страничку
в очень узком окне, он все равно увидит весь текст (рис. 1.6).
И, наконец,
еще одна деталь: иногда броузеры или другие программы обработки
требуют, чтобы в начале HTML-документа обязательно стоял служебный
тег <!DOCTYPE>, в атрибутах которого должна быть указана
версия языка и
некоторая другая информация. Так что в корректном виде наша страничка
будет выглядеть вот так:
рис.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 предоставляет такие возможности создания веб-страниц, которых
не было в предыдущих версиях. И хотя некоторые старые программы
просмотра не в силах адекватно отобразить страницы, написанные
с использованием особенностей новой версии, все же подавляющее
большинство читателей сегодня пользуются
новыми броузерами. Мы будем ориентироваться именно на них.
|
