Professional Documents
Culture Documents
HTML Lessons For WEB Pages
HTML Lessons For WEB Pages
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
326 pages - http://www.lulu.com/content/704518
THE WILL New Testament (Greek to English) - Paperback
715 pages - http://www.lulu.com/content/382676
THE WILL New Testament (Greek to English) - Hardcover
800 pages - http://www.lulu.com/content/303041
GREEK-ENGLISH (Grammar & Vocabulary) - Paperback
357 pages - http://www.lulu.com/content/384037
WORDS in THE WILL New Testament - Paperback
662 pages - http://www.lulu.com/content/351126
WORDS in THE WILL New Testament - Hardcover
719 pages - http://www.lulu.com/content/317725
THE WILL New Testament (Greek-English) SE - Hardcover
729 pages - http://www.lulu.com/content/320258
THE WILL New Testament (Greek-English) SE - Paperback
729 pages - http://www.lulu.com/content/343492
ELEMENTS of SALVATION - Paperback
182 pages - http://www.lulu.com/content/101276
The Right Way - Paperback
346 pages - http://www.lulu.com/content/107621
GOD - Paperback
215 pages - http://www.lulu.com/content/109525
ORIGIN - Paperback
229 pages - http://www.lulu.com/content/121236
TRANSFER into PERFECTION - Paperback
156 pages - http://www.lulu.com/content/122842
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).
INTRODUCTION
Show your note today Whats your scoop Scripts for making
money Html tips Have you Flipped
html Tutorial
html Tips
Learn html
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.
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 )
B O X
Highlight it by clicking the highlight button and then right click and
copy and save it in wordpad as myfirstwebpage.html
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.
In step two you are going to learn the <html> </html> Tags
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.
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
Once you have saved it, I want you to go to your desktop and double click
on it.
If you dont see the Comment or the html tags that you typed then you have
done it right.
This step we are going to learn the Head tag. <head> </head>
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>
Remember you can use the comment tag when ever you need to.
<html>
<head>
</head>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
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 or the html tags or the head tags that you
typed then you have done it right.
This step we are going to learn the Title tag <title> </title>
This tag places the name of your webpage in the title bar.
B O X
<html>
<head>
<title></title>
</head>
</html>
Remember you can use the comment tag when ever you need to.
<html>
<head>
<title></title>
</head>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
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 or the html tag, title or the head tags that you
typed then you have done it right.
This step we are going to learn the body tag <body> </body>
<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>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
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 or the html, title.body or the head tags that
you typed then you have done it right.
You have just learned the very Basic of every webpage. You will need
those tags on every page you design.
CONGRATULATIONS!
This step we are going to add a title to the title tag <title></title>
B O X
<html>
<head>
</head>
<body>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
You should see a blank page with the title in the title bar.
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>
</body>
</html>
Remember you can use the comment tag when ever you need to.
<html>
<head>
</head>
<body>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
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>
</body>
</html>
Remember you can use the comment tag when ever you need to.
<html>
<head>
</head>
<body>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
The new <body> tag will look like this <BODY BGCOLOR=”#D5D5FF”>
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Remember you can use the comment tag when ever you need to.
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
The <p> starts a begining of a new paragraph with a line break and the </
p> ends the paragraph. Simple huh !
B O X
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Remember you can use the comment tag when ever you need to.
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
CONGRATULATIONS!
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>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
We just centered your paragraph and made the word New in bold
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>
<BODY BGCOLOR=”#D5D5FF”>
<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>
Remember you can use the comment tag when ever you need to.
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
<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>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
Now you have two pargraphs with a space between the two..
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>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Remember you can use the comment tag when ever you need to.
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
You should have two paragraphs indented on each side to look uniformed
on the page.
This step we will learn a new tag called the Italics tag <i></i>
There are more tags that do the same thing but you will learn those in time.
B O X
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Remember you can use the comment tag when ever you need too.
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
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 :
The above will change the way Example looks. So lets change the second
paragraph to a different color.
B O X
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Remember you can use the comment tag whenever you need to.
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
CONGRATULATIONS!
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.
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>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
Now you should see a Red line centerd in the middle below your para-
graphs
This step we are going to put an image on your page. With and Image
tag <img></img>
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 :
B O X
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
<p><center><img SRC=”http://www.html4newbies.com/email.gif ”
ALIGN=”center” WIDTH=”170"
HEIGHT=”90" ALT=”Email me”></p></center>
</body>
</html>
Remember you can use the comment tag whenever you need to.
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
<p><center><img SRC=”http://www.html4newbies.com/email.gif ”
ALIGN=”center” WIDTH=”170"
HEIGHT=”90" ALT=”Email me”></p></center>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
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.
Example below :
<UL>
<LI>food</LI>
<LI>money</LI>
<LI>more food</LI>
</UL>
* food
* money
* more food
<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
<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
But First lets make another paragraph and then make the list.
B O X
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
<p><center><img SRC=”http://www.html4newbies.com/email.gif ”
ALIGN=”center” WIDTH=”170"
HEIGHT=”90" ALT=”Email me”></p></center>
<p align=”left”><ol>
<li>Scriptjobs</li>
<li>Html4Newbies</li>
<li>Javascript</li>
</ol></p></blockquote>
</body>
</html>
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
<p><center><img SRC=”http://www.html4newbies.com/email.gif ”
ALIGN=”center” WIDTH=”170"
HEIGHT=”90" ALT=”Email me”></p></center>
<p align=”left”><ol>
<li>Scriptjobs</li>
<li>Html4Newbies</li>
<li>Javascript</li>
</ol></p></blockquote>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
You should now have a Numberd list which later on we will add links to.
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 :
B O X
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
<p align=”left”><ol>
<li>Scriptjobs</li>
<li>Html4Newbies</li>
<li>Javascript</li>
</ol></p></blockquote>
</body>
</html>
Remember you can use the comment tag whenever you need to.
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
<p align=”left”><ol>
<li>Scriptjobs</li>
<li>Html4Newbies</li>
<li>Javascript</li>
</ol></p></blockquote>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
Now when you click on your email graphic your mail program should
open up.
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>
<BODY BGCOLOR=”#D5D5FF”>
<p align=”left”><ol>
<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>
</ol></p></blockquote>
</body>
</html>
Remember you can use the comment tag whenever you need to.
<html>
<head>
</head>
<BODY BGCOLOR=”#D5D5FF”>
<p align=”left”><ol>
<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>
</ol></p></blockquote>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirstwebpage.html
Once you have saved it, I want you to go to your desktop and double click
on it.
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.
<table> This table tag tells the browser it’s a table. This also has attributes
to it.
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.
B O X
<html>
<head>
</head>
<BODY BGCOLOR=”#FFFFFF”>
<table>
</table>
</body>
</html>
<html>
<head>
</head>
<BODY BGCOLOR=”#FFFFFF”>
<table>
</table>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
and save it in wordpad as myfirsttable.html
Once you have saved it, I want you to go to your desktop and double click
on it.
If you typed it right and view it in a browser you shouldn’t see anything.
This step we are going to put a row in our table using the <tr></tr>
B O X
<html>
<head>
</head>
<BODY BGCOLOR=”#FFFFFF”>
<table>
<tr>
</tr>
</table>
</body>
</html>
Remember you can use the comment tag whenever you need to.
<html>
<head>
</head>
<BODY BGCOLOR=”#FFFFFF”>
<table>
<tr>
</tr>
</table>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirsttable.html
Once you have saved it, I want you to go to your desktop and double click
on it.
If you typed it right and view it in a browser you shouldn’t see anything.
B O X
<html>
<head>
</head>
<BODY BGCOLOR=”#FFFFFF”>
<table>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<BODY BGCOLOR=”#FFFFFF”>
<table>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirsttable.html
Once you have saved it, I want you to go to your desktop and double click
on it.
If you typed it right and view it in a browser you should see the words
Kool Cell
<TABLE BORDER=2>
Example :
Kool Cell
<html>
<head>
</head>
<BODY BGCOLOR=”#FFFFFF”>
<TABLE BORDER=2>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
Remember you can use the comment tag whenever you need to.
<html>
<head>
</head>
<BODY BGCOLOR=”#FFFFFF”>
<TABLE BORDER=2>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirsttable.html
Once you have saved it, I want you to go to your desktop and double click
on it.
Now you should see a table with a border of 2 with the words Kool Cell in
it.
B O X
<html>
<head>
</head>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
Remember you can use the comment tag whenever you need to.
<html>
<head>
</head>
<BODY BGCOLOR=”#FFFFFF”>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirsttable.html
Once you have saved it, I want you to go to your desktop and double click
on it.
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
If you want to get into more detail using the Tables you have been taught.
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>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<tr>
<td>Kool Cell</td>
</tr>
</table>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
and save it in wordpad as myfirsttable.html
Once you have saved it, I want you to go to your desktop and double click
on it.
Now we can have the text in a cell anywhere inside the cell.
We are also going to change the Height and Width of the table
Kool Cell
B O X
<html>
<head>
</head>
<tr>
</tr>
</table>
</body>
</html>
Remember you can use the comment tag whenever you need to.
<html>
<head>
</head>
<tr>
</tr>
</table>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirsttable.html
Once you have saved it, I want you to go to your desktop and double click
on it.
B O X
<html>
<head>
</head>
<tr>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<tr>
</tr>
</table>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirsttable.html
Once you have saved it, I want you to go to your desktop and double click
on it.
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
B O X
<html>
<head>
</head>
<tr>
</tr>
</table>
</body>
</html>
Remember you can use the comment tag whenever you need to.
<html>
<head>
</head>
</tr>
</table>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirsttable.html
Once you have saved it, I want you to go to your desktop and double click
on it.
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.
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.
<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>
<td bgcolor=”#008080">row 4</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>
</body>
</html>
Remember you can use the comment tag whenever you need to.
<html>
<head>
<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>
<td bgcolor=”#008080">row 4</td>
</tr>
</table>
</body>
</html>
Highlight it by clicking the highlight button and then right click and copy
it and save it in wordpad as myfirsttable.html
Once you have saved it, I want you to go to your desktop and double click
on it.
You should practice and then try some of the other tags and the Tips and
Tricks
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.
You can remove the underline of an individual link by adding the STYLE
tag to your link HTML.
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
More Tips
Protect email
Email link with body
Mouse over link tip
Remove underline
Vertical Lines
No Border image
Making Tabs
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>
</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>
</body>
</html>
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.
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.
Just Place them with the rest of your Meta Tags on your page or pages.
<meta http-equiv=”Page-Exit”
content=”revealTrans(Duration=5.0,Transition=16)”> - split horizontal out
<meta http-equiv=”Page-Exit”
content=”revealTrans(Duration=5.0,Transition=17)”> - strips left down
<meta http-equiv=”Page-Exit”
content=”revealTrans(Duration=5.0,Transition=18)”> - strips left up
<meta http-equiv=”Page-Exit”
content=”revealTrans(Duration=5.0,Transition=19)”> - strips right down
<meta http-equiv=”Page-Exit”
content=”revealTrans(Duration=5.0,Transition=20)”> - strips right up
<meta http-equiv=”Page-Exit”
content=”revealTrans(Duration=5.0,Transition=21)”> - random bars hori-
zontal
<meta http-equiv=”Page-Exit”
content=”revealTrans(Duration=5.0,Transition=22)”> - random bars verti-
cal
WHAT IS FTP
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 Type - The type of server in which your website is hosted. The stan-
dard is Unix.But you can probably skip it.
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 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.
* 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 - -
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 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
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.
Some of the FTP software programs which we had found useful are:
FTP Downloads
For Windows
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
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
Gigabyte (GB) - Approximately 1 billion bytes (1024 MB). Most hard drive
sizes are listed in gigabytes.
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.
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.
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
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
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.
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.
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.
and
</form>
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
value=”ON”>2kstop </p>
</select> </p>
</select> </p>
</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>
Now lets use all of those in a form. This form will use your email program
to send the form to Us.
Name
value=”ON”>2kstop </p>
</select> </p>
</select> </p>
<p> </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>
<a href=”http://www.html4newbies.com”>
<img src=”http://www.html4newbies.com/468x60x2.gif” alt=”Learn html
today”>
</a>
<a href=”http://www.html4newbies.com”>
<img src=”http://www.html4newbies.com/html2.gif” alt=”Learn html to-
day”>
</a>
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
LOVE
PERFECT PEACE