Читайте также:
|
Структурирование текста. Чтобы сделать текст HTML более привлекательным, следует структурировать его. Пользователи World Wide Web стремятся иметь возможность быстро определить, имеется ли в документе нужная информация. Чтобы облегчить им просмотр, автор может разбить HTML-документ на логические разделы, каждый из которых посвящен определенной теме.
Разбив документ, можно включить в него информативные заголовки к каждому разделу. Это позволит читателю быстро перейти к интересующему его материалу.
Добавление заголовков. Заголовки в HTML структурируют текст, составляющий тело документа. Вероятно, из всех дескрипторов форматирования в документах HTML чаще всего используются элементы заголовков.
Элемент заголовка является контейнером и должен иметь открывающий (<Н1>) и закрывающий (</Н1>) элементы. В HTML шесть уровней заголовков: H1 (верхний уровень), Н2, HЗ, H4, Н5 и Н6 (нижний уровень). Каждый из этих уровней выглядит определенным образом в браузере читателя.
Пример: <HTML>
<HEAD>
<TITLE> "Работа со структурированным текстом": Пример </TITLE>
</HEAD>
<BODY>
<H1>Заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3>
<H4>Заголовок четвертого уровня</H4>
<H5>Заголовок пятого уровня</H5>
<H6>Заголовок шестого уровня</H6>
</BODY>
</HTML>
Хотя совсем необязательно использовать все уровни заголовков, лучше не пропускать некоторые из них, поскольку это может вызвать проблемы у автоматических конверторов текста. В частности, разрабатываемые сейчас алфавитные Web-указатели смогут выполнять поиск в Web-документах и структурировать их. Если некоторые уровни заголовков пропущены, то ориентироваться в такой структуре более сложно.
Заголовки являются дескрипторами контейнерного типа и требуют обязательного использования открывающего и закрывающего дескрипторов. До и после заголовка предполагается обязательный разрыв абзаца. Заголовок нельзя разместить в середине абзаца для изменения размера шрифта или его гарнитуры.
При использовании заголовков их целесообразно считать элементами структуры HTML-документа. Рекомендуется использовать новый уровень заголовка в том случае, когда имеются от двух до четырех элементов одинакового уровня. Если их количество превышает четыре элемента, рекомендуется разбить этот материал на два родительских заголовка.
Добавление горизонтальных линий. Еще один способ выделения смысловых фрагментов в документе заключается в использовании горизонтальных линий. Эти линии отчетливо показывают границы между разделами, что важно для выделения различных частей документа. Многие браузеры используют горизонтальную линию, которая придает четкий вид документу и зрительно увеличивает глубину (рис. 8.2).
Горизонтальную линию можно создать с помощью элемента <HR>. Этот дескриптор рисует затененную горизонтальную линию вдоль экрана браузера. Дескриптор <HR> не является контейнером и не требует закрывающего дескриптора. До и после горизонтальной линии применяется обязательное разделение абзаца. Например:
<HTML>
<HEAD>
<TITLE>"Работа со структурированным текстом": Пример </TITLE>
</HEAD>
<BODY>
<H1>Заголовок первого уровня</H1>
<HR>
<H2>Заголовок второго уровня</H2>
<HR>
<H3>Заголовок третьего уровня</H3>
<HR>
<H4>Заголовок четвертого уровня</H4>
<HR>
<H5>Заголовок пятого уровня</H5>
<HR>
<H6>Заголовок шестого уровня</H6>
</BODY>
</HTML>
Атрибуты элемента <HR> открывают широкие возможности при создании HTML-документов, не усложняя их.
Горизонтальные линии рекомендуется использовать в тех случаях, когда имеет место жесткое разделение текста. Нежелательно, чтобы линии располагались между заголовком и последующим текстом. Их также не следует использовать для создания пустот в документе.
Организация оглавления для структурированного текста. Наряду с использованием ссылок на другие HTML-файлы устанавливаются и элементы привязки для ссылок на разделы внутри текущего документа. Например, в верхней части Web-страницы можно поместить оглавление, а затем связать его пункты с последующими разделами Web-страницы. Таким образом, мы получим оглавление, при щелчке на любом из пунктов которого будет осуществляться автоматический переход на указанный раздел.
Осуществляется это в два этапа. Сначала в HTML-файле создается элемент привязки, указывающий, куда переходить по ссылке. Для этого используется стандартный элементы <A> с параметром <HREF>. Далее, с помощью элемента <A> с параметром <NAME> в тексте документа указывается место, на которое дается ссылка.
Авторы могут включать в свои Web-страницы изображения в различных форматах (GIF, JPEG, PNG и др.). На загрузку изображений затрачивается определенное, порою достаточно большое время и ресурсы процессора, зависящие, в том числе, от размеров изображения и глубины цвета. Поэтому рекомендуется использовать файлы с изображениями небольших размеров, оптимизированные для использования в Internet.
В предшествующих версиях HTML (до 3.2) авторы могли включать изображения с помощью тега IMG. В версии HTML 4.0 для включения изображений могут использоваться элементы IMG и OBJECT.
Обычно изображения включаются в тело HTML-документа в виде изображения или объекта. Работа с объектами будет рассмотрена ниже, а в данном параграфе ограничимся только изображениями.
Включение изображения с помощью элемента IMG. Для включения графики в документ используется элемент:
<IMG src="ImageName">
где ImageName - URL-адрес графического файла.
Начальный тег обязателен, конечный тег запрещен.
Размеры изображений. Атрибуты height и width используются для передачи программе просмотра высоты и ширины изображения в пикселах:
<IMG SRC ="picture.gif" HEIGHT=100 WIDTH=65>
змещение изображений. При размещении графики в тексте Web-документа используются способы, традиционные для пакетов верстки. Режим размещения графики задается соответствующими атрибутами: align=top, middle или center (по верхней границе изображения или посередине). По умолчанию нижняя часть изображения выравнивается со следующим за графикой текстом. Ниже приведен пример выравнивания текста по верхнему краю изображения:
<IMG SRC = "example.jpg" ALIGN=TOP>.
Программы просмотра выравнивают только одну строку текста, а последующие размещаются ниже изображения.
Возможно выравнивание по среднему уровню изображения:
<IMG SRC = "example.jpg" ALIGN =middle> (или center).
Как и в предыдущем случае, выравнивается только одна строка текста.
Можно использовать режим обтекания рисунка текстом с помощью атрибутов align=left и right. Рисунок в этом случае может располагаться справа или слева от текста. При этом можно задать и способ выравнивания текста. Например:
<HTML>
<HEAD>
<TITLE>Изображение</TITLE>
</HEAD>
<BODY>
Пространство вокруг изображений. Атрибуты vspace и hspace определяют свободное пространство слева и справа (hspace) и над и под (vspace) IMG. По умолчанию значение этого атрибута не определено, но обычно это небольшое ненулевое значение. Оба атрибута имеют значение типа длины.
Границы. Изображение может окружать граница (например, если она указана пользователем или изображение имеет содержимое элемента A).
Атрибут: border = пикселы. Атрибут border определяет ширину границы в пикселах. Значение этого атрибута, используемое по умолчанию, зависит от агента пользователя. Считается нежелательным.
Альтернативный текст для графики. Некоторые программы просмотра WWW не способны выводить графику. Кроме того, часть пользователей в целях экономии времени специально отказывается от загрузки изображений при связи через модем. В качестве альтернативы вместо изображения может выводиться краткий текст. Для этого используется атрибут alt:
<IMG SRC="example.jpg" alt="Пример">
Приведенная запись выводит вместо изображения example.jpg слово "Пример". Если программа просмотра поддерживает графику, на экран будет выведен рисунок, в противном случае - заданный в атрибуте alt текст.
Фоновые изображения. Последние версии программ просмотра Web могут загружать изображения для использования их в качестве фона, на котором выводятся текст, таблицы и т.п. В качестве фоновых изображений можно использовать текстуры или изображения объектов. Для создания фоновых изображений пользуются обычными графическими приложениями.
Для создания фона в окне навигатора обычно используется небольшое (по объему) изображение, которое при визуализации Web-страницы служит элементом для мозаичного заполнения окна целиком. Заполнение автоматически осуществляется программой просмотра после загрузки файла с фоновой графикой.
Для задания фоновой графики используется элемент:
<BODY BACKGROUND="example.jpg">
С изображениями, как и с другими включаемыми объектами, могут быть связаны ссылки, использующие стандартные механизмы, и навигационные карты (image maps). На навигационной карте задаются геометрические области включаемых изображений или объектов, и каждой из них назначаются ссылки. При активизации этих ссылок могут осуществляться загрузка документа, запуск программ на сервере и т.д.
Навигационные карты. Навигационные карты позволяют авторам определять области изображения или объекта и назначать каждой области определенное действие (например, загрузку документа, запуск программы и т.д.). Действие выполняется при активизации пользователем конкретной области.
Создание карты изображения является одной из привлекательнейших возможностей HTML, позволяющей пользователю привязывать ссылки на другие документы к отдельным частям изображений. Щелкая мышью на отдельных частях изображения, пользователь может выполнять те или иные действия, переходить по той или иной ссылке на другие документы и т.п.
Навигационная карта создается путем назначения изображения или объекта с указанием соответствующих геометрических областей.
Чтобы включить поддержку карты для изображения, необходимо ввести атрибут в элемент IMG:
<IMG SRC="URL" usemap="url#map_name">
23. Работа с формами, фреймами и таблицами
Формы
Формы используются для ввода информации. Их можно сравнить с бланками или анкетами: они содержат поля для заполнения, списки для выбора одного из элементов и т.д. Важным является определение структуры формы.
Формы реализуются в виде наборов интерфейсных элементов, созданных средствами HTML, которые предоставляют пользователям возможность вводить информацию и отсылать ее на сервер. С точки зрения HTML, форма - это упорядоченный набор элементов, описывающих ее структуру. В составе формы могут использоваться строки ввода, кнопки с зависимой и независимой фиксацией, списки и т. п. Обычно форма имеет специальную кнопку SUBMIT, нажатие которой приводит к отсылке содержимого формы на сервер для последующей обработки. Обработкой форм занимаются сценарии CGI и ASP.
Дата добавления: 2015-08-09; просмотров: 113 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Создание и редактирование web-публикации в языковой среде HTML | | | Типы элементов формы |