Краткие теоретические сведения по Java

Структура HTML-документа определяется упорядоченным набором тегов следующего вида:

<HTML>

<HEAD> текст </HEAD>

<BODY> управляющие_теги и текст </BODY>

</HTML>

Программа-клиент браузер при просмотре файлов с этими тегами выполняет отображение документа в окне. Каждый такой файл имеет расширение html или htm, а набрать его можно в любом текстовом редакторе. Теги играют роль команд и заставляют браузер выполнить предписываемые ими действия. Область действия тега определяется тем местом, где он указан, и тем местом, где он закрыт (записан в угловых скобках с предшествующей косой чертой). В общем случае теги имеют параметры. Рассмотрим некоторые из них.

<BODY alink=color  background=url     bgcolor=color

scroll=yes|no bgproperties=fixed> …</BODY>

Параметр aiink задает цвет гиперссылок (по умолчанию голубой). Параметр background задает адрес рисунка, на фоне которого отображается документ. Параметр bgcoior задает цвет фона документа. Параметр scroii задает возможность прокрутки документа (yes). Параметр bgproperties=fixed устанавливает невозможность прокрутки фонового рисунка документа при прокрутке содержимого документа.

В качестве возможных для использования цветов можно указывать: aliceblue — СИНИЙ; aqua — голубой; azure — азурныЙ; gold — золотой; gray — серый; green — зеленый; crimson — кремовый; brown — коричневый; darkmagenta — темно-малиновыЙ; ivory — цвет слоновой кости; orange — оранжевый; iime — цвет извести; purple — розовый; sienna — фиолетовый; khaki — зеленыйзащитный и др.

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

□               от <Hi> до <нб> — изображает текст от наименьшего до максимального размера. Этот тег использует параметр align = center| ieft|right, который устанавливает смещение текста в окне (по центру, влево, вправо). Например:

<H1 align=center> Никогда не забывай то, что учишь</Н1>;

□               <p> — задает начало и конец параграфа;

□               <CENTER> — парный тег, размещает текст и рисунки по центру;

□               <BR> — перевод каретки на следующую строку. Тег этот непарный;

□               <HR> — горизонтальная линия. Используется для подчеркивания. Длину линии в пикселах можно задать с помощью параметра width= число, цвет линии — параметром color = цвет; толщинулинии — параметром size = число.

Создайте следующий документ:

<HTML>

<BODY bgcolor=floralwhite>

<H1> Simple document <HR align=left size=4 color=red width=200 >

</HR></Hl>

</Body>

</HTML>

Наберите текст в Блокноте (NotePad). Сохраните его в файле (укажите тип файла: aU (все), задайте имя и расширение, например: labOO.html) и запустите файл на выполнение из программы FAR (или из Проводника или браузера).

Можно также использовать теги:

□               <в> — задает жирный вариант линий;

□               <i> — задает курсивный вариант текста;

□               <u> — задает подчеркивание текста;

□               <strike> — устанавливает перечеркивание текста;

□               <ciTE> — используется для выделения цитат;

□               <PRE> — используется для учета пробелов, например: <PRE> Here to write </PRE>

□               <FONT со1ог=цвет £асе=шрифт size=n> — задает цвет, название и размер шрифта. Пример:

<Font color=magenta face="Arial" size=24> OK </Font>

Проверьте работу этого тега на несколько усложненном примере:

<HTML>

<BODY bgcolor=floralwhite>

<H1>

<Font color=magenta face="Arial" size=24> OK </Font>

Simple document <HR align=left size=4 color=red width=280> </HR></Hl>

</Body>

</HTML>

□               <!— помещаем комментарий —> — приведенные теги используются для вставки комментария в тело HTML-документа.

Для размещения в документе рисунка наберите:

<IMG src=url alt=text border=n height=nl width=n2 >

Здесь параметры имеют следующий смысл:

□                src — адрес файла с изображением или видеоклипом;

□                ait — текст, выводимый на месте изображения, если оно не загружено браузером;

□               border — толщина рамки;

□               height и width — соответственно, высота и ширина изображения.

Пример:

<IMG src="globe.jpeg" border=2 alt="Not available" width=200 height=200 align=right>

Рассмотрим, как в документе размещаются гиперссылки. Гиперссылка — это строка, при щелчке на которой мышью выполняется переход к другому документу, связанному с этой гиперссылкой. Задание гиперссылки реализуется так:

<A href=url target=window_name| _blank| _parent|_self> текст_гиперссылки | рисунок | элемент_управления </A>

Пример:

<A href="w.html"> press this hyperlink </A>

В данном примере в документе будет выведена строка "press this hyperlink", выделенная синим или другим цветом (вспомните параметр aiink тега <BODY>). Щелчок кнопкой мыши в области гиперссылки приведет к загрузке нового документа из файла w.html. Новый документ загружается в отдельном окне. Но можно указать новую дислокацию документа, если использовать параметр target. Значения этого параметра таковы:

□               window_name — имя окпа или фрейма;

□               _biank — вывод в новое окно;

□               _seif — вывод в текущее окно или фрейм;

□               _parent — загрузка в родительский фрейм для данного окна.

Пример использования в качестве гиперссылки рисунка:

<A href="w.html" target=_self> <IMG src="www.gif"></A>

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

□               Position — задает абсолютное или относительное положение элемента;

□               z-index — задает, на каком уровне (сверху или ниже других) располагается элемент;

□               top, left, width, height — верхняя координата, левая координата, ширина и высота.

Пример:

<HTML>

<BODY bgcolor=blue>

<DIV STYLE="position:absolute; top:100; left:50; width:200;height:200">

<FONT color=red size=18>

YESSS!!!

</FONT>

</DIV>

</BODY>

</HTML>

Тег <Div> используется для группировки нескольких элементов в указанной области. В примере выше тег <Div> охватывает область (100, 50, 200, 200). В этой области выводится текст "YESSS!!!" В документе можно определить несколько тегов <Div>, что позволит наложить одну группу элементов на другую. Пример накладки текстов:

<HTML>

<BODY bgcolor=blue>

<DIV STYLE="position:absolute; top:100; left:50; width:200;height:200;z-index:0">

<FONT color=red size=18>

YESSS!!!

</FONT> </DIV>

<DIV STYLE="position:absolute; top:90; left:50; width:200;height:200; z-index:1">

<FONT color=yellow size=18>

YESSS!!!

</FONT>

</DIV>

</BODY>

</HTML>

Откройте браузером данный HTML-файл или щелкните мышью дважды на его имени в окне Norton Commander (можно использовать также, например, FAR или диспетчер Windows).

Для создания списка следует использовать теги <оь> <LI>…</LI></OL>

Пример:

<0L>

<LI type=i> One </LI>

<LI type=i> Two </LI>

</OL>

В качестве маркера списка можно использовать графическое изображение. Для этого нужно для тега <ы> определить свойство list-style-image атрибута style.

Пример:

<LI style="list-style-image:url(picl.gif) ">npMMep</LI> Рассмотрим теперь пример создания таблицы:

<TABLE border=l bordercolor=green>

<CAPTION valign=center> table of names </Caption>

<tr>

<td> name</td> <td> johns </td>

</tr>

<tr>

<td> name</td> <td> silvestr</td></tr>

</TABLE>

Теги <tabie></tabie> определяют начало и конец таблицы. Тег <caption> задает заголовок таблицы. Тег <td> задает содержимое ячейки, а тег <tr> задает начало строки таблицы. Теперь приведем HTML-документ следующего вида, который аккумулирует все ранее сказанное, а результат его выполнения (отображение в браузере) представлен нарис. 2.1.

<HTML>

<BODY bgcolor=floralwhite>

<H1>

<Font color=magenta face="Arial" size=24> OK </Font>

Simple document <HR align=left size=4 color=red width=280> </HR></Hl>

<OL>

<LI style="list-style- image:url(d:/msdev/labsjava/route.gif)"> one </LI>

<LI type=i> two </LI>

</OL>

<TABLE border=l bordercolor=green>

<CAPTION valign=center> table of names </Caption>

<tr>

<td> name</td> <td> johns </td>

</tr>

<tr>

<td> name</td> <td> silvestr</td></tr>

</table>

</Body>

</HTML>

Обратите внимание на то, что с пунктом списка one связан рисунок. При работе с таблицами важно уметь объединять ячейки. Для объединения смежных ячеек строки следует использовать атрибут rowspan, а для объединения смежных ячеек столбца — атрибут coispan. Приведем пример:

<Table border bordercolor=blue>

<tr>

<td colspan=2 align=center><B>HELLO</B></td>

</tr>

<tr>

<td> YOU </td>

Рис. 2.1. Пример результирующего документа

<td> &YOU</td> </tr>

</Table>

В данном примере строка <td colspan=2 align=center> <B>HELLO</Bx/td> объединяет две ячейки (два столбца). Поэтому сообщение "нЕььо" размещается по центру (атрибут aiign=center) этой объединенной области. Использование таблиц важно для структурирования и правильного размещения элементов документа. В ячейках таблиц можно размещать кнопки, картинки, текстовые поля и другие элементы интерфейса.

Фреймы и формы

Фреймы — это окна, в которых размещаются отдельные документы. В отличие от обычных окон, фреймы нельзя перетаскивать. Простой пример, иллюстрирующий создание двух фреймов, такой:

<HTML>

<FRAMESET COls="40c,60%"> <Frame frameborder=yes src="prl.html">

<Frame frameborder=yes src="pr2.html">

</FRAME>

</HTML>

В этом примере создаются два фрейма: первый загружает документ prl.html, второй — pr2.html. Первый фрейм занимает 40% общего числа столбцов экрана. Второй — 60%. Фреймы должны определяться внутри тегов <FRAMESET>. . . </FRAMESET>.

Горизонтальное разбиение на фреймы дает такой код:

<HTML>

<FRAMESET rows="40c,60%">

<Frame frameborder=yes src="prl.html">

<Frame frameborder=yes src="pr2.html">

</FRAME>

</HTML>

Результат выполнения такого HTML-файла можно увидеть на рис. 2.2.

Рис. 2.2. Горизонтальные фреймы

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

<Form>

<Input type="button" name="bl" value="PRESS"></INPUT>

</Form>

Отображение кнопки продемонстрировано на рис. 2.2.

Для отображения текстового поля следует набрать строку:

<input type="text" name="cl" cols=20 value="something">

Размер текстового поля определяется параметром cois. Рассмотрим следующий пример:

<html>

<Body>

<Form method="post" Action="c:\Program Files\ActivePerl\Perl\bin\first.cgi">

<input type="text" value="dderr">

<input type="Submit" value="SEND">

</form>

</body>

<html>

Обратим внимание на следующие два момента. Первое: в теге <Form> заданы два важных параметра: – .:: ■ ,; и Action. Параметр Action указывает сетевой адрес программы обработки для сайта, находящейся на стороне сервера (отметим, что и клиент, и сервер могут находиться на одном и том же компьютере). Параметр method указывает, каким образом будут передаваться параметры обработчику сайта. Эта программа-обработчик будет запущена при нажатии на кнопку submit. Второе: кнопка Submit — это специальная кнопка, назначением которой как раз и является вызов обработчика сайта. Программы обработки сайтов реализуются на серверах. В качестве языков программирования они, в принципе, могут использовать любые языки. В настоящее время широко применяется язык PERL. Можно писатъ обработчики сайтов на Java и C#. Обработчики, написанные на Java, называются сервлетами. Для запуска сервлета нужно установить на компьютере подходящую программу сервера, например,

ТОМСАТ. Эта программа свободно распространяется в Интернете.

Нажатие кнопки submit вызывает сервлет. Запрос на запуск сервлета формирует браузер. Запрос содержит адрес сервлета И строку параметров В виде: name = value . . . . name = value. В методе GET строка параметров передается вместе с адресом сервлета. В методе розт она передается отдельным файлом. Java- сервлеты извлекают параметры одинаковым образом как для розт-варианта, так и для GET-варианта.

На этом завершаем краткое введение в разработку HTML- файлов.

Источник: Герман О. B., Герман Ю. О., Программирование на Java и C# для студента. — СПб.: БХВ-Петербург, 2005. — 512 c.: ил.

Вы можете следить за любыми ответами на эту запись через RSS 2.0 ленту. Вы можете оставить ответ, или trackback с вашего собственного сайта.

Оставьте отзыв

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
Rambler's Top100