ИТ лабы

10

action – Обязательный атрибут. Определяет, где находится обработчик формы, то есть документ, на который будет отправляться данные для обработки.

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

enctype – Определяет, каким образом данные из формы будут закодированы для передачи обработчику.

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

Элемент INPUT создает управляющий элемент для ввода текста из одной строки, а элемент TEXTAREA – элемент для ввода текста из нескольких строк. Элемент RESET создает кнопку сброса.

Чтобы запустить процесс передачи данных из формы обработчику, используется кнопка submit.

<input type=submit>

При нажатии на данную кнопку все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>.

Надпись на кнопке можно задать любую, путем введения атрибута value="[Надпись]"

Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута name=[имя].

3.ПОРЯДОК ВЫПОЛНЕНИЯ

1.Уточнить задание у преподавателя.

2.Создать с помощью текстового редактора документ HTML, в соответствии с заданием.

3.Просмотреть документ в браузере.

4. ЗАДАНИЕ

Заданием для работы является форма с составом элементов, представленная на рисунках 3.1; 3.2; 3.3.

При создании формы не использовать для выравнивания элементов таблицу.

12

5.КОНТРОЛЬНЫЕ ВОПРОСЫ

1.Какие функции выполняет форма HTML документа?

2.Какие основные атрибуты формы? Назначение этих атри-

бутов.

3.Какие управляющие элементы могут быть использованы на форме, их назначение?

4.Какими элементами создаются управляющие элементы?

5.Назначение кнопок Submit и reset.

Лабораторная работа № 4 Изучение каскадных таблиц стилей (CSS). Позиционирование элементов. Цвет и фон

1. ЦЕЛЬ РАБОТЫ

Целью работы является получение практических навыков использования каскадных таблиц стилей (CSS) при разработке HTML документов.

Задачами работы является:

изучение принципов задания параметров, отображения элементов документа с помощью таблиц стилей;

задание параметров отображения для элементов формы документа параметров положения и цвета.

2. ТЕОРЕТИЧЕСКИЕ ПОЛОЖЕНИЯ

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

внутренние таблицы стилей, то есть таблицы стилей, созданные внутри документа с помощью элемента “style”;

внешние таблицы стилей, то есть созданные в отдельном файле с расширением css;

таблицы стилей элементов, то есть являющиеся значением атрибута style отдельного элемента.

13

Предпочтительным является использование внешних таблиц стилей. Внешние таблицы стилей подключаются с помощью элемента link, включаемого в элемент head.

Например

<LINK rel="stylesheet" href="style.css" type="text/css" media="screen, print">

Содержимое таблиц стилей задается с помощью специального языка. Язык CSS – это язык, позволяет присоединять стили к любым структурированным документам. На сегодня таковыми являются HTML и XML документы.

Язык CSS может задавать цвета фона текста шрифты, способы выравнивания и позиционирования отдельных объектов на странице и т. п.

В процессе отображения документа для каждого элемента генерируется нуль или более объемлющих прямоугольников.

Margin –

Рис. 4.1

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

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

14

Пример директивы

@charset "ISO-8859-1";

Правило более детально определяет параметры отображения элементов документа. Правило состоит из селектора и блока деклараций. Селектор указывает на элементы, к которым относится правило. Общий формат правила:

< селектор > { блока деклараций } Блок деклараций задаёт непосредственно параметры ото-

бражения. Блок деклараций состоит из пар

имяПараметра:значениеПараметра;

В одном блоке деклараций может быть задано несколько пар, задающих различные параметры отображения. Пары разделяются знаком ž;¡

Например

H1 { font-weight: bold; /* толшина шрифта */ font-size: 12pt; /* размер шрифта */ font-family: Helvetica; /* название шрифта */

}

Внешний вид и расположение этих прямоугольников определяется следующими параметрами:

-размерами прямоугольника, которые задаются свойствами границы, заполнителя и рамки;

-типом прямоугольника, который задается параметром DISPLAY;

15

-схемой позиционирования элемента, которая задается свойством POSITION;

-взаимоотношениями элементов в дереве документа;

-внешней информацией (например, размером окна отображения, собственными размерами графических образов и т. п.).

Свойство DISPLAY задает тип объемлющего прямоугольника для данного элемента. CSS поддерживает следующие типы прямоугольников (см. приложение).

Свойство POSITION задает схему позиционирования данного элемента. CSS поддерживает следующие схемы позиционирования (см. приложение).

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

-left

-top

-right

-bottom

Данные параметры задают относительное смещение элемента.

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

Свойство COLOR задает цвет текста содержимого элемента при отображении. Фон элемента может задаваться либо цветом background-color, либо графическим образом background-image, background-repeat, background-attachment и background-position. Можно также пользоваться сокращенным свойством background. Оно позволяет задать все свойства фона одновременно. При этом сначала всем свойствам фона присваиваются их начальные значения, а затем изменяются значения тех свойств, которые явно заданы в данном свойстве.

16

3.ПОРЯДОК ВЫПОЛНЕНИЯ

1.Скопировать документ, содержащий форму, сделанный по заданию лабораторной работы №3 под новым именем, например IT042_Iljin_Lb4.html.

2.Создать внешнюю таблицу стилей.

3.Подключить внешнюю таблицу стилей к документу с

формой.

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

5.Задать цвет для элементов.

6.С помощью параметров позиционирования сделать так, чтобы какой-либо рисунок помещался под элементами формы.

4.КОНТРОЛЬНЫЕ ВОПРОСЫ

1.Назначение каскадных таблиц стилей.

2.Какое положение таблиц стилей возможно относительно документа, для которого они задают параметры отображения?

3.Каким образом подключается внешняя таблица стилей к связанному с ней документу?

4.Как представляется отдельный элемент, при его отображении. Какие части выделяются при отображении элемента.

5.Что такое директива CSS и правило CSS? Назначение директивы и правила.

6.Общий формат правила. Из каких частей состоит правило, их назначение?

7.Какие типы позиционирования отдельного элемента бывают, их особенность?

8.Как задать наложение одного элемента на другой?

17

Лабораторная работа № 5

Создание сценариев клиентов средствами JavaScript

1.ЦЕЛЬ РАБОТЫ

изучение назначения и принципов создания сценариев клиента в HTML документе;

издание сценариев клиента в документе.

2.ТЕОРЕТИЧЕСКИЕ ПОЛОЖЕНИЯ

Сценарий клиента – это программа, которая или вызывается из html документа, или непосредственно в него вложена. Обычно сценарий выполняет следующие действия:

меняет содержимое документа (с помощью впечатывания тегов командой write);

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

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

По способу выполнения сценариев, их можно разделить на: 1) сценарии, выполняемые в процессе загрузки документа.

Эти сценарии помещаются в тег <script> </script> вне описания функций;

2) сценарии, которые выполняются как обработчики событий. В качестве обработчика событий указывается вызов функции, которая описана в элементе <script>.

Описываются сценарии в элементе <script> </script>, причем возможно как непосредственное описание сценария в данном теге (в виде функции или в виде отдельного программного кода), так и присоединение сценария в виде значения атрибута src=”url”, например

<SCRIPT type="text/javascript” src=”scenari.js”>

Элемент <script> </script>, в котором описываются сценарии, может содержаться в элементе head, а так же в любых блочных и текстовых элементах.

Элемент <script> использует следующие атрибуты:

18

type = тип файла (тип MIME языка сценария); сharset = кодировка (кодировка символов);

src = URI (URI внешнего сценария); defer = defer.

Атрибут type указывает на тип языка сценария. Он может иметь значения:

-“text/javascript”; -“text/perlscript”; -“text/vbscript”/

Вместо атрибута type может быть использован нестандартный атрибут language, поддерживаемый многими обозревателями, возможные значения данного атрибута задаются в более простом формате – “javascript”, “perlscript”, “vbscript”.

Атрибут type может быть опущен, если документ содержит метаописатель, задающий язык программирования сценариев, принятый по умолчанию, например

<META http-equiv="Content-Script-Type" content="text/javascript">.

В том случае если возможна реализация функций, предусмотренных в документе без использования элемента script, предусмотрено использование элемента: <noscript> </noscript>, в котором задается альтернативное содержание без использования скриптов.

Для создания сценариев используются различные языки сценариев, однако чаще используются сценарии на JavaScript, так как они не требуют установки дополнительных компонентов на стороне клиента.

Сценарий “Javascript” (Jscript)

Язык Javascript можно рассматривать как один из диалектов языка C с аналогичным синтаксисом.

Особенностью java script является вольное описание переменных (декларация). Переменную можно декларировать с помощью оператора:

var перем [инициализатор],

где перем – идентификатор переменной.

19

Инициализатор определяет начальное значение переменной, знак [ ] – указывает, на то, что инициализатор может отсутствовать. Простейшая форма инициализатора = const.

Кроме того, переменная считается декларированной, если она появляется в левой части оператора присваивания в любой части программы, например: переем = 5

Если переменная декларирована не в теле функции, она считается глобальной и видима во всех функциях. Если переменная декларирована в теле функции, то она видима только в данной функции.

Описание функции аналогично синтаксису С, С++

<script language="JavaScript"> function fulltime()

{var time=new Date(); document.clock.full.value=time.toLocaleString(); setTimeout(" fulltime()",500) }

</script>

Вданном примере приведено описание функции fulltime(). Вызывать данную функции можно при обращении к сценариям, например на нее можно ссылаться как на обработчик событий управляющих элементов (onClick=” fulltime()”). Простейшие сценарии можно задавать непосредственно как значение события обработчика. Например

onClick=”id1. id11.value=id1.id22.value+ id1.id32.value”

Вданном сценарии указано, что значению элемента с иден-

тификатором id11 (то есть у которого значение атрибута id= id11), который лежит внутри элемента с идентификатором id1, будет присвоена сумма значений элемента с идентификатором id22 и элемента с идентификатором id32, также лежащих внутри элемента с идентификатором id11.

Отличие javascript от языков С диалекта также состоит в особенностях поддержания объектов. Javascript не содержит описания классов. Объекты создаются с помощью конструкторов или инициализации.

Например, создание объекта предопределённого типа: объект XMLHttpRequest:

XMLHttpReq = new XMLHttpRequest ();