VNWR's Newbie Project Of the Week
Basic HTML for Basic page building
This Weeks NPOW will walk you thru making a basic simple page
In nothing but pure HTML code.
Once you do this project and follow along,
you will find that HTML is very easy and fast to use.
For terms and definitions of page elements see the past projects
labeled Free Site Basics and TGP Gallery Basics.
And remember this IS the bare basics.
We start off by opening a pure text editor.
Forget all the fancy stuff, and programs. They are not needed here.
I suggest you use NotePad that comes with Windows, and is on most computers.
If your using a Mac, do your self a favor and upgrade to a real computer,
I don't support fruit in these newbie projects.
Over 90% of your surfers won't be using it either, so build for the most traffic.
So some things may work differently for you.
Every web page has a basic layout that must be followed.
First command in is last command out.
Commands are inside of the greater than ">" and lesser than "<" symbols.
To shut off a command you place a "/" in front of the command word or phrase.
Basicly when you turn on a command(s), you must trun them off in reverse order.
You tell the browser that the page is a HTML page.
At the End of the Page you tell the browser that the HTML page has ended.
So put these on your page like this.
Everything goes inside of these tags.
------
<![CDATA[
<HTML>
</HTML>
]]>
------
You tell the browser that you have a HEADer on that page
You tell the browser to shut off the HEADer on that page
------
<![CDATA[
<HTML>
<HEAD>
</HEAD>
</HTML>
]]>
------
Inside the HEAD tags you tell the browser that you have a TITLE for that page
Inside the HEAD tags you tell the browser to shut off the TITLE for that page
Lets call the TITLE of this page "My First HTML made page"
------
<![CDATA[
<HTML>
<HEAD>
<TITLE>My First HTML made Page</TITLE>
</HEAD>
</HTML>
]]>
------
Inside the HEAD tags is where you also place your META tags and Javascripts.
But we won't go into those for this basic page.
Now we add the BODY tag (everything you see on a web page you see from inside the BODY tags).
Now we shut off the BODY tag right before the HTML is shut off.
------
<![CDATA[
<HTML>
<HEAD>
<TITLE>My First HTML made Page</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
]]>
------
What you now have is the raw basic elements for almost all web pages.
They begin with these things in common.
Now lets add some simple items that you will use all the time.
Follow along and make this page with me, by doing you learn.
Take the raw page we have and lets add color to it.
In the BODY tag its self you tell the page
what background color to be: bgcolor=""
what default color the text will be: text=""
what default color a link will be: link=""
what default color a visited link will be: vlink=""
Lets make the Page white, black text, red links, and blue visited links
You can use Hex code for the colors or the actual color names if you don't know the codes
Here is our page with the colors added
------
<![CDATA[
<HTML>
<HEAD>
<TITLE>My First HTML made Page</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#0000FF">
</BODY>
</HTML>
]]>
------
Now lets center your page name in big Headline text at the top of the page
CENTER then turn on the headline and size,
place in the text,
shut down the headline command then shutdown the center commmand
Then use a BR tag to place a page break.
Think of is as a carriage return on an old fashioned typewritter.
------
<![CDATA[
<HTML>
<HEAD>
<TITLE>My First HTML made Page</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#0000FF">
<CENTER><H1>My First HTML made Page</H1></CENTER>
<BR>
</BODY>
</HTML>
]]>
------
Now lets add a little bit of text to the page.
Let's use the text:
"I made my first HTML page by doing a VNWR Newbie Project Of the Week."
And we use a FONT tag to determine SIZE, FACE(type of font), and color of the text.
We are going to make the font size 4 and the face will be arial, the same as on this page.
We won't add color to the text yet.
But we have to shut off the FONT tag after the text.
Note, the larger the font size the larger the text.
and add another BR tag under the text. (note, you do NOT have to shut of a BR tag).
------
<![CDATA[
<HTML>
<HEAD>
<TITLE>My First HTML made Page</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#0000FF">
<CENTER><H1>My First HTML made Page</H1></CENTER>
<BR>
<FONT SIZE="4" FACE="arial">
I made my first HTML page by doing a VNWR Newbie Project Of the Week.
</FONT>
<BR>
</BODY>
</HTML>
]]>
------
save this page at this point.
Call it npow.html
Now open it in a browser and view it.
See the text is not centered, but to the left.
Now add CENTER Tags outside/around the font tags and text.
Remember, to use the first in last out rule of thumb.
------
<![CDATA[
<HTML>
<HEAD>
<TITLE>My First HTML made Page</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#0000FF">
<CENTER><H1>My First HTML made Page</H1></CENTER>
<BR>
<CENTER><FONT SIZE="4" FACE="arial">
I made my first HTML page by doing a VNWR Newbie Project Of the Week.
</FONT></CENTER>
<BR>
</BODY>
</HTML>
]]>
------
Now save and view your page again in a browser.
One long line of center text there.
Lets balance that out with a BR tag placed at a good spot.
And lets make the word "first" bold with a B command
and then shutting it down after the word. /B
------
<![CDATA[
<HTML>
<HEAD>
<TITLE>My First HTML made Page</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#0000FF">
<CENTER><H1>My First HTML made Page</H1></CENTER>
<BR>
<CENTER><FONT SIZE="4" FACE="arial">
I made my <B>first</B> HTML page by doing a
<BR>
VNWR Newbie Project Of the Week.
</FONT></CENTER>
<BR>
</BODY>
</HTML>
]]>
------
Now we will link the VNWR in that text to http://www.vnwr.com
We do that with a anchor tag, and then shutting it down afterwards.
All links (both text and graphic/image links) use this basic linking method.
Look at the added line of code prior and after the VNWR in the text.
To change where the link goes to, you simply put in a different URL.
------
<![CDATA[
<HTML>
<HEAD>
<TITLE>My First HTML made Page</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#0000FF">
<CENTER><H1>My First HTML made Page</H1></CENTER>
<BR>
<CENTER><FONT SIZE="4" FACE="arial">
I made my <B>first</B> HTML page by doing a
<BR>
<a href="http://www.vnwr.com">VNWR</a> Newbie Project Of the Week.
</FONT></CENTER>
<BR>
</BODY>
</HTML>
]]>
------
Save and view this page in a browser again.
You can now make basic webpages, including linked text to sponsors.
By hand from absolutely nothing.
WTG, it was easy. HTML is easy!!!!
You are ready for adding graphics such as banners and thumbnails for galleries and sites.
To add an image to your web page, you have to use an image source tag.
Add one to your page, under the text.
Right click and save this image as image.jpg in the same directory as your page here.
Use it on your page. Look at the code I added below.
Add that IMG SRC code to your page, and two BR's under it.
Note: To pull an image from another directory,
you simply add the full URL of where it is to it's image name.
------
<![CDATA[
<HTML>
<HEAD>
<TITLE>My First HTML made Page</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#0000FF">
<CENTER><H1>My First HTML made Page</H1></CENTER>
<BR>
<CENTER><FONT SIZE="4" FACE="arial">
I made my <B>first</B> HTML page by doing a
<BR>
<a href="http://www.vnwr.com">VNWR</a> Newbie Project Of the Week.
</FONT></CENTER>
<BR>
<IMG SRC="image.jpg">
<BR><BR>
</BODY>
</HTML>
]]>
------
Now lets add a second IMG SRC on the page.
Call up the same image.jpg, under the two BR's.
Place CENTER tags around it.
Inside the CENTER tags, but outside the IMG SRC,
Link it to VNWR's url. http://www.vnwr.com
Add two BR's under it.
------
<![CDATA[
<HTML>
<HEAD>
<TITLE>My First HTML made Page</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#0000FF">
<CENTER><H1>My First HTML made Page</H1></CENTER>
<BR>
<CENTER><FONT SIZE="4" FACE="arial">
I made my <B>first</B> HTML page by doing a
<BR>
<a href="http://www.vnwr.com">VNWR</a> Newbie Project Of the Week.
</FONT></CENTER>
<BR>
<IMG SRC="image.jpg">
<BR><BR>
<CENTER><A HREF="http://www.vnwr.com"><IMG SRC="image.jpg"></A></CENTER>
<BR><BR>
</BODY>
</HTML>
]]>
------
You can now link banners, banners with text links, or text links to sponsors.
You can also use the IMG SRC tag to show thumbnailed pictures,
linked directly to the full sized images or other HTML pages with those images on them.
This is how you make a gallery page for your sites or TGP Galleries.
So go out and try this by hand method.
You will find it to be very fast and easy to make pages now.
Also your pages will load faster because its cleaner code that your using.
You can check your page against This One to see if it looks ok.
So take this that you now know and play with it..mold it into something profitable.
Make TGP galleries, free sites, etc...and start getting some sites out there.
Then learn more, tables and a few other tricks to make things look a bit more the way you would like them.
But 90% of the time you'll most likely be using the bare basics
you just learned here time and time again.
Don't be afraid to be unique, to reach out and touch the surfer
as you pull im in and make the sale.
Enjoy and profit! Now go build something and make money!
Voltar
Cloud Cash...The sky's the limit!
New things aare HERE!
Catch the excitement as Cloud Cash steps up your
sales with new tours, sites, and more...
Come Make some money today!
VNWR - Voltar's Newbie Webmaster Resource
Come learn from the best!