Основи мови програмування HTML

Найпростіша програма мовою HTML має наступний вигляд:

<HTML>

<HEAD>

<TlTLE>. .. </ TITLE>

</ HEAD>

<BODY>

...

</ BODY>

</ HTML>.

З програми видно, що кожен блок, як правило, відкривається оператором (тегом) <F> і закривається тегом </ F>.

Перелічимо деякі теги. Оскільки їх досить багато, введемо деяку класифікацію [49].

Загальне призначення:

<HTML> - програма мовою HTML;

<TITLE> - титул документа;

<HEAD> - заголовок сторінки;

<BODY> - тіло програми;

<р> - елемент абзацу;

<BR> - Перехід на новий рядок;

<NOBR> - виконання в один рядок;

<PRE> - відформатований текст.

Шрифт:

<В> - напівжирний шрифт;

<ЕМ> - курсив;

<U> - підкреслення;

<BIG> - збільшення розміру шрифту;

<1> - зменшення розміру шрифту;

<STRONG> - виділення тексту;

<SUB> - нижній індекс;

<SUP> - верхній індекс;

<VAR> - змінна.

Списки:

<UL> <LI> </ UL> - LI - нумерований список;

<OL type T> </ OL> - де type має такі значення: 1 - I, II, III, ...; i - 1, 2, 3, ...; А - А, В, С, ...; а - а, і, с, ....

Малюнки:

<IMG>

Таблиця:

<TABLE> - таблиця;

<CAPTION> - заголовок таблиці;

<TR> - рядок таблиці;

<ТН> - заголовок стовпця або рядка всередині TR;

<TD> - комірка таблиці.

Форма:

<form> - представляє інтерактивну форму введення і має два атрибути: method і action (дія). Найчастіше використовують метод post, як спосіб передачі ISAPI-програмі введених даних. Наприклад,

<form method = POSTюaction = getphone.htm>.

<input> - поле введення, що задається всередині тега <form>. Input має багато атрибутів, з яких розглянемо основні: name (назва поля), value (значення поля), type.

Наприклад,

<input type = text name = Familia value = Ivanov>.

У свою чергу, атрибут type теж має кілька значень. Розглянемо основні з них.

type = text - задає однорядкові текстові поля;

type = password - визначає пароль;

type = radio - задає радіокнопку; type = checkbox - визначає прапорець.

Наприклад,

Select the credit card to place the order: <BR>

Visa <input type = radio name = CreditCard value = Visa>

Master Card <inputtype = radio name = CreditCard value = MCard>.

Type = range - перевірка діапазону завдання (від мінімуму до максимуму);

Type = hidden - приховані поля, які використовуються зазвичай для формування правил перевірки. Наприклад,

<form method-POST action = getphone.htm>

<inputtype = text name = WWWMY1 size = 5>

<input type = hidden name = WWWMY1_range value = 'MIN = 0 MAX = 25'>

cinput type = submit va1uе = 'Відповідь'>.

</ form>

В останньому рядку submit - це кнопка, натискання якої викликає передачу введених даних полів в Web-сервер, при цьому value визначає назву кнопки.

Аналогічно задається кнопка reset для скидання значень полів до початкового стану.

Тег <select> відображає за допомогою тега <option> деякий список:

<select name = tovar>

<option> tea

<option> coffee

<option> water

</ select>.

Для створення багаторядкового вікна використовують тег <textarea>.

Реалізація публікації

Тепер можливо розглянути приклад публікації бази даних, т. Е. Процедур Б і 2А прикладу 13.1. Процедура 1А - створення джерела даних - реалізована у вигляді бази даних.

Як і раніше приклад виконаємо в рамках програми Delphi.

Для виконання публікації зручно - для передачі бази даних на www-сторінку - використовувати спеціальні компоненти TDatasetTableProducer і TQueryTableProducer.

Зокрема, компонента TQueryTableProducer дозволяє звертатися до баз даних на основі СУБД Access і InterBase, в яких таблиці розміщуються в одному файлі, через ім'я БД (файл) і SQL-оператор select із зазначенням у ньому імені таблиці та публікуються полів.

Для навчальних цілей складемо просту програму з передачею полів таблиці в деякому циклі [1].[1]

Вихідна таблиця побудована в СУБД Paradox (рис. 13.2).

Вона публікується за допомогою наступної програми.

Видима таблиця

Рис. 13.2. Видима таблиця

unit Uniti;

interface

uses

Windows, Messages, SysUtils, Classes, Graphics, Controls,

Forms, Dialogs,

OleCtrls, SHDocVw, Grids, DBGrids, Db, DBTables, HTTPApp,

StdCtrls,

Buttons, DBWeb;

TForml = class (TForm)

DataSourcel: TDataSource;

Table1: TTable;

DBGrid1: TDBGrid;

BitBtnl: TBitBtn;

BitBtn2: TBitBtn;

BitBtn3: TBitBtn;

WebBrowser: TWebBrowser; procedure BitBtnlClick (Sender: TObject);

procedure BitBtn2Click (Sender: TObject);

procedure BitBtn3Click (Sender: TObject);

procedure FindAddress;

private

{Private declarations}

public

{Public declarations}

end;

var

Forml: TForml;

implementation

{$ R * .DFM}

uses shellapi, filectrl; // підключення модулів

procedure TForml .FindAddress;

var

Flags: OLEVariant;

begin

Flags: = 0; // установка адреси броузера

WebBrowser.Navigate (WideString ('c: HTMLTEST.htm'), Flags, Flags, Flags, Flags);

end;

procedure TForml .BitBtnl Click (Sender: TObject); // закриття форми

begin

close;

end;

procedure TForml .BitBtn2C! ick {Sender: TObject); // алгоритм публікації

var

HTMLStr: TStringList;

l, k: Integer;

Begin // основні теги HTML

HTMLStr: = TStringList.Create;

HtmIStr.Clear;

HtmIStr.Add ('<HTML>');

HtmIStr.Add ('<HEAD>');

HtmIStr.Add ('<TITLE>' + 'HTML-сторінка, що містить звіт з БД' + '</ TITLE>');

HtmIStr.Add ('</ HEAD>');

HtmlStr.Add ('<BODY BGCOLOR =' # FFFFEE "> '); // додавання файлу в заголовок // документа

HtmIStr.Add ('<Н1> <CENTER> BA з файлу' + Tablet .TableName + '</ CENTERx / H1>');

HtmIStr.Add ('ctable border>');

HtmIStr.Add (/ <tr> /);

Table 1 .Open; // відкриття таблиці для читання for l: = 0 to Table1.FieldCount - 1 do

HtmIStr.Add ('<th>' + Table 1. Fields [l]. FieldName + '</ th>');

HtmIStr.Add ('</ tr>'); // закриття заголовка таблиці

Table 1. First;

while not Table 1 .EOF do // копіювання даних з комірок бази даних в комірки таблиці begin

HtmlStr.Add ("<tr>");

for!: - 0 to Tablel .FieldCount - 1 do

if Tablet .Fields [l] .DisplayText = / then

HtmlStr.Add ('<td>' + '___' '+' </ td> ')

else HtmlStr.Add ('<td>' + Tablel.Fields [l] .DisplayText + '</ td>');

HtmlStr.Add ('</ tr>');

Tablel.Next;

end;

HtmlStr.Add ('</ tr>'); // закриття вихідного файлу

HtmIStr.Add ('</ table>');

HtmIStr.Add ('</ BODY>');

HtmlStr.SaveToFile ('c: Htmltest.htm');

HtmIStr.Free;

end;

// запуск згенерованого файлу на перегляд

procedure TForml .BitBtn3Click (Sender: TObject);

begin

FindAddress;

end;

end.

Вікно Delphi до запуску програми

Рис. 13.3. Вікно Delphi до запуску програми

Результат роботи програми

Рис. 13.4. Результат роботи програми

Вікно додатку Delphi до запуску програми показано на рис.

Після запуску програми і послідовного натискання кнопок "Перевести в HTML" і "Переглянути HTML-файл" в нижній частині вікна (рис. 13.4) відобразиться згенерований HTML-файл.

При зміні даних у вихідній таблиці (рис. 13.4) змінюється і результат в нижній частині вікна.

Вихід з програми здійснюється натисканням кнопки "Вихід".

  • [1] Робота виконана С. Кузнєцовим під керівництвом авторів.
 
< Попер   ЗМІСТ   Наст >