Тема 9. Интерактивные Web-документы

Основное содержание темы: Понятие интерактивного Web-документа. Основы интерактивности. Тэг FORM как средство диалога между пользователем и сервером. Основные параметры тэга FORM. Методы пересылки данных на сервере. Элементы управления, используемые при построении формы. Тэги INPUT, SELECT, TEXTAREA. Примеры построения форм для отсылки информации. Общий обзор языка JavaScript. Синтаксис языка JavaScript. Встраивание сценариев в HTML- документы. Web-серверы. Протоколы и сервисы Интернет. Администрирование сайтов: продвижение, обновляемость, обслуживание. Заливка, регистрация и обновление сайта. Варианты встраивания таблиц стилей в HTML документ. Простейшие примеры каскадных таблиц стилей. Применение таблиц стилей. Возможности, которые открывают каскадные таблицы стилей для форматирования HTML-документа.

Практическая работа 13. Создание и заполнение интерактивных анкет и тестовых заданий

Цель работы:

Краткое теоретическое обоснование:

Стандартный язык разметки HTML позволяет легко и быстро создавать Web-страницы, передаваемые по сети Интернет. Но эти страницы являются статичными, т.е. пользователь не может изменять их содержимое, взаимодействовать с ними. Для придания динамичности HTML-страницам был предложен и реализован ряд технологий, «оживляющих» и создающих «реагирующие» на действия пользователя HTML-документы.

Одной из первых технологий в этом ряду стоит технология, основанная на CGI-сценарии, т.е. программе, инициализируемой на сервере при передаче на него информации из полей формы HTML, создаваемых тэгом <FORM>. Подобный сценарий существенно влияет на загрузку сети, т.к. происходит постоянная передача информации от клиента серверу и обратно.

Чтобы избежать подобной ситуации, фирмой Netscape был разработан специальный язык сценариев JavaScript. Программы, написанные на этом языке, встраиваются в HTML-документ и интерпретируются браузером, используемым для его просмотра. Фирма MicroSoft разработала и активно продвигает собственный язык сценариев VBScript, являющийся подмножеством языка Visual Basic.

Языки сценариев делают HTML-страницы интерактивными, но для изменения содержания страницы всё же необходимо произвести её повторную загрузку. Полная же интерактивность достигается использованием динамического языка разметки страниц (Dynamic HTML), который, по существу, состоит из трёх компонентов – каскадной таблицы стилей (CSS), JavaScript и HTML, соединённых объектной моделью документа (DOM).

Перечисленные технологии являются мощными инструментами создания интерактивных Web-страниц, однако они ограничены возможностями соответствующих языков сценариев. Более мощным средством являются апплеты Java и элементы управления ActiveX, поддерживающие объектно-ориентированные технологии и позволяющие внедрять в документ программируемые объекты и взаимодействовать с ними посредством языков сценариев.

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

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

Все формы начинаются тэгом <FORM> и звершаются тэгом <FORM>, который имеет параметр METHOD

METHOD - Метод посылки сообщения с данными из формы. В зависимости от используемого метода вы можете посылать результаты ввода данных в форму двумя путями:

GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется.

POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. Ваша CGI-программа получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в стандартный поток ввода; вместо этого используется переменная среды CONTENT_LENGTH для определения, какое количество данных вам необходимо считать из стандартного потока ввода. Данный метод рекомендуется к использованию.

ACTION описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на CGI-программу, обрабатывающую данную форму.

Тэг <TEXTAREA> используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст). Атрибуты, используемые внутри тэга <TEXTAREA> описывают внешний вид и имя вводимого значения. Тэг </TEXTAREA> необходим даже тогда, когда поле ввода изначально пустое.

Описание атрибутов:

NAME - имя поля ввода

ROWS - высота поля ввода в символах

COLS - ширина поля ввода в символах

Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тэгов <TEXTAREA> и </TEXTAREA>.

Оборудование: Персональный компьютер

Последовательность выполнения:

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

1. На оценку «5» -не менее 15 заданий, на оценку «4» - не менее 12, на оценку «3» - не менее 8.

2. На оценку «5» и «4» среди вопросов теста должно быть не менее 6 вопросов практического характера (вопрос формулируется в виде изображения сайта или его фрагмента: таблица, фреймовая структура, часть формы, изображение и т. д.)

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

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

5. Тест должен называться «Проверь знание тегов HTML» и предваряться анкетой: ФИО тестируемого, группа (должна выбираться из списка из четырех групп: ИС, ТР, ПИ, КС) и дата прохождения теста

6. Тест должен содержать кнопки сброса ответов и отправки формы

7. С главной страницы теста должен быть переход на страницу с верными ответами.

Контрольные вопросы:

1. Дайте понятие интерактивного Web-документа.

2. Расскажите об основах интерактивности.

3. Опишите тэг FORM и его основные параметры.

4. Расскажите о методах пересылки данных на сервер.

5. Опишите тэг INPUT. Опишите тэг SELECT. Опишите тэг TEXTAREA.

6. Приведите примеры построения форм для отсылки информации.

7. Изложите последовательность действий, которые надо выполнить, чтобы опубликовать сайт в Интернете.

Практическая работа 14. Использование каскадных таблиц стилей

Цель работы: Проверить теоретические знания по теме «Каскадные таблицы стилей».

Краткое теоретическое обоснование:

При использовании тега STYLE требуется вставлять таблицу стилей в каждый документ. Это может показаться довольно неэкономным как с точки зрения объема файлов, так и с точки зрения времени, необходимого для разработки страницы. Однако есть способ автоматического применения таблицы стилей, сохраненной в отдельном файле. Этот файл должен иметь расширение CSS. Для применения стилей, описанных в этом файле, к данному документу используется специальная инструкция, которую следует вставить между тэгами <STYLE> и </STYLE>.

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

Оборудование: Персональный компьютер

Последовательность выполнения:

1. Какие координатные системы поддерживает спецификация CSS-P?

абсолютную(absolute)

относительную(relative)

базовую(base)

местную(local)

сервера(server)

приложения(application)

2. Что определяют абсолютные координаты блока?

нет такой координатной системы

местоположение геометрического центра блока относительно верхнего левого угла рабочей области окна браузера

местоположение верхнего левого угла прямоугольника блока относительно верхнего левого угла рабочей облаcти окна браузера

координаты блока в системе координат Web-узла

3. Куда направлена ось Y в относительной системе координат?

вниз

вверх

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

нет такой системы координат

4. От какой точки отсчитываются координаты блока в относительной системе координат?

от левого верхнего угла охватывающего блок элемента разметки

от верхнего левого угла рабочей области браузера

от точки расположения верхнего левого угла блока по умолчанию

5. Можно ли использовать отрицательные значения при указании координат блока?

нет нельзя

можно, но только в относительных координатах

можно только в абсолютных координатах

можно в любой из допустимых координатных систем

6. Какие атрибуты определяют координаты блока?

position-x

position-y

left-top

bottom-right

top

left

bottom

right

7.Какие атрибуты определяют линейные размеры блока?

width

left-right

right-offset

top-offset

height

margin

padding

8.Можно ли изменять значения позиционных атрибутов CSS-P при просмотре страницы на стороне клиента посредством исполнения JavaScript-кода?

можно

нельзя

9. Сколько способов размещения описания CSS вы знаете?

10. Каким образом можно переопределить стиль отображения элемента разметки умолчания?

через атрибут style этого элемента разметки

через имя-селектор элемента разметки в элементе STYLE

путем определения атрибутов стиля в селекторе-идентификаторе данного элемента

через JavaScript описание CSS

11 Каким образом осуществляется ссылка на внешнее описание стиля?

в элементе LINK

"@import(url)

через атрибут style элемента разметки

12. Какая из записей верна?

<p style="text-align:justify;">...</p>

<p class="text-align:justify;">...</p>

<p id="text-align:justify;">...</p>

13. Чему равно поле отступа текста от левой границы страницы в примере:

body {left-padding:20px;}

div {left-padding:0px;margin:5px;}

p {padding:5px;}

...

<body>

<div>

<p>

...

</p>

</div>

</body> ?

20px

10px

30px

отступ умолчания

14. Можно ли применять атрибут padding к элементу разметки IMG?

можно

нет нельзя

можно, если он расположен внутри элемента А

15.Какие координатные системы поддерживает спецификация CSS-P?

абсолютную(absolute)

относительную(relative)

базовую(base)

местную(local)

сервера(server)

приложения(application)

16. Что определяют абсолютные координаты блока?

нет такой координатной системы

местоположение геометрического центра блока относительно верхнего левого угла рабочей области окна браузера

местоположение верхнего левого угла прямоугольника блока относительно верхнего левого угла рабочей облаcти окна браузера

координаты блока в системе координат Web-узла

17. Куда направлена ось Y в относительной системе координат?

вниз

вверх

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

нет такой системы координат

18. От какой точки отсчитываются координаты блока в относительной системе координат?

от левого верхнего угла охватывающего блок элемента разметки

от верхнего левого угла рабочей области браузера

от точки расположения верхнего левого угла блока по умолчанию

19. Можно ли использовать отрицательные значения при указании координат блока?

нет нельзя

можно, но только в относительных координатах

можно только в абсолютных координатах

можно в любой из допустимых координатных систем

20. Какие атрибуты определяют координаты блока?

position-x

position-y

left-top

bottom-right

top

left

bottom

right

21. Какие атрибуты определяют линейные размеры блока?

width

left-right

right-offset

top-offset

height

margin

padding

22. Можно ли изменять значения позиционных атрибутов CSS-P при просмотре страницы на стороне клиента посредством исполнения JavaScript-кода?

можно

нельзя

23. Какие из следующих атрибутов CSS влияют на межбуквенное расстояние?

letter-spacing

font-size

font-variant

line-height

text-indent

24. Влияет ли кегль шрифта на межбуквенное расстояние?

влияет

не влияет

в IE влияет, а в NN не влияет

25. Одинаковое ли расстояние между буквами в шрифтах различных гарнитур при равных кеглях?

нет неодинаковое

одинаковое

все определяется версией браузера

26. Какие из следующих атрибутов CSS вызывают преобразование шрифта?

text-decoration

text-transform

text-align

font-family

font-style

27. Какой из вариантов - аналог следующего элемента разметки:
<u>...</u> ?

<div style="text-decoration:underline;">...</div>

<span style="text-transform:underline;">...</span>

<u style="text-decoration:line-throught;">...</uv>

<span style="text-decoration:underline;">...</span>

28. Что подразумевает следующее описание: <span style="text-transform:capitalize;">...</span> ?

фрагмет текста будет отображаться только заглавными буквами

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

в этом определении есть ошибка, поэтому оно ничего не подразумевает

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

Оборудование: Персональный компьютер с доступом в Интернет

Последовательность выполнения:

Требования, предъявляемые к содержанию и оформлению индивидуального задания по дисциплине «Язык HTML»

Требования к содержанию

Тема раскрыта глубоко, если для тем по устройствам ПК описаны:

· конструкция устройства, принцип действия (приведены описание, графические иллюстрации, схемы, желательно видеоприложение);

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

· кратко изложена история вопроса;

· желательно создать тест по описываемому устройству, используя терминологию Блума.

Тема раскрыта глубоко, если для тем по программному обеспечению описаны:

· интерфейс программы (используйте скриншоты окон программы);

· описаны возможности программного средства;

· приведена таблица сравнительных характеристик программ-аналогов;

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

Материал структурирован (разделен на пункты, подпункты…, изложен в логической последовательности, присутствует четкость суждений, обоснованность положений, краткость изложения мысли, проведен анализ и данные сведены в таблицу).