ЯЗЫК ПРОГРАММИРОВАНИЯ С# 2005 И ПЛАТФОРМА .NET 2.0. 3-е издание

Троелсен Эндрю

Структура HTML-документа

Файл HTML состоит из множества дескрипторов, описывающих представление данной Web-страницы. Как и следует ожидать, базовая структура любого HTML-документа примерно одинакова. Например, файлы *.htm (или, альтернативно, файлы *.html) открываются и закрываются дескрипторами ‹html› и ‹/html›, обычно в них определяется раздел ‹body› и т.д. Следует иметь в виду, что HTML не чувствителен к регистру символов. Поэтому для браузера ‹HTML›, ‹html› и ‹Html› оказываются идентичными.

Для демонстрации некоторых базовых возможностей HTML откройте Visual Studio 2005, создайте пустой HTML-файл, выбрав File->New->File из меню, и сохраните этот файл под именем default.htm

в каталоге C:\CodeTests\CarsWebSite. Наша исходная разметка весьма незамысловата.

‹html›

 ‹body›

 ‹/body›

‹/html›

Дескрипторы ‹html› и ‹/html› используются для обозначения начала и конца документа. Как вы можете догадаться, Web-браузер использует эти дескрипторы, чтобы выяснить, с какого места следует начать и где следует закончить обработку признаков форматирования, указанных в главной части документа. Почти все содержимое документа определяется в рамках дескриптора ‹body›. Чтобы немного "оживить" страницу, определите ее заголовок так, как показано ниже.

‹html›

 ‹head›

‹title›Web-страница Cars‹/title›

 ‹/head›

 ‹body›

 ‹/body›

‹/html›

Вы, наверное, догадались, что дескрипторы ‹title› используются для обозначения текстовой строки, которая при вызове этой страницы должна размещаться в строке заголовка окна Web-браузера.

Разработка HTML-формы

Реальное действие в файле *.htm происходит в рамках элементов ‹form›. HTML-форма – это просто именованная группа связанных элементов пользовательского интерфейса, используемых для сбора данных пользовательского ввода, которые затем передаются Web-приложению по протоколу HTTP. He следует путать HTML-форму со всей областью окна браузера. Фактически HTML-форма представляет собой логическое объединение элементов, размещенных между дескрипторами ‹form› и ‹/form›.

‹html›

 ‹head›

‹titlе›Web-страница Cars‹/title›

 ‹/head›

 ‹body›

‹form id="defaultPage" name="defaultPage"›

‹!-- Место для Web-содержимого -– ›

‹/form›

 ‹/body›

‹/html›

Для id и name этой формы указано значение default Page. Как правило, открывающий дескриптор ‹form› задает также атрибут aсtion, указывающий адрес URL, по которому следует передать данные формы, и метод передали этих данных (POST или GET). Эти возможности дескриптора ‹form› мы рассмотрим чуть позже. Пока чего давайте выясним, какие элементы могут размещаться в HTML-форме. В панели инструментов Visual Studio 2005 предлагается специальный раздел HTML, в котором сгруппированы связанные с HTML элементы управления (рис. 23.4).

Рис. 23.4. Раздел HTML в окне панели инструментов

Создание пользовательского интерфейса на базе HTML

Перед добавлением HTML-элементов в HTML-форму важно заметить, что Visual Studio 2005 позволяет редактировать содержимое

файлов *.htm с помощью интегрированного HTML-редактора и окна свойств. При выборе DOCUMENT в окне свойств (рис. 23.5) вы получаете возможность настройки ряда параметров HTML-страницы, например цвета ее фона.

Теперь измените раздел ‹body› файла default.htm так, чтобы отобразить пользователю приглашение ввести имя и пароль, и установите для фона тот цвет, который вам нравится (вы можете вводить и форматировать текстовое содержимое непосредственно в окне НТМL-редактора).

‹html›

 ‹head›

‹titlе›Web-страница Cars‹/title›

 ‹/head›

 ‹body bgcolor="NavajoWhite"›

‹!-- Приглашение ввода для пользователя -– ›

‹h1 align="center"›Страница входа в систему Cars‹/h1›

‹р align="center"›‹br›Введите ‹i›имя пользователя‹/i› и ‹i›пароль‹/i›.‹/р›

‹form id="defaultPage" name="defaultPage"› ‹/form›

 ‹/body›

‹/html›

Рис. 23.5. Редактирование HTML-документа средствами VS .NET

Теперь давайте построим саму HTML-форму. Вообще говоря, каждый HTML-элемент описывается с помощью атрибута name (соответствующее значение используется для программной идентификации элемента) и атрибута type (это значение задает вид элемента интерфейса, который вы хотите поместить в рамки декларации ‹form›). В зависимости оттого, с каким элементом интерфейса вы работаете, в окне свойств появляется дополнительные атрибуты, присущие данному конкретному элементу.

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

‹!-- Построение формы для получения информации от пользователя --›

‹form name="defaultPage" id="defaultPage"›

 ‹P align="center"›Имя пользователя:

‹input id="txtUserName" type="text" NAME="txtUserName"›

 ‹/P›

 ‹P align="center"›пароль:

‹input name="txtPassword" type="password" ID="txtPassword"›

 ‹/P›

 ‹P align="center"›

‹input name="btnSubmit" type="submit" value="Отправить" io="btnSubmit"›

‹input name="btnReset" type="reset" value="C6poc" ID="btnReset"›

‹/form›

Обратите внимание на то, что здесь для каждого элемента назначены соответствующие значения name и id (txtUserName, txtPassword, btnSubmit и btnReset). Еще более важно то, что каждый элемент ввода имеет дополнительный атрибут type, который ясно идентифицирует их как вполне определенные элементы пользовательского интерфейса. Например, type="reset" указывает на автоматическую очистку всех полей формы и присвоение им начальных значений, type="password" – маскированный ввод пароля, a type="submit" – отправку данных формы получателю. На рис. 23.6 показан вид получившейся страницы.