HTML II

HTML Tricks and Techniques
Having discussed the basics of HTML in the previous section, we can now discuss actual HTML Design. While refraining from analysis of each HTML tag and attribute, we will introduce you to some important techniques and tricks. Additionally, we will explore common extensions.

Page Layout with Table Function Selection Menus
In the next example we will create a classical web site layout. This consists of menu options on the left side of the page and content on the right. In order to achieve this, a table with one row and two columns will be created.

<HTML>
<HEAD>
<TITLE> menu01.htm: Format with TABLE (1)</TITLE>
</HEAD>
<BODY>
<H1>Demo for selection menu </H1>
<HR>
<TABLE >
<! Contents of the first column>
<TR>
<TD WIDTH=200 VALIGN="top">
<P><A HREF="format03.htm">formattng</A></P>
<P><A HREF="img03.htm">image</A></P>
<P><A HREF="font01.htm">font</A></P>
<P><A HREF="font02.htm">font color</A></P>
</TD>
<! Contents of the second column>
<TD ALIGN="center">
<H1>Welcome to Example.com</H1>
<IMG SRC="bspsmall.gif WIDTH="84" HEIGHT="84"><BR>
<P>HTML-example in bold and in detail</P>
<P>Please select from the menu on the left side! </P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

The above example shows the principle of table usage. The page does not look particularly elegant or clear. In the following version we implement a switch panel with the appropriate diagrams instead of the text menu. If you use a background picture (we will discuss this technique in a later section), the menu will stand out on a narrow, vertically running strip.

<HTML>
<HEAD>
<TITLE> menu02.htm: Format with TABLE (2) </TITLE>
</HEAD>
<BODY BACKGROUND="bg.gif">
<TABLE >
<! Contents of the first column >
<TR>
<TD WIDTH=200 VALIGN="top">
<A HREF="format03.htm">
<IMG SRC="image/b-form.gif" WIDTH="157" HEIGHT="58"
border=0 ALT="Formatting">
</A>
<BR>
<A HREF="img03.htm">
& lt;IMG SRC="image/b-bild.gif" WIDTH="157" HEIGHT="58"
border=0 ALT="Image">
</A>
<BR>
<A HREF="font01.htm">
<IMG SRC="image/b-font.gif" WIDTH="157" HEIGHT="58"
border=0 ALT="Font">
</A>
<BR>
<A HREF="font02.htm">
<IMG SRC="image/b-color.gif" WIDTH="157" HEIGHT="58"
border=0 ALT="Fontcolor">
</A>
<BR>
</TD>
<! Contents of the second column>
<TD ALIGN="center">
<H1>Welcome to example.com</H1>
<IMG SRC="bspsmall.gif" WIDTH="84" HEIGHT="84">
<BR>
<P>HTML- example in bold and in detail</P>
<P>Please select from the menu on the left side!</P>
</TD>
</TR>
</TABLE>
</body>
</html>

Distance between Pictures
With an <IMG> tag you can place several pictures side by side. It is slightly more involved to specify an equal distance between the images. This can be accomplished using the table function. The following table definition places the table cells correctly regardless of the browser width. This is achieved through the attribute WIDTH=100% in the <TABLE> tag. This way the table is always formatted to fit the current display width.

<HTML>
<HEAD>
<TITLE> menu03.htm: Formatting with TABLE (3)</TITLE>
</HEAD>
<BODY BACKGROUND="./image/cachel01.gif">
<TABLE WIDTH=100%>
<TR>
<TD ALIGN="left"><IMG SRC="./image/k_tips.gif">
<TD ALIGN="center"><IMG SRC="./image/k_tech.gif">
<TD ALIGN="right"><IMG SRC="./image/k_home.gif">
</TABLE>
<H1 align="center">Bill's Billiard Site</H1>
</BODY>
</HTML>

Formatting Forms with Tables
Clarity of display is a substantial demand placed on forms. With the standards of HTML 2.0 it is, however, difficult to meet this demand. Even entering simple input fields underneath each other is a problem. The following source code serves as an example:

<HTML>
<HEAD>
<TITLE>form01.htm: Form without a table</TITLE>
</HEAD>
<BODY>
<H1> Purchase order form </H1>
<FORM METHOD="post" ACTION="mailto:demo@host.com">
Last name, First <INPUT NAME="Name" SIZE=30><BR>
Street <INPUT NAME="Str" SIZE=30><BR>
City, State <INPUT NAME="cit" SIZE=30><BR>
EMail-Adress <INPUT NAME="EMail" SIZE=30><BR>
<H4>Please check desired product</H4>
<INPUT NAME="VDP" TYPE="checkbox"> Visual Data Publisher for Windows <BR>
<INPUT NAME="TDB" TYPE="checkbox"> Turbo Databank 5.6 Fat Pack for DOS <BR>
<H4> Desired method of payment:</H4>
<INPUT NAME="Cash" TYPE="radio">MasterCard<BR>
<INPUT NAME="Cash" TYPE="radio">Visa<BR>
<INPUT NAME="Cash" TYPE="radio">EFT<BR>
<INPUT TYPE="submit" VALUE="Send Order">
</TABLE>
</FORM>
</BODY>
</HTML>

Without the table function, formatting the placement of an HTML document's input fields can be cumbersome. By implementing three tables we can group the input fields. The first table ensures that the input fields of the request-labels, even with different lengths, are placed underneath each other.

<TABLE>
<TR> <TD>Last Name, First Name
<TD><INPUT NAME="Name" SIZE=30>
<TR> <TD>Street
<TD><INPUT NAME="Str" SIZE=30>
<TR> <TD>City, St
<TD><INPUT NAME="Cit" SIZE=30>
<TR> <TD>EMail-Adress
<TD><INPUT NAME="EMail" SIZE=30>
</TABLE>

Designing the next two tables requires more effort. The designation of the width using <TABLE> tags causes both tables to be equal in length. The product table consists of two rows with two columns. The content of the first row forms the selection cross, which is made available from the INPUT tag with the type " CHECK BOX ". Therefore, this column is to be substantially smaller than the second column. The column width is reduced with the WIDTH attribute set to 10% of the total.

<H4>Please check desired product</H4>
<TABLE BORDER WIDTH=400>
<TR><TD WIDTH=10%><INPUT NAME="VDP" TYPE="checkbox"></TD>
<TD>Visual Data Publisher for Windows</TD>
<TR><TD WIDTH=10%><INPUT NAME="TDB" TYPE="checkbox"></TD>
<TD>Turbo Databank 5.6 Fat Pack for DOS</TD>
</TABLE>

The table for payment type consists of a row with six columns. The size of the columns for the input buttons is reduced to 10%.

<H4>Desired method of payment</H4>
<TABLE BORDER WIDTH=400>
<TR>
<TD WIDTH=10%><INPUT NAME="Cash" TYPE="radio"></TD>
<TD WIDTH=23%>mastercard</TD>
<TD WIDTH=10%><INPUT NAME="Cash" TYPE="radio"></TD>
<TD WIDTH=23%>Visa</TD>
<TD WIDTH=11%><INPUT NAME="Cash" TYPE="radio"></TD>
<TD>EFT</TD>
</TR>
</TABLE>

At this point, the final result is realized. The same form has been built using table formatting. Entire tables can be placed within one cell of a larger table to further customize the layout of a form.

Colors, Background and Writing Attributes

Color Specification in the HTML Tag
In HTML tags, color can be specified using six-digit, hexadecimal number sequences. Each hexadecimal sequence is an encoded representation of the red, green and blue numeric values that combine to create a desired color. Yellow, for example, is derived from red 255 (FF in hexadecimal), green 255 (FF) and blue 0 (00). Knowing this, yellow can be specified with the following expression:

<BODY BGCOLOR="#FFFF00">

Colors can also be specified in more literal terms by entering the color name within quotes. The syntax for such tag attributes is as follows: color = "yellow ", color = "blue ", color = "purple", etc. In addition, the newer HTML editors allow colors to be specified by making a selection from a color pallet.

The Standard Colors of a Document
The standard colors for the background and the content text can be adjusted using special attributes in the BODY tag. The following properties can be manipulated:

BGCOLOR: Background
TEXT: Text color
LINK: Color of Hyperlinks
VLINK: Color of Links that have already been selected (visited link) ALINK: Color of Links that are being loaded (active link)

Special Backgrounds
Occasionally it will be necessary to specify a background image rather than a background color. The BODY tag is extended by the BACKGROUND attribute, to which the name of an image file is assigned. This picture is displayed in tile form; therefore the pictures are always attached together. Taking advantage of this tile feature, an impressive background ca be created. One small image can be designed to create a large pattern once it is repeated across the page.

<BODY BACKGROUND="background.gif">

In order to maintain the readability of the page, it is important to preserve a suitable level of contrast between the text and the background. If both are either too bright or too dark, the content of the page will not be discernable.

Vertical Menus
We have already mentioned that navigation menus are traditionally placed on the left side of the page for clarity. Implementing a different background color for the navigation and for the content can reinforce this.

In the above menu example, a special form of tile background was used, and the allocation of menu option into a narrow colored strip in the browser window was achieved . As a background picture, a long narrow strip, in the format of 4 * 1024 pixels, where the first 150 to 200 pixels indicated the color of the navigation strip and the remainder indicated the color of the desired background, was used. Theoretically, one pixel would be sufficient for the height. In practice, however, it has been noted that some browsers cannot handle this extreme value. The width of 1024 pixels was selected so that the colored strip is not repeated on the right. This way only the vertical repetitions are visible.

The picture is stored in the GIF format with 16 colors and is approximately 200 bytes in size. This method of repeating one small image rather than using a single large image keeps the data transfer time low. If this line is used within the BODY tags as your background picture, the browser places it several times underneath each other, so that a two-colored background is created.

Attention: The background picture should be created in GIF format.

There are some additional factors that must be considered when formatting with the TABLE tag. Different browsers do not always interpret the TABLE tags in the same way. There may be significant differences in the representation. The following source code viewed in Microsoft's Internet Explorer looks different than when viewed in Netscape's Navigator.

<HTML>
<HEAD>
<TITLE>back01.htm: Background image</TITLE>
</HEAD>
<BODY BACKGROUND="./image/img001.gif">
<TABLE>
<TD WIDTH="250">
<TD>
<H1>Online- Operating instructions</H1>
<P>Dear Customer,</P>
Online help center.
<UL>
<LI>Telephone Model 4711
<LI>receiver "Hit"
<LI>ISDN-system 4 in 1
<LI>General Tips about our products
<LI>accesories
</UL>
</TABLE>
</BODY>
</HTML>

Netscape interprets the format differently. Netscape measures the column width correctly only if all columns get an absolute width specification. In the above example, the second <TD> tag must be completed accordingly, e.g. <TD the WIDTH=350>, in order to achieve a readable output. This is not efficient because the HTML designer is forced to determine the total width of the layout. In this case you are forced to proceed with a screen resolution of 640 x 480 pixels. That is a substantial restriction.

Writing attributes
The heading tags influence the size of the text within an entire HTML document. Using the FONT tag, the text attributes can be controlled for individual characters within a paragraph. The size is specified by the SIZE attribute in increments from 1 to 7. The default is 3. It follows a <FONT SIZE=5>large</FONT> Word! Additionally, character size can be specified relative to the current setting. For example, a plus symbol (+) can be entered with a numeric value to indicate a size increase. It follows a <FONT SIZE=+2>large</FONT> Word! The default is always set to the standard character size (size 3). You can modify the standard character size with the <BASEFONT> tag. Other character attributes, such as bold (<B>) or italic (<I>), are maintained with the FONT tag.

<HTML>
<HEAD>
<TITLE> font01.htm: example text FONT (Size)</TITLE>
</HEAD>
<BODY>
<P>this is a <FONT SIZE=+5>large</FONT> Word. </P>
<P>in comparison a line in <FONT SIZE=3> normal </FONT>text. </P>
<BASEFONT SIZE=1>
<P>this is small normal <FONT SIZE=+2> normal a rather large </FONT>text </P>
</BASEFONT>
<P>this goes in order </P>
<FONT SIZE=1>g</FONT>
<FONT SIZE=2>g</FONT>
<FONT SIZE=3>g</FONT>
<FONT SIZE=4>g</FONT>
<FONT SIZE=5>g</FONT>
<FONT SIZE=6>g</FONT>
<FONT SIZE=7>g</FONT>
</BODY>
</HTML>

The COLOR attribute can be used to implement multicolored characters

<HTML>
<HEAD>
<TITLE>font02.htm: example for FONT (COLOR)</TITLE>
</HEAD>
<BODY>
<H1><FONT FACE="Brush Script MT">Alternate Form</FONT> <P>
and <FONT FACE="Arial" COLOR="FF00FF">color</FONT> </H1>
this goes in order
<FONT SIZE=5 COLOR="#FFFFFF">b</FONT>
<FONT SIZE=5 COLOR="#00FFFF">b</FONT>
<FONT SIZE=5 COLOR="#FFFF00">b</FONT>
<FONT SIZE=5 COLOR="#FF0000">b</FONT>
<FONT SIZE=5 COLOR="#FF00FF">b</FONT>
<FONT SIZE=5 COLOR="#0000FF">b</FONT>
</BODY>
</HTML>

Download of Pictures, Sounds, Programs, etc.
The anchor <A> tag serves for the implementation of hypertext links. In addition, the tag can be used to download programs or other files. This method is very easy to implement and is, in many cases, better than the classical download method, anonymous FTP.

You can store many file types, including HTML, in your allocation of space on the server. You can reference these files through the HREF attribute. How the browser will react, when such link is activated, depends upon the browser used and the type of file. Some file types are supported directly by the browser. For example, every browser can work with pictures saved in GIF or JPG format. In contrast to the IMG tag, which loads the picture automatically and places it within the HTML document, the <A> tag requires that you first click on the link. The picture is then loaded into a browser window. A small preview picture, thumbnail, is often placed in the original document with <IMG>. The small picture must be clicked if you want to see it in full size. <br>

If the support for a file format is not built in directly, the browser may start a Helper application, which processes the file for transfer.

<A HREF="Hello.wav">Personal greetings</A>

Typically, the above link would start the standard Window program, MPLAYER.EXE, and then load the file HELLO.WAV. Further operation depends upon the helper program. Whether or not the transfer functions depends upon whether or not MPLAYER is registered as a Helper application with the browser.

If an unknown file format is referred to, the browser prompts the user to load the file from the web server and save it on the local disk drive. This technique can be used to make many files available for download without using an FTP server.

<html>
<head>
<title>down02.htm: Download DOSTDB</title></head>
<body>
<h1>Turbo Databank for DOS</h1>
The efficient DOS data base for the coming millenium - the bead in each DOS window.

Small, strong, so fast!
<P>
Get yourselves the unrestricted 30-Tage-Test version.
<P>
<a href="./software/tdb50.exe">click here to download the test version</a>
</body>
</html>

Frames
With the use of the "Frame" technique you can divide the display into several areas (Frames). Each area can contain its own HTML document.

The classical Application:


The Base of the Frame Technique
The framework is defined in a separate HTML file without BODY tags or content. The central element of this file is the FRAMESET-container, with which the number of the frames, and their position on the display, are determined. With the COLS attribute the vertical allocation of the display is determined, with ROWS, the horizontal. Commas separate the values for the individual windows. The number of values determines the number of windows.

<HTML>
<HEAD>
<TITLE>frame01.htm: Frame-Technique (1)</TITLE>
</HEAD>
<FRAMESET COLS="25%, *, 25%">
<FRAME SRC="testlink.htm">
<FRAME SRC="testlink.htm">
<FRAME SRC="testlink.htm">
</FRAMESET>
</HTML>

Only windows with contents are displayed, therefore you must give each window one FRAME tag.

Note: Clicking on "Reload" to see your modifications will not work. Shift+Reload (hard Reload) must be used.

Boxes can also be created with the <FRAMESET> tags to implement complex display layouts. In the following example, two horizontal windows are defined. Using a FRAMESET statement, the upper window is divided into three sections, the lower into two sections.

<HTML>
<HEAD>
<TITLE>frame02.htm: Frame-Technique (2)</TITLE></HEAD>
<BODY>
<FRAMESET ROWS = "*, 33%">
<FRAMESET COLS="25%, *, 25%">
<FRAME SRC="TESTLINK.HTM">
<FRAME SRC="TESTLINK.HTM">
<FRAME SRC="TESTLINK.HTM">
</FRAMESET>
<FRAMESET COLS="33%,*">
<FRAME SRC="TESTLINK.HTM">
<FRAME SRC="TESTLINK.HTM">
</FRAMESET>
</FRAMESET>
</BODY>
</HTML>

Navigate in Frames
Frames are commonly used to display an HTML document that has links that load pages into another frame. There is a NAME attribute for the <FRAME> tag that is used to identify the frames. Example: The display is divided into two windows. The left window is named F_content, the right, F_Data.

<HTML><HEAD>
<TITLE>frame03.htm: Frame-Technique (3)</TITLE></HEAD>
<FRAMESET COLS="25%, *">
<FRAME SRC="content.htm" NAME="F_content">
<FRAME SRC="testlink.htm" NAME="F_Data">
</FRAMESET>
</HTML>

The file CONTENT.HTM contains the link to the data documents. A hyperlink (<A> tag) is used in conjunction with the TARGET attribute to indicate the name of the target window. If a window with the appropriate name is opened, the browser loads the document.

<HTML><HEAD><TITLE>fcontent.htm: content for frame demo</TITLE></HEAD>
<BODY>
<A HREF="testlink.htm" TARGET="F_Data"><H3> Reference</H3></A>
<A HREF="testlink.htm" TARGET="F_Data"><H3>click here</H3></A>
<A HREF="testlink.htm" TARGET="F_Data"><H3>length</H3></A>
</BODY>
</HTML>

The target attribute has several pre-defined values:
_blank: loads the document into a new window
_self: loads the document into the current window
_top: loads the document into the complete work window of Netscape
_parent: with boxed frames, the document gets loaded into the window of the previous boxed frame.

Further use of the <FRAME>-Tag
The <FRAME> tag has additional attributes, with which the windows can be manipulated. MARGINWIDTH, MARGINHEIGHT With this attribute,  the appearance of the division between window frameworks and contents can be controlled. With the adjustment MARGINHEIGTH=1, the edge can be reduced to a minimum, which is practical with background pictures and diagrams.

Scrolling
The scrolling attribute can have the values " auto ", " yes " or "no ".  Using "Auto " (default), a scroll bar is automatically produced if the contents of the page do not fit into the window. With " yes " there is always a scroll bar and with " NO " no scroll bar is produced.

Noresize
Normally, the user can modify the window size with the mouse. You can prevent this with NORESIZE.


Home | HTML I | HTML II | Graphics | FTP
Hosting | Scripts | Java