1AFM.com basic HTML Tutorial
Back to:
Basic HTML Tutorial - Important HTML tags: table, tr, td, width, bgcolor, div align, valign, font, b, br, p, img src, a href, cellpadding, etc.
By Ken J Wagner © 2002Just remember that all tags that are opened must be also closed. Below are all the most important tags (you might want to copy and paste thse into a page on your computer):
html - this tells what computer language the page is written in. All the contents of a page should be placed between the html (at the top of the page) and /html (at the bottom of the page) tags.
head - the meta tags appear between the head and /head tags.
body - all the page content appears between the body (at the top of the page) and /body (at the bottom of the page) tags.
table - starts a table. You can make the width any that you like by adding a width="" attribute. You can do it in percentages, width="100%" or pixels, width="710" . The Golden Rule - every open table must be closed /table .
tr - sets up the rows in a table, and /tr closes the rows.
td - sets up the columns in a table, and /td closes the rows.
width - can be used to define the width of a table, row or column. The width tag never needs to be closed because it is always contained in another tag - table, tr or td.
align - can be used to define the alignment of a table, row or column. Like the width tag the align tag never needs to be closed because it is always contained in another tag - table, tr or td.
div align - is used to define the alignment of content in a column. It is in its own tag so it needs to be closed /div align . Without this tag the default is to the left
valign - is used to define the vertical alignment of a column. Default is "middle" you can make it middle, top or bottom. It is in the td tag so it doesn't need to be closed.
border - is not a necessary tag and is only needed really if you want to make a border. If you make it border="1" it will default to gray, unless there is a bgcolor. Border normally appears only in the table tag and therefore doesn't get closed.
bgcolor - is used to define the background color of a table, row or column. It is in the table, row or column tag so it doesn't need to be closed.
Note - you can change bgcolors and font colors by simply writing the word of the color, bgcolor="white" , however, coded colors are much brighter and appear the same over various computer systems. There is an online color palette that automatically generates color codes Here (opens in a new window). I suggest you save it to your favorites.
font - the font tag defines the font and can include face, color and size. Since face, color and size are part of the font tag, none of them need to be closed, but the font tag itself, does - /font . Here's an example:
The code for the above can be seen below:
b - the b tag makes font bold. Place the b tag before font that you want to make bold and be sure to close it /b since it is its own tag.
h - h tags make text bold, but they also tell search engine robots that the text contained between the h and the /h is important. Each h tag creates a different size - h1, h2, h3, h4, h5, h6 and they must be closed /h1, /h2, /h3, /h4, /h5, /h6. h tags also automatically create a paragraph break below their contents.
height - the height attribute is not normally used since tables automatically expand and contract depending on the content they contain. When used the height attribute is placed in the table tag near the width attribute. Height should only be defined in pixels (height="500" or whatever). Height doesn't need to be closed since it is in another tag. The most useful time to use the height attribute is with .gif and .jpg files when you want the image to appear the exact size that it is.
.gif and .jpg - since it's been brought up, let's cover it now. .gif and .jpg are image files. You can upload an image to your site and then call it up to appear on your page. Here's an example:
Here's the code:
Note that I put a width, height and border attribute. If you don't put border="0" in image tags a big blue border will appear around the image.
Here are the attributes for images (none of these need to be closed):
img - this sets up the image.
src - this tells the browser where to pull up the image from.
alt - this is the alternate text you want to appear should the image happen to not load, so people will know what it would have been.
a - linking is the most important thing we do on the web. Hyperlinks begin with the a (anchor) tag, which must be closed.
href - this stands for hyperlink reference and tells the browser what page to call up when the link is clicked on.
Here's an example with code:
target - a target tag on a hyperlink makes it open in a new window ( target="_blank" ) or break out of frames ( target="_top" ). Here's what the code looks like:
Now let's hyperlink an image.
Here's what it looks like:
Here's the code:
To center images you can put them in a table with a div align tag, use a div align tag without a table (be sure to close it /div align ) or just use a center tag (be sure to close it /center ).
That pretty much gets it - that's pretty much everything you need to know about HTML to get you going. I hope it was helpful.
Peace,
Ken J Wagner, 1AFM.com Webmaster
This tutorial was created in its entirety by Ken J Wagner © 2002 All Rights Reserved.
Site template by Ken J Wagner 1AFM.com © 2002