Basic HTML For Newbie Webmasters
by Doghouse Dan
Welcome to Basic HTML for Newbie Webmasters. I'll attempt to make hyper
text markup language easy and understandable by cutting out the html you
don't need and leaving the basic html you do need to make a simple webpage.
Design is everything. Please cut and paste and modify any html code you
find on this page. Lots of good html stuff will be missed, so if you have
any suggestions please email dan@macrohard2001.com. Thanks.
|
(1) The Head Tag, Title and Metatags:
Check the text box below to reference the stuff I'm talking about.
All HTML documents should start with the "html" tag.
You close the "html" tag at the VERY end of the document.
The "head" tag will contain the "title" and "metatags".
Place your key search phrase in the "title" tag.
Remember to close the "title" with "/title".
Use the "keywords" tag to repeat the search phrase and add variations.
Avoid more than three repetitions of the same "keyword".
Use the "description" tag to provide a summary of the page.
The "author" and "copyright" tags can be used if you want.
The "rating" tag will allow some search engines to see it's an adult site.
The "robots" tag requests any spiders index all pages and then revisit.
There are lots of other tags so search Yahoo for more info.
Remember to close off the "head" section with "/head".
|
|
(2) The Body Tag:
Check the text box below to reference the stuff I'm talking about.
The "body" tag contains default colors for the page background, text and links.
Always set a background color: bgcolor=pink. You can use words or hex color codes.
Hex color tables can be found searching Yahoo.
You can make a .gif or .jpg image be your background: background="pic.jpg"
Note that the example is NOT using a background image.
Default text color for the page can be set: text=purple.
Link color and viewed link color can be set: see below, you'll work it out.
Lots of other things can go in the "body" tag but these are the basics.
The "body" tag will be closed at the VERY end of the document.
|
|
(3) The Page Heading and First Paragraph:
Check the text box below to reference the stuff I'm talking about.
I've centered my page contents with the "center" tag.
Close the "center" tag whenever you want with "/center"
Repeat the page "title" in a heading between the "h1" and "/h1" tags.
Some search engines look at this tagged heading for your description.
Repeat as many of your keywords as possible in an introductory paragraph.
KEEP repeating your keywords throughout the page.
Don't hide keyword text by using the same text and background color ...
... some search engines will catch this and consider it spamming.
Note that on a real page the top 2 inches will be best used for sponsor ads.
Other tags used here: "u" = underline, "br" = line break, "p" = paragraph.
"b" = bold text and I'll cover the "font" tag in the next section.
|
|
(4) The Font Tag:
Check the text box below to reference the stuff I'm talking about.
The "font" tag controls the font type or face, color and size.
The "face" selects the typeface: verdana, comic sans ms, arial etc.
Remember to stick with the common types since some folk won't have the fancy stuff.
You can specify alternate font types: (see the second example below).
With no alternate the default is usually New Times Roman.
The font size can be between 1 and 4 or +1 to +4 ... experiment.
Small screen resolutions (800x600) will make text seem BIGGER.
The font color can be specified in words or hex codes.
This color will override the color specified with the "body" tag.
Remember to close off the "font" section with "/font".
|
|
(5) Tables - Our Friends:
|
cell number one
|
cell number two
|
cell number three
|
This is a simple 3 cell table ... check the code below
|
cell number one
|
cell number two
|
cell number three
|
|
cell number four
|
cell number five
|
cell number six
|
This is a simple 6 cell table ... check the code below
Table "width" AND "height" (not used here) can be specified if necessary.
The "cellpadding" is putting in a 10 pixel margin inside the cell.
The "cellspacing" is putting a 5 pixel margin outside the cells.
The "border" is putting a 1 pixel wide border around the table and cells.
For no border use "border=0" or leave out completely.
The "bordercolor" is specifying a yellow border here.
The "bgcolor" is for the table background color.
The "tr" states that you have a table row - horizontal separation.
The "td" gives vertical separation within each row.
The "td width" can be in pixels or percentage - % is easier.
The "td align" positions the text - center, left or right.
You can also use "valign" to align text vertically - top, bottom.
The "td bgcolor" will color each cell.
Always close your "table", "tr" and "td" tags in the correct order!
|
cell number one
|
cell number two
|
cell number three
|
|
cell number four
|
cell number five
|
cell number six
|
|
cell number seven
|
cell number eight
|
This is a not so simple 8 cell table ... check the code below
Note the "colspan" in cell seven takes over two cells.
|
cell number one
|
cell number two
|
cell number three
|
|
cell number four
|
cell number five
|
cell number six
|
|
cell number seven
|
cell number eight
|
|
cell number nine
|
This is a more complicated 9 cell table ... check the code below
The "colspan" in cell seven takes over two cells.
The "rowspan" in cell seven takes over two rows.
The big thing to remember about tables is ...
... sketch a plan.
... close your tags.
Practice, get it right, then copy/paste ad infinitum.
If possible verify the things using Netscape! Netscape is stricter than IE.
|
|
(5) Making Links:
CLICK HERE NOW FOR PAGE TWO
Click the link above.
This will take you to page two and the links.
... graphical links
... text links
... mouseovers etc.
|
Written and contributed
by Doghouse Dan
DHD's Webmaster Resources
Back to VNWR