Файл: ОСНОВЫ ПРОГРАММИРОВАНИЯ НА ЯЗЫКЕ HTML.pdf

5. Элемент разметки meta

META содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа, например с помощью атрибута Content-type можно задать перекодировку документа на стороне клиента.

С помощью META также можно задать и другие операторы. Например, запретить кэширование документа. Для запрета кэширования достаточно вставить в заголовок META-тег вида:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

В новой версии протокола HTTP (HTTP 1.1) управление кэшированием осуществляется через оператора Cache-Control. Для получения такого же результата, как в случае с Pragma, в заголовке HTML-документа достаточно указать:

<META HTTP-EQUIV="Cache-Control"

CONTENT="no-cache">

Можно запретить хранение документа после пересылки:

<META HTTP-EQUIV="Cache-Control"

CONTENT="no-store">

Точно так же можно задать время последней модификации (Last-Modified) или дату истечения актуальности документа (Expire).

META-тег часто используется для описания поискового образа документа.

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

<TITLE> Веб-технологии</TITLE>

<META NAME="description"

http-equiv="description"

content="Учебный курс Веб-технологии.

Тема: Основы программирования на языке HTML.">

<META NAME="keywords" HTTP-EQUIV="keywords"

CONTENT="учебный курс; Веб-технологии;

HTML 4.1; язык гипертекстовой разметки;

заголовок HTML-документа; заголовок; HTML;

документ; контейнер; элемент; разметка">

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

<META [name=имя]

[HTTP-EQUIV=имя_HTTP-оператора]

CONTENT=текст

>

6. Элемент разметки link

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

Контекстная связь определяет отношение на паре узлов. При этом в модели World Wide Web один из узлов является источником, а второй - целью (target). Собственно, это и отражено в названии элемента разметки A (anchor), который определяет гипертекстовую ссылку (не путать с гипертекстовой связью).

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

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

Существенный сдвиг в этом направлении произошел после реализации поддержки описателей стилей в веб-браузерах. CSS (Cascade STYLE Sheets, каскадные таблицы стилей) позволяют определять для различных типов гипертекстовых связей вид гипертекстовых ссылок. При этом можно определять различные типы контекстных ссылок. Контейнер LINK позволил загружать внешние описатели стилей:

<LINK REL=stylesheet href="../css/style.css"

TYPE="text/css"

>

В данном случае атрибут REL определяет тип гипертекстовой связи, HREF (Нуреrtехt REFerence) указывает адрес документа, идентифицирующего связь, а атрибут TYPE определяет тип содержания этого документа.

В общем случае контейнер LINK имеет следующий вид:

<LINK [REL=тип_отношения] [HREF=URL]

[TYPE=тип_содержания]

>

Для разных типов содержания действия по интерпретации элемента разметки будут различными.

7. Элемент разметки style

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

В настоящее время контейнер используется только с одним атрибутом TYPE, который задает тип описателя стиля. Это может быть либо text/css , либо text/javascript. Если элемент разметки открыт открывающим тегом, то он должен завершаться закрывающим тегом. В общем виде запись элемента STYLE выглядит так:

<STYLE TYPE=тип_описания_стилей>

описание стиля/стилей

</STYLE>

8. Элемент разметки script

Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. В принципе, SCRIPT можно использовать не только в заголовке документа, но и в его теле. В отличие от контейнера STYLE, ему не требуется дополнительный контейнер LINK для загрузки внешних файлов кодов. Это можно сделать непосредственно в самом контейнере SCRIPT:

<SCRIPT TYPE="text/javascript"

SRC=script.code

>

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

<SCRIPT [TYPE=тип_языка_сценариев]>

JavaScript / VBScript - код

</SCRIPT>

или

<SCRIPT [TYPE=тип_языка_сценариев]

[SRC=URL]>

</SCRIPT>

Веб-браузерами поддерживается несколько сценарных языков: JavaScript, VBScript, JScript. По умолчанию подразумевается JavaScript.

9. Теги тела документа

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

• иерархических контейнеров и заставок;

• заголовков (от Н1 до Н6);

• блоков (параграфы, списки, формы, таблицы, картинки и т.п.);

• горизонтальных отчеркиваний и адресов;

• текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);

• математических описаний, графики и гипертекстовых ссылок.

10. Тело документа - контейнер body

Описание тегов тела документа следует начинать с тега BODY. В отличие от тега HEAD, тег BODY имеет атрибуты.

Атрибут BACKGROUND определяет фон, на котором отображается текст документа. Если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:

<ВОDY ВАСКGROUND="image.gif">

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

Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Например:

<HTML>

<BODY BACKGROUND="image.jpg" BGCOLOR="black"

TEXT="#FFFFFF" LINK="#FF0000" VLINK="#656565" MARGINHEIGHT="25" TOPMARGIN="25" LEFTMARGIN="45" MARGINWIDTH="45">

Текст документа.

</BODY>

</HTML>

12. Теги управления разметкой

11. Списки в html

Еще одним способом структурирования текстов являются списки. В НТМL имеются следующие виды списков:

• ненумерованный список (тег <UL>);

• нумерованный список;

• список определений.

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

<UL>

<LI>первый элемент списка

<LI>второй элемент списка

<LI>третий элемент списка

</UL>

Можно задавать любой тип маркера в произвольном месте списка. Ниже перечислены теги с атрибутами стандартных маркеров:

• <UL TYPE=DISC> Стандартные маркеры списков первого уровня (по умолчанию).

• <UL TYPE=СIRCLE> Маркеры в виде окружностей.

• <UL TYPE=SQUARE> Квадратные маркеры.

Тег <OL> вместе с атрибутом TYPE позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры:

<ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3...

<ОL ТYРЕ=А> Тег создает список с нумерацией в формате А., В., С...

<OL ТYРЕ=а> Тег создает список с нумерацией в формате а., b., с...

<ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III...

Теги списка <DL>, <DT>, <DD> используют для создания списка терминов и их определений по следующей схеме :

<DL>

<DT>Термин</DT>

<DD>Определение</DD>

</DL>

14. Комментарии

Комментарии HTML начинаются с символа "<!--" и оканчиваются символом "-->". Содержимое комментариев браузер не выводит на экран.

12. Гипертекстовые ссылки

Для записи гипертекстовой ссылки используется тег <А>, который называют "якорем". Якорь имеет несколько атрибутов, главным из которых является HREF. Простую ссылку можно записать в виде

<А НREF="http://www.example.com">

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

</А>

Значение атрибута HREF и есть адрес документа. Форма записи этого адреса задается в виде URL.

16. Графика в html

Для вставки изображения в HTML документ используется тег <IMG> с обязательным атрибутом SRC, значением которого является URL графического файла.

Пример:

<IMG SRC="myimage.gif" ALT="Картинка">.

Тегом HTML, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.

Пример вставки изображения:

<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">

Изображения на веб-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <A>, что и для текста, но между <A> и </A> вставляется тег изображения <IMG> :