Этот текст на четыре размера больше обычного.
Необходимо заметить, что пары дескрипторов <U> и </U>, а также <FONT SIZE> и </FONT> являются элементами языка HTML версии фирмы Netscape и поэтому могут не поддерживаться остальными броузерами.
Текстовая информация, размещаемая на Web–страницах, организована в абзацы. Абзац начинается дескриптором <Р> и завершается закрывающим дескриптором </P>, однако последний необязателен. Пример кода на HTML:
<P>Первый абзац </P>
<P> Второй абзац </P>
В результате на экране будет такой результат:
Первый абзац
Второй абзац
При составлении документа необходимо учитывать, что броузер игнорирует пробелы между словами и переводы строк при форматировании текста, поэтому он рассматривает как абзац только тот текст, который находится между дескрипторами <P> и </P>. Принудительный разрыв строки задается дескриптором <BR>, который не имеет закрывающего варианта. Пример кода:
Первая строка
<BR>
Вторая строка
В результате броузер выведет на экран:
Первая строка
Вторая строка
Если же нужно вывести на экран текст с нужным количеством пробелов и разрывами строк, необходимо заключить его в дескрипторы <PRE> и </PRE>. Это обычно используется для вывода на экран листингов исходного текста программ. При этом текст будет выведен моноширинном шрифтом.
Создание заголовков
Заголовки различного уровня задаются с помощью дескрипторов <Hn> и </Hn>, где n – число от 1 до 6. Самый крупный заголовок задается дескриптором <H1>, самый маленький – дескриптором <H6>. Например:
<H1> Это заголовок уровня 1 </H1>
<H3> Это заголовок уровня 3 </H3>
<H6> Это заголовок уровня 6 </H6>
В результате на экране будет выведено:
Это заголовок уровня 1
Это заголовок уровня 3
Это заголовок уровня 6
Заголовки являются одним из наиболее часто используемых элементов оформления документов в WWW.
Создание списков
В языке HTML существует возможность задавать списки трех типов: нумерованные списки, ненумерованные списки, списки определений. Начало и конец списка задается специальными дескрипторами, а перед каждым элементом списка задается дескриптор <LI>, не имеющий закрывающего варианта.
Нумерованный список:
<OL>
<LI> Элемент списка
<LI> Элемент списка
<LI> Элемент списка
</OL>
Результат:
Ненумерованный список:
<UL>
<LI> Элемент списка
<LI> Элемент списка
<LI> Элемент списка
</UL>
Результат:
* Элемент списка
* Элемент списка
* Элемент списка
Списки определений представляют собой группы текста, по два элемента каждая, при этом второй элемент смещен вправо относительно первого. Как правило, такие списки используются для пояснения различных понятий. Пример:
<DL>
<DT> Первое определяемое понятие
<DD> Пояснение первого понятия
<DT> Второе определяемое понятие
<DD> Пояснение второго понятияі
</DL>
Результат:
Первое определяемое понятие.
Пояснение первого понятия.
Второе определяемое понятие.
Пояснение второго понятия.
Ссылки являются одним из основных элементов языка HTML. Ссылки предлагают пользователю быстрый и удобный способ для перемещения в то или иное место в документе или даже в другой документ. Например, вместо того, чтобы листать длинный Web–документ в поисках нужного фрагмента, можно с помощью простого щелчка мыши мгновенно переместиться на нужное место (если, конечно, для этого предусмотрена соответствующая ссылка). Если есть два разных документа, то для того, чтобы обеспечить доступ из одного документа в другой, необязательно их совмещать вместе, достаточно в одном документе сделать ссылку на другой и все будет сводиться к простому щелчку мышки.
На экране ссылки выглядят как строка или строки текста, выделенные иным цветом и подчеркнутые тонкой линией. Если подвести к этому участку текста курсор мышки, он превратиться в изображение указательного пальца, а после щелчка на этом месте будет осуществлен переход по этой ссылке.
Описываются ссылки с помощью дескрипторов <A> и </A> . Если ссылка указывает на некую метку в пределах текущего документа, то описание ссылки будет выглядеть следующим образом:
<A HREF=#ИМЯ_МЕТКИ> Это ссылка на метку в документе </A>
Атрибут HREF указывает на имя метки в текущем документе.
На экране ссылка будет выглядеть следующим образом:
Это ссылка на метку в документе
Конечно, при этом необходимо в документе обозначить метку, для которой будет задана ссылка. Для этого используется дескриптор <A> c атрибутом <NAME>:
<A NAME=ИМЯ_МЕТКИ> Это метка </A>
На экране метка в отличие от ссылок ничем не выделяется среди остального текста.
Ссылки также могут указывать на другой документ, возможно, находящийся на другом конце света. Пример описания такой ссылки выглядит следующим образом:
<A HREF=URL> Это ссылка на другой документ </A>
Если же необходимо осуществить переход на метку, расположенную в другом документе, то вышеприведенный пример немного изменится:
<A HREF=URL#ИМЯ_МЕТКИ> Текст ссылки метку в другом документе </A>
URL может быть как относительным, так и абсолютным. Кроме того, ссылка может указывать не только на документ, но также и на изображения, двоичные файлы, звуковые файлы т.д. Поведение броузера при переходе по той или иной ссылке зависит от его конкретных настроек. Так, если ссылка указывает на документ, то он будет загружен, если же это звуковой или видеофайл, то он будет проигран. Если же это двоичный файл, броузер предложит его переписать на локальный диск.
Использование изображений позволяет красочно оформлять Web–документы, сочетание текста и графики придает любой страничке приятный вид и наглядность.
Для вставки иллюстраций в документ используется дескриптор <IMG>:
<IMG SRC=ИМЯ_ФАЙЛА ALT=КОММЕНТАРИЙ>
Атрибут задает имя файла картинки. Имя файла может указывать на как локальный файл, так и на удаленный файл, для чего следует указать соответствующий URL. Файл может представлять собой статическое изображения и иметь графический формат, понимаемый броузером, либо динамическое изображение, представленное в формате GIF89A. В последнем случае в окне броузера файл будет выведен как анимация.
Атрибут ALT указывает на текст, который будет выводиться в окне броузера вместо изображения, если, например, броузер пользователя не поддерживает графику или же отключена опция загрузки изображений. Этот атрибут не является обязательным, однако его использование считается хорошим стилем при составлении Web–документов.
Часто при подготовке страничек с использованием графики случается, что желаемый размер изображения не совпадает с действительным. Например, необходимо поместить картинку на определенной площади с определенным размером. Для этого нужно использовать атрибуты WIDTH и HEIGHT, которые задают требуемые размеры изображения в ширину и высоту соответственно. Например, если необходимо поместить изображение большого размера на площади высотой в 100 и шириной в 200 пикселов, то в тело документа необходимо записать следующее:
<IMG SRC=ИМЯ_ФАЙЛАALT=КОММЕНТАРИЙWIDTH=200 HEIGHT=100>
Порядок следования этих атрибутов может быть произвольным.
Обилие графики в документе, с одной стороны, улучшает его общий вид, с другой стороны, существенно увеличивает время его загрузки. Чтобы найти компромисс между скоростью загрузки документа и его наглядностью, дизайнеры Web–страниц часто прибегают к такому приему: изображение размещают на страничке в меньшем формате и делают его ссылкой на себя. Если щелкнуть мышкой на таком изображении, то броузер загрузит его и отобразит в оригинальных размерах. Изображение–ссылка описывается в документе следующим образом:
<A HREF=ИМЯ_ФАЙЛА><IMG SRC=ИМЯ_ФАЙЛА АLT=КОММЕНТАРИЙ WIDTH=200 HEIGHT=100></A>
Интересной возможностью представляется «обтекание» изображение текстом. Это весьма популярный способ оформления Web–страниц. При этом на экране картинка окружена текстом, например, слева и снизу. «Обтекание» текста достигается использованием атрибута ALIGN, который имеет такие параметры, как:
LEFT – текст будет охватывать изображение слева-снизу.
RIGHT – текст обхватывает изображение справа-снизу
TOP – изображение окружено текстом справа-сверху
BOTTOM – изображение окружено текстом справа-снизу
MIDDLE – изображение окружено текстом справа-посредине
Например, при составлении Web–странички, приведенной на рис. 1, была использована такая запись в теле документа, описывающая изображение:
<IMG SRC=«file:///D|/MYPAGE/Cnn_logo.gif» HEIGHT=80 WIDTH=103 ALIGN=RIGHT>
Изображения можно использовать и в качестве фона документа. Весь текст и все иллюстрации в документе будут выводиться броузером поверх фонового изображения. Фоновые изображения задаются весьма просто следующим образом:
<BODY BACKGROUND=ИМЯ_ФАЙЛА>
Если размер изображения недостаточно большой, чтобы заполнить собою все окно броузера, последний в таком случае просто размножит изображение до полного заполнения окна.
Фреймы
Одними из последних нововведений в официальной версии языка HTML являются так называемые фреймы. При использовании фреймов окно броузера разбивается на несколько подокон, в каждом из которых можно отображать любые Web–документы, осуществлять их прокрутку независимо от других окон. Хорошо продуманная структура фреймов может существенно облегчить навигацию по документам и улучшить восприятие информации. В качестве примера можно привести электронный вариант книги или журнала, когда в одном окне можно выбирать разделы–ссылки содержания, а в соседнем окне просматривать информацию, непосредственно относящуюся к конкретному разделу из содержания.
Существует два типа фреймовых документов: фрейм–содержащие документы и простые документы. Фрейм–содержащие документы задают структуру самого фрейм–документа, т.е. задают данные о том, как будет разбито окно броузера на подокна. Такие документы содержат ссылки на другие документы. Обычные же документы – это те документы, которые не содержат данные, определяющие фреймы.