Как создают веб-страницы

На главную

	1.Как создают веб-страницы
	Как написать веб-страницу
	Обзор программ для просмотра и создания веб-страниц
	Создание веб-страниц

	2.Основные средства языка HTML
	Самое главное на любой веб-странице - гиперссылки
	Как создать списки на веб-странице
	Создание таблиц

	3.Графика на веб-странице
	Графические форматы интернета
	Графические элементы оформления веб-страниц
	Графические маркеры
	Подготовка рисунков в программе Adobe Photoshop

	4.Оформление веб-страницы с использованием стилей
	Определение стилей в специальной таблице
	Обзор других возможностий стилевых таблиц

	5.Использование звука на веб-странице
	Маленькие хитрости

	6.Динамические веб-страницы на основе JavaScript
	Как писать собственные функции
	Динамическое изменение внешнего вида страницы
	Другие возможности языка JavaScript

	7.Веб-страницы, реагирующие на действия пользователя
	Страница, управляемая при помощи мыши
	Страница, управляемая с клавиатуры
	Динамическое отображение текста веб-страницы
	Динамическое изменение графических элементов веб-страницы
	Динамическое изменение таблиц
	Самоизменяющиеся формы

	8.Размещение элементов на веб-странице с помощью таблиц
	Управление расположением элементов на веб-страницы
	Динамическое позиционирование слоев

	9.Дополнительные возможности формирования веб-страниц
	Пример использования элемента управления Tabular Data

Как написать веб-страницу

Как же приступить к созданию веб-страницы? Вообще говоря, главное - придумать и представить себе то, что на этой странице должно содержаться. В этой книге мы больше не будем обращать ваше внимание на этот момент, однако стоит помнить, что приведенные примеры являются лишь иллюстрацией возможностей, а уж как эти возможности применять - решать только вам. В любом случае никогда не стоит применять тот или иной трюк только ради того, чтобы его применить. Всегда исходите из содержания, стиля оформления и удобства пользователя.

Итак, начнем. В принципе, даже если написать простой текст в любом текстовом редакторе, то он уже может отображаться программой просмотра веб-страниц. Например, воспользуйтесь программой Блокнот (Пуск > Программы > Стандартные > Блокнот) и напишите:

Домашняя страница Сергея Сергеева.

Сергей Сергеев - писатель юморист, автор 20 рассказов.
В жизни большой любитель собак и компьютерных игр.

Теперь сохраните этот файл с расширением имени .html.

Рис. 1.2. Простой текст, загруженный в броузер

Теги HTML

Пользователь увидит эту страничку так, как показано на рис. 1.2. Это уже что-то, хотя и не слишком привлекательно: во-первых, исчезло форматирование текста (абзацы), во-вторых - как-то скучно смотрится. Кроме того, есть такие строгие броузеры1, которые вообще не отобразят этот текст, если не увидят в нем подтверждение того, что он написан на языке HTML (языке, гипертекстовой разметки, на котором и пишутся веб-страницы). Расширение .htm (Существуют разные транскрипция слова browser, означающего просто программу просмотра веб-страниц. Некоторые пишут «броузер», а другие - «браузер». Мы будем придерживаться второго варианта.) такой броузер может посчитать недостаточным подтверждением, поэтому придется написать несколько дополнительных строк:

<HTML>
<BODY>
Домашняя страница Сергея Сергеева
Сергей Сергеев - писатель-юморист, автор 20 рассказов.
В жизни большой любитель собак и компьютерных игр.
</BODY>
</HTML>

Слова, заключенные в угловые скобки, являются служебными словами языка. HTML. Их принято называть тегами (tags). Теги никогда не отображаются при просмотре страницы - они служат для управления оформлением.

Тег <НТМL>, который вы видите в первой строке, означает, что наш текст действительно написан на языке HTML. Большинство тегов языка HTML - парные. Они обязательно требует присутствия закрывающего тега. Например, в этом примере в первой строке стоит открывающий тег <HTML>, а в последней - закрывающий тег </НТМL>. Все, что расположено между ними, считается 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).

Для форматирования текста существует множество специальных тегов. Большинство из них мы изучим в главе 2, а сейчас рассмотрим самый простой из них - тег . В том месте, где он стоит, происходит принудительный переход на новую строку. (Причем в исходной записи можно продолжать текст на этой же строке - это не имеет значения.) Тег не имеет закрывающего парного тега, он употребляется сам по себе. Вот как сохранить наше форматирование текста без использования тега <PRE>.

<HTML>
<HEAD>
<ТIТLЕ>Домашняя страница Сергея Сергеева.</TITLE>
</HEAD>
<BODY>
Домашняя страница Сергея Сергеева. 
Сергей Сергеев - писатель-юморист/ автор 20 рассказов. 
В жизни большой любитель собак и компьютерных игр.
</BODY>
</HTML>

Результат показан на рис. 1.5. Как видите, форматирование текста сохранено, шрифт остался пропорциональным и не превратился в моноширинный, а кроме того, если пользователь почему-либо будет просматривать страничку в очень узком окне, он все равно увидит весь текст (рис. 1.6).

И, наконец, еще одна деталь: иногда броузеры или другие программы обработки требуют, чтобы в начале HTML-документа обязательно стоял служебный тег <!DOCTYPE>, в атрибутах которого должна быть указана версия языка и некоторая другая информация. Так что в корректном виде наша страничка будет выглядеть вот так:

Рис. 1.5. Страничка с простейшим форматированием текста

Рис. 1.6. Та же страничка в узком окне броузера

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТITLЕ>Домашняя страница Сергея Сергеева </TITLE> </HEAD>
<BODY>
Домашняя страница Сергея Сергеева 
Сергей Сергеев - писатель-юморист, автор 20 рассказов. 
В жизни большой любитель собак и компьютерных игр.
</BODY>
</HTML>

В данном случае в первой строке стоит указание, что в документе использована версия 4.0 языка HTML. В дальнейшем мы будем ориентироваться именно на нее, хотя приведенный выше пример с таким же успехом мог бы быть написан и с использованием версии 3.2, и даже бол ее ранней. Однако HTML 4.0 предоставляет такие возможности создания веб-страниц, которых не было в предыдущих версиях. И хотя некоторые старые программы просмотра не в силах адекватно отобразить страницы, «(вписанные с использованием особенностей новой версии, все же подавляющее большинство читателей сегодня пользуются новыми броузерами. Мы будем ориентироваться именно на них.