Как написать веб-страницу
В рассмотренном примере вы видите еще один тег – <BODY>. Все, что расположено между ним и его закрывающим тегом (</BODY>), считается “телом” документа и отображается на экране. HTML,-документы, помимо “тела”, обычно содержат еще и заголовок, в котором заключена различная служебная информация. Заголовок располагается между тегами <HEAD> и </HEAD>. Например, следующий код будет отображен в браузере так, как показано на рис. 1.3.
<HTML> <HEAD> <TITLE>Домашняя страница Сергея Сергеева</TITLE></HEAD> <BODY> Домашняя страница Сергея Сергеева. Сергей Сергеев - писатель-юморист, автор 20 рассказов. В жизни большой любитель собак и компьютерных игр. </BODY> </HTML>
Рис. 1.3. Простейшая страничка: текст и заголовок
Обратите внимание на то, что в заголовке окна браузера также появились слова “Домашняя страница Сергея Сергеева”. Это произошло потому, что в разделе заголовка <HEAD> мы поместили этот текст между тегами <TITLE> и </TITLE>
Теперь вспомним о том, что при отображении в браузере наш текст потерял форматирование. Это произошло потому, что браузер игнорирует перевод строки. Однако если вы все же хотите видеть свой текст с таким же разбиением на строки, какое было в редакторе Блокнот, нужно заключить его между тегами <PRE> и </PRE>:
<HTML> <HEAD> <TITLE>Домашняя страница Сергея Сергеева</TITLE></HEAD> <BODY> <PRE>Домашняя страница Сергея Сергеева Сергей Сергеев - писатель-юморист, автор 20 рассказов. В жизни большой любитель собак и компьютерных игр. </PRE></BODY> </HTML>Результат показан на рис. 1.4. Уже лучше, не правда ли? Однако есть два момента, из-за которых мы не советовали бы без крайней необходимости употреблять тег <PRE>. Во-первых, как видно из рисунка, текст теперь отображается так называемым моноширинным шрифтом, похожим на шрифт пишущей машинки.
Рис. 1.4. Страничка, отформатированная с помощью тега <PRE>
Большинство браузеров отображают текст, заключенный между тегами <PRE> и </PRE>, именно так. Во-вторых (и это главное), в том, что браузер игнорирует разбиение текста на строки, есть свой глубокий смысл. Например, написанная строка может не поместиться в окне просмотра, и тогда, если бы не было тега <PRE>, браузер автоматически перенес бы ее часть на следующую строку, чтобы пользователю было удобно читать весь текст. Тег <PRE> не позволяет этого сделать, и если строка “вылезет” за пределы окна просмотра, то для ее чтения придется воспользоваться горизонтальной полосой прокрутки, что неудобно и обычно раздражает. Другими словами, если вы используете тег <PRE>, вам придется специально заботиться о длине строк, а это затруднительно, поскольку никто заранее не знает, какой размер окна браузера будет у пользователя. Без тега <PRE> браузер позаботится об удобстве просмотра сам (это будет проиллюстрировано далее на рис. 1.6).