---

USGENWEB PROJECT | CoGenWeb | Co. Counties | Colorado History|
| Wish list | Reception Committee | HTML Help | CoGenWeb-rules |

---

Help with Modern HTML 4.01

Errors I have found in many CoGenWeb web sites

This is not intended to teach you HTML coding from scratch but rather how to avoid common mistakes I've seen since becoming coordinator of 4 existing CoGenWeb sites, helping with others and becoming Webmaster of the Colorado GenWeb state site (this one). There is a direct link near the bottom to my personal website's Scott's World links page where you can find sites that will teach you HTML from scratch along with other webmaster related links. My theory of HTML is the less code you use to display the content the better. I code by hand using a program called HomeSite, I used Notepad before that. You don't need a lot of fancy programs to write code, I wrote two multi page web sites using only Notepad. They can make it easer and faster to do it. If you know how to write code and understand what it does then you will be able to fix problems and get by with a lot less code. I taught myself HTML by looking at other people's code, reading a book or two and taking some online course for the harder stuff. I got started by becoming coordinator of Alamosa, Co and writing a few personal pages for the web space I got free with my email address. I soon found I could do better than the company that was charging the place I work for a lot of money to do a 1 page website. They messed it up so often (stuff like our phone number and dates..) I started editing the page and sending it to them because we were only allowed to change it once a month. I wrote a sample website and put it up on the space for our work email address and made a proposal to them. We were able to pay for our domain and host our website for a fraction of what the company charged us and we could change it any time we wanted.

I don't use Front Page or other WYSIWYG visual editors. Front Page and most other editors of that type put in a lot of junk code that just pain does not need to be there and in some cases serves no purpose. They tend to use complex tables to place very thing. Very few of the pages I've written use tables and displays just fine and are a lot easer to figure out and change. I've tried DreamWeaver C3 and still prefer HomeSite. For instance I helped one GenWeb coordinator change over to using style sheets, the large site had been done with Front Page and had thousands of font tags in it. A large many of them were around code that controled the page and did not display to the user so they served no purpose and caused the browser to take longer to display the page because it had to interpret all of those tags. It also made the page bigger or heaver so it took longer to download. The less code you can use the faster your site will load.

Proper page naming

Your site must have an "index.html" or "index.htm" page. It will cause problems and your site directory may show (will show if hosted on Rootsweb) if you don't have one and some one goes to your base URL I.E. ../ If your your primary page is not "index.html" or "index.htm", you should make a copy of the main page and name it index.html, you should then change all the links in your site that went to the main page to the index page, this will fix the problem. You should then leave the main page in place so it doesn't break any links that were linked to it, but then set it up to redirect visitors that page to the index.html page. This needs to be in between the head tags some where: <meta http-equiv="refresh" content="0; URL=index.html"> It will automatically push visitors from the old page to the new index.html page.

Other wise it is best not to change established page names as you break any links that have been made to it by merely making as simple a change from .htm to .html or index.html to Index.html. When creating new pages the file names should be all in lower case and kept fairly short simple names. IE index.html, query.html, county.html, resource.html, migration.html, city.html, etc. Many servers are CaSe sensitive and Query.html is a different file name from query.html. Another thing I've seen are file names that are too long and have punctuation that can't be there, This is also good_file.htm (ok but not recommended), thisisareallylongfilename.vip.png (bad, bad.vip.ext).

HTML Tags

Think of a tag as a container, all open containers must be closed and they must be closed in proper nesting order. Containers that are not closed properly can leak contents and break your page. Some browsers are more fault tolerant than others so you should view your pages with Firefox Download Firefox and Internet Explorer to see how they look. Firefox will display the site a lot closer to how the code tells it to than IE and is just plan a better browser.

Tags must be Nested correctly, If you open a tag inside of another tag it must be closed before you close the parent tag.

<p>
<strong> This is an example of improper nesting, the Paragraph tag is closed before the strong. The strong tag was opened inside of the P tag and should have been closed before the parent tag of P

</p>
</strong>

<P>
<strong> This is an example of proper nesting, notice the strong in inside the Paragraph
</strong>
</p>

That I know of there there are three exceptions to the container rule <br> (line BReak), <hr> (Horizontal Rule) and image tags do not have closing tags. Future version of HTML such as XHTML (eXtensible HTML)require they be closed thus <br /> , <hr /> and <img src="../image/cologotx.jpg" width="225" height="87" border="0" alt="CogenWeb Logo" />

This is a plain <hr>

---

This is the <hr> used on CogenWeb: <hr noshade size="5" align="center"> The noshade does not have a value, therefore it should not have an = sign after it or any value attached to it. The size sets the height, Default is about 2 and can go up to a ridiculously huge 99. The align="center" is a bit redundant as it defaults to being centered, you could also align it left or right.

---

You can also set the width of HR horizontal rule <hr noshade size="5" width="50%">

---

You can use % or fixed numbers width="500"

---

<p> (Paragraph) is not interchangeable with <br>  which should be used to break elements and not <p> which should not be left open. it used to be optional to not close some tags but HTML 4.01 requires they be closed. A paragraph tag container set <p></p> is best used to contain paragraphs of text. A line break is inherent at the end of a Paragraph </p>

These sentences are an example of a paragraph with a style class that says to indent the first word of the paragraph 30px or Pixels..

<p> A Paragraph tag must be closed thus:</p>

With Tables it is critical that tags are closed correctly and in order or they can cause major display problems. Often I see <TD> that are not closed or not in correct nesting order.

<table align="center" cellpadding="2" cellspacing="2" width="500" border="3">
 <tr>
   <td>
        This would create a two cell row this is the first cell
  </td>

  <td>
        This is the second cell
  </td>
</tr>
</table>

EXAMPLE:

This would create a two cell row this is the first cell

This is the second cell

This page and most others on the CoGenWeb site are in a table like this one

This is the structure of the CogenWeb table, normally you would not see it because the border="0" is set to 0 so it does not show the border structure of the table. This would be the top Column row span which spans the two data columns table. If there were two sets of <td> </td> instead of the colspan command it would create another row of two columns. Normally the header would be here with the logo and images would be here inside another table which places the elements of the header, the CoGenWeb logo on the left, the center the header text, the left the USGenWeb logo.
This is the left column where the navigation code would go. It has the background color set which hides the background image of the whole page.	This is the right data column where the contents go.
This is a 2 column span across the bottom of the table some of the pages have it, some don't.

Table errors will cause your pages to display wrong as other can other nesting order problems. Common problems I see in pages are <td> table data not closed or <tr> table rows not closed or not closed in the correct order. A good rule with </tr> close table row is either must be followed by a new <tr> or the table must be closed </table>. Also all data in the table MUST be inside of <td>this is Table Data </td>, <td> must be inside of a Table Row <tr>. and must be closed </td> before the next <td> or <tr>. Tables can be much larger and complex than the sample above with multiple rows and columns. Think if it as <td></td> creates a box followed by more <td></td> will create a row of boxes or in combination with <tr></tr> can create rows of boxes.  Another useful tag set is Table Header <th></th> which can be used in place of <td></td>  I use a style sheet to set Table Header contents to be Bold and larger font than the Table Data contents. I would not use the <tbody> tag, it is not necessary in most cases and many browsers do not support it. Front Page and some other editors seem to put it in anyway.

htmlhelp.com Table Body
W3 School Table Body
Microsoft Library Table body

Any value that follows an equal sign must be quoted thus; align="center",  width="600", height="20", border="0" <a href="http://www.anyurl.org"> not a real link</a> also links out side of the site must be preceded with the http <a href="http://www.cogenweb.com">Colorado GenWeb Project</a> before rest of the address. A link to a page on your site can be done thus: <a href="index.html">COGenWeb Home Page</a>

You should not use high value ASCII code in the text of your web pages. The common ones are that should be replaced are " which you should use ", & & and © ©. There are a lot more.

List items, I've seen a LOTS of errors using lists. There are three types of lists <ul> unordered lists, <ol> ordered lists and <dl> Definition Lists. The first two use <li> elements </li> Unordered list makes a bulleted list,  an example would be the navigation menu on the left side of the this page. if you change ul to ol, an ordered list, then it will number the list items instead of display a dot.

IE

Un ordered list
<ul>
   <li> first list item </li>
   <li> second list item </li>
   <li> third list item </li>
   <li> fourth list item </li>
   <li> fifth list item </li>
</ul>

EXAMPLE:

• first list item
• second list item
• third list item
• fourth list item
• fifth list item

ordered list
<ol>
   <li> first list item </li>
   <li> second list item </li>
   <li> third list item </li>
   <li> fourth list item </li>
   <li> fifth list item </li>
</ol>

EXAMPLE:

1. first list item
2. second list item
3. third list item
4. fourth list item
5. fifth list item

This is a definition list, it starts with <dl> and closes with </dl> it does not use <li></li>, elements instead it uses definition Title <dt> </dt> and definition data <dd></dd>. The style sheet I use tells the browser to display the contents of a <dt></dt> in strong font. Also I've used the style sheet to make strong elements Bolder and larger.
<dl>
<dt> This is a definition title it will not be indented </dt>
<dd> This is a definition data it will be indented </dd>
</dl>

EXAMPLE:

This is a definition title it will not be indented

This is a definition data it will be indented

The first two lists and <li> can NOT be mixed a <dl> list and you can not use the <dt> and <dd> elements in the first two <ul> and <ol> lists, nor can you use any of the list elements out side of their intended list or mix them together. You could put a whole list inside of a list element of another list like below but I don't know why you would want to.

<dl>
 <dd>
  <ul>
     <li> first list item </li>
     <li> second list item </li>
     <li> third list item </li>
     <li> fourth list item </li>
     <li> fifth list item </li>
  </ul>
 </dd>
</dl>
EXAMPLE:

• first list item
• second list item
• third list item
• fourth list item
• fifth list item

I use unordered lists on my links page of my personal website. This is a link to my list of help full pages to learn about html, css and being a webmaster.

Scott's World HTML Help Web Links

This is a link to the W3 school site, W3 sets the standards for the web, so it is an excellent site to learn from. HTML Certification School

<center> is depreciated (being phased out) and you should use <div align="center>item</div> in it's place or you can use the align="center" in lots of tags you'd like to position; table, td, th, div, p, hr, and others I'm sure I haven't thought of. You can also use the values "left" and "right".

The ALIGN attribute specifies the horizontal alignment for each cell in the row group. Possible values are left, center, right, justify, and char. align="char" aligns a cell's contents on the character given in the CHAR attribute. The default value for the CHAR attribute is the decimal point of the current language--a period in English. The CHAROFF attribute specifies the offset to the first occurrence of the alignment character. The attribute's value is a number in pixels or a percentage of the cell's width; CHAROFF="50%" centers the alignment character horizontally in a cell.

This applies to most items except images and your best bet is to contain an image tag inside of a <div align="center"> <img scr="whatever.jpg" height="20" width="20" alt="this is what ever image"></div>  or a <td> (table data).

You can vertically align and center say a cell in a table also <td valign="top" align="center">  the values for valign are "top" "middle" and "bottom"

The VALIGN attribute specifies the vertical position of a cell's contents. Possible values are:

top, which positions data at the top of the cell;
middle, the default value, which centers the cell data vertically;
bottom, which positions data at the bottom of the cell;
baseline, which specifies that the first line of each cell in the row with VALIGN=baseline should occur on a common baseline.

<fonts> are also depreciated (being phased out) it is highly recommended you use a style sheet instead. I am not an expert on style sheets but there are lots of resources on the web and I will help if I can. I highly recommend using an external style sheet. It will allow you can remove a lot of redundant code from your pages and if you decide you want to change how text looks, an element should be bold or what ever you want you can change your style sheet and it will change the look on every page of your website when you upload it. You should have a link to your style sheet <head> some where between the </head> tags of your website. The meta tag should be with it just to make sure browsers display your website properly.

  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="main.css" title="Default">
</head>

I have a few basic style sheets examples you can save, look at and experiment with. Things you will likely want to change will be the colors of the link codes, the background and maybe the font sizes or type of font used. You can do far more with a style sheet than I have in these examples, you can control the positioning of every element of the page if you wanted and produce effects that are not possible in HTML. If you look at the code of the example pages you will not find any font tags. You can look at the source code of a page by right clicking on the page some blank portion of a page and selecting view page source. I use TopStyle Lite 3.0 which came with my HomeSite Editor to create these style sheets. "TopStyle Lite is a free version of TopStyle that contains an extremely small subset of the features found in the Pro version of TopStyle. Most importantly, TopStyle Lite is strictly a simple CSS editor, whereas TopStyle Pro is a full-blown XHTML, HTML and CSS editor. However, if all you want is a very basic CSS editor, TopStyle Lite will serve you very well." Download TopStyle Lite

You can download the sample style sheets by right clicking and save as, if you click on them you can see the code

• download sample style sheet (CoGenWeb what you see here)
• Alamosa's style sheet see site Alamosa Co., Colorado COGenWeb pages
  
• Costilla County style sheet see site Costilla Co., Colorado COGenWeb pages

Doc type, it is becoming increasingly important to tell the web browser what sort of document it is looking at. The Doctype declaration should be the FIRST line of your html document with nothing above it and following it should be your
<html>
<head>
tags.

For HTML transitional (or loose): (Use this doctype if your document is in HTML but contains one or more deprecated tags.) mostly appropriate for your web sites. You should also use it for the pages that make up the content of a framed website. You can copy them off this page and paste them into your documents.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>



For HTML frameset: (Use this doctype if your document is in HTML and contains frameset tags, use loose for sub pages of the frameset.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>



This is a basic structure of a page,  I really hope your title tags tells what the page is about and does not say "untitled" "untitled page", "untitled document", "new page" or anything of that nature. ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
     <title>query page, what ever county, Colorado, CoGenWeb site</title>
    <META NAME="description" CONTENT="what ever county, Colorado, CoGenWeb site, part of the USGenWeb Project">
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <link rel="stylesheet" type="text/css" href="main.css" title="Default">
 </head>
 <body>

          content, the part of the website your visitors see. the part above tells the browser what your page is and how to display it. It also tells search engines what the page is about which is why it is IMPORTANT your <title> tag tells what your website is and what the page is.
 </body>
</html>


You can validate your pages with the W3 Validator, it will tell you if your code is valid for it's doctype and where the errors are. W3 code Validator They also have a CSS validator W3 CSS validator.

BTW the above email link is in a Java Script which will prevent spammers from finding it on your web sites. This is the script below. Change "your name" to IE "Mary Jones" or what ever your name is, "email user name"; to what ever your user name is IE: "mary.jones"; and "email provider"; IE "yahoo.com";. You can also change the subject which the script will fill in on the email IE web page comments. Do not change anything else or the script will not work.

<SCRIPT language="JavaScript" type="text/JavaScript">
name = "your name";
user = "email user name";
site = "email provider";
document.write('<a href="mailto:' + user + '@' + site + '?subject=webpage comments' + '">');
document.write(name + '<\/a>');
</SCRIPT>

---

USGenWebProject | CoGenWeb | Co. Counties | Colorado History|
| Wish list | Reception Committee | HTML Help | CoGenWeb-rules |

---