Краткий разбор WWW страницы

HTML: язык описания WWW страниц

Прежде чем создавать свои собственные страницы посмотрим как выглядит и функционирует WWW страница.

Существует достаточно много хороших документов с описаниями языка HTML, но к сожалению все они не дают ясного понимания того как делать хорошие документы. Как правило, все такие руководства либо отражают вкусы их авторов, либо являются сухими описаниями стандарта (который все время изменяется). Не думаю, что руководство, которое Вы в данный момент смотрите, свободно от этого недостатка.

К тому же, как отмечалось во введении, фирмы-разработчики, используемых для просмотра WWW страниц просмотрщиков (браузеров), сами предлагают различные расширения языка HTML (см., например, расширения MS Internet Explorer (MSIE).

Некоторые другие руководства по языку HTML можно найти в списке литературы: например, "HTML DTD Reference" или "A Beginner's Guide to HTML" (на английском языке и русский перевод).

Рассмотрим следующие вопросы, связанные с WWW документами:

Типовая WWW страница

Что бы лучше понять каким образом, используя спецификации языка HTML, создается WWW cтраница, необходимо сравнить исходный текст страницы с ее изображением в окне просмотрщика. Ниже на рис. 1. показана WWW страница, с использованием просмотрщика MS Microsoft Explorer:

[web-page]

Рис. 1. Страница показанная через браузер MS Microsoft Explorer.

Ее HTML исходный текст следующий:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
<HTML><HEAD><TITLE>WEB Pages</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mar 02, 1997 10:07:01 GMT">
<META NAME="Version" CONTENT="1.0">
<META NAME="Language" CONTENT="ru">
</HEAD>
<!--DocHeaderStart-->
<BODY BGCOLOR=#FFFFFF >
<A HREF="welcome.html">
<IMG SRC="/gif/inter/html32.gif" alt="HTML 3.2"></A>
<!--DocHeaderEnd-->
<br><IMG SRC="/gif/inter/pauk.gif" alt="Pauk">
<P><HR NOSHADE SIZE=2>
<h1><b>HTML - WWW - WEB Pages (Страницы)</b></h1>
<P><!--DATE-->Март 3, 1997
<P><!--/DATE-->
<P><h2>Не все коту масленица</h2>
<P>Замечание: Всякий кот не является человеком,
но не всякий человек является котом.<P>
Создание страниц для WWW сервера является долгой и кропотливой
работой, лежащей где-то посередине между работой преподавателя, типографского
наборщика, дизайнера оформителя (художника) и программиста весьма высокого класса.
<P><h4>Где зарыт секрет хорошей страницы?</h4>
<P>Создание страницы -- это искусство и технология,
помноженная на хорошую технику и удобное программное обеспечение.
<P>Можно ли научится создавать WWW страницы самостоятельно?
<A HREF="welcome.html">Ответ</A>.
Конечно можно -- Как говорил мой хорошо знакомый программист --
Основной принцип -- это как в армии -- <I>изучай матчасть и делай как я</I>.
А дальше немного фантазии и упорства и <I>враг будет разбит, победа
будет за нами</I>.
<HR NOSHADE SIZE=2>
</BODY></HTML>
Этот текст можно получить для любой страницы, которую вы просматриваете через просмотрщик, используя команду из View menu: Source (или Source Frame, View Source для многооконных документов). Если вы хотите поэксперементировать с HTML текстом документа, то следует запомнить его на свой локальный диск с расширением .htm или .html, сделать какие-либо изменения и просмотреть результаты ваших изменений через просмотрщик.

Обратите внимание, что HTML страница содержит нормально читаемый текст и некоторые команды tags разметки, заключенные в угловые скобки (< >).

Команды языка HTML задают правила, по которым просмотрщик выводит документ на экран: размещение текста в окне, представление графических объектов (рисунков и картинок), а также вывод звуковых, видео клипов.

Большинство команд языка HTML (tags), такие как <HTML>, <TITLE>, <HEAD>, или <FONT>, требуют соответствующую команду с </...>, для ее "закрытия" (tag -- "конец команды"). Но существуют команды, такие как <P> (команда отделяющая друг от друга абзацы), для которых "конец команды" ставить не обязательно и команды типа <BR> (жесткий перевод строки), для которых "конец команды" не нужен. Многие команды имеют параметры, называемые атрибутами, которые модифицируют действие команды.

Помимо команд в языке HTML используется специальный управляющий символ "амперсанд" (&). Этот символ используется для вывода специальных символов и символов из расширенной кодовой таблицы (Code Page), которые нельзя ввести с клавиатуры (аналог "escape последовательностей), например, вывод символа амперсанд (&) осуществляется посредством последовательности символов "&amp;", для вывода угловых скобок используются последовательности "&lt;" для "<" и "&gt;" для ">". Символ номер 176 (°) из кодовой таблицы, может быть задан последовательностью "&#176;".

Форматирование HTML документа (страницы)

Язык HTML является однопроходным языком и в стандартном варианте когда не используются технологии SSI (Server Side Include), DHTML (Dinamic HTML), или ASP (Active Server Page) или PHP, не содержит циклов и переходов. Просмотрщик посматривает документ один раз с начала до конца, сразу же форматируя страницу.

Заметим, что использование программ, котрые называются CGI Script (в том числе и SSI, ASP, PHP), и появление в последнее время новых технологий таких, как например, Java изменили представление о HTML документе, как о неком статическом тексте с элементами гипертекстовой разметки. Новые технологии позволяют генерить активные документы и использовать всю технику программирования для их создания.

В следующих абзацах данной статьи будет дан краткий разбор типовой HTML страницы и команд ее форматирования.

Рассмотрим первую строку в нашем примере:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//RU">
<HTML>

Первая строка (комментарий <!..) является ссылкой на "document type prolog", которая позволяет броузеру идентифицировать тип документа (DOCTYPE), как документ в стандарте HTML3.2, определенном IETF (Internet Engineering Task Force). В этой строке также указывается соответствующий DTD (Document Type Declaration - описание типа документа): документ есть PUBLIC (т.е. не зависит от системных установок) и язык документа - русский (RU).

Команда <HTML> означает начало HTML документа, а команда <HEAD> определяет начало заголовка документа, содержащего метаинформацию о документе.

Следущая строка примера

<HEAD><TITLE>WEB Pages</TITLE>
определяет название документа - "WEB Pages", которое будет выведено в заголовке окна броузера.

Строки

<!--DocHeaderStart-->
<BODY BGCOLOR=#FFFFFF >
состоят из комментария, в котором указывается, что здесь начинается документ и первая команда "тела документа" <BODY>

Далее идет гиперссылка и загрузка картинки (gif файла):

<A HREF="welcome.html">
<IMG SRC="/gif/inter/html32.gif"WIDTH="30" HEIGHT="28" BORDER="0" ALT="HTML 3.2"></A>

Строка

<P><HR NOSHADE SIZE=2>

определяет новый параграф и горизонтальную линию без теней ширины 2 пикселя.


ИВТ Федотов А.М. Введение в Internet
Документация по Интернет технологиям

Начало создания курса: Mondy, 19-Aug-1996 10:12:15 NOVST
Дата последней модификации: Wednesday, 17-May-2000 21:33:32 NOVST
© 1996 - 2001, А.М.Федотов
© 1996 - 2001, Институт вычислительных технологий СО РАН, Новосибирск