|
Basic Elements of all HTML Pages Header - tells the browser what type of file it's loading, and provides keywords, titles & descriptions for search engines | |
| html - this tells the browser it is loading an HTML file (as opposed to a text file or graphic) | <html> |
| head & title - these should be the one and the same, and should be both descriptive (keywords) and concise. | <head><title>Title of Page</title> |
| meta tags - the two I find most useful: | |
|
|
<meta name="keywords" content=""> |
|
|
<meta name="description" content=""> |
| Close your header after the last meta tag (or javascript, if there is any). | </head> |
| Body - This tag should contain all the following elements, and be consistent to all pages of the site. | |
| Background color or wallpaper - you can also specify a color to be used in case viewer's browser doesn't accept graphics, or is slow to load them - this is the preferred, and most accessible, option if you decide to go with a background image |
<body bgcolor="#......"
or <body background="/img/....." or <body bgcolor="#......"
|
| Text and link colors - choose these to not only match/compliment the overall color scheme of the page, but also to show up well on all browsers. Refer to the RGB/HTML color guide for colors that apply to all browsers. |
link="#......" alink="#......" vlink="#......"> |
| Footer - Links to other pages, in image and/or text format(s). Whatever the format, the link to the current page should not be active. | |
|
If multiple images, all should be linked individually.
If single, mapped, image refer to maps section for mapping details. |
<a href="/nameofpage.html">
<img src="/img/...."
width="" align="" alt="" border=0></A> (as many times as needed) |
| If text links, seperate them with space and dividing element '|' is prefered in most cases. |
<a href="/nameofpage.html">Page Name</A> |
<a href="/nameofpage.html">Page Name</A> | <a href="/nameofpage.html">Page Name</A> (as many times as needed - example at the bottom of this page) |
| Copyright and contact info |
Copyright © (Year) Company/Individual
<a href="mailto:name@site.com">name</A> |
|
Image Maps (Client Side), with a comment tag to denote them
These elements (whenever relevant) are to be placed after all contents of the page, and before the body and html tags are closed |
<!-- end of html for the page, the rest is a map (or the maps)-- >
<area shape="rect" coords="#,#,#,#" href="page.html"> (as many times as needed) |
|
Close the body and html tags
Resources/Guides |
</body> </html> |
|
Basic Elements | Tables | Images | Image Maps | Links | Frames | Fonts |