WEB63

Home    About    Contact    Free

 

So you think you are ready to build your own site? Well it is a lot easier than you would think. With the basic outline described below you will be your own Webmaster before long. 

First off, take a peak at some of your favorite sites.

Netscape: Click on View --> View Source
Internet Explorer: Click on View --> Source

This will bring up another screen, and will show you the HTML "HyperText Markup Language" code for that page. At first it looks like a lot of jibberish, but after you have studied the lessons below you will begin to see that it is really not that hard. 

There are several products out there that will allow you to build your site without knowing the first thing about HTML. These products are nice and easy, but usually favor 1 browser or another. It is always good to know some basic HTML for making the things you do look right in both browsers. You should always check your work in Netscape and Internet Explorer. This will allow you to see what your site will look like as a finished product. We will be building our site in NotePad.
WIN 95/98.. START--> Programs-->Accessories--> NotePad. Go to "File Save As" and save your page as "mysite.htm". You can use either HTM, or HTML as a file extension. It will not make a difference in your page.

Just a one more thing before we begin. There can be a few different ways to do the same function. For instance, to center your logo on the page you could either use:
<center><a href="yourlogo.gif"></center> Older HTML
<div align="center"><a href="yourlogo.gif"></div> HTML 4.0
<p align="center"><a href="yourlogo.gif"></p> Products ie. FrontPage

The way way I will show is the basic HTML 4.0.
Now on with the Lessons

 

 

 

Lesson #1 - 
Basic tags for a web page.

These are the tags that an HTML page must have to operate. Notice that the mate to each of these tags has a / forward slash. This is telling the browser that you are done with that tag.
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

<HTML> This is telling your browser what type of document you will be using.
<HEAD>Really no use for this tag, but it must be there.
<TITLE>This is what will show up at the very top left of your browser. You usually put what the name of the page is ie. Free HTML. (notice that the title is enclosed within the heading tag)
</TITLE> This is telling your browser that you are done with the Title.
</HEAD> This is telling your browser that you are done with the Heading.
<BODY> Inside this tag is where you will tell your browser to, put in a back ground color, a background image etc... You will see more on this below. Everything that is going to be seen on your site will be place in between the <BODY> tag and the </BODY> tag.
</BODY> This is telling your browser that you are done with inserting everything on your page.
</HTML> This is telling your browser that your page is done.

Lesson #2
The BODY Tag

There are several things you can do in the BODY tag to add character to your page.
For instance: Inserting a background image, background color, changing the color
of the links, changing the color of the text, etc...

Here is a BODY tag using some of these effects.

<BODY background="paper.gif" font color="green" link="green" vlink="red" alink="black">

background - that would be the image you want to use.
font color - if you want all of the text on the page to be a certain color besides black.
link - this is when you are linking text to somewhere.
vlink - this is the color the link turns to when you have already visited that page "Visited Link".
alink - this is when you first click on the link before it sends you to the linking page "Active Link".
These link colors are not normally used, because your browser automatically inserts colored links.

If you want to have a colored background instead of an image the tag would look like this.

<BODY bgcolor="red">
you can still insert the other tags inside this same BODY tag.

Lesson #3 - Inserting and controlling text.
Paragraphs and line breaks

Your browser will only read 1 space between text. As I am typing out this sentence the text will automatically wrap down to the next line. When you want to force the text to go to the next line you must use the <BR> tag.
This tag will force the text to go to the next line, as I just did with the last sentence. Notice the <BR> tag does not need a / forward slash. 

There are only a few tags that do not need a / forward slash. Another one is the <P> tag. When you want to start a new paragraph, the <P> tag will double space instead of single

space to the next line as I did in the middle of this sentence.

Horizontal Rule

Another simple command is the <HR> tag. This will insert a Horizontal Rule. You can use this to separate paragraphs, subjects, or just for looks in you page. The line below is what you will see. You tell it what color it should be  inside the <HR> tag, for instance:
<HR color="red" size="3" width="80%"> The <HR> tag will automatically span 100% of the page. In the tag above you can see how to control the width of the tag. Also inside the <HR> tag you tell it how tall in Pixels you want it to be. If you do not under stand Pixels, a basic size for a Horizontal Rule is about 3.

Headings

For a large level one heading you would use the <H1> </H1> tag. When using this tag your browser will automatically drop to the next line. For instance:
 

Free HTML class

you also have a <H2> </H2>

H2

this would be just a little smaller, and an <H3> </H3>

H3

which is just a little smaller than the last. There are also 4, 5 and 6 H tags, but there is no use in using them because your browser does not show enough of a difference.

Lesson #4
Linking to another site on the Internet.

You will now begin using the <A></A> Anchor tag. Inside this tag, you will tell the browser where to take the person when they click on it. <A HREF> HREF stands for Hypertext Reference, I just had to throw that in so you could quiz your friends later. After the HREF you will put the site to go to in quotations. OK here you go.
<A HREF="http://www.whitehouse.gov">Go to the Whitehouse site</A>
When this is inserted your lookers would see Go to the Whitehouse site
You must also put in the HTTP:// HTTP "HyperText Transfer Protocol" just another quiz for your friends. (Notice this tag must be closed with a </A>)

Linking to another page on your own site

A lot easier... <A HREF="free.htm">Come to my Free HTML class</A>.
Come to my Free HTML class
(Notice that you do not have to use the "http://www")

  Lesson #5
Aligning Paragraphs and Text

All text is aligned left unless you tell the browser to put it some where else.

The code for aligning Left is <P ALIGN="left"> </P>
This will make all of the text run along the left hand border.
(Not necessary to use this)

The code for aligning Center is <P ALIGN="center"> </P>
This will make all of the text centered on the page.

The code for aligning Right is <P ALIGN="right"> </P>
This will make all of the text run along the right hand border.

Lesson # 6
HTML Lists

There are 3 types of lists:

  • <UL>
  • <LI>Unordered List</LI>
  • <LI>uses  bullets</LI>
  • <LI>to define it's breaks.</LI>
  • </UL>
  1. <OL>
  2. <LI>Ordered List </LI>
  3. <LI>uses numbers</LI>
  4. <LI>to define it's breaks</LI>
  5. </OL>
<DL>
<DT>Definition List</DT>
<DD>uses Tabs</DD>
<DD>to define it's breaks.</DD>
</DL>
 

Lesson # 7
Text Formatting and Control

Here is a list of special formatting for text:

<B>Bold</B> <I>Italicized</I> <U>Underlined</U> <SUB>Subscript</SUB> <SUP>Superscript</SUP> <STRIKE>Strike</STRIKE> <TT>Monospaced small typewriter font</TT> and

<PRE>

Monospaced small font. Using the PRE tag, will tell your browser you see
every s p  a   c    e you put between letters or words
     in your site. This is good for lining up text in colums if you do
not use a table.

</PRE>

Lesson #8
Special Characters

" = &quot; & = &amp; < = &lt; > = &gt; ¢ = &cent;
£ = &pound; ¦ = &brvbar; § = &sect; © = &copy; ® = &reg;
° = &deg; ± = &plusmn; ² = &sup2; ³ = &sup3; · = &middot;
¹ = &sup1; ¼ = &frac14; ½ = &frac12; ¾ = &frac34; Æ = &AElig;
æ = &aelig; É = &Eacute; é = &eacute; × = &#215; ÷ = &#247;

 

Lesson #9
Font Color, Typeface and Size

The <FONT> tag can be used for many things.
The phrase below will show the most common ones.

The <FONT COLOR="red">WEB </FONT> in WEB63 stands for:
<FONT FACE ="Lucida Sans" SIZE="5"> 
W<FONT SIZE="4">E</FONT>  
E<FONT SIZE="4">NHANCE  
B<FONT SIZE="4">USINESS</FONT>

"WE ENHANCE BUSINESS"
The FACE is the Font Style
The SIZE 5 is telling the browser to make everything below a size 5.
The SIZE 4 is breaking up the size 5 tag making the other text a little smaller.

Lesson #10
Making an E-mail Link

< A HREF="mailto:sales@web63.com"> sales@web63.com </A>
Using mailto: inside the <A> Anchor tag will allow the e-mail tag to activate.

Lesson #11
Inserting Images

We will now use the img src tag. This stands for Image Source. Placing the border at 1 will put a 1 pixel border around the image. If you do not want a border, when linking you image you must put a 0 in the border tag. It is always a good idea to put the image size inside the img src tag. This will allow the image to load faster because the browser knows how much space to allow for the image. Also placing the alt tag in the line is good for people who turn images off on their browser. This will let them know what the image should be. You will also see the text when you place your mouse on top of the image.
<img src="logo.gif" border="1" width="600" height="100" alt="WEB63 Logo">

Linking an image to another page on your site.
<a href="index.htm"><img src="logo.gif" border="1" width="600" height="100"></a>