Some Advanced things you can do

Some Advanced Things You Can Do

Now the real fun begins! Here I will give you just a few ideas and examples of how you can liven up your new real-estate on the Super Information Highway. Then I will list a some good refences for you to research and explore. As mentioned earlier, the WWW is still young and constantly changing so there is never a lack of new resources (and soon we can add your web site to them!).
Also keep in mind that you can always "peek" at other's code to learn more techniques too.

Divide Ruler

Let's start with the Divider Line I have been using throughout this guide. Just open up your Editor and place the cursor after a paragraph end tag:
</P>
and type the following code:
<hr size="2" width="50%" >
This will give you a divider line 50% the width of the page (like the one above). Don't even type a width and it will default to 100% like the one on top. Sweet, simple, yet very effective.

Add Music

And the ever so popular Background Music. You actually have two ways to do this.
First is the:
<BGSOUND SRC="some wav or midi file" balance=0 volume=-290 loop="-1">
Paste this code Before the </HEAD> tag and type in your file's name, you MUST have the file also copied to the SAME Directory as your HTML file.
Now that one will play your sound file as many times as the value of loop="X". But let's give your visitors a means to turn the sound off if they don't want it (now your little web site is offering your visitors a choice!), use this code:
<P align="center">
<embed src="your .midi or .wav file name here" width="120" height="45" autostart="true" loop="true" controls="smallconsole" volume="50">
<br> Click to Start
</P>
Paste this one some where between <BODY> and </BODY>
Here, try mine {I set autostart="false", so you have to click to start}

your browser must have it's MIDI Plug-In for this to work

"Swinging On A Star" composed by: "Wright Sound"

Tables

Next we'll look at the structure of a common TABLE. If you are lucky enough to be using Arachnophilia with Sven's Tool Bar Add-Ons then these are easy, just click the "Tables" button (Stationery 1 button), tell the pop-up how many Rows, how many Columns, and how Wide you want and the code will look like this:

(a simple 2 row, 2 column table)
<TABLE width="65%" border="1" cellspacing="0" cellpadding="0" bgcolor="#008000">
<TR>

<TD align="center">
Your Contents for Row 1Column 1
</TD>

<TD align="center">
Your Contents for R1C2
</TD>
</TR>
<TR>

<TD align="center">
Your Contents for R2C1
</TD>

<TD align="center">
Your Contents for R2C2
</TD>
</TR>
</TABLE>

Your table will look like this:

Your Contents for R1 C1 Your Contents for R1C2

Your Contents for R2C1 Your Contents for R2C2

Let's look at those tags:
<TABLE> ....</TABLE> Creates a table
<TR>....</TR> Sets off each row in a table (vertically)
<TD>....</TD> Sets off each cell in a row (horizontally)
 Are those 'hidden comments' to help you remember things.

The above table has two cells vertically and two cells horizontally. Here is the code for a table with Only Vertical Cells. Examine the differences between the <TR> and <TD> tags, once you clearly understand their differences tables will be a breeze!:
<TABLE width="40%" border="1" cellspacing="0" cellpadding="0">
<TR>

<TD align="center">
Contents Row 1 Column 1
</TD>
</TR>
<TR>

<TD align="center">
Contents Row 2 C 1
</TD>
</TR>
<TR>

<TD align="center>
Contents Row 3 C 1
</TD>
</TR>
</TABLE>

Now your table will look like this
Pay close attention to the tags between Row3 and Row4:

Row One

Row Two

Row Three

You can change the back ground color by changing bgcolor="new color" or leave empty " " for a transparent effect. You can change the border's thickness by changing "border="X" or leave it empty for no border at all.
Tables are also usefull for aligning text and images or you can put a table inside a table to make fancy frames around your images:

Tip: Tables can even be used to align an entire page! In fact, this "How To Guide" is using a large 2 celled table to prevent the left margin from going into the image (the left cell is left empty and no background color is used). However this can be cumbersome and "Style Sheets" make it easier but so far there does not seem to be a reliable method for "All Browser types"; for this reason I will leave "Style Sheets" for you to explore on your own.

Also visit my Java Lakes for more examples of fancy frames or visit my on-line photo albumn for other use examples.

'Link' Your Pages

And of course you will need to place Web Links on your page. Not only does this allow your visitors to move from page to page, no decent web site is complete without a good source of linkage. That's what make the World Wide Web truly World Wide!
So here's the code:
<A href="http://www.{Replace With Real URL}">(type a name for the link or use an IMG tag for a picture)</A>

Be sure you type the FULL URL (Internet address), not all browsers will allow short cuts.
(TIP: If the document you are linking to lives on the same server - like to your page #2- use this format; "../new directory name/new doc.html" or if it is in the same directory just type the new HTML's file name in the quotation marks, no need for "http://www.")

To let your visitors e-mail you during their visit you will use the "A href=" tag only instead of using an "http://www." parameter you just type "mailto:{YourFull E-Mail Address}" (note: Don't forget to close the tag off with </A>).
<A href="mailto:Your E-Mail Address"> type your e-mail address or insert an image</A>

If you have any problems or questions with these instructions:
Click Here and I will help!

Embedding Components

The last thing I would like to show you is how to 'embed' a script into your HTML. You already should have noticed the <embed ......> tag when we put the above music controls on the page?
Scripts are little bits of command script that are sometimes written in yet another computer language, often you also need a separate file or more to support this 'script'. So what we need to do in our HTML is embed a tag command that will make the browser run this other language inside the HTML code. Sound too confusing? It's not really, since these 'scripts' are usually already written by a real programmer and all you are going to do is "Copy" and "Paste" it into your HTML document, then edit any needed parameter values.
Before using a script, always consider your visitors. I prefer to clearly label any links that lead to a page containing Java Applets and other such scripts. There are still some stone age browsers out there that will lock up if the user attempt to load Java, dHTML (dynamic HyperText MarkUP Language), and Visual Basic (VB script); but I'm not sure how often the museum allows them to be used (remember, your browser upgrades are FREE).

Java Applets

Click Here to see examples of embedded Java Applets .

Misc.

And we will finish up with a simple scrolling marquee for your web site. Now there are Java Script Marquee (that require a separate .class file to run) but I am going to show you a 'pure' HTML marquee. However, so far these will not run in Netscape and some other browsers at this time. They will work in MS Internet Explorer version 4 and higher and in the newer AOL browser. The older browsers and Netscape will only display the message motionless and ignore the <marquee> tag. Also I have found that some WYSIWYG type editors may have a problem, but they are a snap once you learn how to use your basic Text Editor.

The code goes like this:

<marquee border="0" width="100%" scrollamount="2" scrolldelay="20" style="color: #008000; font-weight: normal; face: Comic Sans MS; font-size: 14">A savvy and updated HTML browser will scroll this marquee. Others will only display the text, motionless.</marquee>

A savvy and updated HTML browser will scroll this marquee. Others will only display the text, motionless.

You have the following paramiters to play with:
border= will add a border to your marquee.
width= is the width of your page.
scrollamount=/scrolldelay= both controll the speed (play with it, you can't hurt anything!)
style= this is where you control the font's face, weight, color, and size.

Another neat feature about this marquee is that you can insert an <IMG> tag inside your <MARQUEE> </MARQUEE> tag to scroll it across your page.
For the following marquee I simply added my <IMG> tag inside the <marquee>.....</marquee> tags;

<b>I built this entire 'How To' guide using <i>Arachnophilia</i></b> <IMG src="arachnophilia.gif" WIDTH="32" HEIGHT="32" border="0"> Just great 'CareWare'.....

This entire 'How To Guide' was constructed using Arachnophilia Just great 'CareWare' .....

If you would like to find out more about dHTML and Java that you can add to your web site visit:
DynamicDrive.com all you have to do is cut-n-paste!

For further learning into your web page structure visit The WebMonkey and learn about Cascading File Sheets (CSS) and much more. You can find The WebMonkey at: http://www.hotwired.com/webmonkey/

And when you are ready to post your new web site to the World Wide Web we'll move on to
Section 4 and Get Your Pages On The Web!

How to build.... | Section 1 | Generic Tool Bars | Section 2 | Java Samples | Section 4 | Index {Resource Links}

My Home Page

HTML Page 4 of 8