Script Source-Beginner's Guide

Beginner's Guide

If you are just starting to create web pages, this is the place for you. Here we cover all of the basic tags, and what they do. Then we show you how to put it all together.

Some of these tags have attributes, which can be seen in the Quick Reference Guide.

Basic Tags

Tag Explanation

<HTML>
</HTML> This tag goes at the very top of each HTML document.

<HEAD>
</HEAD> This tag comes next. JavaScripts are put between the HEAD tags.

<TITLE>
</TITLE> The title goes inside the <HEAD> and </HEAD> tags. You give your document a name here, and it is shown at the very upper left corner of the browser window.

<BODY>
</BODY> Here you put the pages background color or the background image's URL, the font face and color, as well as the colors for links, visited links, and active links. These colors can be the same, or different.

 This tag is used to start a new paragraph.

 This command will start a new line, with a smaller space than that of a P. No closing tag is needed.

<HR> This will make a horizontal rule on the page. Again, no closing tag is needed.


 This tag makes text bold.


 This one makes text italicized.


 This will make underlined text.

<S>
</S> Use this for for text with a strike-through.

<BIG>
</BIG> Makes text 1 size larger.


 Makes text 1 size smaller.


 Changes font size, face, and color.

<IMG SRC="?"> Adds images to pages, no closing tag.

Sample Page
The code:
<HTML>
<HEAD>
<TITLE>My First Page</TITLE>
*****JavaScripts Go Here*****
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" FACE="Arial" LINK="#5a5a5a" VLINK="#5a5a5a" ALINK="5a5a5a">
Welcome to my first page.

The results:
Welcome to my first page.

Used to change the font size, color, and face.

Links

In order to allow visitors to your site to move between pages easily you need to include links. Learn how here.

There are two ways to link, to a different page, and to a different spot within the current page.
To link to a different page you use this code:
<A HREF="http://www.yahoo.com>Yahoo!</A>
Above we have what is called an absolute URL. You use this type of URL when you are linking to a completly different web site. The other type of URL is called a relative URL. You use this type when you are linking to a different page, but one that is in your site. They look like this:
<A HREF="index.html">Script Source</A>
When the browser sees a URL like the one above it will look at the domain that it is curently at, and find the specified file, in this case index.html, and take the user there.
The other type of link will take you to a spot within a page. These are more complicated, becuase they have two parts to them. First off you put this where you want the link to be at:
<A HREF="#top">Top</A>
You can change "Top" to whatever you want. Then you put this where you want the link to take the user:
<A NAME="top">
This part of the tag has no display on the screen, it only appears in the source code. If you want some text, and image, or anything else to display in the location that the link takes you to, simply put that thing right next to the <A NAME="top"> tag. The area of the page that you have <A NAME="top"> at will be at the very top of the browser window.
This is how they work:
Top
You may also want to add e-mail links to your pages. To do this you also use the A tag. An example:
<A HREF="mailto:pr0teus@juno.com">Creator</a>
Creator

Usage of Basic Visual Tags

The P tag makes a break in the page used to distinguish between paragraphs, or as a way to seperate pictures, text, and other items on your page from eachother vertically. It stops the text where it is on the page, and skips the next line where you you have more content.
Here is an example of the tag in action:
Text, text, text, text, text, text, text, text, text, text, text.

Text, text, text, text, text, text, text, text, text, text, text.

Produces this:
Text, text, text, text, text, text, text, text, text, text, text.
Text, text, text, text, text, text, text, text, text, text, text.
 
The BR tag simply makes a break in the page, much like P, except it does not skip a line, it just stops text on the page, and places the next set of content on the next line.
This is how the BR tag is used, and what it produces:
Text, text, text, text, text, text, text, text, text, text, text.
 
Text, text, text, text, text, text, text, text, text, text, text.

Does this:
Text, text, text, text, text, text, text, text, text, text, text.
Text, text, text, text, text, text, text, text, text, text, text.
<HR>
This tag makes a horizontal rule on the page.
It has a few attributes that you can set:
width="X" Note: You can use a percent or a set number of pixels.
height=1-7
noshade Produces a rule with no shadow on it.
color="#RRGGBB" You can make your rule any color you want.
align="left, right, center"
Examples:
<HR>
A basic horizontal rule.
<hr noshade>
A rule with no shadow.

Horizontal rules with the following attributes, in order:
<hr size="1" width="40%">
<hr size="2" width="50%">
<hr size="3" width="60%">
<hr size="4" width="70%">
<hr size="5" width="80%">
<hr size="6" width="90%">
<hr size="7" width="100%">
Note: The HR's above are in a table, so they span the correct percent of the table, if you do not have your HR's in a table, they will span the correct percent of the users monitor.
<hr color="#ff0000">
A rule colored red.

The code for the above HR's, in order:
<hr width="25%" align="left">
<hr width="25%" align="center">
<hr width="25%" align="right">
<hr width="35%" size="5" color="#0B5EB0" align="right">
A rule with all attributes applied.

 
This tag simply makes text Bold.

It is used like this:
Text, text, text, text, text, text.
Which does this:
Text, text, text, text, text, text.
 
This makes text italic.

This is how it is used:
Text, text, text, text, text, text.
Which produces this:
Text, text, text, text, text, text.
 
This tag makes text underlined.

It is used like this:
Text, text, text, text, text, text.
Which makes this:
Text, text, text, text, text, text.
<S> </S>
This tag makes text struck out.

This is how it is used:
Text, text, <S>text, text,</S> text, text.
Which does this:
Text, text, ~~text, text,~~ text, text.
<BIG> </BIG>
This tag makes text big.

This is how it is used:
Text, text, <BIG>text, text,</BIG> text, text.
Makes this:
Text, text, text, text, text, text.
 
This tag makes text small.

This is how it is used:
Text, text, text, text, text, text.
Does this:
Text, text, text, text, text, text.
Note: The BIG and SMALL tags are communitive, several of either of these tags will makes the text an equal amount smaller or larger.

1. 2. 3. 4. 5. 6. 7.

RRGGBB
Arial or Helvetica.
Arial or Helvetica.
Note: You can have as many fonts listed as you want, the browser will look through them, in order, until it finds one on the computer, and then use that font. Images
To add images to your pages you use the IMG tag. There is no closing tag. It will look like this:
<IMG SRC="logo1.gif">
You change the URL to whatever you want, using a relative or absolute URL. The above code will display this:

You can have an image be a link to a seperate page by first putting the link tag, and then the image, instead of text. That will look like this:
<A HREF="index.html"><IMG SRC="logo1.gif"></A>

When you use an image as a link a border will appear around it. The border's color depends on the colors that you chose for LINK, ALINK, and VLINK, as well as if the user has visited that page yet. You can change the border size to whatever you'd like by adding BORDER=X.
<A HREF="index.html"><IMG SRC="logo1.gif" BORDER=10></A>

If you set the border to 0 then there will be no border.

You have now finished the Beginner's Guide. If you went through the whole thing you can now create a basic page that has images, links, horizontal rules, different size text, color and font face changes, as well as many other things. If you want to learn about the more complicated aspects of HTML we suggest you take a look at the other tutorials.

Basic Tags
Tag	Explanation
<HTML> </HTML>	This tag goes at the very top of each HTML document.
<HEAD> </HEAD>	This tag comes next. JavaScripts are put between the HEAD tags.
<TITLE> </TITLE>	The title goes inside the <HEAD> and </HEAD> tags. You give your document a name here, and it is shown at the very upper left corner of the browser window.
<BODY> </BODY>	Here you put the pages background color or the background image's URL, the font face and color, as well as the colors for links, visited links, and active links. These colors can be the same, or different.
<P>	This tag is used to start a new paragraph.
<BR>	This command will start a new line, with a smaller space than that of a P. No closing tag is needed.
<HR>	This will make a horizontal rule on the page. Again, no closing tag is needed.
<B> </B>	This tag makes text bold.
<I> </I>	This one makes text italicized.
<U> </U>	This will make underlined text.
<S> </S>	Use this for for text with a strike-through.
<BIG> </BIG>	Makes text 1 size larger.
<SMALL> </SMALL>	Makes text 1 size smaller.
<FONT> </FONT>	Changes font size, face, and color.
<IMG SRC="?">	Adds images to pages, no closing tag.