Back

Making HTML web pages with Delphi

First a simple run down about HTML and a basic web page.
If you are new to HTML programming this will help you understand what is going on.

HTML web pages are basically text that has many tags in it that make up an HTML web page.
Some tags are beginning tags and some are ending tags, and some are just tags.
TIP: In most web browsers you can view the current HTML web pages Page Source, viewing the page source is a good way to get the general idea of what a web page is all about.

Here are some of the basic tags.

An HTML web page starts with a <html> tag and ends with a </html> tag.
The slash / shows the tag is an ending tag.

The two main parts of an HTML page are the Head and the Body.

This is the head tag - <head>

Here are some Meta tags with information in them.

Here is the closing head tag - </head>

This is the body tag for this web page

Notice the background colors and link colors are included.

The center tag is used to center the text in the web page.
You use the <center> tag at the start of the text or graphic that you want centered and the </center> tag when you want to stop the text or graphic from being centered.
You can also center tables as well.

Here is the code for the table below:

<table BORDER COLS=2 WIDTH="12%" >
<tr>
<td>
<center><b><u>Test</u></b></center>
</td>
<td><b>Test</b></td>
</tr>
<tr>
<td BGCOLOR="#FFFF00">Test</td>
<td><i>Test</i></td>
</tr>
</table>

Test Test

Test Test

Most tags are easy to understand and all you need is a good imagination to figure out what they are.
Here are a few from the above example:

<table> </table> = Table.
<i> </i> = Italics.
<tr> </tr> = Table row.
<th> </th> = Table header.

At the end of an HTML web page you will find these two tags:

</body>
</html>
These are the closing tags for the web page.

You can easily make a simple program that will produce an HTML web page using Delphi.

Here is a simple attempt at writing a web page with code

procedure TForm1.Button1Click(Sender: TObject);
begin
Memo1.SelectAll;
Memo1.CopyToClipboard;
Memo2.Lines.Add('<HTML>');
Memo2.Lines.Add('<Head>');
Memo2.Lines.Add('<Title>Internet Programming with Delphi</Title>');
Memo2.Lines.Add('</Head>');
Memo2.Lines.Add('<Body Text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#000099" alink="#000088">');
Memo2.Lines.Add('<Pre>');
Memo2.PasteFromClipboard;
Memo2.Lines.Add('</Pre>');
Memo2.Lines.Add('</Body>');
Memo2.Lines.Add('</HTML>');
end;

This example uses 2 memos and a button.
You can add a SaveDialog and then a save button, after saving the file open it up with an HTML browser.

This actually works but it is not a good way to do what we want, you may want to try this example just to see if it works.

Why is it not a good way to do what we want?

Well, it's not a good idea to copy something to the Windows Clipboard and then paste it back into our program.
What if the program user already has something in the Windows Clipboard?, if you use the above example the user will lose what they had already cut or copied to the clipboard.

So this is not a very good example.

TPageProducer

The simplest of the Delphi HTML producer components is the PageProducer component which can be found on the Internet component tab.

I decided to try and use TPageProducer to make an HTM web page.

Start a new project, add a TMemo align it to alBottom, add a TPageProducer component to Form1 and a TSaveDialog.

Click on PageProducer1 and then in the Object Inspector click on the HTMLDoc property (Click on the ellipses) then add this code:

<HTML><HEAD>
<TITLE>DPSC PageProducer Demo</TITLE>
</HEAD>
<body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#000099" alink="#000088">
<Center><H1>Page Producer Demo</H1></Center>
<table BORDER=0 CELLPADDING=6 COLS=1 WIDTH="100%" >
<tr>
<td>
Hello <#Name>,<br>
this is a demo of an HTML web page which was made by the <b><#ProgName></b>
program on the day of <b><#date></b> at the exact time of <b><#Time></b>.<p>
<hr></td>
</tr>
</table>
</BODY></HTML>

You can also use the HTMLFile property to load an .HTM file with the same code above to get the same results of this section about TPageProducer.

As you can see in the code above I have added the HTML Body with the HTM page color and links colors, this helps make the finished web page look professional.

Here is some information about the HTMLDoc property.
HTMLDoc is a set of strings that we are using to make an HTML template for our HTM web pages.
This HTML template is a lot of HTML commands and HTML-transparent tags, which make up the finished HTML web page.

Rules for the tag:

<#TagName Param1=Value1 Param2=Value2 ...>

The tag has a < (less than) bracket first, then a # sign then the tag name and last a > (greater than sign).

The # hash (Pound) sign is used immediately after the bracket < (less than) and it has no spaces separating it from the angle bracket. These dynamic tags look like the tags you will find in an HTML web page.

Next click on the events tab and double-click on OnHTMLTag and then add this code:

procedure TForm1.PageProducer1HTMLTag(Sender: TObject; Tag: TTag;
const TagString: String; TagParams: TStrings; var ReplaceText: String);
var NDays : Integer; Time : TDateTime;
begin
    if TagString = 'Name' then
     ReplaceText := Edit1.Text
     else
    if TagString = 'date' then
     ReplaceText := FormatDateTime('dddddd, ' , Now)//DateToStr(Now)
     else
    if TagString = 'ProgName' then
     ReplaceText := ExtractFileName(Application.ExeName)
     else
    if TagString = 'Time' then
     begin
       Time := Now;
       ReplaceText := TimeToStr(Time);
     end
end;

TagString holds the value of the whole tag.
ReplaceText is a string variable that you give a new value which is used to replace the tag.

Next add 2 TButton components, Change the Button1 caption to read 'Show HTML Code' and change the Button2 caption to read 'Save To File'.

Double-click on Button1 and add this code:

procedure TForm1.Button1Click(Sender: TObject);
begin
Memo1.Clear;
Memo1.Text := PageProducer1.Content;
end;

Double-click on Button2 and add this code:

procedure TForm1.Button2Click(Sender: TObject);
begin
    if SaveDialog1.Execute then
    begin
        Memo1.Lines.SaveToFile (SaveDialog1.FileName);
    end;
end;

Add a TEdit component to the top of your form, then place a TLabel component above Edit1.

Change the Label1 caption to read 'Enter your first name:'.

Next run the program, then enter your name into Edit1, click on Button1 and then save the file as demo1.htm

Open demo1.htm with a web browser and you should see something like this:

Page Producer Demo

Hello James,
this is a demo of an HTML web page which was made by the PAGEPRODDEMO.EXE program on the day of Monday, 25. June 2001, at the exact time of 09:25:07 p.m..

And here is the HTML page source:

<HTML><HEAD>
<TITLE>Producer Demo</TITLE>
</HEAD>
<body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#000099" alink="#000088">
<Center><H1>Page Producer Demo</H1></Center>
<table BORDER=0 CELLPADDING=6 COLS=1 WIDTH="100%" >
<tr>
<td>
Hello James,<br>
this is a demo of an HTML web page which was made by the <b>PAGEPRODDEMO.EXE</b>
program on the day of <b>Monday, 25. June 2001, </b> at the exact time of <b>09:25:07 p.m.</b>.<p>
<hr></td>
</tr>
</table>
</BODY></HTML>

Back

Hosted by www.Geocities.ws