by Bryan Valencia
These tags usully occur within a BODY or FRAMESET section, but can also be used within tables. They usually enclose text and affect how the browser displays or "paints" the image of the web page.
Heading <H?></H?> (the spec. defines 6 levels)
Keep in mind that these will look different depending on the browser's font settings.
Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></H?>
Division <DIV></DIV>
This is a division
</DIV>This is another division
</DIV>Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
A Centered Division
</DIV>This division has a lot of text to show you that it is justified. A justified division should have both left and right margin alignment. This all depends of course on how well your browser can render it.
</DIV>And here is a right aligned division
</DIV>Block Quote <BLOCKQUOTE></BLOCKQUOTE> (usually indented)
Rush Limbaugh often says:
If you can't laugh at yourself, then laugh at me, laughing at you.
Emphasis <EM></EM> (usually displayed as italic)
Strong Emphasis <STRONG></STRONG> (usually displayed as bold)
Citation <CITE></CITE> (usually italics)
Code <CODE></CODE> (for source code listings)
Sample Output <SAMP></SAMP>
Mixing all these together, it's easy to make an emphatic, strong, citation about your
code and your sample output.
Keyboard Input <KBD></KBD>
"Please enter your
Variable <VAR></VAR>
iteration:= 0;
Definition <DFN></DFN> (not widely implemented)
The NEA, or National Education Administration...
Author's Address <ADDRESS></ADDRESS>
Large Font Size <BIG></BIG>
Small Font Size <SMALL></SMALL>
This is
Bold <B></B> This is bold.
Italic <I></I> This is italic.
N3.0b Underline <U></U> (not widely implemented yet) This may be underlined.
Strikeout <STRIKE></STRIKE> (not widely implemented yet) Strike three, your out!
N3.0b Strikeout <S></S> (not widely implemented yet) Strike three, your out!
Subscript <SUB></SUB> H2O
Superscript <SUP></SUP> E=mc2
Typewriter <TT></TT> (displays in a monospaced font)
Preformatted <PRE></PRE> (display text spacing as-is)
Width <PRE WIDTH=?></PRE> (in characters)
Center <CENTER></CENTER> (for both text and images)
N1.0 Blinking <BLINK></BLINK>
Font Size <FONT SIZE=?></FONT> (ranges from 1-7)
Change Font Size <FONT SIZE="+|-?"></FONT>
N1.0 Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3)
Font Color <FONT COLOR="#$$$$$$"></FONT>
N3.0b Select Font <FONT FACE="***"></FONT>
N3.0b Multi-Column <MULTICOL COLS=?></MULTICOL>
N3.0b Column Gutter <MULTICOL GUTTER=?></MULTICOL>
N3.0b Column Width <MULTICOL WIDTH=?></MULTICOL>
N3.0b Spacer <SPACER>
N3.0b Spacer Type <SPACER TYPE=horizontal|vertical|block>
N3.0b Size <SPACER SIZE=?>
N3.0b Dimensions <SPACER WIDTH=? HEIGHT=?>
N3.0b Alignment <SPACER ALIGN=left|right|center>
Link Something <A HREF="URL"></A>
Link to Target <A HREF="URL#***"></A> (if in another document)
<A HREF="#***"></A> (if in current document)
N2.0 Target Window <A HREF="URL" TARGET="***"></A>
Define Target <A NAME="***"></A>
Display Image <IMG SRC="URL">
Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
Alternate <IMG SRC="URL" ALT="***"> (if image not displayed)
Dimensions <IMG SRC="URL" WIDTH=? HEIGHT=?> (in pixels)
Border <IMG SRC="URL" BORDER=?> (in pixels)
Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels)
N1.0 Low-Res Proxy <IMG SRC="URL" LOWSRC="URL">
Imagemap <IMG SRC="URL" ISMAP> (requires a script)
Imagemap <IMG SRC="URL" USEMAP="URL">
Map <MAP NAME="***"></MAP> (describes the map)
Section <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
N1.1 Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
N2.0 Embed Object <EMBED SRC="URL"> (insert object into page)
N2.0 Object Size <EMBED SRC="URL" WIDTH=? HEIGHT=?>
Paragraph <P></P> (closing tag often unnecessary)
Align Text <P ALIGN=LEFT|CENTER|RIGHT></P>
Line Break <BR> (a single carriage return)
Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL>
Horizontal Rule <HR>
Alignment <HR ALIGN=LEFT|RIGHT|CENTER>
Thickness <HR SIZE=?> (in pixels)
Width <HR WIDTH=?> (in pixels)
Width Percent <HR WIDTH="%"> (as a percentage of page width)
Solid Line <HR NOSHADE> (without the 3D cutout look)
N1.0 No Break <NOBR></NOBR> (prevents line breaks)
N1.0 Word Break <WBR> (where to break a line if needed)
LISTS (lists can be nested)
Unordered List <UL><LI></UL> (<LI> before each list item)
Compact <UL COMPACT></UL>
Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE> (for the whole list)
<LI TYPE=DISC|CIRCLE|SQUARE> (this & subsequent)
Ordered List <OL><LI></OL> (<LI> before each list item)
Compact <OL COMPACT></OL>
Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list)
<LI TYPE=A|a|I|i|1> (this & subsequent)
Starting Number <OL START=?> (for the whole list)
<LI VALUE=?> (this & subsequent)
Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition)
Compact <DL COMPACT></DL>
Menu List <MENU><LI></MENU> (<LI> before each list item)
Compact <MENU COMPACT></MENU>
Directory List <DIR><LI></DIR> (<LI> before each list item)
Compact <DIR COMPACT></DIR>
Tiled Bkground <BODY BACKGROUND="URL">
Bkground Color <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue)
Text Color <BODY TEXT="#$$$$$$">
Link Color <BODY LINK="#$$$$$$">
Visited Link <BODY VLINK="#$$$$$$">
Active Link <BODY ALINK="#$$$$$$">
Special Character &#?; (where ? is the ISO 8859-1 code)
< &<
> &>
& &&
" &"
Registered TM &®
Registered TM &®
Copyright &©
Copyright &©
Non-Breaking Spc &
Define Form <FORM ACTION="URL" METHOD=GET|POST></FORM>
N2.0 File Upload <FORM ENCTYPE="multipart/form-data></FORM>
Input Field <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|
IMAGE|HIDDEN|SUBMIT|RESET">
Field Name <INPUT NAME="***">
Field Value <INPUT VALUE="***">
Checked? <INPUT CHECKED> (checkboxes and radio boxes)
Field Size <INPUT SIZE=?> (in characters)
Max Length <INPUT MAXLENGTH=?> (in characters)
Selection List <SELECT></SELECT>
Name of List <SELECT NAME="***"></SELECT>
# of Options <SELECT SIZE=?></SELECT>
Multiple Choice <SELECT MULTIPLE> (can select more than one)
Option <OPTION> (items that can be selected)
Default Option <OPTION SELECTED>
Input Box Size <TEXTAREA ROWS=? COLS=?></TEXTAREA>
Name of Box <TEXTAREA NAME="***"></TEXTAREA>
N2.0 Wrap Text <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>
Define Table <TABLE></TABLE>
Table Border <TABLE BORDER></TABLE> (either on or off)
Table Border <TABLE BORDER=?></TABLE> (you can set the value)
Cell Spacing <TABLE CELLSPACING=?>
Cell Padding <TABLE CELLPADDING=?>
Desired Width <TABLE WIDTH=?> (in pixels)
Width Percent <TABLE WIDTH=%> (percentage of page)
Table Row <TR></TR>
Alignment <TR ALIGN=LEFT|RIGHT|CENTER
VALIGN=TOP|MIDDLE|BOTTOM>
Table Cell <TD></TD> (must appear within table rows)
Alignment <TD ALIGN=LEFT|RIGHT|CENTER
VALIGN=TOP|MIDDLE|BOTTOM>
No linebreaks <TD NOWRAP>
Columns to Span <TD COLSPAN=?>
Rows to Span <TD ROWSPAN=?>
N1.1 Desired Width <TD WIDTH=?> (in pixels)
N1.1 Width Percent <TD WIDTH="%"> (percentage of table)
N3.0b Cell Color <TD BGCOLOR="#$$$$$$">
Table Header <TH></TH> (same as data, except bold centered)
Alignment <TH ALIGN=LEFT|RIGHT|CENTER
VALIGN=TOP|MIDDLE|BOTTOM>
No Linebreaks <TH NOWRAP>
Columns to Span <TH COLSPAN=?>
Rows to Span <TH ROWSPAN=?>
N1.1 Desired Width <TH WIDTH=?> (in pixels)
N1.1 Width Percent <TH WIDTH="%"> (percentage of table)
N3.0b Cell Color <TH BGCOLOR="#$$$$$$">
Table Caption <CAPTION></CAPTION>
Alignment <CAPTION ALIGN=TOP|BOTTOM> (above/below table)
FRAMES (define and manipulate specific regions of the screen)
N2.0 Frame Document <FRAMESET></FRAMESET> (instead of <BODY>)
N2.0 Row Heights <FRAMESET ROWS=,,,></FRAMESET> (pixels or %)
N2.0 Row Heights <FRAMESET ROWS=*></FRAMESET> (* = relative size)
N2.0 Column Widths <FRAMESET COLS=,,,></FRAMESET> (pixels or %)
N2.0 Column Widths <FRAMESET COLS=*></FRAMESET> (* = relative size)
N3.0b Borders <FRAMESET FRAMEBORDER="yes|no">
N3.0b Border Width <FRAMESET BORDER=?>
N3.0b Border Color <FRAMESET BORDERCOLOR="#$$$$$$">
N2.0 Define Frame <FRAME> (contents of an individual frame)
N2.0 Display Document <FRAME SRC="URL">
N2.0 Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top>
N2.0 Margin Width <FRAME MARGINWIDTH=?> (left and right margins)
N2.0 Margin Height <FRAME MARGINHEIGHT=?> (top and bottom margins)
N2.0 Scrollbar? <FRAME SCROLLING="YES|NO|AUTO">
N2.0 Not Resizable <FRAME NORESIZE>
N3.0b Borders <FRAME FRAMEBORDER="yes|no">
N3.0b Border Color <FRAME BORDERCOLOR="#$$$$$$">
N2.0 Unframed Content <NOFRAMES></NOFRAMES> (for non-frames browsers)
Applet <APPLET></APPLET>
File Name <APPLET CODE="***">
Parameters <APPLET PARAM NAME="***">
Location <APPLET CODEBASE="URL">
Identifier <APPLET NAME="***"> (for references)
Alt Text <APPLET ALT="***"> (for non-Java browsers)
Alignment <APPLET ALIGN="LEFT|RIGHT|CENTER">
Size <APPLET WIDTH=? HEIGHT=?> (in pixels)
Spacing <APPLET HSPACE=? VSPACE=?> (in pixels)
Comment <!-- *** --> (not displayed by the browser)
Prologue <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
Searchable <ISINDEX> (indicates a searchable index)
Prompt <ISINDEX PROMPT="***"> (text to prompt input)
Send Search <A HREF="URL?***"></a> (use a real question mark)
URL of This File <BASE HREF="URL"> (must be in header)
N2.0 Base Window Name <BASE TARGET="***">(must be in header)
Relationship <LINK REV="***" REL="***" HREF="URL"> (in header)
Meta Information <META> (must be in header)
Style Sheets <STYLE></STYLE> (not widely supported yet)
Scripts <SCRIPT></SCRIPT> (not widely supported yet)
Of course, there is no rule that all web 'pages' must be in HTML. The simplest form of response is the old-fashioned regular text file. Yes, you could place your AUTOEXEC.BAT up as a web page.
Plain text is the easiest way to transmit information over the web, but it lacks the ability to have text formatting, embedded images, tables, and most of the other useful features we like to see in web pages.
In it's favor, besides a zipped text file, nothing loads in a browser window faster than a text file.
I know this is an extremely short topic, but it is important to remember that you can send a response to a browser that is formatted in this fashion. I use it primarily for log dumps, and other status reports while I am debugging CGI scripts.
A link is a clickable phrase embedded in the text of your page that can be clicked to take the browser to another dimension in space and time. There are a number of options you may select from when setting up links, and they can be mixed freely on any web page.
LINK OPTIONS
|
<TBODY>OPTION |
DESCRIPTION |
EXAMPLE |
DEMO |
|
text link |
This type is where a word or phrase is a link to another place on the web. |
This <a href="http://www.netnag.net" target="_blank">word</a> and <a href="http://www.netnag.net" target="_blank">This phrase</a> link to netnag.net. |
This word and This phrase link to netnag.net. |
|
image link |
Allows you to place a link on an image, even an animated one. |
<a href="http://www.omnilist.org" target="_blank"><img src="/icons/folder.gif"></a> Click on the folder for Omnilist.org. |
http://www.omnilist.org/ |
|
image mapped link |
DESC </TBODY> |
|
|
TARGET OPTIONS
A while ago, there was considerable controversy about cookies. Can they be used to infect your computer? Can they grab personal information about you and your system, and send it to those who have no need or right to know? Can they grab the serial numbers from all your Microsoft products, and verify that you are pirating all your software?
Nope.
Cookies are little more than one "INI file" entry. they are given to the browser in the format
cookiename=value, and they return only those values to the webserver during a request.
To set a cookie from Delphi, all you have to do is this:
|
<TBODY> </TBODY> |
So this is how a cookie is set, at least if you're not using CGI-Expert or another 3rd party component. Just to reiterate, at the time of this writing, there is a bug somewhere that makes it unable to set a multiple cookie. It will set only the first one. Hopefully there will be a fix for this, and you'll be unable to duplicate the error on your machine.
Most of the above code is fluff. Only the SetCookieField command warrants our consideration.
Response.SetCookieField(bakeys,'','',-1,false);
This is more of a utility than a tutorial. But this utility will help you debug your web apps faster. Sometimes, it is useful to know what a call into your CGI app really looks like to Delphi. Did you know for instance, that there are subtle differences between the way IE and Netscape format web requests?
For this reason, I have created a web app I call dump.exe. Now I can check out and even print the call being made to my web application quickly and easily. Here is the code for the web action item.
Oh, yes. This code uses overloaded functions so it only works with Delphi versions 4 and greater. It can be easily modified to work with earlier versions, though.
|
<TBODY> procedure TWebModule1.dumpit(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); var resp:tStringList; procedure AddVal(name:string; Val:String); overload begin resp.add(Name+' = ['+val+']<BR>'); end; procedure AddVal(name:String; d:tdatetime); overload begin AddVal(name, DateTimeToStr(d)); end; procedure AddVal(name:String; V:tstrings); overload begin AddVal(name, v.text); end;
begin //dumps the request back to the sender for debugging purposes resp:=TStringList.Create; Resp.add('<!doctype html public "-//w3c//dtd html 4.0 transitional//en">'); Resp.add('<html>'); Resp.add('<head>'); Resp.add('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">'); Resp.add('<meta name="Author" content="Bryan Valencia">'); Resp.add('<meta name="GENERATOR" content="Delphi 4">'); Resp.add('<title>Omni HTTPd listserver archives</title>'); Resp.add('</head>'); Resp.add('<body text="#000000" bgcolor="#FFFFC0" link="#0000FF" vlink="#800080" alink="#FF00FF">'); Resp.add('<h1>CGI Request DUMP by Bryan Valencia</h1>'); Resp.add('<h2>Request Dump</h2>'); with Request do begin AddVal('Accept', Accept); AddVal('Authorization',Authorization); AddVal('CacheControl',CacheControl); AddVal('Connection',Connection); AddVal('Content',Content); AddVal('ContentEncoding',ContentEncoding); AddVal('ContentFields',ContentFields); AddVal('ContentLength',Contentlength); AddVal('ContentType',ContentType); AddVal('ContentVersion',ContentVersion); AddVal('Cookie',Cookie); AddVal('CookieFields',CookieFields); AddVal('Date',date); AddVal('DerivedFrom',DerivedFrom); AddVal('Expires',expires); AddVal('From',From); AddVal('Host',host); AddVal('IfModifiedSince',IfModifiedSince); AddVal('Method',Method); AddVal('PathInfo',PathInfo); AddVal('PathTranslated',PathTranslated); AddVal('ProtocolVersion',ProtocolVersion); AddVal('Query',query); AddVal('QueryFields',queryfields); AddVal('Referer',Referer); AddVal('RemoteAddr',Remoteaddr); AddVal('RemoteHost',RemoteHost); AddVal('ScriptName',ScriptName); AddVal('ServerPort',ServerPort); AddVal('Title',Title); AddVal('URL',url); AddVal('UserAgent',Useragent); end; Resp.add('</body></html>'); response.Content:=resp.Text; handled:=true; Resp.Free;
end; </TBODY> |
See, all you have to do is change your FORM call to reference dump.exe instead of your CGI and DUMP will tell you where all your data is being passed to your program. Therefore, if you have a call that looks like:
|
<TBODY> <form action="/cgi-bin/myprogram.exe/somepage.html?params=values&moreparams=morevalues" target="_blank"> ... INPUT TYPES HERE </form> </TBODY> |
just change it to look like this:
|
<TBODY> <form action="/cgi-bin/dump.exe/somepage.html?params=values&moreparams=morevalues" target="_blank"> ... INPUT TYPES HERE </form> </TBODY> |
Make sure you put dump.exe in the same directory as your CGI program.
Download the
EXE (176K) or the ENTIRE SOURCE (2K) here.The results look like this...
|
<TBODY> CGI Request DUMP by Bryan ValenciaRequest DumpAccept = [image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */*] |
Sometimes it isn't necessary to write a CGI program for simple funcions. With the webserver, you can
The drawbacks?
Many web servers allow the embedding of server variables into the html. For example, the code
<!--#echo var="DATE_LOCAL"-->
gives a server date that looks like this:
Mar 10 2000
Of course different servers have different variables that can be echoed. Check your server documentation.
Note:My server (Omni Httpd) is very picky about syntax. If there was a space between <!-- and #echo, the call would have been considered a comment by my webserver.
Note that these work for Omni Httpd, but your server may have it's own list of server variables.
If server side includes are enabled, you will see data values below:
The date is: Mar 10 2000
The current version of the server is: OmniHTTPd/2.04
The CGI gateway version is: CGI/1.1
The server name is: www.209software.com
This file is called: c:\httpd\209software\htdocs\books\wpid\ch15.shtml
This file's URI is: /books/wpid/ch15.shtml
The query string is:
This file was last modified: Jan 03 2000
The size of the unprocessed file is 4077
Chapter 15 was last modified Jan 03 2000
You are using Mozilla/4.0 (compatible; MSIE 5.0; Windows 98; Turk Nokta Net; DigExt)
You came from http://206.132.232.200/books/wpid/ChapterList.shtml
Include Virtual: [this text was included from include.txt]
More Later...
Here are some quickie programming utilities I have found and simplified from the web.
|
<TBODY> uses Winsock; function LocalHost:string; var WSA : TWSAData; ILen : integer; PHst : PChar; begin WSAStartup( $0101, WSA ); ILen := $FF; PHst := StrAlloc( ILen ); gethostname( PHst, ILen ); result:=StrPas(PHst); {Nuke the string} StrDispose( PHst ); {Dust and Clean} WSACleanup; end; </TBODY> |
|
<TBODY> uses Winsock; function LocalIP:string; var WSA : TWSAData; ILen : integer; PHst : PChar; PHEn : PHostEnt; begin WSAStartup( $0101, WSA ); ILen := $FF; PHst := StrAlloc( ILen ); gethostname( PHst, ILen ); PHEn := gethostbyname( PHst ); with PHEn^ do result:=format( '%d.%d.%d.%d', [ord(h_addr^[ 0 ]), ord(h_addr^[ 1 ]), ord(h_addr^[ 2 ]), ord(h_addr^[ 3 ])] ); {Nuke the string} StrDispose( PHst ); {Dust and Clean} WSACleanup; end; </TBODY> |