Нумерованный список:

1. Элемент списка

2. Элемент списка

3. Элемент списка

Результат:

1. Элемент списка

2. Элемент списка

3. Элемент списка

Ненумерованный список:

• Элемент списка

• Элемент списка

• Элемент списка

Результат:

• Элемент списка

• Элемент списка

• Элемент списка

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

Первое определяемое понятие

Пояснение первого понятия

Второе определяемое понятие

Пояснение второго понятияі

Результат:

Первое определяемое понятие.

Пояснение первого понятия.

Второе определяемое понятие.

Пояснение второго понятия.

Ссылки

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

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

Описываются ссылки с помощью дескрипторов и . Если ссылка указывает на некую метку в пределах текущего документа, то описание ссылки будет выглядеть следующим образом:

Это ссылка на метку в документе

Атрибут HREF указывает на имя метки в текущем документе.

На экране ссылка будет выглядеть следующим образом:

Это ссылка на метку в документе

Конечно, при этом необходимо в документе обозначить метку, для которой будет задана ссылка. Для этого используется дескриптор c атрибутом :

Это метка

На экране метка в отличие от ссылок ничем не выделяется среди остального текста.

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

Это ссылка на другой документ

Если же необходимо осуществить переход на метку, расположенную в другом документе, то вышеприведенный пример немного изменится:

Текст ссылки метку в другом документе

URL может быть как относительным, так и абсолютным. Кроме того, ссылка может указывать не только на документ, но также и на изображения, двоичные файлы, звуковые файлы т.д. Поведение броузера при переходе по той или иной ссылке зависит от его конкретных настроек. Так, если ссылка указывает на документ, то он будет загружен, если же это звуковой или видеофайл, то он будет проигран. Если же это двоичный файл, броузер предложит его переписать на локальный диск.

Внедрение изображений

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

Для вставки иллюстраций в документ используется дескриптор :

Атрибут задает имя файла картинки. Имя файла может указывать на как локальный файл, так и на удаленный файл, для чего следует указать соответствующий URL. Файл может представлять собой статическое изображения и иметь графический формат, понимаемый броузером, либо динамическое изображение, представленное в формате GIF89A. В последнем случае в окне броузера файл будет выведен как анимация.

Атрибут ALT указывает на текст, который будет выводиться в окне броузера вместо изображения, если, например, броузер пользователя не поддерживает графику или же отключена опция загрузки изображений. Этот атрибут не является обязательным, однако его использование считается хорошим стилем при составлении Web–документов.

Часто при подготовке страничек с использованием графики случается, что желаемый размер изображения не совпадает с действительным. Например, необходимо поместить картинку на определенной площади с определенным размером. Для этого нужно использовать атрибуты WIDTH и HEIGHT, которые задают требуемые размеры изображения в ширину и высоту соответственно. Например, если необходимо поместить изображение большого размера на площади высотой в 100 и шириной в 200 пикселов, то в тело документа необходимо записать следующее:

Порядок следования этих атрибутов может быть произвольным.

Обилие графики в документе, с одной стороны, улучшает его общий вид, с другой стороны, существенно увеличивает время его загрузки. Чтобы найти компромисс между скоростью загрузки документа и его наглядностью, дизайнеры Web–страниц часто прибегают к такому приему: изображение размещают на страничке в меньшем формате и делают его ссылкой на себя. Если щелкнуть мышкой на таком изображении, то броузер загрузит его и отобразит в оригинальных размерах. Изображение–ссылка описывается в документе следующим образом:

Интересной возможностью представляется «обтекание» изображение текстом. Это весьма популярный способ оформления Web–страниц. При этом на экране картинка окружена текстом, например, слева и снизу. «Обтекание» текста достигается использованием атрибута ALIGN, который имеет такие параметры, как:

LEFT – текст будет охватывать изображение слева-снизу.

RIGHT – текст обхватывает изображение справа-снизу

TOP – изображение окружено текстом справа-сверху

BOTTOM – изображение окружено текстом справа-снизу

MIDDLE – изображение окружено текстом справа-посредине

Например, при составлении Web–странички, приведенной на рис. 1, была использована такая запись в теле документа, описывающая изображение:

Изображения можно использовать и в качестве фона документа. Весь текст и все иллюстрации в документе будут выводиться броузером поверх фонового изображения. Фоновые изображения задаются весьма просто следующим образом:

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

Фреймы

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

Существует два типа фреймовых документов: фрейм–содержащие документы и простые документы. Фрейм–содержащие документы задают структуру самого фрейм–документа, т.е. задают данные о том, как будет разбито окно броузера на подокна. Такие документы содержат ссылки на другие документы. Обычные же документы – это те документы, которые не содержат данные, определяющие фреймы.

Структура фрейм–содержащего документа в общем случае имеет такой вид:

заголовок

</p> <p> <i>Текст</i></p> <p>

Область задания фреймовой структуры

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

Ниже приводится пример фреймового документа:

</p> <p> Ваш броузер не поддерживает фреймы!</p> <p>

Дескриптор описывает либо вертикальное расположение фреймов, либо горизонтальное. Пример:

Этот дескриптор описывает горизонтальное расположение фреймов. Для вертикального расположения запись немного изменяется

В строке размеров элементы отделяются запятой и могут быть заданы следующем образом:

value% – относительный размер фрейма в процентах. Например: 10%,40%,50% – на первое окно выделяется 10% от общего размера окна броузера, на второе окно – 40%, и на третье – 50% соответственно;

value – абсолютный размер в пикселях. Например: 100,540 – на первый фрейм выделяется область шириной в 100 пикселов, на второй – все оставшееся место (для видеорежима монитора 640х480).

C помощью дескрипторов задается только структура фреймов. Для размещения данных во фреймах используются дескрипторы , не имеющие закрывающего варианта. Количество этих дескрипторов обязательно должно соответствовать количеству фреймов, заданных до этого. Каждый дескриптор указывает на URL некоторого документа, который будет отображен в соответствующем фрейме. Это осуществляется с помощью атрибута SRC=URL_ДОКУМЕНТА. При загрузке фрейм–содержащего документа окно броузера будет разбито на подокна, а затем в них будут загружены документы. Пример использования фреймов можно увидеть на рис.1, где изображено окно броузера, разбитое на два фрейма.

При переходе по ссылке в обычном документе его содержимое полностью исчезает с экрана и заменяется новым содержимым другого документа. При использовании фреймов есть возможность при активации ссылок изменять содержимое окна в текущем фрейме, содержимое окна другого фрейма или всего окна броузера. Это осуществляется с помощью комбинации дескриптора и атрибута TARGET (от англ. target – цель). В общем случае формат этого дескриптора выглядит так:

Текст гипертекстовой ссылки

Параметр ИМЯ_ЦЕЛИ представляет собой зарезервированное слово, начинающееся со знака подчеркивания ‘_’. Вот список наиболее употребительных параметров:

TARGET=_SELF – при переходе по ссылке с таким атрибутом обновляется текущий фрейм. Действует по умолчанию.

TARGET=_TOP – обновляется содержимое окна всего броузера.

TARGET=_BLANK – документ будет открыт в новом окне броузера.

На первый взгляд может показаться, что использование параметров «_TOP» и «_BLANK» равнозначно, так как в обоих случаях старое содержимое окна полностью заменяется содержимым другого документа. Однако в первом случае можно вернуться к предыдущему содержимому окна средствами самого броузера (с помощью кнопки BACK на панели инструментов), а во втором случае способ возврата к содержимому предыдущего документа возлагается на составителя Web–странички или самого пользователя.

3. Другие элементы языка HTML

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

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

и

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

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