Структура гипертекстового документа. Цвет и инструкции заголовка гипертекстового документа. Гиперссылки и форматирование гипертекстового документа. Пример простейшего сайта.
Под гипертекстовым документом понимают текст, содержащий специальные элементы, при обращении к которым осуществляется переход к другому документу. Эти элементы называются гиперссылками и могут выполняться в виде фрагмента текста, кнопки, рисунка и тому подобное. Ссылки могут использоваться и для перехода в различные разделы одного и того же документа.
Для создания гипертекстовых документов используется специальный язык - язык гипертекстовой разметки (. HTML-документ представляет собой, с одной стороны, текст, а с другой - программу. По отношению к этой программе браузер является интерпретатором. В языке HTML операторы, которые дают инструкции браузеру, что и как отображать, называют тэгами. Вся информация о форматировании документа сосредоточена между знаками "<" и ">". Именно такой фрагмент называется тэгом, а значки метками. Многие метки, помимо имени, могут содержать атрибуты - элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку.
Следующие метки являются обязательными:
<html> .. </html> - первая метка должна открывать HTML-документ, вторая - завершать его;
<head> .. </head> - эта пара меток указывает на начало и конец заголовка документа.
<title>..</title> - все, что расположено между этими метками толкуется браузером как название документа и отображается в заголовке окна браузера;
<body>..</body> - эта пара меток указывает на начало и конец тела HTML-документа, определяющее содержание документа.
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Атрибуты имеют следующий смысл:
Bgcolor-определяет цвет фона документа; text-определяет цвет текста документа; link-определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылки; vlink-определяет цвет ссылки на документ, который уже был просмотрен ранее; alink-определяет цвет ссылки на документ, когда на нее установлен указатель мыши, то есть непосредственно перед переходом по ссылке.
Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). В тексте HTML-документа задание указанных цветов выглядит так: <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000">.
Заголовок HTML-документа, не отображается в окне браузера, но может включать неограниченное число мета-инструкций. Мета-инструкция - это способ определения некоторой переменной указанием ее имени (атрибут NAME) и значения (атрибут CONTENT). Вот некоторые наиболее типичные мета-инструкции:
<META NAME="description" CONTENT=" . . . краткое описание документа . . ." > Эта мета-иструкция определяет переменную description, содержащую краткое описание документа. Многие поисковые машины анализируют при поиске содержимое этой переменной, сохраняют переменную в своих базах данных и демонстрируют ее в ответ на запросы пользователей.
<META NAME="keywords" CONTENT=" . . . перечень ключевых слов . . ."> Эта мета-инструкция определяет переменную keywords, содержащую набор ключевых слов, описывающих содержание документа. Ключевые слова позволяют значительно повысить эффективность процедуры поиск документа.
В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:
<A HREF="[. . . адрес перехода . . .]">. . . выделенный фрагмент текста . . .</A>. Например: <A HREF="pr.htm">Перейти к оглавлению</A>.
Непарная метка <BR>, которая используется, если необходимо перейти на новую строку, не прерывая абзаца.
К основным средствам форматирования относятся следующие метки:
<H1>. . .</H1>, . . . ,<H6>. . .</H6> - Заголовок первого уровня - самый крупный, шестого - самый мелкий;
<P>. . .</P> - эта пара меток описывает абзац. Все, что заключено между <P> и </P> воспринимается как один абзац.
Указанные метки могут содержать дополнительный атрибут ALIGN, позволяющий осуществлять выравнивание. Например:
<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>;
<P ALIGN=RIGHT>Выравнивание абзаца по правому краю</P>;
Текст, заключенный между метками <PRE> и </PRE> выводится на экран как есть - со всеми пробелами, символами табуляции и конца строки, что очень удобно при создании простых таблиц.
Любой текст, объект, заключенный в пару меток <CENTER> . . . </CENTER> будет выровнен по центру. Для изменения начертания букв могут использоваться следующие тэги:
<BIG> . . . </BIG> - увеличивает размер букв;
<B> . . . </B> - жирный шрифт;
<I> . . . </I> - курсив;
<U> . . . </U> - подчеркнутый.
Пример простейшего сайта.
Файл firma.htm
<HTML> - начало документа
<HEAD> - начало заголовка документа
<TITLE>ТОРГОВАЯ ФИРМА</TITLE> - заголовок окна браузера
<META NAME="Keywords" CONTENT="торговля,товары,услуги">
ключевые слова
</HEAD> - конец заголовка документа
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" >
начало "тела" документа и задание цвета фона, букв и гиперссылок
<BR><BR><BR><BR><BR> - пять переводов строки
<CENTER><BIG>ФИРМА</BIG></CENTER>
слово ФИРМА выравнивается по центру и выводится большим размером
<BR><BR><BR><BR><BR> - пять переводов строки
<CENTER><A HREF="firma1.htm">1. О ФИРМЕ</A></CENTER>
выровненная по центру гиперссылка название гиперссылки
</BODY> - конец "тела" документа
</HTML> - конец документа
Файл firma1.htm
<HTML>
<HEAD>
<TITLE>О ФИРМЕ</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" >
<PRE>
Наша фирма была основана в ..... году.
</PRE>
<BR><BR><BR>
<CENTER><A HREF="firma.htm">На главную страницу</A></CENTER>
</BODY>
</HTML>