1AFM.com basic HTML Tutorial | ||||||||||||||||||||||||||||||||
|
Home
Back to:
|
Basic HTML Tutorial - html page building part 1By Ken J Wagner © 2002
Now let's build a whole page:
The table you see above can be seen in code below: The HTML above is a basic page template which you are welcome to use. You'll note that at the top the page opens with an html tag then a head tag. The meta tags are seen between the head tag and the /head tag. The body tag opens the body. Note that at the bottom of the page the html tag and the body tag are both closed - /body /html . Other important attributes I'd like you to look for in this code are the valign="top" tag and the width="120" in the second td (I've put a comment tag in the code so you can easily find it.
Now let's start working on the page. The first thing I like to do is to fill in the meta tags and make sure they reflect the text on the page. This helps keep me focused so that I create the best page possible for search engine robots and human visitors.
The table you see above can be seen in code below: The above page is now "optimized" for search engines. The title I put in the meta tags I also put in the h1 - /h1 tags (note that h1 is pretty huge font, so I normally use h3 or h4 to make it smaller, but h1 is best). I also put the description from the meta tags between the h4 - /h4 tags later on the page. Then I put the keywords from the meta tags in the content.
Now I'm going to add another column. I put a !-- comment tag -- in CAPITAL LETTERS so you can see where and how I did it:
The table you see above can be seen in code below: Note that in the first row ( first tr ) and last row ( third tr ) I had to change colspan= from 2 to 3. This was so that the columns in the top row and columns in the bottom row would all be as wide as the three columns in the middle row. Now, let's start adding content. We'll start with a search box.
(Note that you've seen above how the html, /html, head, /head, body, /body tags operate, so I'm going to exclude them throughout the rest of this.)
The table you see above can be seen in code below: Notice now I added the search box by simply placing a small table inside the third td column in the second row. I also added some text as a new paragraph using the p /p attribute. Now let's add more content. For HTML page building part 2 Click Here.
This tutorial was created in its entirety by Ken J Wagner © 2002 1AFM.com All Rights Reserved. | |||||||||||||||||||||||||||||||
|
Site template by Ken J Wagner 1AFM.com © 2002 | ||||||||||||||||||||||||||||||||