Do not open from index. See Basic HTML Course

S o far we have a <TITLE>, a <META> tag, a <BODY> tag, a Header <H1> </H1> that is centered <div align="center">, a paragraph <P> </P> of text that is positioned to the left <div align="left">, an <img src> image tag, and a small <P> </P> (Paragraph) of descriptive text both postioned to the center <div align="center">.

<HTML>
<HEAD>

<TITLE>My First Web Page</TITLE>
<META NAME="TITLE" CONTENT="My First Web Page">
<META NAME="DESCRIPTION" CONTENT="This is my first attempt to build and design my own web site using pure HTML codes and no page builder">
<META NAME="KEYWORDS" CONTENT="All Your Key Words Go Here">
<META NAME="OWNER" CONTENT="Your Email Address">
<META NAME="AUTHOR" CONTENT="Your Name Here">
<META HTTP-EQUIV="EXPIRES" CONTENT="">
<META HTTP-EQUIV="CHARSET" CONTENT="ISO-8859-1">
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="English">
<META HTTP-EQUIV="VW96.OBJECT TYPE" CONTENT="Howto">
<META NAME="RATING" CONTENT="General">
<META NAME="ROBOTS" CONTENT="index,follow">
<META NAME="REVISIT-AFTER" CONTENT="4 weeks">



<style>
a{text-decoration:none}
a:hover{text-decoration: underline; color:hotpink;}
</style>



</HEAD>

<H1>My First Web Page</H1></div></font>
<div align="left">

<P><font face="georgia,arial,helvetica"size="3"color="#ffffff">Your Text Goes Here. I am designing my first web page with pure HTML codes and am I proud of myself! Once I start to master this, I will not need to rely on page builders to do the work for me and I will have more latitude with designing the page the way I want.</font></P></div>
<div align="center">

<P><img src="Path To Your Uploaded Image"border=0 width="286" height="175"alt="Example Uploaded Graphic Using An Alt Tag!"></P>

<P><font face="georgia,arial,helvetica"size="3"color="#fff0f5">This Picture Is My Logo</font><</P></div>
<div align="right">

<P><font face="georgia,arial,helvetica"size="6"color="#ba55dc">T</font> <font face="georgia,arial,helvetica"size="3"color="#ffa500">he rest of your paragraph goes here</font></P> </div>
<div align="center">

<P><a href="mailto:Your Email Address Here">Send Me Email</a></P>

</BODY>
</HTML>

N ow, lets add a plain hyperlink or text link below the little descriptive <P> </P> paragraph. We don't want it directly under the paragraph but aligned to the right side of the page and sitting alone with nothing else on the line with it. First we have to close our </div> tag and open a new one aligned to the <div align="right"> right. Remember, we opened a <div align="center"> tag to center our image and descriptive text. This is why we have to close it to reposition the link to the right. Below is the code we use for hyperlinks. We also want the link to open in a New browser window so you don't get off your main page.

N otice the above hyperlink. All hyperlinks will start with <a href=. This is to tell the system it is a link and when clicked to change the page to that of the defined URL. Hyperlinks do have a closing </a> tag. If you do not close this after your hyperlink, everything from that line down will appear as though it is a link.

L ets say you prefer to have your hyperlink open in a New browser window as opposed to having it open in the same window and going off the main page. This is done by adding the attribute of target="_blank" into the code.

N ow that we have added a hyperlink positioned to the right, lets now add an image link positioned to the left. What is the first thing we need to do in order to get the image link aligned to the left?

To Learn How We Aligned The Text With The Image Click This Image!

L ets now add another <P> </P> paragraph of text still positioned to the left underneath the image link. This paragraph will be slightly different because we want the first letter of the paragraph to be a different size and color than that of the rest of the text. We do not close the </div> because the paragraph will still be positioned to the left just as the image link is.

<P><font face="georgia,arial,helvetica"size="6"color="#ba55dc">T</font> <font face="georgia,arial,helvetica"size="3"color="#ffa500">he rest of your paragraph goes here.</font></P>

N otice where we opened and closed the <P> </P> </font> tags.

D o you remember why we use 3 different font styles in a complete font tag?

N ow that we have added another paragraph of text, now you want people to be able to send you Email from your page. When they click on the email hyperlink, it will open their default email server in a new window automatically. You do not need to add the attribute of target="_blank" into the email link. This is almost like a hyperlink with an added attribute of mailto: incorporated within the link. We also want to center the Email Link so you need to close your </div> tag and open a new one aligned to the <div align="center"> center of your document below your image link. Reason being that your image hyperlink was aligned to the left.

<P><a href="mailto:Your Email Address Here">Send Me Email</a></P>

I f you want to substitute an image for a text hyperlink with your email, it is the same as an image link except you need to add the attribute of mailto: into the code and remove your text.

I f image links and email links are still a little confusing, check out the below link and it may clarify it even further.
[ Image Links ]

T he last thing that goes on the page at the very bottom is your Copyright ©. You are proud of your work and don't want anyone to "Borrow" anything you built or designed. This is basically just a small <P> </P> (Paragraph) of text that is smaller than the basefont size you designated when we first started to build this page.

S ince your email link is already aligned to the center, there is no need to close your </div> tag until after you insert your copyright.

A ny and all information pertaining to copyright © can be answered at the below link. This also included the howto on making the © character.
[ Copyright Information ]

I f you have not seen any lines under our links until mouseover, your browser supports Cascading Style Sheets, or commonly known as CSS. If you want to add this effect into your page, just insert the below little code into the <HEAD> section of your document. Notice the color coded word hotpink. This can be changed to any color you select. It can be as in our example with the word or you can use hex codes. If you use a hex code, don't forget to prefix the 6 letters/numbers with the # character.

S ee above where we have inserted the CSS effect into the <HEAD> section of the document.

N ow for anyone who wants, we will show you how to add a background image with or without a fixed background attribute included on your page. If you are viewing this with a "Netscape" browser, the attribute of bgproperties="fixed" is not supported in Netscape. In other words, the background image will appear normally but will "Tile". In other words, it will not be fixed and will repeat itself as opposed to an IE browser where it is fixed or stationary. It does degrade well and you will not get any error message with the use of this attribute in Netscape.
[ Fixed Background With A Background Image ]

S ince we do not use a page builder for assistance in writing HTML codes, there are two other things that are very important to any web designer. Instead of constantly writing all the codes over and over again, we save all our codes on notepad and then save to a Floppy Disc so we can Copy And Paste them where we need them. If you do not know how to do either or both of these procedures, see the respective link(s).
[ Copy, Cut And Paste ]
[ Save To Floppy Disc ]

H ere is where you will find out howto add the above little pop up <FORM> button with a customized message. We want to position this button in the center under our email link. Since our email link is already centered, we do not need to close the </div> tag. We just position it under it.
[ How To Add The Above Pop Up Button ]

W e have gotten alot of questions asking about our little "Close Window" button on most of our page links. If you would like to see how to add this to your pages, follow the below link.
[ How To Add The Close Window Button ]

N ow lets see what we have done so far.
[ Lets See What Our Page looks Like So Far ]

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ You Are Here ] [ Page 5 Is Next ]
[ Code Tester ] [ HTML Tags & Codes ] [ Error Messages ]