Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Взаимодействие Internet-браузера с Web-сервером

⇐ ПредыдущаяСтр 14 из 19Следующая ⇒

1. Убедиться, что Tomcat активен.

2. Вызов Internet Explore.

3. Вызов страницы http://ip адрес сервера:8080. При этом появится основная страница tomcat:

Для доступа к дереву каталога страниц следует выбрать пункт меню Tomcat Manager. Будет запрашиваться пароль Tomcat:

Имя пользователя – admin.

Пароль – admin.

Появится окно:

Для каждого Web-приложения создается папка определенной структуры.

Чтобы создать такую папку, необходимо с помощью команды

jar -cvf имя папки.war *

создать файл имя папки.war, имя этого файла вставить в диалог

и нажать кнопку Deploy.

При этом в каталоге /Program Files/Apache Tomcat/webapps появится папка с указанным именем, в которую можно добавлять свои файлы с расширениями.htm и.jsp. В этой папке будет создан каталог WEB-INF, в подпапке которой classes можно размещать собственные классы Java, а в подпапке lib – архивы.jar

Разработка HTML-страниц

HTML-страница – это совокупность тегов.

Комментарии в HTML вставляются в пару тегов:

<!-- текст комментария

-->

HTML понимает следующие теги:

<html> … </html> документ,

<head> … </head> заголовок страницы,

<body> … </body> тело страницы,

Внутри тега <head> может располагаться тег,

<title> … </title> название документа; он выводится в строке заголовка.

Внутри тега <body> могут располагаться теги:

<p> ….</p> Параграф (внутри него может быть гег <br> - перенос строки)

<img> рисунок.

Параметры:

src=URL файла с рисунком,

title=строка с текстом подсказки, появляющейся при наведении на ссылку на странице,

width=ширина рисунка,

height=высота рисунка.

Пример:

<a> …. </a> ссылка на другую страницу.

Параметры:
href задает адрес страницы, на которую следует перейти. Вслед за этим адресом могут задаваться параметры, передаваемые указанной странице, в форме:

Имя параметра=значение параметра,…

Пример

<a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br>

<a href=tip.html>Как сделать такое же фото?</a>

</body>
</html>

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

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

index.htm - страничка контейнер:

<html>

<head>

<title>Frame page</title>

</head>

</frameset>

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

</noframes>

</html>

Напишем код для страничек, входящих в фреймовую структуру.

left.htm - страничка, содержащая меню:

<html>

<head>

</head>

<body>

<a href="topic_1.htm" target="content">topic #1</a><br>

<a href="topic_2.htm" target="content">topic #2</a><br>

<a href="topic_3.htm" target="content">topic #3</a><br>

<a href="topic_4.htm" target="content">topic #4</a><br>

</body>

</html>

right.htm - страничка, в которой будут отображаться основное содержание сайта:

<html>

<head>

<title>Content page</title>

</head>

<body>

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

</body>

</html>

Как можно заметить, страничка-контейнер отличается от обычной лишь тем, что вместо тега <body> используется тег <frameset>, в котором непосредственно и определяются фреймы. Но сам по себе он описывает лишь количество и размеры фреймов и не описывает странички, входящие во фрейм. Это можно сделать при помощи тега <frame>.

В параметре тега <frameset> определяем, что страничка будет разделена по вертикали и состоять из двух колонок (если нам нужно разделить окно по горизонтали, то тогда вместо параметра cols нужно применять параметр rows).

В принципе, колонок может быть и больше, чем две. Их количество определяется значением параметра cols (rows), которое представляет собой цифры и знаки, разделенные запятыми. Каждое значение определяет ширину колонки. Ширина, как, впрочем, и высота, может задаваться в процентах, пикселах и при помощи знака звездочки, обозначающей "все оставшееся пространство". Вот примеры определения фреймов:

<frameset cols="200,*"> - 2 колонки, одна из которых имеет фиксированную ширину в 200 пикселей.

<frameset rows="25%, 50%, 25%"> - 3 строчки, высоты которых определены в процентах от высоты окна браузера.

<frameset rows="*, 2*,*"> - то же самое, что и предыдущая строчка, но записанная при помощи звездочек. Цифра перед звездочкой указывает количество повторов. Ширина одной звездочки определяется как среднее арифметическое между всеми звездочками в строке с учетом коэффициентов перед ними.

Как сказано выше, тег <frameset> является контейнером, и в качестве его элементов должны быть написаны строчки для каждой колонки (строки) при помощи тега <frame>. Вот пример описания:

Параметры:

src - URL странички, которая будет помещена во фрейм

name - имя странички, по которому к ней можно будет обращаться.

Обратите внимание на параметр name. Он является очень важным и позволяет нам манипулировать с фреймом. Как же это осуществляется? Внимательно рассмотрим файл left.htm, в котором содержится наше меню. В самом файле нет ничего необычного, а вот в написании ссылок на странички есть. Если присмотреться, то можно заметить, что добавился еще один параметр target="content" - вот именно он и отвечает за то, в каком окне будет загружаться файл по ссылке:

<a href="topic_1.htm" target="content">topic #1</a>

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

До сих пор в качестве элементов контейнера <frameset> мы использовали простые теги <frame>, но мы также можем использовать и контейнер <frameset>. В этом случае мы получаем так называемые вложенные фреймы. Вот пример:

</frameset>

В данном случае определены три фрейма: один горизонтальный вверху (который мы можем использовать, например, как логотип) и два вертикальных (которые разделили второй горизонтальный фрейм).

В общем случае можно использовать сколько угодно фреймов (в пределах разумного, конечно).

Рамку фрейма можно убрать, указав параметр frameborder=0.

Таблицы. Тег <TABLE> … </TABLE> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD?

Тег <TR> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <TD>.

Тег <TD> предназначен для создания одной ячейки таблицы.

Параметры:

· align Задает выравнивание таблицы по краю окна браузера.

· background задает фоновый рисунок в таблице.

· bgcolor задает цвет фона таблицы.

· border задает ширину рамки таблицы (в пикселах) Ширина, равная 0, означает отсутствие рамки

<table border=число>

Значение цвета можно задавать двумя способами:

1.По его названию. Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению. Обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF.

· cols — число колонок в таблице.

Параметр cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого параметра таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование параметра cols позволяет несколько ускорить отображение содержимого таблицы.

· height — высота таблицы.

Устанавливает высоту таблицы.

· width — ширина таблицы.

Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

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

Закрывающий тег н е обязателен.

Параметры

· align выравнивание текста в строке.

· bgcolor цвет фона ячеек в строке.

· valign — выравнивание содержимого ячейки по вертикали.

Устанавливает вертикальное выравнивание содержимого ячеек в строке. По умолчанию содержимое ячейки располагается по ее вертикали в центре.

Пример

<td>Lorem ipsum dolor sit amet...</td>

</tr>
</table>

</body>
</html>

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

Параметры

· align определяет выравнивание линии.

· color цвет линии. <hr color=цвет>

· noshade рисует линию без трехмерных эффектов.

· size толщина линии. <hr size=число>

· width — ширина линии. <hr width=число>

Тег TD. Предназначен для создания одной ячейки таблицы. Тег TD должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE.

Синтаксис
<table>
<tr>
<td>...</td>
</tr>
</table>

Закрывающий тег н е обязателен.

Параметры
align определяет выравнивание содержимого ячейки по горизонтали.

· background задает фоновый рисунок в ячейке.

· bgcolor цвет фона ячейки.

· colspan объединяет горизонтальные ячейки.

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 13.

ячейка 1
ячейка 2	ячейка 3

Рис. 13

В приведенной таблице содержатся две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan.

Пример

<td colspan=2>ячейка 1</td>

</tr>
<tr>
<td>ячейка 2</td>

<td>ячейка 3</td>

</tr>
</table>
</body>
</html>

· height высота ячейки.

· nowrap запрещает перенос строк.

Добавление параметра nowrap к тегу TD заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки.

· rowspan объединяет вертикальные ячейки.

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 14.

ячейка 1	ячейка 2
ячейка 3

Рис. 14

В приведенной таблице содержатся две строки и две колонки, причем левые вертикальные ячейки объединены с помощью параметра rowspan.

Разработка форм сценариев в тексте HTML – страниц. Формы создаются с помощью тега <form>. Внутри формы могут располагаться поля ввода, списки, переключатели, кнопки. Вводимые данные контролируются клиентским приложением.

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

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

Таблица 5

Атрибут	Назначение
`ACTION`	Определяет URL, который примет и обработает данные формы. Если этот атрибут не определен, данные отправляются по адресу страницы, на которой помещена форма
`METHOD`	Указывает форме, как послать информацию соответствующей программе обработки (скрипту). Обычно он получает значение `post`, тогда информация формы посылается отдельно от URL. Значению `get` соответствует посылка вместе с URL

Пример:

В этом примере дано указание браузеру отправить заполненную форму для обработки скриптом comment_script, расположенным в каталоге cgi-bin вашего сервера, и использовать метод посылки post.

В HTML существует три тега для создания различного типа полей в форме: <TEXTAREA>, <SELECT> и <INPUT>. Любое их количество может быть размещено в контейнере между тегами <FORM> и </FORM>. В табл. 6 дано их краткое описание, а подробнее они будут рассмотрены чуть позже.

Таблица 6

Тег	Назначение
`<TEXTAREA>`	Определяет поле, в которое пользователь вводит многострочную текстовую информацию
`<SELECT>`	Позволяет пользователю сделать выбор в окне с полосой прокрутки, либо в раскрывающемся меню
`<INPUT>`	Обеспечивает некоторые другие виды ввода информации: ввод одной строки текста, установку и сброс флажков (check boxes), выбор переключателя (radio buttons) и нажатие кнопки для отправки данных или очистки формы

Тег <INPUT>. В отличие от <TEXTAREA> и <SELECT>, является одиночным тегом. Он предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных (Submit) и для очистки формы (Reset, Clear).

Тег <INPUT> располагает следующими атрибутами (табл. 7).

Таблица 7

Атрибут	Назначение
`NAMESIZE`	Указывает размер поля ввода в символах
`MAXLENGTH`	Определяет максимально возможное число символов, вводимых в поле
`VALUE`	Для текстового поля определяет текст, выводимый по умолчанию. Для флажков и переключателей указывает значение, возвращаемое программе обработки. Для кнопок отправки и очистки формы определяет надпись на кнопке
`CHECKED`	Устанавливает флажок или переключатель во включенное состояние по умолчанию. С другими типами тегов `<INPUT>` не употребляется
`TYPE`	Устанавливает тип поля ввода

Тип поля ввода, атрибут TYPE. Атрибут TYPE тега <INPUT> может принимать следующие значения (табл. 8).

Таблица 8

Атрибут	Назначение
`TEXT`	Является значением по умолчанию и предполагает создание одной строки для ввода данных. Для этого типа поля ввода употребляются атрибуты `NAME` (обязательный), `SIZE`, `VALUE` и `MAXLENGTH`
`PASSWORD`	Позволяет заменять вводимые символы пароля звездочками. Для этого типа поля ввода используются атрибуты `NAME` (обязательный), `SIZE`, `MAXLENGTH` и `VALUE`
`CHECKBOX`	Позволяет вывести поле для установки флажка в виде маленького квадратика, в котором может быть произведена отметка опции "галочкой". Может использоваться совместно с атрибутами `NAME` (обязательный), `VALUE` и `CHECKED` (определяет установленный по умолчанию флажок). Флажки обычно употребляются, когда можно выбрать сразу несколько опций из числа предложенных. Нужно быть очень осторожным в использовании флажков и переключателей, если цвет фона страницы определяется не документом, а пользователем при помощи установок программы просмотра. Не допускайте, чтобы опции сливались с фоном страницы
`RADIO`	Позволяет выбрать только одну из представленного числа опций. Переключатели можно группировать, задавая одно и то же значение атрибута `NAME` (обязательный). Так же используются атрибуты `VALUE` и `CHECKED`
`RESET`	Позволяет создать кнопку для очистки формы. Атрибут `VALUE` может быть использован здесь для наименования этой кнопки (по умолчанию кнопка имеет надпись `Reset`)
`SUBMIT`	Используется для создания кнопки, по нажатию которой введенные данные отправляются на сервер для обработки программой-скриптом. В атрибуте `VALUE` может быть указано название для этой кнопки (по умолчанию -- `Submit Query`)

Пример:
В следующей форме используется значение TEXT.

<HTML><BODY><FORM>Введите номер телефона:<INPUT TYPE="TEXT" NAME="phone" SIZE="15" MAXLENGTH="12"> </FORM> </BODY></HTML>

Пример:
Использование значения PASSWORD.

<HTML><BODY><FORM>Введите секретное слово: <INPUT TYPE="password" NAME="secret_word" SIZE="30" MAXLENGTH="30"> </FORM></BODY></HTML>

Пример:
Использование значения CHECKBOX.

<HTML><BODY><FORM><INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_value1"> Вариант<BR><INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2" CHECKED> Предварительно выбранный вариант </FORM></BODY></HTML>

Пример:
В этом примере две формы расположены в соседних ячейках таблицы.

<HTML><BODY><TABLE ALIGN=center BORDER CELLSPACING=10><TR><TD>Форма 1:<FORM> <INPUT TYPE="radio" NAME="choice" VALUE="choice1"> yes.<INPUT TYPE="radio" NAME="choice" VALUE="choice2"> no. </FORM> </TD><TD>Форма 2:<FORM> <INPUT TYPE="radio" NAME="choice" VALUE="choice1" CHECKED> yes. <INPUT TYPE="radio" NAME="choice" VALUE="choice2"> no. </FORM> </TD></TR></TABLE></BODY></HTML>

Пример:
В следующей форме используется значение RESET.

Пример:
Использование значения SUBMIT.

<HTML><BODY><FORM><TEXTAREA> Какой-то текст </TEXTAREA><BR> <INPUT TYPE="submit" VALUE="Отослать данные!"> </FORM></BODY></HTML>

Использование списков в форме — тег <SELECT>. Когда формы HTML становятся более сложными, в них часто включают списки с прокруткой и выпадающие меню. Для этого используют тег SELECT с атрибутом TYPE=select. Для определения списка пунктов используют тег <OPTION>. Тег <SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE.

Атрибут MULTIPLE. Позволяет выбрать более чем одно наименование.

Атрибут NAME. Определяет наименование объекта.

Атрибут SIZE. Определяет число видимых пользователю пунктов списка. Если в форме установлено значение атрибута SIZE=1, то браузер выводит на экран список в виде выпадающего меню. В случае SIZE > 1 браузер представляет на экране обычный список.

В форме может использоваться тег <OPTION> только внутри тега <SELECT>. Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE.

Атрибут SELECTED. Используется для первоначального выбора значения элемента по умолчанию.

Атрибут VALUE. Указывает на значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно значению тега <OPTION>

Пример:

<BR>Выбор
<SELECT NAME="Выбор">

<OPTION>Вариант 1

<OPTION>Вариант 2

<OPTION VALUE="Вариант 3">Вариант 3

<OPTION SELECTED>Вариант 4

</SELECT>

В результате будет выдан список:

⇐ Предыдущая 9 10 11 12 131415 16 17 18 Следующая ⇒

Читайте также:

Где возникла философия и почему?

Относительная высота сжатой зоны бетона

Сущность проекции Гаусса-Крюгера и использование ее в геодезии

Тарифы на перевозку пассажиров

Последнее изменение этой страницы: 2016-12-16; просмотров: 234; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.191.174.168 (0.114 с.)