Создание сайтов (самоучитель)
1.3 Как написать веб-страницу
Как же приступить к созданию веб-страницы? Вообще говоря, главное - придумать и представить себе то, что на этой странице должно содержаться. В этой книге мы больше не будем обращать ваше внимание на этот момент, однако стоит помнить, что приведенные примеры являются лишь иллюстрацией возможностей, а уж как эти возможности применять - решать только вам. В любом случае никогда не стоит применять тот или иной трюк только ради того, чтобы его применить. Всегда исходите из содержания, стиля оформления и удобства пользователя.
Итак, начнем. В принципе, даже если написать простой текст в любом текстовом редакторе, то он уже может отображаться программой просмотра веб-стравиц. Например, воспользуйтесь программой Блокнот (Пуск > Программы > Стандартные > Блокнот) и напишите:
Домашняя страница Ивана.
Иван - писатель юморист, автор рассказов.
В жизни большой любитель ежей.
Теперь сохраните этот файл с расширением имени .htm.
Рис.1.2 Простой текст, загруженный в браузер
Теги html
Пользователь увидит эту страничку так, как показано на рис.1.2. Это уже что-то, хотя и не слишком привлекательно: во-первых, исчезло форматирование текста (абзацы), во-вторых, - как-то скучно смотрится. Кроме того, есть такие строгие браузеры, которые вообще не отобразят этот текст, если не увидят в нем подтверждение того, что он написан на языке html (языке гипертекстовой разметки, на котором и пишутся веб-страницы). Расширение .htm такой браузер может посчитать недостаточным подтверждением, поэтому придется написать несколько дополнительных строк:
<html><body>
Домашняя страница Ивана
Иван - писатель-юморист, автор рассказов.
В жизни большой любитель ежей.
</body></html>
Слова, заключенные в угловые скобки, являются служебными словами языка html. Их принято называть тегами (tags). Теги никогда не отображаются при просмотре страницы - они служат для управления оформлением.
Существуют разные транскрипции слова browser, означающего просто программу просмотра веб-страниц. Некоторые пишут "броузер", а другие - "браузер". Мы будем придерживаться 2-го варианта.
Тег <html>, который вы видите в 1-й строке, означает, что наш текст действительно написан на языке html. Большинство тегов языка html - парные. Они обязательно требует присутствия закрывающего тега. Например, в этом примере в 1-й строке стоит открывающий тег <html>, а в последней - закрывающий тег </html>. Все, что расположено между ними, считается .html-документом.
В языке html совершенно не имеет значения, строчными или прописными буквами записаны теги. Можно написать </html> или <html> - для браузера это 1 и то же. Однако принято писать теги html прописными буквами, чтобы они лучше выделялись на фоне основного текста.
В рассмотренном примере вы видите еще 1 тег - <body>. Все, что расположено между ним и его закрывающим тегом (</body>), считается "телом" документа и отображается на экране. html,-документы, помимо "тела", обычно содержат еще и заголовок, в котором заключена различная служебная информация. Заголовок располагается между тегами <head> и </head>. Например, следующий код будет отображен в браузере так, как показано на рис.1.3.
<html><head><title>Домашняя страница Ивана</title></head><body>
Домашняя страница Ивана.
Иван - писатель-юморист, автор рассказов.
В жизни большой любитель ежей.
</body></html>
Рис.1.3 Простейшая страничка: текст и заголовок
Обратите внимание на то, что в заголовке окна браузера также появились слова "Домашняя страница Ивана". Это произошло потому, что в разделе заголовка <head> мы поместили этот текст между тегами <title> и</title>
Теперь вспомним о том, что при отображении в браузере наш текст потерял форматирование. Это произошло потому, что браузер игнорирует перевод строки. Однако если вы все же хотите видеть свой текст с таким же разбиением на строки, какое было в редакторе Блокнот, нужно заключить его между тегами <pre> и </pre>:
<html><head><title>Домашняя страница Ивана</title></head><body>
<pre>
Домашняя страница Ивана
Иван - писатель-юморист, автор рассказов.
В жизни большой любитель ежей.
</pre>
</body></html>
Результат показан на рис.1.4. Уже лучше, не правда ли? Однако есть два момента, из-за которых мы не советовали бы без крайней необходимости употреблять тег <pre>. Во-первых, как видно из рисунка, текст теперь отображается так называемым моноширинным шрифтом, похожим на шрифт пишущей машинки. Большинство браузеров отображают текст, заключенный между тегами <pre> и </pre>, именно так. Во-вторых (и это главное), в том, что браузер игнорирует разбиение текста на строки, есть свой глубокий смысл. Например, написанная строка может не поместиться в окне просмотра, и тогда, если бы не было тега <pre>, браузер автоматически перенес бы ее часть на следующую строку, чтобы пользователю было удобно читать весь текст. Тег <pre> не позволяет этого сделать, и если строка "вылезет" за пределы окна просмотра, то для ее чтения придется воспользоваться горизонтальной полосой прокрутки, что неудобно и обычно раздражает. Другими словами, если вы используете тег <pre>, вам придется специально заботиться о длине строк, а это затруднительно, поскольку никто заранее не знает, какой размер окна браузера будет у пользователя. Без тега <pre> браузер позаботится об удобстве просмотра сам (это будет проиллюстрировано далее на рис.1.6).
Рис.1.4 Страничка, отформатированная с помощью тега <pre>
Для форматирования текста существует множество специальных тегов. Сейчас рассмотрим самый простой из них - тег <br>. В том месте, где он стоит, происходит принудительный переход на новую строку. (Причем в исходной записи можно продолжать текст на этой же строке - это не имеет значения.) Тег <br> не имеет закрывающего парного тега, он употребляется сам по себе. Вот как сохранить наше форматирование текста без использования тега <pre>
<html><head><title>Домашняя страница Ивана.</title></head><body>
Домашняя страница Ивана.
<p>Иван - писатель-юморист, автор рассказов.<br>В жизни большой любитель ежей.
</body></html>
Результат показан на рис.1.5. Как видите, форматирование текста сохранено, шрифт остался пропорциональным и не превратился в моноширинный, а кроме того, если пользователь почему-либо будет просматривать страничку в очень узком окне, он все равно увидит весь текст (рис.1.6).
И, наконец, еще 1 деталь: иногда браузеры или другие программы обработки требуют, чтобы в начале html-документа обязательно стоял служебный тег <!DOCTYPE>, в атрибутах которого должна быть указана версия языка и некоторая другая информация. Так что в корректном виде наша страничка будет выглядеть вот так:
Рис.1.5 Страничка с простейшим
Рис.1.6 Та же страничка в форматированием текста узком окне браузера
<!DOCTYPE html><html><head><title>Домашняя страница Ивана</title></head><body>
Домашняя страница Ивана <p>Иван - писатель-юморист, автор рассказов.<p>В жизни большой любитель ежей.
</body></html>
В данном случае в 1-й строке стоит указание, что в документе использована версия 4.0 языка html. В дальнейшем мы будем ориентироваться именно на нее, хотя приведенный выше пример с таким же успехом мог бы быть написан и с использованием версии 3.2, и даже более ранней. Однако html 4.0 предоставляет такие возможности создания веб-страниц, которых не было в предыдущих версиях. И хотя некоторые старые программы просмотра не в силах адекватно отобразить страницы, написанные с использованием особенностей новой версии, все же подавляющее большинство читателей сегодня пользуются новыми браузерами. Мы будем ориентироваться именно на них.
