59. Язык html. Структура html-документа. Основные элементы языка html. Язык JavaScript и его использование в html-документах. Другие средства web-программирования.

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML–документы могут просматриваться различными типами WEB– броузеров. Когда документ создан с использованием HTML, WEB–броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей. Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя, теги HTML, вы можете обозначать данные элементы, обеспечивая WEB–броузеры минимальной информацией для отображения данных элементов, сохраняя вцелом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML–документ — это WEB–броузер, который интерпретирует теги HTML и воспроизводит на экране документ в виде, который ему придает автор. В большинстве случаев автор документа строго определяет внешний вид документа. HTML позволяет отметить, где в документе должен быть заголовок или абзац при помощи тега HTML, а затем предоставляет WEB–броузеру интерпретировать эти теги. HTML–теги могут быть условно разделены на две категории: теги, определяющие, как будет отображаться WEB–броузером тело документа в целом; • теги, описывающие общие свойства документа, такие как заголовок или автор документа. Запомните, что основное преимущество HTML заключается в том, что ваш документ может быть, просмотрен на WEB–броузерах различных типов и на различных платформах.

Все теги HTML начинаются с «<» (левой угловой скобки) и заканчиваются символом «>» (правой угловой скобки). Как правило, существует стартовый Тег из авершающий тег. Для примера приведем теги заголовка, определяющие текст, находящийся внутри стартового и завершающего тега как заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершающий тег выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тег <TITLE> говорит WEB–броузеру об использовании формата заголовка, а тег</TITLE> о завершении текста заголовка. Некоторые теги, такие, как <P> (тег, определяющий абзац), не требуют завершающего тега, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость. HTML не реагирует на регистр символов, описывающих тег, и приведенный ранее пример может выглядеть следующим образом:

<title> Заголовокдокумента </title>

Внимание! Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML–документа для его лучшей читаемости, будут проигнорированы WEB–броузером при интерпретации документа. HTML–документ может включать вышеописанные элементы, только если они помещены внутрь тегов <PRE> и </PRE>.

Тег преформатирования <PRE>

Тег преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный тег заканчивается завершающим тегом </PRE>. Внутри предварительн осформатированного текста разрешается использовать:

• перевод строки;

• символы табуляции (сдвиг на 8 символов вправо);

• непропорциональный шрифт, устанавливаемый броузером.

Использование тегов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться броузером при помещении их между тегами <PRE> и </PRE>.

Структура страницы WEB

<HTML>

<HEAD> <TITLE> [Заголовок страницы] </TITLE> </HEAD>

<BODY> [Текст, который появится в теле страницы]

</BODY>

</HTML>

HTML-файлы всегда начинаются с тега <HTML> и заканчивается </HTML>. Весь документ делится на голову (head) и тело (body). Для определения головы применяют теги <HEAD> и </HEAD>. Голова включает в себя заголовок страницы и комментарии. Комментарий – служебный текст, который игнорируется программой: <! Текст комментария>. Для определения заголовка страницы необходимо заключить текст в теги <TITLE> и </TITLE>.

Элементы стиля

<I>.....</I> Курсив(Italic)

<B>...</B> Усиление(BOLD)

<TT>...</TT> Телетайп

<U>...</U> Подчеркивание

<S>...</S> Перечеркнутый текст

<BIG>...</BIG> Увеличенный текст

<SMALL>...</SMALL> Уменьшенный текст

<SUB>...</SUB> Подстрочные символы

<SUP>...</SUP> Надстрочные символы

Для образования нового абзаца применяется тег <P>, который вставляет пустую строку и начинает предложение с новой строки.

<P ALIGN=LEFT> -выравнивание абзаца по левому краю.

<P ALIGN=RIGHT> -выравнивание абзаца по правому краю.

<P ALIGN=CENTER> -выравнивание абзаца по центру страницы.

Кроме тега абзаца, существует тег конца строки <BR>. Встречая этот тег броузер начинает текст с новой строки и не вставляет дополнительную пустую строку.

Тег <HR> вставляет горизонтальную линию поперек страницы, что удобно для разделения секций в документе.

Секционирование страницы заголовками

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

<H1> </H1> самый крупный шрифт

<H1> </H2>

...

<H6> </H6> самый мелкий шрифт.

Текстовые расширения

В стандартном языке HTML единственным способом вывода текста различного размера состоит в применении одного из тегов заголовков, например

<H1>. К сожалению, теги заголовков нельзя применять к отдельным символам,

Поскольку заголовки всегда находятся в отдельных строках. Для преодоления этих трудностей разработан тег <FONT>.

Тег <FONT> корректирует размер любого текста, находящегося между тегом <FONT> и соответствующей конечной тегом </FONT>. Вот как выглядит формат этого тега:

<FONT SIZE=размер> Здесь корректируемый текст</FONT>

Часть размер представляет собой число, показывающее, каким должен быть выводимый текст, причем для стандартного размера оно равно 3. Можно использовать любое число от1 (минимальный) до 7 (максимальный размер).

Смена цвета фона

Одним из привлекательных расширений Netscape заключается возможности изменить в соответствии с вашим вкусом цвет фона, на котором появляется страница. Поскольку

вся страница находится внутри тела, имеет смысл сделать необходимое расширение тега <BODY>: <BODY BGCOLOR="#nnnnnn">

Здесь nnnnnn означает то же самое, что и смена цвета текста.

Списки. Нумерованные списки

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

• Весь список обрамляется тегами <OL> и </OL>.

• Каждому элементу списка предшествует тег <LI>.

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

<OL>

<LI> Первый элемент

<LI> Второй элемент

<LI> Ит.д.

</OL>

Маркированные списки

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

Общий формат маркированного списка имеет вид:

<UL>

<LI> Первый элемент.

<LI> Второй элемент.

<LI> Ит. д.

</UL>

Базовым маркером в маркированном списке является небольшой кружок. Для смены маркера можно применить тег <UL> с дополнительным атрибутом TYPE: <UL TYPE= тип>, где тип может принимать значения disc (стандартный маркер), circle (окружность) или square (квадрат).

Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML–элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм. Таблица начинается с тега <TABLE> и кончается тегом </TABLE>. Все элементы таблицы должны находиться внутри этих двух тегов. По умолчанию таблица не имеет обрамлений и разделителей. Обрамление добавляется атрибутом BORDER. Теги <TR> </TR> окружают каждую строку таблицы. Количество строк таблицы определяется количеством пар тегов <TR> </TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице. Внутри строки таблицы размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <TD> </TD>. Ячейка таблицы может быть, описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько

ячеек для некоторых колонок, то броузер отображает, пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть, исправлено как на уровне описания строки, так и на уровне описания ячейки. При задании заголовков для столбцов и строк таблицы используются теги <TH> </TH>. Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center. Тег <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где — сверху или снизу таблицы — будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

Гипертекстовая связь – это специальное слово или фраза на странице Web, которые после щелчка пользователя переводят его к другому документу Web, или станции FTP, или куда-нибудь еще. Каждая страница Web имеет свой адрес, называемый универсальным локатором ресурса (Uniform Resource Locator – URL).

Для образования связи предназначены теги <A> и </A>. Вот так выглядит ее общий формат: <A HREF= «URL»> Здесь находится текст связи</A>

Одна из наиболее привлекательных черт Web — возможность включения ссылок на графические и иные типы данных в HTML–документ. Делается это при помощи тега <IMG...ISMAP>. Использование данного тега позволяет значительно улучшить внешний вид и функциональность документов. Существует два способа использования графики в HTML–документах. Первый — это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа.

Большинство броузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов. Описание фонового рисунка включается в тег BODY и выглядит следующим образом: <BODY BACKGROUND=«picture.gif»>

Формы

Некоторые WWW browser позволяют пользователю, заполнив специальную форму,

Возвращающую полученное значение, выполнять некоторые действия на вашем WWW–сервере. Когда форма интерпретируется WEB–броузером, создается специальные экранные элементы GUI, такие, как поля ввода,

checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку «Подтверждение» (SUBMIT —специальный тип кнопки, который задается при описании

документа), информация, введенная пользователем в форму, посылается HTTP–серверу для обработки и передаче другим программам, работающим под

сервером, в соответствиис CGI (Common Gateway Interface) интерфейсом.

Когда вы описываете форму, каждый элемент ввода данных имеет тег <INPUT>. Когда пользователь помещает данные в элемент формы, информация размещается в разделе VALUE данного элемента. Все формы начинаются тегом <FORM> и завершаются тегом </FORM>.

<FORM METHOD = "get|post" ACTION="URL"> Элементы формы и другие элементы HTML</FORM>

Использование языка JavaScript при создании Web-страниц

Язык программирования JavaScript не предназначен для создания автономных программ или аплетов. Конструкции JavaScript встраиваются непосредственно в исходный текст документов HTML и интерпретируются броузером по мере загрузки этих

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

выполнения пользователем различных операций над документом HTML, загруженным в

окно броузера. Это позволяет получать различные визуальные эффекты,

например, изменение внешнего вида органов управления, когда над ними находится курсор мыши. Можно предварительно проверять данные, введенных пользователем в полях формы перед их отправкой для обработки на сервер Web, а также выполнять произвольные действия перед загрузкой документа HTML в окно броузера и делать другую полезную работу. Заметим, что JavaScript не

предназначен для создания сложных программ. Подобные задачи лучше решать с использованием других языков программирования, например, спомощью Java. Однако с помощью JavaScript вы можете быстро создавать активные страницы с достаточно сложным поведением. Этот язык не сложен в изучении, а программы, составленные с его использованием, легко поддаются отладке. В существующей над данный момент версии JavaScript предоставляет следующие основные возможности:

• управление окнами и рамками в окне программы просмотра (открытие, закрытие, изменение расположения, загрузка и вывод в них заданных документов и т. п.) в ответ на действия пользователя, сигналы таймера и некоторые другие внешние события;

• генерация и вывод фрагментов HTML-документов;

• обработка ввода пользователя в заполняемые формы.

Вставка JavaScript в документ-html Первый вариант вставки скрипта в html-документ.

Скрипт размещается между двумя парными тегами <SCRIPT> ... </SCRIPT>. Обычно запись скрипта выглядит так: <SCRIPT language=JavaScript> <!--//--> </SCRIPT> Конец скрипта

Пояснения:

• Код скрипта оформляют как HTML-комментарий. Броузеры, которые

Умеют работать со скриптами, об этом знают, а другие не будут творить безобразия, встретив неизвестные конструкции.

• Закрывающий тег HTML-комментария предваряется двумя наклонными чертами "//" (комментарий языка JavaScript) опять же в целях безопасности. Некоторые броузеры «сходят с ума», если не видят этих знаков. (Комментарием в JavaScript считается все, что располагается от символов "//" и доконца текущей строки).

• Открывающий тег SCRIPT использует атрибут language для указания языка, на котором написан скрипт. Значением этого атрибута в нашем случаеявляется JavaScript.

• Команда <NOSCRIPT> ... </NOSCRIPT> является не обязательной, но желательной. Внутри этой команды располагаются теги HTML.

Пример: <HTML><HEAD><TITLE> Проверка броузера</TITLE></HEAD>

<BODY bgcolor="white" text="black" link="blue" link="red" vlink="purple">

<H1>Проверка броузера</H1> <HR> <SCRIPT language=JavaScript>

<!-alert("Ваш браузер поддерживает язык JavaScript!");

//--> </SCRIPT> <NOSCRIPT> <H2>Предупреждение</H2><P>