| П | О | Р | Т | А | Л | ||||||||||||||
| С | Е | Т | Е | В | Ы | Х | |||||||||||||
| П | Р | О | Е | К | Т | О | В |
Поиск по сайту: Главная О проекте Web-мастеру HTML & JavaScript SSI Perl PHP XML & XSLT Unix Shell MySQL Безопасность Хостинг Другое
|
Купить канавочные эталоны чувствительности можно на сайте компании "Рентгенсервис". 1.3. Как написать веб-страницуКак же приступить к созданию веб-страницы? Вообще говоря, главное — придумать и представить себе то, что на этой странице должно содержаться. В этой книге мы больше не будем обращать ваше внимание на этот момент, однако стоит помнить, что приведенные примеры являются лишь иллюстрацией возможностей, а уж как эти возможности применять — решать только вам. В любом случае никогда не стоит применять тот или иной трюк только ради того, чтобы его применить. Всегда исходите из содержания, стиля оформления и удобства пользователя. Итак, начнем. В принципе, даже если написать простой текст в любом текстовом редакторе, то он уже может отображаться программой просмотра веб-стравиц. Например, воспользуйтесь программой Блокнот (Пуск > Программы > Стандартные > Блокнот) и напишите: Домашняя страница Сергея Сергеева. Сергей Сергеев - писатель юморист, автор 20 рассказов. В жизни большой любитель собак и компьютерных игр. Теперь сохраните этот файл с расширением имени .html.
Теги 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>
Обратите внимание на то, что в заголовке окна броузера также появились слова “Домашняя страница Сергея Сергеева”. Это произошло потому, что в разделе заголовка <HEAD> мы поместили этот текст между тегами <TITLE> и </TITLE> Теперь вспомним о том, что при отображении в броузере наш текст потерял форматирование. Это произошло потому, что броузер игнорирует перевод строки. Однако если вы все же хотите видеть свой текст с таким же разбиением на строки, какое было в редакторе Блокнот, нужно заключить его между тегами <PRE> и </PRE>: <HTML> <HEAD> <ТIТLЕ>Домашняя страница Сергея Сергеева</ТIТLЕ> </HEAD> <BODY> <PRE> Домашняя страница Сергея Сергеева Сергей Сергеев - писатель-юморист, автор 20 рассказов. В жизни большой любитель собак и компьютерных игр. </PRE> </BODY> </HTML> Результат показан на рис. 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>, в атрибутах которого должна быть указана версия языка и некоторая другая информация. Так что в корректном виде наша страничка будет выглядеть вот так:
<!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 предоставляет такие возможности создания веб-страниц, которых не было в предыдущих версиях. И хотя некоторые старые программы просмотра не в силах адекватно отобразить страницы, написанные с использованием особенностей новой версии, все же подавляющее большинство читателей сегодня пользуются новыми броузерами. Мы будем ориентироваться именно на них. Если Вы не нашли что искали, то рекомендую воспользоваться поиском по сайту: |
