HTML: работа с базами данных в примерах (стр. 2 )

Задание по созданию простейшего HTML-документа:

1.  В программе Блокнот создать простейшую структуру HTML-документа.

2.  Придумать и записать заголовок страницы внутри элемента TITLE.

3.  Записать любой текст внутри элемента BODY.

4.  Сохранить файл с расширением .html (например, первая страница.html).

5.  Запустить браузер Internet Explorer и просмотреть HTML-документ.

6.  Вернуться в Блокнот. Изменить внутреннее наполнение, используя элементы форматирования текста.

Форматирование текста

Существуют специальные теги, позволяющие форматировать текст.

<P> текст </P>

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

аlign=”center”

аlign=”left”

аlign=”right”

Для этого же эффекта могут использоваться парные теги:

<LEFT> текст </LEFT>

<CENTER> текст </CENTER>

Существуют теги для оформления заголовков. Заголовок первого уровня выводится самым крупным шрифтом. Каждый следующий заголовок будет выводиться шрифтом меньшего размера.

<H1> Заголовок первого уровня </H1>

<H2> Заголовок второго уровня </H2>

<H3> Заголовок третьего уровня </H3>

<H4> Заголовок четвертого уровня </H4>

<H5> Заголовок пятого уровня </H5>

Существует возможность изменения начертания символов: полужирный шрифт (bold), курсив (italic), подчеркивание (underline):

<B> жирный шрифт </B>

<I> курсив </I>

<U> подчеркивание </U>

<FONT > текст </FONT>

Позволяет задавать шрифт, размер и цвет символов выводимого текста, заключенного между тегами.

Для установки шрифта используется атрибут face=”шрифт”, который ставится в открывающем теге элемента FONT.

<FONT face=”Antiqua, Arial, Times”>

Для изменения размера выводимых символов можно установить в открывающем теге элемента FONT атрибут size=±n, где n – число пунктов, на которое вы хотите увеличить (+n) или уменьшить (-n) размер шрифта.

Для установки цвета выводимых символов можно добавить в открывающем теге элемента FONT атрибут color=”цвет”.

Например:

<FONT face=”Arial, Times” size=+2 color=”red”> текст </FONT>

Полезные замечания: Чтобы вставить пустую строку, используется одиночный тег <BR>. Чтобы сделать отступ от края экрана или вставить дополнительные пробелы, используется запись &nbsp;. Для создания горизонтальной линии (разделителя) внутри документа используется тег <hr>.

Управление цветом

Кодирование цвета используется для раскрашивания шрифтов, линий, фона и других элементов страницы. Цвета обозначаются английскими названиями или числовыми кодами. В общем случае цвет определяется RGB-кодом. Любой цвет представляется как комбинация красного (R), зеленого (G) и синего (B) цветов, взятых в определенных пропорциях. Простой способ определить цвет – написать название на английском языке.

Русское название	Английское название	RGB-код
Аквамарин	Aqua	#00FFFF
Белый	White	#FFFFFF
Желтый	Yellow	#FFFF00
Зеленый	Green	#008000
Золотой	Gold	#FFD700
Индиго	Indigo	#4B0080
Каштановый	Maroon	#800000
Красный	Red	#FF0000
Оливковый	Olive	#808000
Оранжевый	Orange	#FFA500
Пурпурный	Purple	#800080
Светло-зеленый	Lime	#00FF00
Серебристый	Silver	#C0C0C0
Серый	Gray	#808080
Сизый	Teal	#008080
Синий	Blue	#0000FF
Ультрамарин	Navy	#000080
Фиолетовый	Violet	#EE80EE
Фуксиновый	Fuchsia	#FF00FF
Черный	black	#000000

Вставка рисунков, изображений, фотографий

<IMG SRC=”имя файла”>

В документ можно вставить рисунки, изображения, фотографии с расширением. gif, .jpg.

При размещении картинок могут использоваться дополнительные параметры. Рассмотрим некоторые из них:

аlign=”способ выравнивания”

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

LEFT – по левому краю;

RIGHT – по правому краю;

CENTER – по центру;

Кроме атрибута align часто используются атрибуты, позволяющие указать размер выводимой картинки в пикселях:

Widht=n – ширина выводимой картинки, n – число пикселей;

Height=m – высота картинки, m – число пикселей.

Атрибуты HSPACE и VSPACE обозначают горизонтальный и вертикальный отступ. Они используются для задания отступа от краев изображения до текста.

Например: <IMG SRC=”picture. jpg” align=”left” hspace=20>

Создание гиперссылок на HTML-документы

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

<A HREF=”название HTML-документа”> ссылка </A>

где ссылка – это слово, заголовок, фрагмент текста, картинка или другой объект, который будет являться ссылкой, будет выделен в тексте специальным образом.

HTML-формы

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

Текстовые поля создаются с помощью тега <INPUT> со значением атрибута TYPE=”text”. Атрибут NAME служит для определения наименования переменной поля.

Например: <INPUT TYPE=”text” NAME=”fio” SIZE=30>.

Для создания полей со списком служит элемент <SELECT> </SELECT>, в котором каждый элемент списка определяется тегом <OPTION>.

Внутри тега <OPTION> поддерживается два атрибута: SELECTED и VALUE. Выбираемый по умолчанию элемент задается с помощью атрибута SELECTED.

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

Добавим HTML-код, создающий раскрывающийся список для выбора одного варианта:

Какие браузеры для просмотра web-страниц существуют?

<SELECT NAME=”browser”>

<OPTION SELECTED > Internet Explorer

<OPTION> Netscape Navigator

<OPTION> Opera

<OPTION> Neo Planet

</SELECT>

<BR>

Текстовая область. Создается такая область с помощью тега <TEXTAREA> с обязательными атрибутами: NAME, задающим имя объекта; ROWS, определяющим число строк; COLS, определяющим число столбцов.

Добавим на страницу текстовую область:

Какую еще информацию вы хотели бы видеть на нашем сайте? <BR>

<TEXTAREA NAME=”dopolnenie” ROWS=4 COLS=30>

</TEXTAREA>

<BR>

Таким образом, определены основные элементы языка HTML, которые являются необходимыми для создания баз данных.

Основы Visual Basic Script (VBScript)

Для управления элементами HTML-документов и самим браузером, генерации новых документов в безе данных, организации диалогового взаимодействия с пользователем, выполнения каких-либо расчетов и обработки данных в HTML была предусмотрена интеграция со специальными языками программирования. Программы, написанные на этих языках, называют сценариями (scripts). Языком программирования сценариев является Visual Basic Script.

Ввод и вывод данных

Visual Basic Script – язык сценариев (скриптов) для HTML-документов. В Visual Basic Script существуют методы для ввода и вывода данных:

alert(), confirm().

alert

Данный метод позволяет выводить диалоговое окно с заданным сообщением и кнопкой OK. Синтаксис выражения имеет вид:

alert(“сообщение”)

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

Диалоговое окно закрывается при нажатии на кнопку OK. До тех пор, пока окно не закрыто, переход к другим окнам невозможен.

confirm

Метод confirm позволяет вывести диалоговое окно с сообщением и двумя кнопками – OK и Отмена (Cancel). В отличие от метода alert этот метод возвращает логическую величину, значение которой зависит от нажатой кнопки. Если пользователь щелкнет по кнопке OK, то возвращается значение true, если же он щелкнул по кнопке Отмена, то возвращается значение false. Возвращаемое значение можно обрабатывать в программе и, следовательно, создавать эффект интерактивности. Синтаксис выражения имеет вид:

confirm(“сообщение”)

Типы данных

Типы данных	Примеры	Описание значений
Строковый или символьный	“Привет”	Последовательность символов, заключенных в кавычки двойные или одинарные
Числовой	3.14 -567	Число, последовательность цифр, перед которой может быть указан знак, целая и дробная части разделяются точкой
Логический	True, false	Возможны только два значения
Null		Отсутствие какого-либо значения
Объект (object)		Программный объект, определяемый своими свойствами
Функция (function)		Программный код, выполнение которого может возвращать некоторое значение

Переменные и оператор присваивания