Building a Web Page


Here is a list of some Free Website Hosts



There are usually two sets of tags for every command. The opening tag which tells the browser what to do, and the closing tag, which tells the browser to stop doing it. Closing tags are very important, or you end up with a big mess!!!

The first and last entry must be your HTML tags.

The HEAD tags come next. Within this tag you place the title of your homepage. You can name it whatever you would like but you must place it within the <HEAD> tags, and then inside the head tags place the <TITLE> tags, then what you want to name your page.

Also in the HEAD is the META TAGS. This is what lets the Search Engines find your page.

Here is an example:
<HTML>
<HEAD>
<TITLE> Name of your page
</TITLE> ( META TAGS here )
</HEAD>
<BODY (and atributes)>
All TEXT, IMAGES, etc. here.
</BODY>
</HTML>

Ok now on to the <body> tag which is very important. It controls the color of your background, text, link, and other elements. It also allows you to place an image as a background on your page.
You can also use the atrabute LOGO= to have a logo show up in the little window when your page is saved in "Favs".
The body tag follows the </head> tag.

Background
You use this in the body tag to give your homepage a background.
To do this you put the code in like this: <body background="url of image" bgcolor="???" text="???" link="???" vlink="???" alink="???">

Text, link, vlink, bgcolor.
Ok, these are all going to be explained together because all you have to do at the end of each is add "color" to the end of each.
In the place of color you can put either the color code or you can put the "name of a color".
If you use the code then you must put the # sign right after the parenthesis like this: text="#ffffff".
If you decide to use the name of a color you just put it in: "white".

You will use the same tags in the body of your Homepage that you learned in Lesson One.

After all your TEXT, Images, and Links are in, and you're finishing up, you have the closing Body & HTML tags:

</BODY>
</HTML>


Now we get into text sizes.. how big do you want it?
There are two ways of doing it.. headers and font sizing...
Both are easy once you get the hang of it.

<h1>

Header 1

</h1>
<h2>

Header 2

</h2>
<h3>

Header 3

</h3>
<h4>

Header 4

</h4>
<h5>

Header 5

</h5>
<h6>
Header 6
</h6>

That's as far as the headers go!


Now for Font Sizes

<font size="1">font size 1 </font>
<font size="2">font size 2 </font>
<font size="3">font size 3 </font>
<font size="4">font size 4 </font>
<font size="5">font size 5 </font>
<font size="6">font size 6 </font>
<font size="7">font size 7 </font>


This tag will align the text to the right edge of the page. You will need to use <br> tags to cause breaks in the text.

<p align="right"> This will align the paragraph to the right margin. </p>

  If you want this text to
be along the right edge
 of the page you need only
use this tag.


If you want to align text to the right of an image, you need to use a table code.
Tables are simple, once you understand how they work.

Put whatever text you would like here.


Here is the code I used above:

<table><tr><td>
<img
src="https://members.tripod.com/~Cannonball2/gif-2/bud1.jpg" width="300" height="177"> </td>
<td>
Put whatever text you would like here.
</td></tr></table>


Putting graphics on your page:

The first thing to do is Transload them to your files!
Please do not link to the graphic
Always Transload it to your site.

There are several reasons for this but the two important ones are:

The html code or tag to add a graphic is:
<img src="name.gif" height="120" width="60" alt="what graphic represents">

racehorse

<img src="https://members.tripod.com/~Cannonball2/gif-1/horse.gif" height="120" width="60" alt="racehorse">

Here is the same gif with a different size:
height="60" width="120"

racehorse

Want to enlarge it?
height="90" width="180"

racehorse

The height and width tags help it to load faster. You can determine the size of your graphic by viewing it in a graphics editor.

We use the alt= tags for graphics to explain what the graphic represents, since this also helps computer users viewing your page.

You will find some links to Graphic Sites on my main Website Page.
And also Hit Counters and Guest Books.

  Need a side bar?  


When viewing a page that has graphics that you would like to transload to your files, how do you find the URLs?
Well here is a "Validator" tool that lets you get the URLs for graphics and links.
You can also view the HTML to see "How did they do that?"

When viewing a post or email, how do you get the URLs of images you see?
First, hit "Send". Then address it to yourself.
Now bring the curser down into the "Subject" section and delete what is there.
Then bring the curser down into the body section and hit "Return" twice.
Now hit "Alt" & "K", .
Now hold down the "Cmd" key and hit "A", "X", "arrow up", and "V".
This will put † in the subject line.
Scroll down to "Send" and click.
If you followed these steps, when you read the mail you will see all the code!


To Make Text Scroll:

The Marquee Code is only compatible with the MSIE browser. A Marquee is scrolling text across a page. It is eyecatching, but once again, not supported by all browsers.

<marquee>This is the code for Marquee.</marquee>

Users of MSIE will see scrolling text across the page. Netscape users will just see the text. It will not scroll, but if you center it, <center> </center> it should look fine with either browser.

This is a MARQUEE


To control the speed that it scrolls:
<marquee scrollamount="2">Text Here</marquee>
To control the direction: <marquee direction"left" or "right">Text Here</marquee>
To control the behavior(bounce from side to side or scroll):
<marqee behavior="slide" or "alternate">Text Here
</marquee>

To vary the width of the marquee

Add WIDTH to the MARQUEE tag
<MARQUEE WIDTH="50%">Your scrolling text goes here</MARQUEE>will produce scrolling text that looks like this

Your scrolling text goes here

To vary the background color of the marquee

Add BGCOLOR="color name or code" to the MARQUEE tag
<MARQUEE BGCOLOR="aqua">Your scrolling text goes here</MARQUEE> will produce this

Your scrolling text goes here

To vary the direction of the marquee

Add BEHAVIOR="alternate" to the MARQUEE tag
<MARQUEE BEHAVIOR="alternate">Your scrolling text goes here</MARQUEE> will produce this

Your scrolling text goes here

Or add DIRECTION="right" to the MARQUEE tag
<MARQUEE DIRECTION="right" >Your scrolling text goes here</MARQUEE> will produce this

Your scrolling text goes here


Tables

This is a neat way to organize a webpage!
The whole mess basically has only 3 tags...

<TABLE> The main tag. Used to tell the browser "this is a table", along with some attributes like size, border width and a few other things.

<TR> TableRow defines a horizontal row of <TD> (TableData) cells.

<TD> Specifies an indiviual block or cell in a table row.

To paraphrase: A table is made up of rows which in turn are made up of cells.
Each tag must also have a corresponding closing tag.

<Table>
<tr>
<td>
(this is the "cell")
</td>
</tr>
</table>

         
<--This-- --is-- --a-- --Table-- --Row-->
      cell  
  cell     cell

Well, that's tables in a nutshell. You are now ready to make some tables! Practice and see what you can do!

More on tables in Lesson Three


If you enjoyed your visit, Please
be kind enough to
Sign my NEW Guest Book

View my NEW GuestBook

get your free guestbook

View my guestbook #1.

Lesson One

Lesson Three
~Tables~

Advanced Tips

home1.gif Home





stats

© Copyright April 8. 1999 ©
© All Rights Reserved © Cannonball ©