Do not open from index. See Basic HTML Course

O ur page now has 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">. We have also added a <a href=""> link that opens in a new browser window target="_blank" that is aligned to the right <div align=right">, an image link <a href=""><img src=""> aligned to the left and another paragraph of text which is has a larger and different color first letter. <div align="left">, an email link <a href="mailto:>, a little pop up <FORM> button and last but not least, a ©. The last three are centered. <div align="center">.

B elow is everything that we have designed and put on the above page. When people view your source code, this is what they will see.

<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">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>

<p><nobr>Check Out My    <EMBED SRC="Path To Your Upload Music" autostart="false" volume="100" hidden="false" loop="false" controls=smallconsole width="150" height="45" align="middle">   Favorite Song</nobr></font></p> </div>
<div align="right">

<P><font face="georgia,arial,helvetica"size="6"color="#ba55dc">I</font> <font face="georgia,arial,helvetica"size="3"color="#fff0f5"> have also added this paragraph of text that has a larger and different color first letter to bring a little more attention to what I want to say here.</font></P>

<UL>
<LI>I Am An Unordered List
<LI>I Also Use Bullets
<LI>Bullets Are The Dots Preceding These Words
</UL>

<OL>
<LI>I Am An Ordered List
<LI>I Use Numbers Instead Of Bullets
<LI>My Numbers Are Automatically Added
<LI>You Do Not Have To Do It
</OL>

Place your Text, Images, Etc. Here

</td></tr>
</font>
</table></P>

</div>
<div align="center">

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

</BODY>
</HTML>

N ow lets get a little fancy and add some embedded music with text wrapped on either side of the control panel into your page. Since web pages load from the top down, lets put the control panel at the top so the music starts quickly and not have to wait for everything else to load first. We want to position it underneath our main image so it will still be centered. We also want to add a complete font tag prior to the control panel because we will have text on either side that needs to be defined. Notice that we also closed the </font> tag after the last word.

N otice the opening and closing attribute of <nobr> and </nobr>. This attribute is used mostly for certain platforms of Netscape but is good practice to add it when this situation arises. See the below link for the full explanation on this attribute in regards to positioning text on both sides of a graphic and or media player as in this case.
[ Use Of The <nobr> And </nobr> Tag ]

N otice the     on either side of the text that we wrapped on either side of the control panel. Each   is the code for a single space. We did this so the text would not be on top of the control panel. Also notice the positioning of the align="middle" attribute. This tells the control panel to align itself in the middle of the text.

D ue to the fact that people view web pages in different platforms (Browsers), this above code may not be seen correctly in Netscape. If you follow the below link, We have defined all the terms and attributes contained within the above music code for both Netscape and Internet Explorer.
[ How To Add The Music Code ]

W hen adding Midi music files, many times when you download the selections, they come in "Zip" format. If you do not understand a zipping and unzipping utility, follow the below link and it is fully explained.
[ All About Zip Files ]

N ow lets add one more thing to your page and we will almost call it done. We want to add an Unordered and Ordered List below our (<P> </P>) paragraph of text with the emphasis on the larger first letter. We still want the list positioned to the left so do not close your </div> tag.

I Am An Unordered List
I Also Use Bullets
Bullets Are The Dots Preceding These Words

I Am An Ordered List
I Use Numbers Instead Of Bullets
My Numbers Are Automatically Added
You Do Not Have To Do It

I f you follow the below link, all the explanations for the different lists can be found.
[ All About Lists ]

L ets add a basic table underneath our lists and then we will call our page done. We want our table still aligned to the left so we do not close our </div> tag just yet. We will close our </div> tag underneath our basic table and reopen another one aligned to the center for our email pop up message and copyright.

This Is What Text Looks Like Inside The Above Table Code.

F ollow the below link to learn all about basic tables and their attributes.
[ All About Basic Tables ]

T he last thing we will cover is the creation of another page within your website and how to create one to link to from your main page.
[ Page Creation ]

N ow that we understand that and viewed what we have done so far, lets go and see our finished page.
[ Our Finished Page ~ Internet Explorer ]
[ Our Finished Page ~ Netscape ]

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ You Are Here ]
[ Code Tester ] [ HTML Tags & Codes ] [ In Conclusion ]
[ Error Messages ]

My First Web Page

Recap