HTML Tutorial

WEB DESIGN TUTORIAL
By Maren Childs
CS 100, Spring

The field of web design is growing. Nowadays, you can really spice up your page with languages and programs such as XHTML, DHTML, and JAVA among others. But you don't neccesarily need to know high-tech languages to make a nice web page. To start out with, you should definitely try basic HTML. Once you get that down, trying some simple JAVA applets can also spice up your page. This tutorial will go over some basic HTML that you can use on your page.

Let's start out with some basics.

EVERY web page needs the following code:

</BODY>
</HTML>

This tells your computer to read the HTML script and where to body of your page begins and ends.

Next, you need to set up some basic information about what your page will look like. You have your HTML code, so let's see how the new coding fits in:

<HTML>
<head>
<title>My Beautiful Page</title>
<META Name="keyword" Content="me, my hobbies, other stuff">
<META NAME="description" CONTENT="A page about me.">
</head>
<BODY bgcolor="#000000" text="#FFFFFF" link="#66FFOO" vlink="#33CCFF" alink="#FFFFFF">

The header of your page is where you can put information that aids search engines, like Yahoo!, in finding your site. The Meta keyword and name is where you describe your site. The search engines read this script and use keywords to make your site available to the rest of the world.

Below the head, you can see that the body line has been extended. The "#######" portions are the code that tells what colors you want for your background, your text, links and other things. A helpful place for color codes is here. BG Color stands for background color, text is your text, link is your link, vlink is a visited link, and alink is an active link. You can change the text color, size or font throught the body witht he following code:

If you wish to have a picture for your background, but this code inside your BODY code:

background="picture.jpg"

You can also use a ".gif" file for your background. ".jpeg" and ".gif" and are the two most common image formats on the web. While some computers can read other formats, you should still only use ".gif" and ".jpeg" to make sure all users see your images.

Presently, you have created a page that looks like this.

Next, let's learn how to make breaks in our text. When finishing a paragraph, to go down only 1 line, insert <BR>after it. To go down two, use <P>.

For example:

I like to ride bikes.<BR>
So does Timmy.<P>

Bikes are fun.

To change the way text looks, such as making it italic or bold, use the following codes:

<i>Italics</i>
<b>Bold</b>

Now that we've got things rolling in the body of your page, let's try some slightly more advanced tricks. Let's try adding links and pictures.

The code for a link is:

<a href="http://www.link.com">What you're linking</a>

To make the link come up in a new window, add:

<a href="http://www.link.com" target="new" >link</a>

The code for an image is:

<img src="http://www.link.com/picture.jpg">

You can, in fact, link a picture:

<a href="http://www.link.com"><img src="http://www.link.com/picture.jpg"></a>

You can also manipulate the size of your picture or add a border.

<img src="http://www.link.com/picture.jpg" width="##" height="##">

This way, you can manipulate the size of your image without using a program like photoshop.

To add or remove a border, the code is:

<img src="http://www.link.com/picture.jpg" border="#">

Replace the # with 0 if you don't want a border. Another handy trick is alt="my picture". Place this code behind your border, and even if your image breaks (a.k.a. stops functioning), people will still know what it was.

Presently our page might look something like this.

The last simple thing that I will teach you is bulleted lists. The code for Bulleted lists is the following:

<ul>
<li>Number 1</li>
<li>Number 2</li>
</ul>

It will look like:

Number 1
Number 2

Now that we've gone over images, text and links. Let's go on to something a little trickier: tables.

A basic table (2 columns, 2 rows):

This table looks like this:

info A	info B
info C	info D

You can make your table "clear" by setting the border, cellspacing and cellpadding with 0.

So now the table looks like this:

info A	info B
info C	info D

Tables are very useful in the layout of your page. Practice with them!

Next, we'll show you how to use image maps. Image maps are invaluable in regard to layout. Here's how a basic image map works. Here we have an image, unlinked.

However, we want the text portions to be linked. Here's how we do it. The way the the computer knows which portion of the image is supposed to have a link is through the pixels. For example, to make "I'm a link" active, we should make the following code:

The "coords" represent the pixels. The easiest way to find the coordinates/pixels is through an art program, or a specific HTML program like Dreamweaver. The area shape is set on rect(angle). This is the simplest shape. Although the shape can be changed to a circle, but this is somewhat more difficult.

So here we have our picture again, this time, with "I'm a link!" linked:

click me

Now, just add "So am I!" to the formula, and the code is complete:

Here's our completed image map:

click me

Next, we'll experiment with a little music. Most commonly, people use "midi" files to put sound on their pages. However, some users are highly offended by midis playing in the background, so please use them sparingly, and don't set them on loop. The code works like this:

<EMBED SRC="ff8-Julia.mid" WIDTH=144 HEIGHT=56 AUTOSTART=false LOOP=false>

And here's the outcome:

Lastly, I'll give you the code to make frames. Frames are just as useful for layout as tables are, though somewhat more complex. Here is a basic frameset (three frames lying horizontally):

This is what this code produces. The frameborder sets a border along the frame, just like in an image or a table. The rows option tells the computer how much space each frame should take up in the window. Using an * tells the computer to make the space as large as possible. 80,*,80 means that the top frame is 80 and so it the bottom; the middle frame takes up whatever space is left in the window. Scrolling tells the computer whether each frame should employ scroll bars or not. Noresize makes it so that users cannot change the size of the frames. If this line is absent from the code, users can drag the frames to change their size. Finally, an important not on frames: each frame is a separate page. Unless every page exists, nothing will appear in that frame.

I hope this tutorial has been helpful!

USEFUL LINKS