More Basic HTML Writing
This will be part two of a multi-part HTML tutorial.
Please don't post advanced HTML replies to this article.
This tutorial is specifically written for beginning HTML writers.
Requirements:
[/tab]Software: Web Browser, HTML Editor.
[tab]Knowledge: HTML 101 - Web Design For Beginners.
[/tab]Skills: Ability to press the keys on the keyboard.
So you have read and understood HTML 101 - Web Design For Beginners and you want to learn more.
So far we have talked about a very basic web page. Black on white and a link or two. Not very interesting. So next well add images and later talk about page formating.
Just to review, let's look at our basic code.
Our basice web page from HTML 101:
CODE
<HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
<CENTER>
My First Page.<BR>
</CENTER>
More text here.<BR>
<A HREF="http://www.astahost.com">Sample Text</A><BR>
<A HREF="http://www.paypal.com">Click here yo go to PayPal!</A><BR>
</BODY>
</HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
<CENTER>
My First Page.<BR>
</CENTER>
More text here.<BR>
<A HREF="http://www.astahost.com">Sample Text</A><BR>
<A HREF="http://www.paypal.com">Click here yo go to PayPal!</A><BR>
</BODY>
</HTML>
Now to add an image like a photo, logo, or banner; we'll use the image search tag.
Example:
CODE
<IMG SRC="http://www.foo.com/images/image102.jpg">
The <IMG> tag is another one of the very few tags that does not need a closing tag.Here is our image in our basic HTML code:
CODE
<HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
<CENTER>
My First Page.<BR>
</CENTER>
More text here.<BR>
<A HREF="http://www.astahost.com">Sample Text</A><BR>
<A HREF="http://www.paypal.com">Click here yo go to PayPal!</A><BR>
<IMG SRC="http://www.foo.com/images/image102.jpg">
</BODY>
</HTML>
<HEAD>
<TITLE>
Here is my first web page!
</TITLE>
</HEAD>
<BODY>
<CENTER>
My First Page.<BR>
</CENTER>
More text here.<BR>
<A HREF="http://www.astahost.com">Sample Text</A><BR>
<A HREF="http://www.paypal.com">Click here yo go to PayPal!</A><BR>
<IMG SRC="http://www.foo.com/images/image102.jpg">
</BODY>
</HTML>
Now if "image102.jpg" is a photo of your family or favorite car, the code above is geat; but if you have a banner, you'll need to associate a link with the image.
Using an anchor tag <A> to create a link allows text to be linked by placing the text between the opening and closing anchor tags. <A>text</A>.
Instead of placing text between the tags, place an <IMG> tag between the tags.
Example:
CODE
<A HREF="http://www.foo.com"><IMG SRC="http://www.foo.com/images/image102.jpg"></A><BR>
Now clicking the image takes you to www.foo.com.Okay, that is everything you need to know in order to create a usable web page.
But the page will continue to be pretty boring. Let's dress it up a little.
The first thing you'll need to do, if you haven't already is change that page title.
"Here is my first web page!" is a very nice title but something a little more descriptive about the content of your web page would be better.
The text between the <TITLE></TITLE> tags is the text that shows up in the upper left corner of the browser window next to the browser's icon.
This is also the same title displayed on the tabs if multiple browser windows or browser tabs are open.
Next thing to look at is that <BODY> tag.
Here is where much of the pages formating is defined.
Here is a list of basic <BODY> tag attributes:
- TEXT -> Color of normal text; TEXT="BLACK"
- LINK -> Color of a text link; LINK="BLUE"
- ALINK -> Color of an active link; ALINK="RED"
- VLINK -> Color of a visited link; VLINK="PURPLE"
- BGCOLOR -> Color of the pages background; BGCOLOR="WHITE"
- BACKGROUND -> Background image; BACKGROUND="http://www.foo.com/images/background.jpg"
Let's add that to our code.
CODE
<HTML>
<HEAD>
<TITLE>
HTML For Beginners Test Page
</TITLE>
</HEAD>
<BODY TEXT="BLACK" LINK="BLUE" ALINK="RED" VLINK="PURPLE" BGCOLOR="WHITE" BACKGROUND="http://www.foo.com/images/background.jpg">
<CENTER>
My First Page.<BR>
</CENTER>
More text here.<BR>
<A HREF="http://www.astahost.com">Sample Text</A><BR>
<A HREF="http://www.paypal.com">Click here yo go to PayPal!</A><BR>
<IMG SRC="http://www.foo.com/images/image102.jpg">
</BODY>
</HTML>
Now if background.jpg was a real file, it would appear in the background; instead the background will just be the BGCOLOR "WHITE".<HEAD>
<TITLE>
HTML For Beginners Test Page
</TITLE>
</HEAD>
<BODY TEXT="BLACK" LINK="BLUE" ALINK="RED" VLINK="PURPLE" BGCOLOR="WHITE" BACKGROUND="http://www.foo.com/images/background.jpg">
<CENTER>
My First Page.<BR>
</CENTER>
More text here.<BR>
<A HREF="http://www.astahost.com">Sample Text</A><BR>
<A HREF="http://www.paypal.com">Click here yo go to PayPal!</A><BR>
<IMG SRC="http://www.foo.com/images/image102.jpg">
</BODY>
</HTML>
Now, let's say that you wanted to have a black background, then black text wouldn't show up. So change the color of the text in the <BODY> tag.
Example:
CODE
<BODY TEXT="YELLOW" LINK="BLUE" ALINK="RED" VLINK="PURPLE" BGCOLOR="BLACK">
Note that the background image was left out.But what if you just wanted to change your text color temporarily. Maybe for a red description.
We'll use the <FONT> tag to change the color of our text temporerily.
Example:
CODE
<FONT COLOR="RED">Here Is My Red Description!</FONT>
The <FONT> tag like the <BODY> tag also has several attributes.
Here are the basic <FONT> tag attributes:
- COLOR -> Color of the text; COLOR="YELLOW"
- SIZE -> Size of the text; SIZE="4"
- FACE -> The font of the text; FACE="ARIAL"
[tab]There are several methods for assigning the size of the font. I've seen SIZE="+1", SIZE="1", and SIZE=1 all used. Different guides suggest different methods. I suggest a number in quotes.
Yor text can be formated with several additional tags other than the <FONT> tag.
Here are the basics:
- <B></B> -> Bold Text
- <I></I> -> Italic Text
- <U></U> -> Underlined Text
Okay, just one more item this in the tutorial.
The <IMG> tag has a few attributs that you'll need to know.
- HEIGHT -> Height of the image; HEIGHT="100" (100 pixels)
- WIDTH -> Width of the image; WIDTH="140" (140 pixels)
Example:
CODE
<IMG SRC="http://www.foo.com/images/image102.jpg" HEIGHT="100" WIDTH="140">
Try to keep the size ratio the same as the original. like 5 X 7 = 50 X 70 or 100 X 140.Now put it all together and see what happens. Let me know if you have trouble.
Happy coding,
vujsa
