HTML template pt 2

Page Index

• Tables
• Images
• Image Maps
• Sound Files
• Frames
• Stupid Blink Tricks

Tables

Tables are useful for displaying informations. The tag is <TABLE>...</TABLE>. Inside of the TABLE tags you set the Rows (<TR>...</TR>). Inside each row tag you have one or more of either a heading (<TH>Heading text</TH>) or data tag(s) (<TD>Data Value</TD>). As long as you put the same amount of cells in each row, the columns will line up correctly

Below are two example that include the BORDER tag inside the opening TABLE tag. They also include a Caption above the Table. The second example shows the use of Headers across the top as well as on the left. Notice the blank cell in the upper left corner. Check out the source code.

The following table is a little more complex. It demonstrates some of the formatting possiblities using the HTML tags ROWSPAN= and COLSPAN=. Check out the source code.

Here is a table without borders. It also uses the table tags in an interesting way creating 3 long ROWS (which appear as columns) that have a WIDTH attribute of 33% and a long list of table data with line breaks encoded (the line breaks are the key to making the row appear as a column). Check out the source code. It is borrowed from the VideoMedia Web site (real link). At that site the table is linked to a list of their dealers from the selected country. This example table doesn't not have links.

Argentina Australia Belgium Canada China Denmark Finland France Germany

Holland India Italy Japan Korea Malaysia New Zealand Norway Portugal

Puerto Rico Russia Singapore South Africa Spain Sweden Thailand Ukraine USA

Using a table as a picture frame

I like to use tables as little frames around text (not the HTML <frame> tag!) giving the effect of a little picture frame using the following code:

<table border="5" cellspacing="5"><tr>
<td>put in a small graphic here
<td>Put Your Title Here
<td>maybe another small graphic here</tr> </table>

It looks like this:

THE WORLD WIDE WEB IS REALLY FUN

Just goofin' around.

YOU are getting very )-: SLEEPY :-(

welcome to HypnoTV

check out the code.

Using a table to create columns of text

Some people like to use tables without borders to create multi-column text similar to magazine or newpaper format. With the additional use of the <blockquote> tag within the table cells it looks like the example below. Check out the source code.

Using a table to create different colored backgrounds for different sections

Section One -----This indentation is the result of invisible text. Yes, the WWWeb is based on magic. Second Two -----Notice the different background color in this section of the table.

Tags and attributes for tables

Here are all of the tags and attributes used for tables

<table

border=? (in pixels)

cellspacing=? (in pixels)

cellpadding=? (in pixels)

width=? (in pixels or percentage)

>

put the tr, td, th, or caption tags here.

</table>

<tr

align=? left | right | center | middle | bottom

valign=? top | bottom | middle

>

put td and th tags here.

</tr>

<td

border=? (in pixels)

align=? left | right | center | middle | bottom

valign=? top | bottom | middle

nowrap

colspan=?

rowspan=?

width=? (in pixels or percentage)

bgcolor="#rrggbb" (rr=red, gg=green, bb=blue HEX values)

>

Display Text

</td> (closing tag is optional)

<th

border=? (in pixels)

align=? left | right | center | middle | bottom

valign=? top | bottom | middle

nowrap

colspan=?

rowspan=?

width=? (in pixels or percentage)

bgcolor="#rrggbb" (rr=red, gg=green, bb=blue HEX values)

>

Display Header

</th> (closing tag is optional)

This next little table contains all of the tags and attributes. It is a good source to copy and paste from then modify for your specific needs.

ReplaceThisHeader	ReplaceThisHeader
ReplaceThisText	ReplaceThisText

Back to Page Index

Images

This is an animated Gif file from Beach Software's Web Ware CD-ROM. It's only 17K

This is another from the same CD-ROM.
This one is only 9K. These are a few of my favorite things.

These animated gifs are kind of cute.

Here are a couple animations of music scales.

If you want to learn more about animated gifs check out these web sites.

The complete IMG tag

This is the image tag with all of it's attributes. This code assumes that the file named "imageName.gif" is located in a folder named "GIF_FIles". The attributes of border, width, height, hspace and vspace require a number of pixels.

<IMG SRC="GIF_Files/imageName.gif" ALT="an image" ALIGN=top|bottom|middle|left|right BORDER=? WIDTH=? HEIGHT=? HSPACE=? VSPACE=? LOWSRC=?>

The keyboard image below uses the img tag complete with all attributes ready for copy/paste use. Check out the source code.

Using Images in links

These Buttons are GIF Images, they do not activate links to anything.

The button below is used with a link to the Page Index. Check out the source code.

<--Click here to return to the Page Index

Image Maps

One of these days when I learn more about CGI scripts and/or JAVA and JAVA script and other stuff, I'll be able to deal with Image Maps. Not yet.

Back to Page Index

Sound Files

Sound Files on the Web are usually Digital Audio Files or MIDI files.

Digital Audio Files

The Digital Audio Files can be in several formats making compatibility issues a real concern. The two most popular formats are aiff (Mac) and wav (PC) files. You browser will need to use a "helper" or Netscape plug-in such as Quicktime's MoviePlayer. Another program (plug-in) that will work is SoundApp. Once you have the required software, you can click on these links. The sound files will load automatically or you may be prompted to locate the helper program. After the file has loaded you can use the sound control to replay the file without reloading the file. In other words, don't click on the link again, simply play the file using the rewind and play buttons, if available.

11kHz wav file of beginning of Dust in the Wind (110K)

MIDI Files

MIDI files contain instructions that synthesizers can use to play musical sounds. They required a synthesizer of some kind. The possible sound sources for the Web environment include SoundBlaster, Quicktime, and MIDPLUG by Yamaha. The Files on this page were prepared using MIDPLUG which is available from the Yamaha XG Site (real link). You also can get there via the Plug-in section of Netscape's Web site.

MIDI files can be loaded using the HTML tag HREF= . When you open the MIDI file this way a separate document will open and display the MIDPLUG controls. You can access tempo and all other controls by clicking on the MIDPLUG nametag to reveal a pull-down menu. The Play, Stop, Pause and Volume controls are available also as buttons on the MIDPLUG panel.

Air - J.S. Bach MIDI file
Pathetic Mambo MIDI file

You can also "Embed" MIDI files into regular Web pages and have the MIDI file open automatically if you use the following HTML code:

<EMBED SRC="MIDI_Filename.mid" WIDTH=150 HEIGHT=40 PANEL=0 AUTOSTART=TRUE REPEAT=TRUE>.

The page will play the File repeatly if REPEAT is set to TRUE, a setting of FALSE will result in a single playing of the MIDI file. Alternate size attributes are WIDTH=100 HEIGHT=30 and WIDTH=40 HEIGHT=35. Setting the HEIGHT=0 will result in hiding the MIDPLUG panel. The file will still play (if AUTOSTART=TRUE) but no other controls will be available. If you have a lot of text at your site you can provide some appropriate background "reading music".

Back to Page Index

---

Frames

The Frame example link takes you to a frame layout that splits the window into two frames and loads two different documents. The left frame contains an index of the contents that are displayed in the right frame. It is a common frame design. Since I use a laptop computer with a small screen I don't use frames very often but it's a very useful layout for a large screen computer.

The frame environment is created by a framesetter document. Below is the source code for the frameset document. It isn't a document that you can see, it is used to define a name for the each frame and contain the address of the document that should be loaded into the frame. This document divides the window into two frames, one on the left is 26% of the screen width. The two frames are named "Index" and "Text". If someone is using some ancient browser that can't deal with frames there is a substitute document that can be displayed using the NOFRAME tag.

Frame example

--------------- begin the frameset document --------------------

<!--DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN"-->
<HTML>
<HEAD>
<TITLE>Frames 'R Us</TITLE>
</HEAD><FRAMESET COLS="26%, *">

<!-- addition frameset parameters: rows=?,?,? border=? (border width) 
frameborder="yes|no" bordercolor="#rrggbb" -->

<FRAME SRC="Frame_index.html" name="Index">
<FRAME SRC="Frame_text.html" name="Text">

<!-- addition frame parameters: marginwidth=? marginheight=? 
scrolling="yes|no" noresize frameborder=yes|no" 
bordercolor="#rrggbb" -->


<NOFRAME>
<FRAME SRC="Html_text.html">
</NOFRAME>
</FRAMESET>

</HTML>
----------------------- end of the frameset document ------------------

Back to Page Index

---

-----------------------------------
And then there is BLINK.
-----------------------------------

Back to Page Index

You can use the ADDRESS tag to let people know how to get in touch.

The form is as follows: <ADDRESS> Your E-mail, Fax, etc. goes here </ADDRESS>

The ADDRESS TAG looks like this, it displays in italics.

Personally, I think it can make one's address more difficult to read, sometimes I don't use it. Instead I use it for copyright notices, no one reads those anyway.

---

---

[ prev page ] [Back to the Launch Pad ]

© 1997 Mike Sult / OpenMind Publishing

---

---

Send comments to:

mikesult@guitarland.com