LEARNING HTML
Not being an expert on HTML or CSS, I finally got my webpage
working, so I thought if I could do it maybe I could help
someone with theirs, there is an ocean of information still to learn.
Once we get started its a lot of fun.
My hope and desire is that this information helps.
In order to learn HTML there is a few basic things we need to know.
The page you see before you is an HTML document page. In order for
this page to work, there is a hidden page behind this page that is
running it, that makes it work, that page is called Notepad.
For example if this page is opened in internet exployer;
FIRST; On the top of the document, left side, we can see; File Edit View.
SECOND; Click on view and scroll down to Source; Click on Source.
When we click on source, the HTML page will open up in notepad.
OK; Got the HTML page opened up? in the first few start tags you
should see something like this(BELOW).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>LEARNING HTML</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<META NAME="KEYWORDS" CONTENT="html tags, css tags, how to do html, how to do css">
<META content="MSHTML 6.00.2800.1126" name=GENERATOR>
</HEAD><A NAME="(top)"> </a>
<TABLE cellSpacing="2" cellPadding="2" width="100%" border="2">
<TBODY><TR><TD>
<BODY text="black" vLink="red" aLink="red" link="red" bgColor="white">
<HR align=center width="20%" color="#9370db" SIZE="1">
<HR align=center width=40%" color="#9370db" SIZE="2">
<HR align=center width="60%" color="#9370db" SIZE="3">
<table cellspacing="2" cellpadding="2" width="100%" border="2">
<tr><td>
<CENTER> <PRE> <FONT color="green" size="2"> <i> <B>
Our text would go here.
Above is the same HTML code running this page;
To make this easier to understand, The topbar code has been removed,
and all the text afterwards, then this text was added.
We can remove and replace the text; and some of the inside HTML tags,
if we change any of the HTML tags it will affect the face page someway.
If we change any of the major HTML start and stop key tags, the face
page will collapse. See the HTML stop tags at the bottom of this text,
they must go at the bottom or this document page will not work.
</b></i></font></pre></center></td></tr></table></body></td></tr></tbody></table></html>
If we cut and pasted the above into an HTML document?
CLICK HERE TO SEE WHAT WE WOULD HAVE.MY WEB PAGE1
Actually all we need to make an HTML document work good is the following tags;
Start tags; (Leave this text out)
<html>
<head>
<title>
Webpage or document name goes here.
</title>
</head>
<body>
<pre><center>
<font color="black" size"2">
All of our text goes here,
Remove this text and replace it with your own.
Dont forget the stop or end tags; </font></center>
</pre> </body> </html>
If we cut and pasted the above into a document?
CLICK HERE TO SEE WHAT WE WOULD HAVE.MY WEB PAGE2
Lets have some webpage fun.
There are perhaps thousands of ways to make a webpage, or document.
So if we wanted to go a little farther with our HTML tags, here is one way
to do it; We can add; A webpage name, a meta content tag, a meta keyword tag,
a reference tag, and we can add a table cell. All our information
goes inside the cell. The HTML tags will be explained later.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> <head> <title>MY WEBPAGE </title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="KEYWORDS" content="search keywords go here, gidgets, widgets.">
<meta content="MSHTML 6.00.2800.1126" name=generator>
<a name="(top)"></a>
</head><body>
<table cellspacing="2" cellpadding="3" width="100%" border="3"> <tr><td>
<pre><center><FONT color="green" size="2"><i><b>
Replace this text with your own.
</b></i></font></center></pre>
</TD></TR></TABLE></BODY></HTML>
If we cut and pasted the above into a document and added the topbar back?
CLICK HERE TO SEE WHAT WE WOULD HAVE.MY WEB PAGE
Lets talk about the notepad that is running our document.
Line 1, 3, 4 and 5 are used if we publish our documnet online.
Line 2 contains the HTML keyword start tags.
Line 3 (meta content tag) is used if our document is HTML; If the document
was CSS we would use a meta content tag for CSS.
Line 4 (meta search, keywords)contains the tags needed if someone is
searching for this webpage. So if the information on this website was about
apples; We put apples in the search tag. If the information was about
gidgets; We put gidgits in the search tag.
(1) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
(2) <html> <head> <title>MY WEBPAGE </title>
(3) <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
(4) <meta name="KEYWORDS" content="search keywords go here, gidgets, widgets.">
(5) <meta content="MSHTML 6.00.2800.1126" name=generator>
Lets talk about Line 6.
(6) <a name="(top)"></a>
This is a reference point tag, or a link stop tag.
it is used to stop anyplace we want in a document.
We need the link start and stop tag to make it work.
It is easy to setup.Link tag setup
(7) </head><body> Stop tag for head. Start tag for body.
(8) <table cellspacing="2" cellpadding="3" width="100%" border="3"> <tr><td>
Start tag for Table Cell. Start tag for TR (table row). Start tag for TD (table data cell).
(9) <pre><center><FONT color="green" size="2"><i><b>
(10) This is where our text goes.Replace this text with your own.
Line 11 and 12. HTML end tags. The end tags are needed to make the document work.
(11) </b></i></font></center></pre>
(12) </TD></TR></TABLE></BODY></HTML>
<TABLE cellSpacing="2" cellPadding="0" width="100%" border="1">
TABLE CELL TAG.
This tag is used to make the frames and width around our document,
The numbers are used to make the cell wider or shorter, to raise or lower the cell.
Or to make the border larger or smaller around the cell.
we can change the size or width.
<TBODY><TR><TD>
<TBODY> (table body).
The document needs <TBODY> at the beginning of the document and
</TBODY> (notice same with a backslash) at the end of the document.
<TR>(table row).
<TD> (table data cell).
<TR> <TD>
Text goes here in between.
</TR> </TD>
</TR> </TD>
HOW TO LINK OR CLICK TO ANYPLACE INSIDE A DOCUMENT.
This is the reference point start and stop tags.
Link start tag. <A href="document name here.htm#(link name here)">link name here</a>
Link stop tag. <A NAME="(link name here)">
These HTML tags are used to stop anyplace we want in a document.
We need the start and stop tags to make it work.
The code inside the start and stop tags must be the same.
<A href="document name here.htm#(the code inside here must be the same)">link name here</a>
<A NAME="(the code inside here must be the same)">
For example go to the bottom of this document, click on BACK TO TOP.
The document will return to the top.
The link start HTML tag code is at the bottom of this document.
<A href="LEARNING HTML.htm#(top)"> BACK TO TOP. </a>
This HTML code is at the top of this document.
<A NAME="(top)"> </a>
at the bottom of this document, when you click on BACK TO TOP
it will return back to the top; Do we understand now?
Ok we will break it down and explain a little more.
The name of this document is LEARNING HTML, so we have placed
our document name inside the HTML tag.
<A href="LEARNING HTML.htm#(top)"> BACK TO TOP </a>
And we have placed (top) inside both HTML tags <A NAME="(top)">
.This creates a link to a reference point in the document.
THE A TAG
When we open the A tag, we need to close it with; </a>
This will stop the tags, especially the colors from spreading
furthur into the document. Without it our document would be a mess.
For example: <A href= <A NAME=
For example; Here is a full tag;
<a href="PICTURES\B\BURRESSNancyJ.bmp">Nancy J Burress picture click here</a>
CHANGING THE DOCUMENT COLORS
Here is 16 widely known color names with their RGB values:
Black = #000000 Green = #008000
Silver = #C0C0C0 Lime = #00FF00
Gray = #808080 Olive = #808000
White = #FFFFFF Yellow = #FFFF00
Maroon = #800000 Navy = #000080
Red = #FF0000 Blue = #0000FF
Purple = #800080 Teal = #008080
Fuchsia= #FF00FF Aqua = #00FFFF
There are many more colors to choose from. COLORS CLICK HERE
We can display the colors with full name or with RGB values.(seen below; green)
<font color=green><font color=#008000>
BODY HTML TAG
The body tag font colors, link colors, background colors, can be changed here,
inside the following tag.
<BODY text=black vLink=red aLink=red link=red bgColor=beige>
Lets break the above HTML line apart and talk about the contents.
<BODY text=black (this is the default text color)
vLink=red aLink=red link=red (this controls the links color)
<bgColor=orange> (this controls the background color of document)
We can make it any color we want, there are hundreds of colors,
We can also import a picture for a background.
SEE ADVANCED HTML BACKGROUND COLOR.PAGE BACKGROUNDS
Colors have also a number code that we can use, for example;
the color purple is "#9370db" used in the horizonal lines below.
HORIZONAL DIVIDER LINES FOR OUR DOCUMENT.
Horizonal lines with color tag.
If we cut and paste the next tags into our document;
<HR align=center width="20%" color="#9370db" SIZE="1">
<HR align=center width=40%" color="#9370db" SIZE="2">
<HR align=center width="60%" color="#9370db" SIZE="3">
HERE IS WHAT THEY LOOK LIKE.
We can make them any size or color we want.
There is another simple HTML horizonal line, like this;
<HR>
We have used this simple line all through this document, it is
used in the line break below and above
FONT TAGS.
The font control tags should be placed as shown;
Place CENTER and PRE first or they will cause problems.
<CENTER><PRE><FONT color="green" size="2"><BIG><i><B>
With the above fonts tags we can make the words and numbers obey
our commands. Lets break it down a little to understand it better.
PRE AND CENTER
<PRE><center>
Align words- Center, Left, Right. <CENTER><LEFT> <RIGHT>
<PRE> Makes the words stay put, exactly as written. Without
<PRE>The text would splatter all over the place and make our document worthless.
FONT NAMES.
There are many font names; For example;
<font face="Comic Sans MS" color="black" size="2">
<FONT face="Times New Roman" color="black" size="2">
If we want to change fonts we can close the fonts down with this tag
</font> and start over with another font.
CHANGE THE FONT SIZE.
We can make the words bigger or smaller
<BIG> <SMALL>
We can change the size here in the font tag; size="2">
I tag is italic. <i></i>
B tag is bold. <B> </B>
BACK TO TOP
WEBMASTER; Email hw@apianotuning.com.
|