Beginner's guide to Web pages

A beginner's guide to Web page design and HTML

The following is a short description of what's needed to build a simple Web page using HTML. You can View/Source on this page to see how the examples described have been put to use.

Basic HTML to create a Web page:
<HTML>
<HEAD>
<TITLE>My page</TITLE>
</HEAD>
<BODY>
My page
</BODY>
</HTML>

This needs to be saved as a text-only file called mine.HTM.

If you are working on a PC that's it. If you're on Unix then watch-out for upper and lower case and your filename is mine.HTML. You'll notice this as you browse the Web.

To put text in separate paragraphs, use the 'P' tag. Put <P> at the beginning of the text and </P> at the end. If you just want the text to start on a new line, put <BR> at the end of the first block of text.

If you want your text in the middle of the page you can put 'align=center' in a <P> tag, or you can use <center> at the start of the text and </center> at the end. There's also align left and right should you ever need them.

You can make a line of text (eg a heading) stand out by using <H1> and </H1> either side of it. H1 is biggest, there's 2-6 available as well.

If you want to put comments in your HTML so you can understand it next time, use:

You can make the text bold or italic with <B> </B> and <I> </I>, and underlined is <U> </U>.

You can change the font using the font tag. face="xxx", where xxx is a common font like arial, times, comic sans ms, etc. Not all computers accessing your page will have the same 'fancy' fonts as you.

size="x" specifies the font size. 1 is smallest 7 is largest. You can put a plus in front of the number. It makes it that much bigger than the surrounding fonts.

The colour of the text is specified by color="#xxxxxx" in the font tag, or TEXT="#xxxxxx" in the body tag. You can use names for the most common colours, eg red, navy, etc.
The purples are, for example, 990099, 993399, 996699, CC66CC, CC99CC, FFCCFF.

In the body tag you can specify a background colour using bgcolor="#xxxxxx". You can specify a background image using BACKGROUND="xxx.GIF" or zzz.JPG.

You can create a list by putting <UL> at the start of the text, <LI> in front of each line in the list, and </UL> at the end.

It
looks
like
this.

You can add a picture to your text. At its simplest, you need a line that says:
<img src="xxx.GIF" or zzz.JPG. You can specify its size and a name for it while it downloads, etc.

You can put a line across the page using:
<HR size=1> or another size of your choice depending on how thick you want it. You can add in the tag width=50% and it will go half way. Change the figure to any value you like, and use align=center, etc - see bottom of page.

You can add links to text and images, use:
<a href="http://www.abc.com/efg.htm">your text or image in the usual way </A>

You can also put links within a page, eg at the bottom put a pointer to the top. You do this by putting <A NAME="top"></A> at the top of the text on the page. At the end of the text you put <a href="#top">your pointer name or whatever</A>. You can change the name 'top' to anything you like, but it must be the same in both tags.

You might want people to e-mail you. This can be easily done from your Web page. On-screen it says "E-mail me if you like my page" (or whatever). In the HTML it says:
<a href="mailto:kt_eddolls@yahoo.com"> E-mail me if you like my page</A>.

You can change the colour of links that people have visited and those that they haven't yet on your Web site. This is done in the body tag. Use LINK="#xxxxxx" and VLINK="#zzzzzz" for visited links.

You can create forms and tables.
You can use mouseovers for all sorts of effects, eg:

You can use meta tags to help search engines catalog your page.
You can set cookies to get information about people who visit your page.

You can add sound:
<embed name="midi" src="bluesy1.mid" width="128" height="128" hidden>

Or:

<SCRIPT LANGUAGE="JAVASCRIPT">
function kwelcome() { location = "k1.wav"
}
</SCRIPT>
</HEAD>
<BODY onload="kwelcome()">

This downloads a WAV file. It uses Javascript and needs an ONLOAD in the body tag.

You can do wonderful things with Javascript and Java applets.
To launch a Java applet you would write something like:
<APPLET CODE='jfilename.class' width=300 height=50> </APPLET>
If you View source on this page, you'll find JavaScript looks something like:
<SCRIPT language="JavaScript"> 
</SCRIPT>

But do remember that Navigator and Explorer show things differently! So what you thought was a nice looking page may appear like the dog's breakfast when viewed with a different browser. Certainly, many of the 'special effects' won't work across browsers. And if you're viewing a page from a Mac rather than a PC, it's all different again (groan).

More about images:
We can insert a picture, eg <img src="images/k3.jpg">. We can put a border round it, eg border=10. We can also give the picture a name that will appear while it is downloading, eg alt="picture of Katy". We can also control the way that text will appear next to the picture. The text can be at the top, middle, or bottom - using align= and one of those three keywords. This gives us:

<img src="images/k3.jpg" border=10 alt="picture of Katy" align=MIDDLE>A picture of Katy! You can add lots of text to appear by the side of the picture.

The following example from the photos page shows how you can control the actual size of the picture shown on the Web page - using WIDTH and HEIGHT:

It also shows the use of an image map. If someone clicks on part of the image they will be transferred to another page. The image map specifies shapes on the picture that are associated with events. These shapes are circles, squares, and triangles. You need to specify the coordinates. From the same page, the FrontPageMap3 (and that could have been any name) looks like:

It's a good idea with images to make the background transparent - which you can do with Paint Shop Pro, and to save your GIF files as interlaced. This means that the image appears a line at a time when the page is first viewed. It's nicer for the person looking at the page to see what's coming.

A lot of Web sites have frames. I've used tables instead, eg:

This goes in the body and before any text. It gives me a left-hand side 172 out of the 620 I defined. Once all the text etc for that column is in I put:

</TD>
<TD width="448" Valign=TOP>

I then do the main right-hand side of the page. At the very end of body I put:

</TR>
</TABLE>

Of course, most of this is now out-of-date, because you should be creating your own style sheets. In the head section, it would say something like:

<STYLE>
H1 {text-align: center; font-style: italic; font-family: "comic sans ms"; font-size: 14pt; background: #FFFF00 or URL("images/j1.gif"); color: #FF0000}
</STYLE>

You then put <H1> in front of the text you want to have that style and </H1> at the end.

Great examples of HTML, DHTML, CSS, and Javascript are available. The file is quite large, but if you are interested then click here.
If you want to see how good any Web page is, then click here for more details.
If you want to submit your site to search engines, then click here for a page listing the URLs.