Теоретические основы. Документ HTML состоит из основного текста документа и тегов разметки, которые, как мы уже знаем, являются наборами обычных символов

Документ HTML состоит из основного текста документа и тегов разметки, которые, как мы уже знаем, являются наборами обычных символов. Таким образом, документ HTML — это, по существу, обычный текстовый файл. Для его создания можно использовать любой текстовый редактор, хотя бы и тот простейший редактор Блокнот, который входит в состав Windows.

Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега <НТМL> и заканчиваться соответствующим закрывающим тегом </НТМL>. Эта пара тегов сообщает
броузеру, что перед ним действительно документ HTML.

Документ HTML состоит из раздела заголовкови тела документа, идущих именно в таком порядке. Раздел заголовков заключен между тегами <HEAD> и </HEAD> и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги <TITLE> и </TITLE>, между которыми размещают «официальный» заголовок документа. Большинство броузеров, работающих в системе Windows, используют этот заголовок, чтобы заполнить строку заголовка окна броузера.

Сам текст документа располагается в теле документа. Тело документа располагается между тегами <BODY> и </BODY>.

Четыре перечисленных парных тега определяют основн ую структуру документа HTML. Они встречаются [или их наличие подразумевается) во всех документах HTML.

На практике определить местоположение этих основных структурных тегов можно и при их отсутствии. Поэтому, если теги <HTML>, <HEAD> и <BODY>, а также соответствующие им закрывающие теги опущены, то программа-броузер может сама определить то место, где они должны были находиться. Тег <TITLE>, определяющий заголовок документа, считается обязательным, но и его пропуск не вызовет катастрофических последствий в современных броузерах. Но все-таки при создании Web-страниц опускать все эти теги не рекомендуется, ведь заранее неизвестно, как поведет себя конкретный броузер, установленный на компьютере пользователя.

Простейший правильный документ HTML (см. пример 1).

Пример 1.

<HTML>

<HEAD>

<TITLE>

Заголовок документа

</TITLE>

</HEAD>

<BODY>

Этот текст можно прочитать на экране

</BODY>

</HTML>

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

Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от <Н1> и </Н1> до <Н6>
и </Н6>. Реально на экране компьютера все эти заголовки изо
бражаются шрифтами разного размера (обычно полужирным
начертанием).

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

Для обозначения обычных абзацев в языке HTML используют
тег <Р> (и соответствующий закрывающий тег </Р>). Теги, описывающие обычные абзацы, являются необязательными. Однако
при наличии этих тегов броузеры четко отслеживают границы
между абзацами.

В языке HTML нет никаких средств для создания абзацного
отступа («красной строки»), поэтому для удобочитаемости текста
между абзацами броузер обычно вводит пустую строку. Важным
средством создания разделителей в тексте являются горизонтальные полоски-линейки, визуально отделяющие разные части
документа друг от друга. Горизонтальная линейка создается тегом <HR>. Это одиночный тег, не имеющий соответствующего
закрывающего тега.

При применении этих тегов важно принять во внимание, что
все кратные («лишние») пробелы между словами и переходы
на новую строку при воспроизведении документа HTML игнорируются.

Если же надо осуществить переход на новую строку без создания
абзаца, можно использовать тег <BR>. Рассмотрим все на примере 2.

Пример 2.

<HTML>

<HEAD>

<TITLE> Функциональные разделы документа </ TITLE >

</HEAD>

<BODY>

<H1> Главный заголовок </H1>

<H2> Подзаголовок </H2>

<P> Эти строки изображаются слитно,

несмотря на то, что в документе

они отделены друг от друга.

<P> Закрывающий тег абзаца не обязателен.

<P> Тег начала абзаца более важен, чем реальный переход на новую строку

<HR>

Текст после горизонтальной линейки <BR> разбит на две строки.
</BODY>
</HTML>

Способность Web-страниц содержать ссылки на другие Web-страницы — одна из наиболее привлекательных особенностей World Wide Web. Создать гипертекстовую ссылку в документе HTML очень просто. Для этого используются теги <А> (и </А>).

При создании гиперссылки обязателен атрибут HREF=. Его значением является адрес URL, на который указывает ссылка. Текст
ссылки размешают между тегами <А> и </А>. При отображении
документа в броузере текст ссылки обычно подчеркивается и
изображается синим цветом. Щелчок на ссылке приводит к
переходу по заданному адресу URL.

Гипертекстовые ссылки могут указывать на другую Web-страницу или на любой файл, имеющийся на Web-узле. При щелчке на такой ссылке предоставляется возможность его загрузки или открытия.

Если Web-страница, на которую указывает ссылка, располагается на другом Web-узле, то в качестве значения атрибута HREF=
должен использоваться полный адрес URL документа, включая
название протокола и адрес Web-узла. Такие ссылки называют
внешними.

Если ссылка указывает на другую страницу того же самого
Web-узла, то достаточно указать только относительный путь
поиска документа. В этом случае создается внутренняя ссылка.
Использовать внутренние ссылки удобнее, так как в этом случае
при переносе Web-узла целиком на другой сервер, не требуется
вносить изменения в отдельные документы.

Гипертекстовые ссылки могут указывать на определенное место
внутри страницы, если в нужное место предварительно встроить
якорь. Якорь также использует теги <А> и </А>, но вместо атрибута HREF= для него обязательным является атрибут NAME=.
Значением этого атрибута является имя якоря. Оно может состоять только из латинских букв и цифр и не должно содержать
пробелов.

Для ссылки на установленный якорь надо указать имя якоря в
конце адреса URL после имени документа, отделив его символом «#» (см. пример 3).

Пример 3.

<HTML>

<HEAD>

<ТIТLE>Ссылки и якоря </ТIТLE >

</НЕАD>

<BODY>

Новые версии стандартных программ операционной системы и самые свежие драйверы можно найти на Web-узле компании

<A HREF=http://www.microsoft.com/">Microsoft </A>.

<Р>А теперь можно перейти к <А HREF="my.htm"> моей личной

странице </А>.

<Р> 0 том как связаться с автором, рассказано

<А HREF="#address"> в конце этой страницы </А>

Здесь располагается основное содержание страницы <А NAME="address"> Aдpec электронной почты </А>

</BODY></HTML>

Иллюстрации играют важнейшую роль в оформлении Web-страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML, но отображаются броузером внутри Web-страницы.

Для размещения рисунков в документе служит одиночный тег, <IMG>.

Этот тег всегда должен содержать обязательный атрибут SRC=,
значение которого составляет адрес URL файла изображения,
записанный в абсолютной или относительной форме. При
загрузке документа рисунок также загружается и отображается
в том месте документа, где расположен тег <IMG>. На пример, <IMG SRC=”clock.jpg”>.

Изображение переносится на Web-страницу с сохранением
размера. Если при компоновке изображения необходимо его
перемасштабировать, нужные размеры рисунка можно задать с
помощью атрибутов WIDTH= (ширина) и HEIGHT= (высота). Значения этих атрибутов определяют ширину и высоту изображения
на Web-странице в пикселах. <IMG SRC=”clock.jpg” WIDTH=50 HEIGHT=150>

Web-страница может отображаться броузером, не имеющим средств для показа изображений. Пользователи часто отключают показ рисунков, чтобы ускорить прием документа. И в том и в другом случае желательно дать возможность узнать, что же изображено на картинке, если ее нельзя увидеть. Для этой цели используют альтернативный текст.

Альтернативный текст — это, по сути, более или менее подробное описание изображения. Если броузер не может по той или
иной причине показать рисунок, он вместо него выводит этот
альтернативный текст. Альтернативный текст задается в теге
<IMG> значением специального атрибута ALT=. На пример, <IMG SRC=”clock.jpg” ALT=”Будильник”>

Изображение, как и текст, можно использовать в качестве ссылки. Для этого тег <IMG> должен быть помещен между тегами <А HREF> </А>, определяющими ссылку. Изображение-ссылка отображается в синей рамке. При наведении на такой рисунок указатель принимает ту же форму, что и при наведении на текстовую ссылку. Этим приемом на Web-страницах создают графические кнопка перехода.

На пример, <A HREF="new3.htm"> <IMG SRC="146.jpg" HEIGHT=600 WIDTH=464 ALT=”Будильник”> </A>

Язык HTML содержит теги, которые служат исключительно для оформления документа.

Для задания размера, цвета и начертания шрифта служит тег
<FONT>. Этот парный тег влияет на весь текст, заключенный
между открывающим и закрывающим тегами. Тег <FONT> должен иметь хотя бы один из трех возможных атрибутов: SIZE=;
COLOR=; FACE=.

Атрибут S1ZE= задает размер шрифта. Предполагается, что возможны семь заранее заданных размеров шрифта (от 1 до 7). Эти
значения не соответствуют каким-либо единицам измерения,
но чем больше значение, тем крупнее шрифт. По умолчанию
используется значение 3.

Атрибут COLOR= задает цвет шрифта, который может быть задан
либо ключевым словом (например, RED — красный), либо шестнадцатеричным значением в системе RGB (например, #FF0000 -
это тоже красный).

Атрибут FACE= задает вид шрифта. Значением этого атрибута
должно быть название одного из шрифтов, установленных на
компьютере. Но для документа, размещенного в Интернете,
нельзя предсказать, какие шрифты доступны на компьютере
пользователя, поэтому этот атрибут лучше не использовать.

Чтобы задать значения этих параметров для всего документа в
целом, используют одиночный тег <BASEFONT>. Он содержит
аналогичные атрибуты и задает значение вида, цвета и размера
шрифта, используемое по умолчанию.

Специальная группа тегов служит для изменения начертания
шрифта. Теги <В> и </В> делают текст, заключенный между
ними, полужирным. Теги <I> и </I> задают курсивное начертание,
<U> и </U> -- подчеркивание, a <S> и </S> -- вычеркивание
текста (пример 4).

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

Все эти теги парные и воздействуют на текст, который заключен между открывающим и закрывающим тегами. Закрывающий тег обязателен для каждого из открывающих тегов этой группы.

Пример 4

<HTML>

<HEAD>

<TITLE>Управление стилем шрифта</TITLE>

</HEAD>

<BODY>

Этот текст использует нестандартный стиль шрифта, заданный по умолчанию.

<P> FONT SIZE=-2 FACE="Times New Roman" COLOR="GREEN">

Этот текст мельче и использует другой шрифт и другой цвет. </FONT>

<Р> <В>Полужирный шрифт </В> и <I> курсив </I> используют для выделения фрагментов текста.

<P>Использование <U> подчеркивания </U> не рекомендуется, так как подчеркнутый текст легко перепутать со ссылкой. <P> <S> Вычеркивание текста </S> иногда применяют для разметки фрагментов, потерявших актуальность, но по каким-то причинам сохраняемых в документе.

</BODY> </HTML>

Тег <СIТЕ> указывает, что соответствующий текст является
цитатой из другого источника. Такой текст обычно изображается курсивом.

Так как язык HTML был создан людьми, связанными с компьютерами, целая группа тегов предназначена для представления
текстов компьютерных программ и результатов взаимодействия
пользователя с ними. Так тег <CODE> указывает на исходный
текст компьютерной программы. Тег <KBD> оформляет текст,
который должен быть (или был) введен с помощью клавиатуры.
Этими тегами принято размечать команды пользователя и названия клавиш. Тег <SAMP> заключает в себе текст, который является примером вывода компьютерной программы. Тег <VAR>
служит для оформления названий программных переменных или
выбранных пользователем параметров компьютерной команды.
Текст, ограниченный любым из этих тегов, обычно изображается при выводе на экран моноширинным шрифтом. Кроме того,
некоторые броузеры выводят текст, содержащийся между тегами
<KBD> и </KBD>, полужирным шрифтом.

Тег <ЕМ > предназначен для выделения текста. Выделенный текст обычно изображается курсивом. Более сильное выделение обозначается тегом <STRONG>. Такой текст изображается полужирным шрифтом. Так как здесь используется смысловое выделение вместо чисто оформительского, рекомендуется использовать теги <ЕМ> и <STRONG> вместо тегов <I> и <В>> соответственно (пример 5).

Пример 5.

<HTML>

<HEAD>

<TITLE>Элементы фразы<TITLE>

</HEAD>

<BODY>

<P><СIТЕ> На сайт конгресса США были выложены все 445 страниц доклада специального прокурора L Кеннета Стара </CITE> - это цитата из газеты "Московский комсомолец".

<P>СОDЕ>Тексты программ</СОDЕ>, команды, <КВD>вводимые с клавиатуры </КВD>, примеры <SАМР>вывода компьютерных программ </SАМР> и программные <VAR> переменные <VAR> обычно отображаются на экране примерно одинаково.

<Р><ЕМ> Выделение </ЕМ> и <SТРОNG> сильное выделение</SТРONG> используется как смысловой эквивалент курсивного и полужирного начертания.

</BODY> </HTML>

При работе с текстовыми процессорами обычно используют два типа списков — упорядоченные (нумерованные) и неупорядоченные (маркированные). Язык HTML позволяет создавать целых пять разных видов списков. Правда, из этих пяти видов два (списки меню и списки каталога) считаются устаревшими и практически не употребляются. Таким образом, в настоящее время используют три вида списков: упорядоченные, неупорядоченные и списки определений.

Упорядоченные и неупорядоченные списки создают примерно
одинаковым образом. Список всегда располагается между
открывающим и закрывающим тегами списка: <OL> и </OL> в
случае упорядоченного списка; <UL> и </UL> — в случае неупорядоченного.

Внутри списка располагаются элементы списка. Их заключают между тегами <LI> и </LI>, хотя в данном случае закрывающий тег может опускаться, так как в этом случае ясно, где он должен располагаться.

Теги <OL>, <UL> и <LI> могут содержать атрибут TYPE=, значение которого указывает на способ пометки элементов списка. Упорядоченные списки можно нумеровать арабскими цифрами, римскими цифрами, латинскими буквами (как в верхнем, так и в нижнем регистре). Неупорядоченные списки помечаются маркерами в виде черного кружка (по умолчанию), белого кружка или квадратика (см. пример 6).

Списки могут быть вложенными. Кроме того, элементы списков могут содержать гиперссылки, а также теги, используемые для форматирования и для выделения элементов фразы.

Пример 6.

<UL>

<LI>Внешние<OL>

< LI >Принтер

< LI >Сканер

< LI >Монитор

</OL>

<LI>Внутренние

</UL>

Списки определений начинаются с тега <DL> и заканчиваются
тегом </DL>. Маркеры или нумерацию в этих списках не используют. Список состоит из определяемых терминов и соответствующих определений. Определяемые термины помечаются теп
<DT>, а определения — тегом <DD>. Закрывающие теги можно
опускать. Предполагается, что определяемые термины и oпрeделения чередуются, хотя это и не требуется строго. Oпpeдeлeния
изображаются на экране с отступом от левого края (см. пример 7).

Пример 7

<DL>

<DT><STRONG>MIDI (Musical Instrument Digital lnterface) </STRONG>

<DD>Стандарт подключения к компьютеру музыкальных инструментов.

<DT><STRONG>MPC (Multimedia PC)</STRONG>

<DD>Стандарт, описывающий требования к мультимедийному

персональному компьютеру.

<DT><STRONG>OLE (Object Linking and Embedding)</STRONG>

<DD>Технология связывания и внедрения объектов, стандарт

компании Microsoft.

<DD>Стандарт, по которому элемент оборудования содержит

сведения о модели и компании-изготовителе и допускает настройку

программными средствами.

</DL>

Широкое распространение мультимедиа пришлось на период, когда служба World Wide Web уже существовала, так что язык HTML не сразу приспособился к появлению на Web-страницах мультимедийных объектов. Файлы аудио и видео до сих пор рассматриваются как «внешние» объекты, воспроизводимые через встроенные и вспомогательные приложения.

Мультимедийные файлы видео и звука могут использовать различные форматы. Обычные форматы требуют полной загрузки файла, прежде чем станет возможным его воспроизведение. Современные потоковые форматы позволяют воспроизводить звук и видеоизображение в реальном времени по ходу загрузки данных.

В потоковом формате в Интернете передаются радиотрансляции. Например, в России в таком формате вещает радиостанция «Серебряный дождь» (http://www.silver.ru).

Самый простой способ вставить мультимедийный объект на Web-страницу — это использовать тег гиперссылки <А>. Создать такую ссылку проще всего, и в этом случае мультимедийный файл не отвлекает читателя от остального содержимого документа HTML.

В некоторых случаях требуется внедрить звуковой или мультимедийный файл непосредственно в Web-страницу, например, для того, чтобы иметь возможность воспроизводить этот файл автоматически. В настоящее время для этой цели удобнее всего применять тег <EMBED>, хотя он, строго говоря, не входит в стандарт HTML. Этот тег распознается двумя наиболее распространенными броузерами — Internet Explorer и Netscape Navigator, хотя возможность воспроизведения мультимедийного файла определяется исключительно наличием соответствующего встроенного приложения.

Тег <EMBED> является одиночным, так что закрывающий тег не требуется. Его обязательным атрибутом является SRC=, значение которого представляет абсолютный или относительный путь поиска соответствующего файла. Возможно также использование атрибутов WIDTH= и HEIGHT=, задающих размеры (ширину и высоту) прямоугольной области на экране, «отведенной» под воспроизведение мультимедийного объекта (пример 8).

<HTML>

<HEAD>

<ТITLЕ>Мультимедиа в документе</ТITLE>

</HEAD>

<BODY>

<Р><А HREF="music.wav">Щелкните здесь, чтобы послушать музыку</А>

<Р> Видеоролик, воспроизводимый в рамках страницы <EMBED SRC="file.avi" WIDTH="200" HEIGHT="200">

</BODY> </HTML>

Таблица — это один из наиболее удобных способов представления больших объемов данных. Язык HTML имеет богатейшие возможности по созданию разных видов таблиц.

Таблица в языке HTML начинается с тега <TABLE> и заканчивается закрывающим тегом </TABLE>. Текст внутри таблицы должен
быть заключен в специальные теги, определяющие элементы
таблицы (заголовки, строки и ячейки).

Между тегами <TABLE> и </TABLE> может один раз встретиться
пара тегов <CAPTION> и </CAPTION>, определяющая заголовок
таблицы. Заголовок таблицы размещается непосредственно над
таблицей (по умолчанию) или непосредственно под таблицей.

Далее следуют теги <TR> и </TR>, определяющие строки таблицы.
Закрывающий тег можно опускать, так как строка таблицы
заканчивается перед началом следующей строки или вместе с
таблицей.

Каждая строка таблицы состоит из ячеек. Ячейки помечаются
либо тегами <ТН>, содержащими заголовки столбцов и строк,
либо тегами <TD>, содержащими обычные данные. Эти теги
также являются парными, но закрывающие теги и здесь могут
опускаться, так как это не вызывает разночтений.

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

Из специфических атрибутов таблиц можно, например, указать
атрибут BORDER=, который позволяет создавать рамку вокруг
таблицы и вокруг отдельных ячеек. Значением этого атрибута
является толщина внешней рамки в пикселах.

Пример 9

<HTML>

<BODY>

<САРТION>Основные теги таблицы </САРТION> <ТR><TD><B>Открывающий тег</В><TD><В>Закрывающий тег</В> <ТD><В>Описание</В>

<TR><TD>TABLE<TD ROWSPAN=2>Обязателен<ТD>Начало и конец таблицы

<TR><TD>CAPTION <ТD>Начало и конец заголовка таблицы

<TR><TD>TR <TD ROWSPAN=2> Необязателен <ТD> Начало строки таблицы

<TR><TD>TD <ТD>Начало ячейки таблицы

</TABLE>

</BODY> </HTML>

В примере 9, использованы и другие атрибуты, с помощью которых увеличены промежутки между ячейками и созданы ячейки увеличенной высоты.

Язык HTML позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами.

Для создания фреймов используют особый документ HTML,
структура которого отличается от обычной. Такой документ не
содержит раздела «тела» документа и, на самом деле, не содержит какого-либо текста вообще. Вместо этого он содержит
описание фреймов, заключенное между тегами <FRAMESET> и
</FRAMESET>. В этом описании указывают размеры и порядок
размещения областей в окне броузера, а также задают документы, которые должны загружаться в каждую из этих областей.

Тег <FRAMESET> должен содержать обязательный атрибут COLS=
или ROWS=, определяющий способ разбиения окна. При использовании атрибута COLS= окно делится на области вертикальными
линиями, а при использовании атрибута ROWS= -- горизонтальными. Если заданы оба эти атрибута, в окне создается сетка
из подобластей.

Значения этих атрибутов определяют высоту (или ширину) областей окна. Параметры для каждого столбца (строки) задают через запятую в пикселах или в процентах (символ «%»). В качестве последнего параметра можно использовать символ «звездочка» (*). Под такой фрейм выделяется все остающееся свободное пространство.

Между тегами <FRAMESET> и </FRAMESET> располагают дополнительные теги, указывающие назначение созданных областей. Для этой цели можно использовать вложенные теги
<FRAMESET>, задающие дополнительное разбиение окна, или
одиночные теги <FRAME>, определяющие документы, загружаемые в отдельные области. Число элементов, вложенных между
тегами <FRAMESET> и </FRAMESET>, должно соответствовать
числу созданных областей.

Тег <FRAME> должен содержать обязательный атрибут SRC=,
определяющий документ, который будет загружен в данную
область. Дополнительные атрибуты позволяют управлять рамками между отдельными фреймами и некоторыми другим свойствами (см. пример 10).

Пример 10

<HTML>

<HEAD>

<TITLE>Страница с навигационной панелью</ТITLE>

</HEAD>

</FRAMESET>

</HTML>

HTML> <HEAD>

<ТITLE>Сложная структура документа</ТITLE> </HEAD>

<FRAMESETROWS="45%,30%,25%">

<FRAMESRC="doc2.htm">

</FRAMESET>