HTML Lessons For WEB Pages

HTML Lessons for
WEB Pages
(Compilation)
From
http://www.html4newbies.com
ARSENIA R. JOAQUIN
Intended for FREE download. Base Cost is charged for
printed copies by the publisher.
Books Published: http://www.lulu.com/arseniajoaquin
THE WILL New Testament (GREEK to English) - e-Book
1002 pages - http://www.lulu.com/content/352285
GENESIS, EXODUS, LEVITICUS (Greek-English) - Paperback
THE WILL New Testament (Greek to English) - Paperback
THE WILL New Testament (Greek to English) - Hardcover
GREEK-ENGLISH (Grammar & Vocabulary) - Paperback
WORDS in THE WILL New Testament - Paperback
WORDS in THE WILL New Testament - Hardcover
THE WILL New Testament (Greek-English) SE - Hardcover
THE WILL New Testament (Greek-English) SE - Paperback
ELEMENTS of SALVATION - Paperback
The Right Way - Paperback
GOD - Paperback
ORIGIN - Paperback
TRANSFER into PERFECTION - Paperback
THE WILL New Testament (Greek to English) is donated to the Al-
pha Omega Seniars Int’l Foundation, Inc. for senior citizens, widows, or-
phans, disabled, poor intellectuals, and others in the light of the will of
God to serve Him and to help others.
"Man shall live not on the basis of bread alone, but on the basis of
every word going out through the mouth of God" (Maththaios [Matthew]
4:4).
"And we ourselves the able men ought to bear the weaknesses of the
unable..." (Romans 15:1)
"... it is necessary to support the ones who are weak... it is more blessed
to give than to receive" (Acts 20:35).
"Give to the one requesting thee, and thou should not turn away from
the one willing to borrow from thee" (Maththaios [Matthew] 5:42).
"Store not treasures for you on earth, where moth and eating cause
them to disappear and where thieves dig through and steal; but store trea-
sures for you in heaven, where neither moth nor eating cause them to dis-
appear and where thieves dig not through nor steal, for where the treasure
of thee is, there will also be the heart of thee" (Maththaios [Matthew] 6:19-
21).
"When thou would give alms, thou should not trumpet in front of thee,
just as the hypocrites do in the synagogues and in the lanes, in order that
they would be glorified by men; Amen I say to you, they hold away the
reward of them. But of thee giving alms let not the left hand of thee know
what the right hand of thee does, in order that the alms of thee be in the
hidden, and the Father of thee who sees in the hidden shall give to thee"
(Maththaios [Matthew] 6:2-4).
"You yourselves be perfect as the Heavenly Father of you is perfect"

(Maththaios [Matthew] 5:48).
HTML Lessons Lesson One
INTRODUCTION
Hyper text Markup Language, or HTML, is the language that makes

up a Web page. It’s a simple system, or should we say tag system, which
consist of Less-than symbol (<) and the Greater-Than symbol (>).
Show your note today Whats your scoop Scripts for making
money Html tips Have you Flipped
html Tutorial
html Tips
Learn html
HTML NEWBIE LESSON ONE
Welcome to Lesson One
STEP ONE / LESSON ONE
I would like to first say that in order to truly learn anything, you need
to actually do it over and over again. So in all of these lessons you will be
repeating steps over and over. If you need to come back each day to learn
each step until you know it without thinking on how to do it, then you
have accomplished that step and then you can move on to the next step.
We have provided you with a text area for you to type each step in. I
encourage you to copy each step and paste it in wordpad and save it as the
name I call it. This way you can always have for future reference to look
back on.
First thing we are going to learn is the Comment tag. <!— —>
Reason we are going to learn this first is because you are going to leave
alot of helping tips for yourself.
COMPILED BY ARSENIA R. JOAQUIN 1

Lesson One HTML Lessons
The Comment tag is a nice tag to use because if your doing alot of html
and may be you need to leave reminders for yourself as to what you were
puting in a certain area of your page.
This tag when used can not be seen by browsers. So whenever you use
this tag, only you can see it. Not anyone visiting your webpage. Unless
they view source. ( So please be carefull as to what you put in them )
In the box below type <!— My first webpage —>
B O X
Should look like this:

<!— My first webpage —>
Highlight it by clicking the highlight button and then right click and
copy and save it in wordpad as myfirstwebpage.html
Remember where you saved it ( Desktop is a good place for it ).
Once you have saved it, I want you to go to your desktop and double click
on it.
If you don’t see the Comment that you typed then you have done it right.
STEP TWO / LESSON ONE
In step two you are going to learn the <html> </html> Tags
This is one of the Basic HTML Tags.
2 COMPILED BY ARSENIA R. JOAQUIN

This tag creates the HTML Document. If you notice there are two of them.
For the most part all tags need to have a starting tag and an ending tag.
The ending tag has the / before the name of the tag surrounded by the < >.
This ending tag is </html>
This tag makes up the page. Everything that will go into your page
will go between these two tags. The html tag tells the browser that it is a
html document.
In the box below type
B O X
<html>
</html>
Remember you can use the comment tag when ever you need to.

<html>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
on it.

If you dont see the Comment or the html tags that you typed then you have
done it right.
STEP THREE / LESSON ONE
This step we are going to learn the Head tag. <head> </head>
This is one of the basic HTML tags.
This tag sets off the title and other information like the metatags that isn’t
displayed thru your browser.
B O X
<html>
<head>
</head>
</html>

<html>
<head>

</head>
</html>
on it.
If you don’t see the Comment or the html tags or the head tags that you
typed then you have done it right.
STEP FOUR / LESSON ONE
This step we are going to learn the Title tag <title> </title>
This tag places the name of your webpage in the title bar.
It goes below the <head> tag.
B O X
<html>
<head>
<title></title>

</head>
</html>

<html>
<head>
<title></title>
</head>
</html>
on it.
If you don’t see the Comment or the html tag, title or the head tags that you
typed then you have done it right.
STEP FIVE / LESSON ONE
This step we are going to learn the body tag <body> </body>

Everything between these two tags will be shown on your webpage.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Remember you can use the comment tag when ever you need too.

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>
on it.
If you don’t see the Comment or the html, title.body or the head tags that
you typed then you have done it right.
You have just Completed Lesson One
You have just learned the very Basic of every webpage. You will need
those tags on every page you design.
CONGRATULATIONS!
Lesson Two we will be adding to myfirstwebpage.html
Welcome to Lesson Two
STEP ONE / LESSON TWO
This step we are going to add a title to the title tag <title></title>
This will show on top of your browser in the title bar.

HTML Lessons Lesson Two
B O X
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
</body>
</html>

<html>
<head>
</head>
<body>
</body>
</html>

Lesson Two HTML Lessons
and save it in wordpad as myfirstwebpage.html
on it.
You should see a blank page with the title in the title bar.
STEP TWO / LESSON TWO
This step we are going to add a heading to your page using the head-
ing tags <h1></h1>
These tags are displayed in larger and/or bolder fonts than the normal fonts
on your webpage.
These tags range in from <h1> thru <h6> from largest to the smallest.
B O X
<html>
<head>
</head>

<body>
<h1>My First webpage</h1>
</body>
</html>

<html>
<head>
</head>
<body>
<h1>My first webpage</h1>
</body>
</html>

on it.
You should see on your webpage your heading.
STEP THREE / LESSON THREE
This step we are going to learn the Center tags <center></center>
This tag when placed before and after the text can center that text on your
webpage, this tag will be used in other areas of html which we will learn
later.
As you noticed on your webpage the heading was on the left side. We are
going to center it in the middle of your webpage.
B O X
<html>
<head>
</head>
<body>
<center><h1>My First webpage</h1></center>

</body>
</html>

<html>
<head>
</head>
<body>
<center><h1>My first webpage</h1></center>
</body>
</html>
on it.
Your title should now be diplayed in the center of your webpage

STEP FOUR / LESSON TWO
This step we are going to add to the body tag.
We are going to add color to your background of your webpage.

We are going to use this color for your background.
The new <body> tag will look like this <BODY BGCOLOR=”#D5D5FF”>
Later on you will learn more about color codes.
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>


<html>
<head>
</head>
</body>
</html>
on it.
If you see a different color background then your right on track.
STEP FIVE / LESSON TWO
This step we are going to learn the Paragraph tag <p></p>

The <p> starts a begining of a new paragraph with a line break and the </
p> ends the paragraph. Simple huh !
We will get in more detail with this later on.
B O X
<html>
<head>
</head>
<p>Welcome to my New webpage made by me. I hope you enjoy it be-

cause it’s my first. I always thought about learning html but I never found
the right learning tools to do it. Well not until I found Html4newbies.com</
p>
</body>
</html>


<html>
<head>
</head>
<p>Welcome to my New webpage made by me. I hope you enjoy it be-

cause it’s my first. I always thought about learning html but I never found
the right learning tools to do it. Well not until I found Html4newbies.com</
p>
</body>
</html>
on it.
I am betting that you now have a paragraph.

You have just Completed Lesson two
You are moving right along.
CONGRATULATIONS!
Lesson Three we will be adding to myfirstwebpage.html
Welcome to Lesson Three
STEP ONE / LESSON THREE
This step we are going to center the paragraph from lesson two. Then
make use of the Bold tag <b></b>
The bold tag will make a letter or a sentence or a paragraph a bold font.
We are using more then one tag so I am going to teach you something new.
First tag in is last tag out. EXAMPLE : <p><center>hello</p></center>
You can get away sometimes without doing that but you should learn it
this way.
B O X
<html>
<head>

HTML Lessons Lesson Three
</head>
<p><center>Welcome to my New webpage made by me. I hope you enjoy

it because it’s my first. I always thought about learning html but I never
found the right learning tools to do it. Well not until I found
Html4newbies.com</p></center>
</body>
</html>

<html>
<head>
</head>
<p><center>Welcome to my <b>New</b> webpage made by me. I hope

you enjoy it because it’s my first. I always thought about learning html but
I never found the right learning tools to do it. Well not until I found
Html4newbies.com.</p></center>

Lesson Three HTML Lessons
</body>
</html>
on it.
We just centered your paragraph and made the word New in bold
STEP TWO / LESSON THREE
This step we are going to make a new paragraph and center it and
learn a new tag called the break tag <br>
The break tag will break one end one line of text and start on a new line.
You won’t see a difference unless we add two <br> tags. Simply put the
<br> between the two paragraphs or other page elements for it to work
right.
B O X
<html>
<head>

</head>

Html4newbies.com</p></center>
<br><br>
<p><center>Learning html is really easy and seeing the results are amaz-
ing. I only wish I would have decided to learn this a long time ago. But it’s
never to late to learn.</p></center>
</body>
</html>

<html>
<head>

</head>

Html4newbies.com.</p></center>
<br>
<br>
<p><center>Learning html is really easy and seeing the results are amaz-
ing. I only wish I would have decided to learn this a long time ago. But it’s
never to late to learn.</p></center>
</body>
</html>
on it.
Now you have two pargraphs with a space between the two..

STEP THREE / LESSON THREE
This step we are going to modifi our webpage by getting rid of the
center tags <center> and break tags <br> around the paragraphs and learn
about the Blockquote <blockquote></blockquote>
The block quote works like a word processor and indents each paragraph
from each side of the page giving it a uniform margin. All we do is sur-
round the paragraphs with the tags.
B O X
<html>
<head>
</head>
<blockquote><p>Welcome to my <b>New</b> webpage made by me. I hope

Html4newbies.com.</p><p>Learning html is really easy and seeing the
results are amazing. I only wish I would have decided to learn this a long
time ago. But it’s never to late to learn.</p></blockquote>

</body>
</html>

<html>
<head>
</head>
<blockquote><p>Welcome to my <b>New</b> webpage made by me. I hope

Html4newbies.com. </p><p>Learning html is really easy and seeing the
results are amazing. I only wish I would have decided to learn this a long
time ago. But it’s never to late to learn.</p><blockquote>
</body>
</html>

on it.
You should have two paragraphs indented on each side to look uniformed
on the page.
STEP FOUR / LESSON THREE
This step we will learn a new tag called the Italics tag <i></i>
This tag of course makes any text Italic Like this
There are more tags that do the same thing but you will learn those in time.
B O X
<html>
<head>
</head>

<blockquote><p><i>Welcome to my</i> <b>New</b> webpage made by me.

I hope you enjoy it because it’s my first. I always thought about learning
html but I never found the right learning tools to do it. Well not until I
found Html4newbies.com. </p><p>Learning html is really easy and seeing
the results are amazing. I only wish I would have decided to learn this a
long time ago. But it’s never to late to learn.</p></blockquote>
</body>
</html>
Remember you can use the comment tag when ever you need too.

<html>
<head>
</head>
<blockquote><p><i>Welcome to my </i><b>New</b> webpage made by me.

found Html4newbies.com. </p><p>Learning html is really easy and seeing
the results are amazing. I only wish I would have decided to learn this a
long time ago. But it’s never to late to learn.</p><blockquote>

</body>
</html>
on it.
Wasn’t that easy ? You should see Welcome to my in Italics
STEP FIVE / LESSON THREE
This step we will use the Font tag <font></font> All attributes go inside
the <font>
This tag has three attributes to it. Face style, size and color. Example of
the code looks like this :
<font face=”Bookman Old Style” size=”7" color=”#000FFF”>Example</font>
The above will change the way Example looks. So lets change the second
paragraph to a different color.
B O X
<html>

<head>
</head>

found Html4newbies.com</p><p><font face=”Bookman Old Style” size=”3"
color=”#000FFF”>Learning html is really easy and seeing the results are
amazing. I only wish I would have decided to learn this a long time ago.
But it’s never to late to learn.</p></font></blockquote>
</body>
</html>
Remember you can use the comment tag whenever you need to.

<html>
<head>
</head>

<blockquote><p><i>Welcome to my </i><b>New</b> webpage made by me.

found Html4newbies.com. </p><p><font face=”Bookman Old Style”
size=”3" color=”#000FFF”>Learning html is really easy and seeing the re-
sults are amazing. I only wish I would have decided to learn this a long
time ago. But it’s never to late to learn.</p></font><blockquote>
</body>
</html>
on it.
Now how did you like that color ?
You have just completed Lesson Three
Well if you’re still interested in learning let’s move on.
CONGRATULATIONS!
Lesson Four we will be adding to myfirstwebpage.html
Welcome to lesson Four

Lesson Four HTML Lessons
STEP ONE / LESSON FOUR
This step we are going to learn the Horizontal rule tag <hr>.
This tag will place a Horizontal line on your page. This tag has attributes
you can set.
<hr width=”50%” align=”center” size=”4" color=”#FF0000">
You can set the Width, you can make it be on the left or the right and the
thickness of it as well as the color.
B O X
<html>
<head>
</head>

HTML Lessons Lesson Four

</body>
</html>

<html>
<head>
</head>


</body>
</html>
on it.
Now you should see a Red line centerd in the middle below your para-
graphs
STEP TWO / LESSON FOUR
This step we are going to put an image on your page. With and Image
tag <img></img>
This tag also has atrtributes to it.
SRC = Specifies the location of your image.
WIDTH = Specifies the width of the image.( In Pixels )
HEIGHT = Specifies the height of the image. ( In Pixels )
BORDER = Specifies the border width when it is used as a hyerlink ( This is

not done with % but with pixles )

ALT = This attribute when a mouse pointer is over it gives a message you
want the person to read. Or it is usefull if they are using a non-graphical
browser.
LOWSCR = Name a optional image to load in the browser first and faster
before the larger one loads.
USEMAP = If your using a client side image map, specify what coding to
refer to.
Example below :
<img SRC=”http://www.html4newbies.com/email.gif” ALIGN=”center”

WIDTH=”170"
HEIGHT=”90" ALT=”Email me”>
B O X
<html>
<head>
</head>


<p><center><img SRC=”http://www.html4newbies.com/email.gif ”
ALIGN=”center” WIDTH=”170"
HEIGHT=”90" ALT=”Email me”></p></center>
</body>
</html>

<html>
<head>
</head>


</body>
</html>
on it.
You should see a graphic below your horizontal line..
STEP THREE / LESSON FOUR
This step we are going to create a List using the list tag <LI> and the
<UL> tag.
The <UL> tag is the opening tag to start the begining of a list.

The <LI> tag will be the tag that list each item.
Ending of course with the closing tags </UL> and </LI>
Example below :
<UL>
<LI>food</LI>
<LI>money</LI>
<LI>more food</LI>
</UL>
Will look like this below :
* food
* money
* more food
Notice the Bullets. This is an unordered list. This uses bullets.
You also have Ordered list. This uses numbers.
Using tags <OL> and <LI>
<ol>
<li>food</li>
<li>money</li>
<li>more food</li>
</ol>
1. food
2. money
3. more food

Of course you don’t need either and this is called a Definition list. Use no
bullets and no numbers
<DL>
<DD>Food
<DD>Money
<DD>More Food
</DL>
Food
Money
More Food
This can also give you a Tier list too.
<DL>
<DT>Minnesota
<DD>Food
<DD>Gifts
<DD>Jobs
<DT>Wisconsin
<DD>Cows
<DD>Milk
<DD>Packers
</DL>
Minnesota
Food
Gifts
Jobs
Wisconsin
Cows
Milk
Packers

We are going to use the Orderd List for your webpage.
But First lets make another paragraph and then make the list.
B O X
<html>
<head>
</head>


<blockquote><p align=”left”>Visit some of my favorate sites</p>
<p align=”left”><ol>
<li>Scriptjobs</li>
<li>Html4Newbies</li>
<li>Javascript</li>
</ol></p></blockquote>
</body>
</html>
Do you notice that we use some of the previous tags

<html>
<head>
</head>


<li>Scriptjobs</li>
<li>Javascript</li>
</body>
</html>
on it.
You should now have a Numberd list which later on we will add links to.

STEP FOUR / LESSON FOUR
This step we are going to take the graphic we put on your page and
add a link to it.
Using the <A> </A> tag and its attribute HREF which is the reference to
the link and the MAILTO attribute which opens up your mail server on
your computer.
Example below :
<a href=”mailto:youremail@home.com”><img src=”http://

www.html4newbies.com/email.gif” width=”170"
height=”90" alt=”email.gif (3824 bytes)”></a>
Replace youremail @ home com with your own email address
B O X
<html>
<head>
</head>


<p><center><a href=”mailto:youremail@home.com”><img src=”http://

height=”90" alt=”email.gif (3824 bytes)”></a></p></center>
<li>Scriptjobs</li>
<li>Javascript</li>
</body>
</html>

<html>
<head>

</head>


<li>Scriptjobs</li>
<li>Javascript</li>
</body>
</html>

on it.
Now when you click on your email graphic your mail program should
open up.
STEP FIVE / LESSON FOUR
This step we are going to make a text link to a website.
Using the <a></a> tags and again those tags have attributes like HREF
<a href=”http://www.scriptjobs.com”>Scriptjobs</a>
There are more attributes to this tag and we will get into that later.
B O X
<html>
<head>
</head>



<li><a href=”http://www.scriptjobs.com”>Scriptjobs</a></li>
<li><a href=”http://www.html4newbies.com”>Html4newbies</a></li>
<li><a href=”http://www.2kstop.com”>Javascripts</a></li>
</body>
</html>

<html>
<head>
</head>


<li><a href=”http://www.scriptjobs.com”>Scriptjobs</a></li>
<li><a href=”http://www.html4newbies.com”>Html4newbies</a></li>
<li><a href=”http://www.2kstop.com”>Javascripts</a></li>

HTML Lessons Lesson Five
</body>
</html>
on it.
Now you should have three links that work.
You have just Completed Lesson Four
Party time !!!!
Well you have now just completed your First Webpage. I would encour-
age you to practise with what you have been taught and make your
webpage.
If you want to get into more detail using the tags you have been taught as
well as html tables and cells, then lets move on to Lesson Five.
Welcome to Lesson Five
STEP ONE / LESSON FIVE
In Lesson Five we are going to learn about tables and Cells.
A table has three parts to it. <table><tr> and <td>
<table> This table tag tells the browser it’s a table. This also has attributes
to it.

Lesson Five HTML Lessons
<tr> TableRow defines a horizontal row cells
<td> Specifies an indiviual block or cell in a table row
Example below :
Below is a table with a border size of one. If it was 0 then you wouldn’t
actually see the frame your seeing now.
You are seeing Two rows, Four colums

CellCell Cell Cell
CellCell Cell Cell
[ Width and Height is in Pixels but can be in Percents % ]
<table border=”1" width=”296" height=”30">

<tr>
<td width=”70" height=”13">Cell</td>
</tr>
<tr>
</tr>
</table>
We will now be making a new Webpage.

B O X
<html>
<head>
<title>My First webpage using a table</title>
</head>
<BODY BGCOLOR=”#FFFFFF”>
<table>
</table>
</body>
</html>
<html>
<head>
</head>
<table>

</table>
</body>
</html>
and save it in wordpad as myfirsttable.html
on it.
If you typed it right and view it in a browser you shouldn’t see anything.
STEP TWO / LESSON FIVE
This step we are going to put a row in our table using the <tr></tr>
B O X
<html>
<head>
</head>

<table>
<tr>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<table>
<tr>
</tr>
</table>

</body>
</html>
it and save it in wordpad as myfirsttable.html
on it.
If you typed it right and view it in a browser you shouldn’t see anything.
STEP THREE / LESSON FIVE
This step we are going to give our table a Cell <td></td>
B O X
<html>
<head>
</head>
<table>

<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
Do you notice that we use some of the previous tags.
<html>
<head>
</head>
<table>
<tr>
<td>Kool Cell</td>
</tr>

</table>
</body>
</html>
on it.
If you typed it right and view it in a browser you should see the words
Kool Cell
STEP FOUR / LESSON FIVE
This step we are going to give our table a border.
<TABLE BORDER=2>
Example :
Kool Cell
<html>
<head>

</head>
<TABLE BORDER=2>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<TABLE BORDER=2>

<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
on it.
Now you should see a table with a border of 2 with the words Kool Cell in
it.
STEP FIVE / LESSON FIVE
This step we are going to give the table a width.
<TABLE BORDER=2 WIDTH=75%>

This table is One Row,One Cell with a border size of 2 and the Width of
75%
This one is 25%

B O X
<html>
<head>
</head>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
<html>
<head>

</head>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
on it.
Now you should see a long table :)
You have just Completed Lesson Five
Your First Table :)
Well you have now just completed your First Table. You should practice
and see what you can do with what you have learned so far then come
back and learn more about tables in Lesson Six

HTML Lessons Lesson Six
If you want to get into more detail using the Tables you have been taught.
Then lets move on to Lesson Six
Welcome to Lesson Six
STEP ONE / LESSON SIX
Lets take the table from Lesson Five and add Height to the Table.
We are going to use 75% for Width and 100 Pixels for Height
B O X
<html>
<head>
</head>
<TABLE BORDER=3 WIDTH=75% HEIGHT=100>
<tr>
<td>Kool Cell</td>
</tr>
</table>

Lesson Six HTML Lessons
</body>
</html>
<html>
<head>
</head>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
and save it in wordpad as myfirsttable.html

on it.
Your table just Height :) Easy right ?
STEP TWO / LESSON SIX
Now we can have the text in a cell anywhere inside the cell.
Bottom, Top, Center, Left, Right, Middle
We are going to choose Middle. So we need to modify the <TD> tag
We are also going to change the Height and Width of the table
Kool Cell
B O X
<html>
<head>
</head>
<tr>
<TD ALIGN=”left” VALIGN=”Middle”>Kool Cell</TD>

</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<tr>
</tr>
</table>
</body>
</html>

on it.
Now this is getting easy.
STEP THREE / LESSON SIX
Lets add color to the back ground of the table.
This is a tribute to the table tag.
<TABLE BORDER=3 WIDTH=25% HEIGHT=65 BGCOLOR=YELLOW>

Kool Cell
B O X
<html>
<head>
</head>
<tr>

</tr>
</table>
</body>
</html>
Do you notice that we used some of the previous tags.
<html>
<head>
</head>
<tr>
</tr>
</table>
</body>

</html>
on it.
Kool yellow backGround
STEP FOUR / LESSON SIX
Lets add Cellpadding and Cellspacing
Cellpadding is the width in Pixles between cells. Notice where the Text
starts in the Cell. If it had cellpadding of 0 it would be right next to the
border.
Example:
Cellpadding of 5 Cellpadding of 5
Notice the Difference. Below is Cellpadding

Cellspcing of 15 Cell spcing of 15
<TABLE BORDER=3 WIDTH=25% HEIGHT=65 BGCOLOR=YELLOW

CELLPADDING=5 CELLSPACING=5>
B O X
<html>

<head>
</head>

CELLPADDING=5 CELLSPACING=5>
<tr>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>


CELLPADDING=5 CELLSPACING=5><tr>
</tr>
</table>
</body>
</html>
on it.
You are getting good at this :)
STEP FIVE / LESSON SIX
We are going to add to the table tag and its attribute Rowspan and
Colspan but first Lets go over some attributes for making Tables. Try and
remember these.
Border Adding this to your table tag attribute will give you a border or no
border.
Bgcolor You can add this tag to change the background color of your table,
row, or table cells.

Align This tag helps you align your text in the table, row or cell. aligned to
the left (it’s the default). You can specify center or left, or right to change
the alignment.
Valign This tag aligns your table vertically. If you don’t change it to “top”
or “bottom” your information in your table will be aligned vertically in the
center.
Cellpadding This sets the margins inside of your table cells on all four
sides of your cell.
Cellspacing This sets the spacing between your table cells.
Bordercolor This tag sets the border color.
Rowspan Adding this creates a column that spans your rows vertically, it
can span all or some of your rows.
Colspan The colspan tag makes the data cell stretch over two or more
columns.
I color coded the table below for you to better help you understand the
layout, and how we used ROWSPAN AND COLSPAN.
<table border=”1" cellspacing=”0">

<tr>
<td bgcolor=”#993300">row 1</td>
<td bgcolor=”#FFFFFF” rowspan=”3">rows 1-3</td> ( White )
<td bgcolor=”#00FFCC”>row 1</td>
</tr>
<tr>
<td bgcolor=”#CCCCCC”>row 2</td>
<td bgcolor=”#00FF00" rowspan=”2">rows 2-3</td>
<td bgcolor=”#33FFFF”>row 2</td>
</tr>

<tr>
<td bgcolor=”#9F9FFF”>row 3</td>
<td bgcolor=”#FF00FF”>row 3</td>
</tr>
<tr>
<td bgcolor=”#FF9966" colspan=”3">Col 1</td>
t;/td>
</tr>
</table>
row 1 rows 1-3 row 1 row 1
row 2 rows 2-3 row 2
row 3 row 3
Col 1 row 4
B O X
<html>
<head>
</head> <table border=”1" cellspacing=”0">

<tr>
<td bgcolor=”#FFFFFF” rowspan=”3">rows 1-3</td>
<td bgcolor=”#00CCCC”>row 1</td>
</tr>
<tr>


</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
<html>
<head>
</head> <table border=”1" cellspacing=”0">

<tr>
<td bgcolor=”#FFFFFF” rowspan=”3">rows 1-3</td>
<td bgcolor=”#00CCCC”>row 1</td>
</tr>

<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
on it.
You see the exact table as I made above
You have just Completed Lesson Six
Now that you have made a nice colorful table
You should practice and then try some of the other tags and the Tips and
Tricks

Tips and Tricks HTML Lessons
TIPS AND TRICKS ONE
Open a web page in a new window.
To open a link within a new window, place

TARGET=”_blank” within your link code.
<A HREF=”http://www.yourdomain.com/” TARGET=”_blank”>Your
Link</a>
Open all links in a new window
To open all links within a page in a new window, place the

following code between your <HEAD> and </HEAD> tags.
<base target=”main”>
Back to the top
Colored Text Boxes

(Internet Explorer)
<INPUT type=”text” STYLE=”color: #FFFFFF; font-family: Verdana; font-

weight: bold; font-size: 12px; background-color: #72A4D2;” size=”10"
maxlength=”30">
Back to the top
Using An Image Submit Button
In this example, the table background is set to the same color as the image
background to blend together seamlessly. A table was used to align the text
input box and the image submit button.

HTML Lessons Tips and Tricks
<FORM METHOD=post ACTION=”/cgi-bin/example.cgi”>

<TABLE BORDER=”0" CELLSPACING=”0" CELLPADDING=”2"><TR><TD
BGCOLOR=”#00fff ”><INPUT type=”text” size=”10"
MAXLENGTH=”30"></TD><TD BGCOLOR=”#00fff” VALIGN=”Middle”>
<INPUT type=image name=”search” src=”images/go.gif” border=”0"></
TD></TR> </TABLE>
</FORM>
Back to the top
How To Make Your Background Image Stationary
Stationary background images remain in one place even when scrolling

through the page. Only the text will move. To create this effect, place the
code below within your <BODY> tag.
<body background =”yourimage.gif” bgproperties=”fixed”>
Back to the top
Removing A Link Underline
You can remove the underline of an individual link by adding the STYLE
tag to your link HTML.
<A HREF=”http://www.yourdomain.com” STYLE=”TEXT-DECORATION:

NONE”>Your Link</A>
Back to the top
Submit a HTML Tip or Trick to us.
Name:

Email:
Comment:
Html4Newbies
Privacy
Contact
Html Related
Coffeecup Editor
Arachnophilia Editor
Web Design Development
Graphics Related
Free Graphics
Clipart
Misc
Scripts
Promotion
Banner Exchange
Visual Basics
Great Exchange
Get NewsFeed
MAKE MONEY
NEWS
CNN Technology News

Product design, nature’s way
General: China taking on U.S. in cyber arms race
Missing girl hunt hits cyber world
Microsoft’s art collection grows up
Apple: Safari available to PC users

Church wants cash for video game

Yahoo blasts China on free speech
Relief in store for cable customers
Get The Feed
More Tips
Protect email
Email link with body
Mouse over link tip
Remove underline
Vertical Lines
No Border image
Making Tabs
Html Tips and Tricks ( Header and Footer Tip )

Have you alot of pages to your website and you hate editing each of the
headers and footers for all of them ? Well you could just edit one file and it
will update on all of your pages. Below is how you do it.
Well first we need to create a Header and a Footer. We are going to do this
by first by taking your basic design and breaking it up into 3 parts.
We will take this index.html file and split it into groups. Blue being the
Header and Red being the Main Text and Green will be the Footer.
index.html <html>
<head>
<title>Your Site Name</title>
</head>
<body text=black link=blue alink=red vlink=purple>
<!— menu at the top —>

<p align=center>
<a href=’index.html’>Home</a> | <a href=’aboutme.html’>About Me and
My Site</a> | <a href=’links.html’>Links</a>
</p>

This is the content of a page on my site.
<p align=center>Copyright 2002. All Rights Reserved</p>
</body>
</html>
After we have determined what are Header and Footer is then we will
need to Copy and Cut and Paste each into thier own files. We will call one
the header.html, footer.html and index.html
header.html <html>
<head>
<title>Your Site Name</title>
</head>
<body text=black link=blue alink=red vlink=purple>
<!— menu at the top —>

<p align=center>
<a href=’index.html’>Home</a> | <a href=’aboutme.html’>About Me and
My Site</a> | <a href=’links.html’>Links</a>
</p>
footer.html <p align=center>Copyright 2002. All Rights Reserved</p>
</body>
</html>
index.html This is the content of a page on my site.
We now have our header and footer HTML code in their own files. This
means we can include these two files at the top and bottom (with content
between) of any number of pages on our site. This is very convenient! For
example, if you wanted to change a link in your menu, you would just edit
it in header.html instead of every page of your site!

There are two common ways to include files. One way is to use Server
Side Includes (SSI). If you are going to use the SSI method, you will need
to change the extention of your html files from .html to .shtml so your web
server knows what to do with the SSI code you will be using to include
header.html and footer.html. Here is an example of inclusion using SSI.
index.shtml or anything.shtml for other pages on your site <!—#include

file=”header.html” —>
<!—#include file=”footer.html” —>
The other way to include files is using PHP. To use this method, your
files must end with .php, .php3, or .phtml. Find out what extension(s)
your web host uses then pick one. The most common is .php. Here’s some
example code to show you how you can include header.html and footer.html
in your pages.
index.php or anything.php for other pages on your site <?

include(“header.html”); ?>
<? include(“footer.html”); ?>
Html Tips and Tricks ( Meta Tag Transition Effects )

You can test these on your sites and you will see how some of those sites
make those cool effects. Now you can use Page-Exit or Page- Enter
Just Place them with the rest of your Meta Tags on your page or pages.

<meta http-equiv=”Page-Exit” content=”blendTrans(Duration=5.0)”> -

blend
<meta http-equiv=”Page-Exit”
content=”revealTrans(Duration=5.0,Transition=0)”> - box in
content=”revealTrans(Duration=5.0,Transition=1)”> - box out
content=”revealTrans(Duration=5.0,Transition=2)”> - circle in
content=”revealTrans(Duration=5.0,Transition=3)”> - circle out
content=”revealTrans(Duration=5.0,Transition=4)”> - wipe up
content=”revealTrans(Duration=5.0,Transition=5)”> - wipe down
content=”revealTrans(Duration=5.0,Transition=6)”> - wipe right
content=”revealTrans(Duration=5.0,Transition=7)”> - wipe left
content=”revealTrans(Duration=5.0,Transition=8)”> - vertical blinds
content=”revealTrans(Duration=5.0,Transition=9)”> - horizontal blinds
content=”revealTrans(Duration=5.0,Transition=10)”> - checkboard across
content=”revealTrans(Duration=5.0,Transition=11)”> - checkboard across
content=”revealTrans(Duration=5.0,Transition=12)”> - randome dissolve
content=”revealTrans(Duration=5.0,Transition=13)”> - split vertical in
content=”revealTrans(Duration=5.0,Transition=14)”> - split vertical out
content=”revealTrans(Duration=5.0,Transition=15)”> - split horizontal in

content=”revealTrans(Duration=5.0,Transition=16)”> - split horizontal out
content=”revealTrans(Duration=5.0,Transition=17)”> - strips left down
content=”revealTrans(Duration=5.0,Transition=18)”> - strips left up
content=”revealTrans(Duration=5.0,Transition=19)”> - strips right down
content=”revealTrans(Duration=5.0,Transition=20)”> - strips right up
content=”revealTrans(Duration=5.0,Transition=21)”> - random bars hori-
zontal
content=”revealTrans(Duration=5.0,Transition=22)”> - random bars verti-
cal
WHAT IS FTP
File Transfer Protocol, better known as FTP, is a procedure used to

upload and download files to and from your web server. FTP is a special
way to login to another Internet site for the purposes of retrieving and/or
sending files.
HOW TO USE FTP
In order to use FTP, you’ll need to download and install a software

program on your computer. The most widely used FTP program is WS
FTP Pro. You can find it here: http://www.wsftp.com. Also check out other
FTP Downloads here
When you first launch the FTP program, a startup screen will appear.
This screen will enable you to add your website information and allow the
program to connect with your server. You simply fill in the information
where indicated with the following information:

Profile Name - This name will be added to the selection list of profile names.
Select your profile name according to your domain. For example, if your
domain name were smiths.com, your profile name might be Smiths.
Host Name/Address - Your domain name address.

Example - www.harlandscripts.com
Host Type - The type of server in which your website is hosted. The stan-
dard is Unix.But you can probably skip it.
User ID - Your hosting User ID. Example - candidinfo.
Password - Your hosting password.
Depending on which FTP client you use, the names may be slightly differ-
ent.
Once the FTP program has connected with your server, you will see the
files on your computer in the left window and the files on your server will
be displayed in the right window.
TRANSFERRING FILES
To maneuver through your folders, simply double click on them. To

transfer your files, either double click on the file or highlight it and then
click on the transfer files arrow.
Sometimes, you will have to upload your files to a special directory,

like WWW or Public_HTML, but most providers let‘s you upload the files
to the current directory.
To select more than one file at a time, click on each file you’d like to
transfer while holding down the Ctrl key on your keyboard. Keep in mind,
all of the files you select must be uploaded in the same mode. In other
words, you could upload all of your HTML files at the same time, or all of
your images.

If all of the files you’d like to upload are all together, you can click on
the first file while holding down your Shift key and use the down arrow on
your keyboard to highlight all of your files.
Files such as text, HTML, and most scripts should be uploaded to your
server in ASCII mode. Any file that isn’t ASCII text, such as programs (EXE,
ZIP), graphics, ebooks, sounds (WAV, MID) and movies should be uploaded
to your server in Binary mode.
FTP ADVANCED COMMANDS
* File Permissions
When using scripts on your website, you will be required to set file
permissions in order for your scripts to run properly on a Unix server. The
most common setting for CGI/Perl scripts is 755. When working with
scripts, you may receive an Internal Server Error when you try to run it.
Many times, this error is caused by improperly set file
permissions.
Permissions:
* Read - 4 - r
* Write - 2 - w
* Execute - 1 - x
* None - 0 - -
- Read permissions are enabled with the number 4 or the letter r.
- Write permissions are enabled with the number 2 or the letter w.
- Execute permissions are enabled with the number 1 or the letter x.
- No permissions are enabled with the number 0 or a dash.

Each of these permissions will be set for each of the following:
o Owner
o Group
o Other
To give you a better idea of how permissions are set, below is an ex-
ample of a script that requires the permissions to be set to 755 — it breaks
down like this:
7 - Represents the permissions for the Owner (you). The owner has been
given Read, Write and Execute permissions. 4+2+1=7. This can also be writ-
ten like this: rwx
5 - Represents the permissions for the Group (individuals with access to

your server). The Group has been given Read and Execute permissions.
4+1=5. This can also be written like this: rx
5 - Represents the permissions for the Others (website visitors). The Others
have been given Read and Execute permissions. 4+1=5. This can also be
written like this: rx 755 is equal to rwxrxrx
Changing File Permissions with Your FTP program:
If you would like to set your file permissions through your FTP pro-
gram, you can do so like this:
1. Log into your server and locate the directory that contains your file.
2. Highlight the file that you would like to change permissions.
3. Place your mouse pointer over the file and right click to launch a menu.
4. Click on “chmod (UNIX) to launch the “permissions” window.
5. Set your permissions and click on OK.

In addition to setting permissions with your FTP program, most web

hosts will enable you to set permissions through your web page manage-
ment system.
FTP SOFTWARE DOWNLOAD
If you’re managing your own website, having a good FTP software

program is an absolute must. Not only will it provide you with some inde-
pendence, but it will also enable you to have complete control over your
files.
Some of the FTP software programs which we had found useful are:
FTP Downloads
For Windows
* WSFTP Download: Click Here to Download

* CuteFTP Download: Click Here to Download
* SmartFTP Download: Click Here to Download
Html Color Charts
Web Safe Color Chart
Each color below contains the hexadecimal values and the RGB (Red,
Green, Blue) Values.
Select a color and copy & paste the hexadecimal value into your HTML
document.
Example:
Hexadecimal Value - #FFFFFF RGB Color Code - R=255 G=255 B=255
#FFFFFF

R=255
G=255
B=255 #FFFFCC
R=255
G=255
B=204 #FFFF99
R=255
G=255
B=153 #FFFF66
R=255
G=255
B=102 #FFFF33
R=255
G=255
B=51 #FFFF00
R=255
G=255
B=0
#FFCCFF
R=255
G=204
B=255 #FFCCCC
R=255
G=204
B=204 #FFCC99

R=255
G=204
B=153 #FFCC66
R=255
G=204
B=102 #FFCC33
R=255
G=204
B=51 #FFCC00
R=255
G=204
B=0
#FF99FF
R=255
G=153
B=255 #FF99CC
R=255
G=153
B=204 #FF9999
R=255
G=153
B=153 #FF9966
R=255
G=153
B=102 #FF9933

R=255
G=153
B=51 #FF9900
R=255
G=153
B=0 #FF66FF
R=255
G=102
B=255 #FF66CC
R=255
G=102
B=204 #FF6699
R=255
G=102
B=153 #FF6666
R=255
G=102
B=102 #FF6633
R=255
G=102
B=51 #FF6600
R=255
G=102
B=0 #FF33FF
R=255
G=51
B=255 #FF33CC

R=255
G=51
B=204 #FF3399
R=255
G=51
B=153 #FF3366
R=255
G=51
B=102 #FF3333
R=255
G=51
B=51 #FF3300
R=255
G=51
B=0 #FF00FF
R=255
G=0
B=255 #FF00CC
R=255
G=0
B=204 #FF0099
R=255
G=0
B=153 #FF0066
R=255
G=0
B=102 #FF0033

R=255
G=0
B=51 #FF0000
R=255
G=0
B=0 #CCFFFF
R=204
G=255
B=255 #CCFFCC
R=204
G=255
B=204 #CCFF99
R=204
G=255
B=153 #CCFF66
R=204
G=255
B=102 #CCFF33
R=204
G=255
B=51 #CCFF00
R=204
G=255
B=0 #CCCCFF
R=204
G=204
B=255 #CCCCCC

R=204
G=204
B=204 #CCCC99
R=204
G=204
B=153 #CCCC66
R=204
G=204
B=102 #CCCC33
R=204
G=204
B=51 #CCCC00
R=204
G=204
B=0 #CC99FF
R=204
G=153
B=255 #CC99CC
R=204
G=153
B=204 #CC9999
R=204
G=153
B=153 #CC9966
R=204
G=153
B=102 #CC9933

R=204
G=153
B=51 #CC9900
R=204
G=153
B=0 #CC66FF
R=204
G=102
B=255 #CC66CC
R=204
G=102
B=204 #CC6699
R=204
G=102
B=153 #CC6666
R=204
G=102
B=102 #CC6633
R=204
G=102
B=51 #CC6600
R=204
G=102
B=0 #CC33FF
R=204
G=51
B=255 #CC33CC

R=204
G=51
B=204 #CC3399
R=204
G=51
B=153 #CC3366
R=204
G=51
B=102 #CC3333
R=204
G=51
B=51 #CC3300
R=204
G=51
B=0 #CC00FF
R=204
G=0
B=255 #CC00CC
R=204
G=0
B=204 #CC0099
R=204
G=0
B=153 #CC0066
R=204
G=0
B=102 #CC0033

R=204
G=0
B=51 #CC0000
R=204
G=0
B=0 #99FFFF
R=153
G=255
B=255 #99FFCC
R=153
G=255
B=204 #99FF99
R=153
G=255
B=153 #99FF66
R=153
G=255
B=102 #99FF33
R=153
G=255
B=51 #99FF00
R=153
G=255
B=0 #99CCFF
R=153
G=204
B=255 #99CCCC

R=153
G=204
B=204 #99CC99
R=153
G=204
B=153 #99CC66
R=153
G=204
B=102 #99CC33
R=153
G=204
B=51 #99CC00
R=153
G=204
B=0 #9999FF
R=153
G=153
B=255 #9999CC
R=153
G=153
B=204 #999999
R=153
G=153
B=153 #999966
R=153
G=153
B=102 #999933

R=153
G=153
B=51 #999900
R=153
G=153
B=0 #9966FF
R=153
G=102
B=255 #9966CC
R=153
G=102
B=204 #996699
R=153
G=102
B=153 #996666
R=153
G=102
B=102 #996633
R=153
G=102
B=51 #996600
R=153
G=102
B=0 #9933FF
R=153
G=51
B=255 #9933CC

R=153
G=51
B=204 #993399
R=153
G=51
B=153 #993366
R=153
G=51
B=102 #993333
R=153
G=51
B=51 #993300
R=153
G=51
B=0 #9900FF
R=153
G=0
B=255 #9900CC
R=153
G=0
B=204 #990099
R=153
G=0
B=153 #990066
R=153
G=0
B=102 #990033

R=153
G=0
B=51 #990000
R=153
G=0
B=0 #66FFFF
R=102
G=255
B=255 #66FFCC
R=102
G=255
B=204 #66FF99
R=102
G=255
B=153 #66FF66
R=102
G=255
B=102 #66FF33
R=102
G=255
B=51 #66FF00
R=102
G=255
B=0 #66CCFF
R=102
G=204
B=255 #66CCCC

R=102
G=204
B=204 #66CC99
R=102
G=204
B=153 #66CC66
R=102
G=204
B=102 #66CC33
R=102
G=204
B=51 #66CC00
R=102
G=204
B=0 #6699FF
R=102
G=153
B=255 #6699CC
R=102
G=153
B=204 #669999
R=102
G=153
B=153 #669966
R=102
G=153
B=102 #669933

R=102
G=153
B=51 #669900
R=102
G=153
B=0 #6666FF
R=102
G=102
B=255 #6666CC
R=102
G=102
B=204 #666699
R=102
G=102
B=153 #666666
R=102
G=102
B=102 #666633
R=102
G=102
B=51 #666600
R=102
G=102
B=0 #6633FF
R=102
G=51
B=255 #6633CC

R=102
G=51
B=204 #663399
R=102
G=51
B=153 #663366
R=102
G=51
B=102 #663333
R=102
G=51
B=51 #663300
R=102
G=51
B=0 #6600FF
R=102
G=0
B=255 #6600CC
R=102
G=0
B=204 #660099
R=102
G=0
B=153 #660066
R=102
G=0
B=102 #660033

R=102
G=0
B=51 #660000
R=102
G=0
B=0 #33FFFF
R=51
G=255
B=255 #33FFCC
R=51
G=255
B=204 #33FF99
R=51
G=255
B=153 #33FF66
R=51
G=255
B=102 #33FF33
R=51
G=255
B=51 #33FF00
R=51
G=255
B=0 #33CCFF
R=51
G=204
B=255 #33CCCC

R=51
G=204
B=204 #33CC99
R=51
G=204
B=153 #33CC66
R=51
G=204
B=102 #33CC33
R=51
G=204
B=51 #33CC00
R=51
G=204
B=0 #3399FF
R=51
G=153
B=255 #3399CC
R=51
G=153
B=204 #339999
R=51
G=153
B=153 #339966
R=51
G=153
B=102 #339933

R=51
G=153
B=51 #339900
R=51
G=153
B=0 #3366FF
R=51
G=102
B=255 #3366CC
R=51
G=102
B=204 #336699
R=51
G=102
B=153 #336666
R=51
G=102
B=102 #336633
R=51
G=102
B=51 #336600
R=51
G=102
B=0 #3333FF
R=51
G=51
B=255 #3333CC

R=51
G=51
B=204 #333399
R=51
G=51
B=153 #333366
R=51
G=51
B=102 #333333
R=51
G=51
B=51 #333300
R=51
G=51
B=0 #3300FF
R=51
G=0
B=255 #3300CC
R=51
G=0
B=204 #330099
R=51
G=0
B=153 #330066
R=51
G=0
B=102 #330033

R=51
G=0
B=51 #330000
R=51
G=0
B=0 #00FFFF
R=0
G=255
B=255 #00FFCC
R=0
G=255
B=204 #00FF99
R=0
G=255
B=153 #00FF66
R=0
G=255
B=102 #00FF33
R=0
G=255
B=51 #00FF00
R=0
G=255
B=0 #00CCFF
R=0
G=204
B=255 #00CCCC

R=0
G=204
B=204 #00CC99
R=0
G=204
B=153 #00CC66
R=0
G=204
B=102 #00CC33
R=0
G=204
B=51 #00CC00
R=0
G=204
B=0 #0099FF
R=0
G=153
B=255 #0099CC
R=0
G=153
B=204 #009999
R=0
G=153
B=153 #009966
R=0
G=153
B=102 #009933

R=0
G=153
B=51 #009900
R=0
G=153
B=0 #0066FF
R=0
G=102
B=255 #0066CC
R=0
G=102
B=204 #006699
R=0
G=102
B=153 #006666
R=0
G=102
B=102 #006633
R=0
G=102
B=51 #006600
R=0
G=102
B=0 #0033FF
R=0
G=51
B=255 #0033CC

R=0
G=51
B=204 #003399
R=0
G=51
B=153 #003366
R=0
G=51
B=102 #003333
R=0
G=51
B=51 #003300
R=0
G=51
B=0 #0000FF
R=0
G=0
B=255 #0000CC
R=0
G=0
B=204 #000099
R=0
G=0
B=153 #000066
R=0
G=0
B=102 #000033

R=0
G=0
B=51 #000000
R=0
G=0
B=0
====================================================
HTML SYMBLES
© © ! ! _ _ • Û

Û
® ® " “ ` ` • Ü
Ü
# ‘ a a Ÿ Ý
Ý
" “ $ $ b b Þ
Þ
& & % % c c ¡ ¡ ß
ß
< < & & d d ¢ ¢ à à
> > ' ‘ e e £ £ ã
ã
À À ( ( f f ¤ £ â
â
Á Á ) ) g g ¥ ¥ ã
ã
Â Â * * h h ¦ ¦ ä
ä
Ã Ã + + i i § § å
å
Ä Ä , , j j ¨ ¨ æ
æ

Å Å - - k k © © ç

ç
Æ Æ . . l l ª ª è
è
Ç Ç / / m m « « é
é
È È 0 0 n n ¬ ¬ ê
ê
É É 1 1 o o - ë
ë
Ê Ê 2 2 p p ® ® ì
ì
ËË 3 3 q q ¯ ¯ í
í
Ì Ì 4 4 r r ° ° î
î
Í Í 5 5 s s ± ± ï
ï
Î Î 6 6 t t ² ² ð
ð
Ï Ï 7 7 u u ³ ³ ñ
ñ
Ð Ð 8 8 v v ´ ´ ò
ò
Ñ Ñ 9 9 w w µ µ ó
ó
Õ Õ : : x x ¶ ¶ ô
ô
Ö Ö ; ; y y · · õ
õ
Ø Ø < < z z ¸ ¸ ö
ö
Ù Ù = = { { ¹ ¹ ÷
÷
Ú Ú > > | | º º ø
ø

Û Û ? ? } } » » ù

ù
Ü Ü @ @ ~ ~ ¼ ¼ ú
ú
Ý Ý A A ? ½ ½ û
û
Þ Þ B B • ¾ ¾ &#252
ü
ß ß C C • ¿ ¿ ý
ý
à à D D ‚ À À þ
þ
á á E E ƒ Á Á ÿ
ÿ
å å F F „ Â Â
æ æ G G … Ã Ã
ç ç H H † Ä Ä
è è I I ‡ Å Å
é é J J ˆ Æ Æ
ê ê K K ‰ Ç Ç
ë ë L L Š È È
ì ì M M ‹ É É
í í N N Œ Ê ?
î î O O • Ë Ë
ï ï P P • Ì Ì

ð ð Q Q • Í Í
ñ ñ R R • Î Î
ò ò S S ‘ Ï Ï
ó ó T T ’ Ð Ð
ô ô U U “ Ñ Ñ
õ õ V V “ Ò Ò
ö ö W W • Ó Ó
ø ø X X – Ô Ô
ù ù Y Y — Õ Õ
ú ú Z Z ˜ Ö Ö
û û [ [ ™ × ×
ý ý \ \ š Ø Ø
þþ ] ] › Ù Ù
ÿ ÿ ^ ^ œ Ú Ú
HTML TAGS
Anchor
Address
Applet
Area of Image Map

Bold
Base
Basefont
Big
Blink
BlockQuote
Body
Break
Caption
Anchor
Anchor Center
Cite
Code
Comment
Directory List
Document
Definition List
Definition
Emphasis
Embed
Font
Form
Frame
Frameset
Head
Heading
Horizontal Rule
Html
Italics
Ilayer
Input variables
Isindex
Keyboard
Keygen

Layer
List Item
Link
Map
Menu List
Meta
MultiColumn
No Line Break
No Embed
No Frames
NoLayer
NoScript
Object
Ordered List
Option
Paragraph
Parameter
Plain Text
Preformatted
Strikethrough
Script
Selection List
Server
Small
Spacer
Span
Strike
Strong
Style
Subscript
Superscript
Table
Table Data
TextArea

Table Head
Title
Table Row
Typewrite
Underlined
Unordered List
Variable
Word Break
HTML FILE SIZE
Bit - The smallest unit in computing. It can have a value of 1 or 0. You’d be

hard pressed to find a file size listed in bits.
Byte - A (still small) unit of information made up of 8 bits.
Kilobyte (KB) - A unit of approximately 1000 bytes (1024 to be exact). Most

download sites use kilobytes when they give file sizes.
Megabyte (MB) - A unit of approximately one million bytes (1,024 KB).
Gigabyte (GB) - Approximately 1 billion bytes (1024 MB). Most hard drive
sizes are listed in gigabytes.
OK, now for a little practical application.
A 3 1/2" floppy drive holds 1.44 Megabytes (1,474 KB).
A CD Rom holds 650 Megabytes (though most programs you get don’t
utilize the whole 650). This would be around 450 of those 3.5 floppies.
A 20 Gig hard drive will hold the same amount of info as 31 CD ROMs or
14,222 of the 3.5 floppy disks.

It takes between 4-10 minutes to download a one megabyte (1024 KB) file
using the average dial up interent connection.
A typical page of text is around 4KB.
To see the size of a given file, just right-click it (in Explorer or My Com-
puter) and select Properties from the resulting menu.
HTML IMAGE TYPES
JPEGs from your GIFs
There are basically two ways of saving images, lossy or lossless
COMMON FORMATS
JPEG - The most common image formats. It’s primarily used for photo-
graphs. It is a lossy type of format, but most people can’t really see the
difference. You can adjust the amount of compression when saving a jpeg
image, so you do have some control over the final output quality. JPEGs
are extremely popular since they compress into a small file size and retain
excellent image quality.
Keep in mind that the more you compress a JPEG, the more “pixely” it will
tend to look. For the best results, save your JPEGs at the “medium” or
“High” setting (your imaging software should bring up this option when
you go to save as a JPEG). I really can’t see any image degradation in most
pictures saved at the medium setting.
GIF - Another popular format, especially on the web. It’s a lossless format
that’s ideal for graphics. GIFs can be either static or animated. If you’ve
ever seen a graphic on a web page that was animated, you’ve seen one of
these animated gifs.

Most of the time GIFs are used for non-photographic type images. But-
tons, borders, stuff like that.
BMP - This is the standard Windows image format. It’s lossless and works
well for pictures or graphics. It’s an uncompressed file format, so it takes
up lots of disk space. It’s also the standard format for Windows wallpaper.
TIFF - Most people’s Favorite. It’s a lossless format that can use file com-
pression (called LZW compression). It won’t result in as small a file as a
jpeg (which is why it’s not used on the web), but you do retain all image
quality. When compressed, the file is usually about half the size of the
original file.
You can save photos in this format. And then convert them to other for-
mats for screen savers, wallpaper, or web images
HTML ERRORS AND WHAT THEY MEAN
It happens to all of us. We’re surfing along, and up comes an error

(usually 404). What do all those error codes mean? Here’s a quick run-
down of the most common.
Error numbers and what they mean
400 - Bad Request - You probably typed in a URL wrong, the server has no
clue what you’re looking for, or you aren’t allowed to have access. Usually,
it’s a matter of the URL being typing in wrong. Maybe you mixed upper
and lowercase letters or something.
401- Unauthorized Request - you tried to get to something on the web server
you’re not allowed to play with. In other words, NOT ALLOWED.
403 - Forbidden - You can’t access the page. You may not have access (it
may require a password), or it may be blocked from your domain.

404 - Not Found - The page you were trying to look at was not found on the
server. This is probably the most common error you’ll come across. What
has probably happened is that the web page you were going to has been
removed or re-named, or just not there. Try scaling down the URL. For
example, if it’s:
www.html4newbies.com/errors/nopage.htm
you may want to try:
www.html4newbies.com/errors
or
www.html4newbies.com
Keep going backwards in the URL and you’ll usually come up with the site
you’re after. Then you can look for the lost page from there.
Another possibility is that your Internet connection has gone dead. Try re-
logging on.
500 - Internal error - Usually caused by a CGI error. You fill out a form, but
the script used to process it is not working properly.
503 - Service Unavailable - The server may be overloaded, down, or have

other similar problems. Try later.
Those are the main ones. You may run across one that isn’t listed above on
a rare occasion, just know that most of the time, it’s not your computer
that’s the problem, it’s their server.
Hope this helps.

FORMS
Forms Tutorial
Learning how to make forms for your website is really easy and can
get once you have learned the basics you can really make some usefull
forms.
First thing to remember are these two tags.
<form action=”mailto:webmaster@html4newbies.com” method=”post”

enctype=”text/plain”>
and
</form>
Everything for your form goes between those two tags.
The form action will be where the information will be sent and the method
for how it will be sent is POST. You could use Get but just about all the time
you use POST. Difference is how the information from your form to the
server is sent.
You can use alot of elements for your form and we will use alot of them to
make one form as an example for you to learn and you can make one for
yourself and try it.
Name
This line of code made that above.
<p>Name <input TYPE=”text” Size=”40" Name=”user-name”> </p>

Whats your favorate site ?
Scriptjobs html4newbies 2kstop
These lines of code made that above.
<p>Whats your favorate site ?</p>
<p><input TYPE=”checkbox” Name=”checkbox-1" value=”ON”>Scriptjobs

<input TYPE=”checkbox”
Name=”checkbox-2" value=”ON”>html4newbies <input TYPE=”checkbox”

Name=”checkbox-3"
value=”ON”>2kstop </p>
Whats your Gender ?
Male Female Still Confused All three
<p>Whats your Gender ?</p>
<p><input type=”radio” Name=”sex” Value=”M”>Male <input

type=”radio” Name=”sex” Value=”F”>Female
<input type=”radio” Name=”sex” Value=”A”>Still Confused <input

type=”radio” Name=”sex”
Value=”A”>All three </p>
Whats your favorite Ice Cream ?

<p>Whats your favorite Ice Cream ?</p>
<p><select Name=”Menu” size=”1">
<option> Chocolate </option>
<option> Vanilla </option>
<option> Strawberry </option>
<option> None of the above </option>
</select> </p>
What is your favorite Holiday ?
<p>What is your favorite Holiday ?</p>
<p><select Name=”Menu” Size=”3">
<option> Easter </option>
<option> Thanksgiving </option>
<option> Christmas </option>
<option> Newyear </option>
</select> </p>

Describe your Computer !
<p>Describe your Computer !</p>
<p><TEXTAREA NAME=”comments” ROWS=4 COLS=30></TEXTAREA>
</p>
And of course you will need some buttons for submitting the form and
resetting the form.
<p>And of course you will need some buttons for submitting the form and
resetting the
form.</p>
<p><input Type=”submit” Value=”Submit Form”> <input Type=”reset”

Value=”Reset Form”></p>
Now lets use all of those in a form. This form will use your email program
to send the form to Us.
Name
Whats your favorite site ?
Scriptjobs html4newbies 2kstop
Whats your Gender ?

Male Female Still Confused All three
Whats your favorite Ice Cream ?
What is your favorite Holiday ?
Describe your Computer !
These lines of code made that form above.
<form action=”mailto:webmaster@html4newbies.com” method=”post”

enctype=”text/plain”>
<p><strong>Name</strong> <input TYPE=”text” Size=”40" Name=”user-

name”> </p>
<p><strong>Whats your favorite site ?</strong></p>
<p><input TYPE=”checkbox” Name=”checkbox-1" value=”ON”>Scriptjobs

<input TYPE=”checkbox”
Name=”checkbox-2" value=”ON”>html4newbies <input TYPE=”checkbox”

Name=”checkbox-3"
value=”ON”>2kstop </p>
<p><strong>Whats your Gender ?</strong></p>
<p><input type=”radio” Name=”sex” Value=”M”>Male <input

type=”radio” Name=”sex” Value=”F”>Female
<input type=”radio” Name=”sex” Value=”A”>Still Confused <input

type=”radio” Name=”sex”

Value=”A”>All three </p>
<p><strong>Whats your favorite Ice Cream ?</strong></p>
<p><select Name=”Menu” size=”1">
<option> Chocolate </option>
<option> Vanilla </option>
<option> Strawberry </option>
<option> None of the above </option>
</select> </p>
<p><strong>What is your favorite Holiday ?</strong></p>
<p><select Name=”Menu” Size=”3">
<option> Easter </option>
<option> Thanksgiving </option>
<option> Christmas </option>
<option> Newyear </option>
</select> </p>
<p><strong>Describe your Computer !</strong></p>
<p><textarea NAME=”comments” ROWS=”4" COLS=”30"></textarea> </

p>

<p> </p>
<p><input Type=”submit” Value=”Submit Form”> <input Type=”reset”

Value=”Reset Form”></p>
</form>
LINK TO US
<a href=”http://www.html4newbies.com”>
<img src=”http://www.html4newbies.com/468x60.gif” alt=”Learn html to-
day”>
</a>
<img src=”http://www.html4newbies.com/468x60x2.gif” alt=”Learn html
today”>
</a>
<img src=”http://www.html4newbies.com/html2.gif” alt=”Learn html to-
day”>
</a>
FOR GUESTBOOK (TAKEN FROM OTHER SITE)
<form action=/cgi-bin/guest method=post name=fhguest>

<table border=0 cellpadding=2 cellspacing=0>
<tr><td align=right>Name:</td><td><input type=text size=40
name=guest_name value=’’ maxlength=50></td></tr>
<tr><td align=right>Email:</td><td><input type=text size=40
name=guest_email value=’’ maxlength=100></td></tr>
<tr><td align=right>HomePage:</td><td><input type=text size=40
name=guest_URL value=’http://’ maxlength=100></td></tr>

<tr><td align=right>Where are<br>you from:</td><td><input type=text

size=40 name=guest_address value=’’ maxlength=100></td></tr>
<tr><td valign=top align=right>Comments:</td><td><textarea
name=guest_comments rows=4 cols=40 wrap=virtual></textarea></td></tr>
<tr><td align=right>ex:Favorite Quote</td><td><input type=text size=40
name=guest_opt2 value=’’ maxlength=100></td></tr>
<tr><td align=right> </td><td><input type=text size=40 name=guest_opt3
value=’’ maxlength=100></td></tr>
<tr><td colspan=2 align=center>Type this 4 to 6 character security code <img
name=auth_img src=’’> into this box <input type=hidden name=auth_image
value=’’ ><input type=text size=4 name=auth_code><br>
(This code prevents automated programs from adding entries to the
guestbook.)</td></tr>
<tr><td> </td><td><input type=submit value=’Submit My
Information’><input type=reset value=Clear><input type=’button’
value=’Home Page’ onClick=location.href=’http://
alphaomegaseniars.biz.ly’></td></tr>
</table></form>
<SCRIPT>function setAuthCode() {
c = new Array(8);
for(i=0;i<8;i++){c[i]=Math.round(Math.random()*26)+65}
authString = String.fromCharCode(c[0],c[1],c[2],c[3],c[4],c[5],c[6],c[7]);
document.fhguest.auth_image.value = authString+”.gif”;
document.auth_img.src = “/cgi-bin/authimage/”+authString+”.gif”;
} setAuthCode();</SCRIPT>

HTML Lessons
8888888888888888888888888888888888888888888888
8888888888888888888888888888888888888888888888
88 _________________________________________ 88
88 _____##########2_________________________ 88
88 ___2##############_______________________ 88
88 ___################______________________ 88
88 __##################_________=2##2_______ 88
88 ___##################_____2##########_____ 88
88 ___##################___2#############____ 88
88 ____#################2_###############2___ 88
88 _____#################################2___ 88
88 _______###############################___ 88
88 ________#############################=___ 88
88 _________=##########################_____ 88
88 ___________########################______ 88
88 ____________2####################=_______ 88
88 _____________2##################_________ 88
88 ______________=###############___________ 88
88 ________________#############____________ 88
88 _________________##########______________ 88
88 _________________=#######2_______________ 88
88 __________________######_________________ 88
88 ___________________####__________________ 88
88 ___________________###___________________ 88
88 ____________________#____________________ 88
88 _________________________________________ 88
8888888888888888888888888888888888888888888888
8888888888888888888888888888888888888888888888

HTML Lessons
LOVE
Faith, hope, and love will remain

And love is the greatest of all
But love not the world until end
For if you do you’ll surely fall.
Love is patient, love is generous
Love covers a multitude of sins
Love is not puffed up nor is it envious
Love hopes all things and love never ends.
“If I have all the faith so as to move mountains
But I don’t have love I am nothing.”
Apostle Paul said in 1 Corinthians thirteen
To teach love to all human beings.
God is love and we ought to love one another
As we can’t love God if we don’t love our brother.

HTML Lessons
WHOLE DUTY OF MAN
In the beginning the earth was invisible and unequipped

Darkness above the abyss and above the water God’s Spirit
Then in six days everything God created
On the seventh day from all His works He rested.
God made man according to His own image
Male and female He commanded and blessed
“Grow and multiply, lord over the earth including fishes
But eat not from the fruit of the tree of knowledge.”
For lust of flesh and eyes then pride of life they violated
And sin entered that from God men are separated
As time goes by men grow more corrupted
Living wantonly not knowing that they are dead.
Solomon in his grandeur did what he wanted
But Vanity! Vanity! All is vanity! he shouted
For the whole duty of man in 12:13 Ecclesiastes
“Fear God and keep His commandments” now and always.

HTML Lessons
PERFECT PEACE
When I wake up in the morning I hear noise of everything

People working, children playing, radio and TV broadcasting
Day in and day out the same things keep on occurring
Noise of everything making my head almost always aching.
I’ll soon be sixty and I have been exposed a great lot
I have sadly experienced various adversities in life
Fervently seeking and fighting for what I believe is right
But alone in despair I failed bitterly in my worldly strife.
Then God called me and I became a soldier of Christ
I preach His Word thru the books I ardently write
Thru the internet I vouch proclaiming His might
In Him I certainly found what is pure and truly right.
“I leave to you peace, I give to you My peace.
Let not the heart of you be agitated nor let it be afraid.
I Myself give to you not as the world gives.”
In John 14:27, that’s what our Lord Iesous Christ said.
As I lay down late at night to refresh my body and rest
Pondering how people yearning can have the most-sought peace
Serving God to help others is sure and undoubtedly the best
In Him I find myself being cradled living in perfect peace.

HTML Lessons

HTML Lessons For WEB Pages

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML Lessons For WEB Pages

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML Lessons for

"You yourselves be perfect as the Heavenly Father of you is perfect"

Hyper text Markup Language, or HTML, is the language that makes

HTML NEWBIE LESSON ONE

Welcome to Lesson One

STEP ONE / LESSON ONE

COMPILED BY ARSENIA R. JOAQUIN 1

In the box below type <!— My first webpage —>

Should look like this:

Remember where you saved it ( Desktop is a good place for it ).

STEP TWO / LESSON ONE

This is one of the Basic HTML Tags.

2 COMPILED BY ARSENIA R. JOAQUIN

In the box below type

<!— My first webpage —>

Should look like this:

Remember where you saved it ( Desktop is a good place for it ).

COMPILED BY ARSENIA R. JOAQUIN 3

STEP THREE / LESSON ONE

This is one of the basic HTML tags.

In the box below type

<!— My first webpage —>

Should look like this:

4 COMPILED BY ARSENIA R. JOAQUIN

Remember where you saved it ( Desktop is a good place for it ).

STEP FOUR / LESSON ONE

It goes below the <head> tag.

In the box below type

<!— My first webpage —>

COMPILED BY ARSENIA R. JOAQUIN 5

Should look like this:

Remember where you saved it ( Desktop is a good place for it ).

STEP FIVE / LESSON ONE

6 COMPILED BY ARSENIA R. JOAQUIN

Everything between these two tags will be shown on your webpage.

In the box below type

<!— My first webpage —>

Should look like this:

COMPILED BY ARSENIA R. JOAQUIN 7

Remember where you saved it ( Desktop is a good place for it ).

You have just Completed Lesson One

Lesson Two we will be adding to myfirstwebpage.html

Welcome to Lesson Two

STEP ONE / LESSON TWO

This will show on top of your browser in the title bar.

In the box below type

8 COMPILED BY ARSENIA R. JOAQUIN

<!— My first webpage —>

<title>My First Webpage</title>

Should look like this:

<title>My First Webpage</title>

COMPILED BY ARSENIA R. JOAQUIN 9

Remember where you saved it ( Desktop is a good place for it ).

STEP TWO / LESSON TWO

In the box below type

<!— My first webpage —>

<title>My First Webpage</title>

10 COMPILED BY ARSENIA R. JOAQUIN

<h1>My First webpage</h1>

Should look like this:

<title>My First Webpage</title>

<h1>My first webpage</h1>