Change color of Background
                                   


Help with Modern HTML 4.01






Errors I have found in many web sites

This is not intended to teach you HTML coding from scratch but rather how to avoid common mistakes I've seen helping with others. My theory of HTML is the less code you use to display the content the better. It is the content people visit your site for, not how fancy it is or pretty, although that doesn't hurt. I code by hand using a program called TopStyle 4.1, 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 only make it easier 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 co-ordinator of Alamosa, CoGenWeb around 1998 (I have since have left GenWeb) 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 Web Developer 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 with a few pages and put it up on the space for our work email address and made a proposal to my managers. We were able to pay for our domain and host our website for a fraction of what the Web Developer company charged us and we could put up as many pages as we wanted and change it any time we needed to.

I want to make a short statement about readability. There is a reason pretty much all commercial sites are white backgrounds and black text, they want you to be able to read them! Think double hard before doing something like a black background with funky color text or any other dark background. You need high contrast between your text and the background so it can be read. Also don't expect people to read what you write if you use tinny tiny fonts sizes or weird script fonts. I'm slightly color blind and getting to the point in my mid-40's (where did time go?) it is getting harder and harder to read small fonts. Females are especially prone to do things like pink text on aqua colored backgrounds.. People like me will skip right on by your website.

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 plain does not need to be there and in some cases serves no purpose. They tend to use complex tables to place evry thing and wrap everything in a font tags, I've seen pages with hundreds of unnecessary font tags.. Very few of the pages I've written use tables and displays just fine and are a lot easier to figure out and change. I've tried DreamWeaver C3 and still prefer HomeSite (what I used before Topstyle, HomeSite is no longer supported, was bought out by Adobe) . 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 controlled 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 free pages or other sites) if you don't have one and someone goes to your base URL I.E <a href="http://scottsword.info/">Scott's World</a> If 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 outside 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 you can also use it to refresh a page by using the same file name in the URL and changing the content from 0 to something higher, it is in seconds.. I do this with my Scott's weather station site to reload the pages every 5 minutes.

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, links.html, photos.html, genealogy.html, etc. Many servers are CaSe sensitive and Links.html is a different file name from links.html. Be consistent with what you do.

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 because of the under score), thisisareallylongfilename.vip.png (too long, 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, IE if one tag contains another tag, the tag inside the first must be closed before the first. 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. A similar idea in CSS element placement is Box Model Theory and Understanding the Box Model. BTW, HTML tags should be written in lower case, not capital letters, future versions they must be lower case so start now.

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. Your containers can not overlap.
Another example would be opening the strong tag and not closing it at all or not closing the <p> or a List Item <li> (more on that later).
</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 are a few exceptions to the container rule <br> (line BReak), <hr> (Horizontal Rule), image <img, <meta, and <link tags do not have closing tags. Future version of HTML such as XHTML (eXtensible HTML) or XML require they be closed thus <br />, <hr />, images <img src="image/scott.jpg" width="225" height="87" border="0" alt="Scott's Photo" />, and Meta and Link tags which are found in the <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> , <link rel="stylesheet" type="text/css" href="main.css" title="default" /></head> part of your HTML document.


<p> (Paragraph) is not interchangeable with <br>  which should be used to break elements and not <p> which should not be left open. That is an error I see A LOT. 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 as it was intended to contain paragraphs of text. A line break is inherent at the end of a Paragraph </p>. BTW <br> has a few attributes which are not mentioned much. <br clear="all"> is the most useful for making a line break around elements that want to be stubborn about it. The attributes are all, left, right and none, although I don't have a clue what you'd use none for..

The sentences on this page are an example of a paragraph with a P element style class that says to indent the first word of paragraphs 30px or Pixels and sets the font style, size and weight. It looks like this in the style sheet:
p { text-indent: 30px; font-style: normal; font-size: 19px; font-weight: 300; }

I just realized I had introduced Style Sheets and not explained anything about it, that is something I will get more into farther down the page, but for now I will say Style is a powerful addition to HTML that allows you to control things you could not do with straight HTML. It also allows you to control stuff site wide with out having to write the code for it in every page. It is commonly referred to as CSS (Cascading Style Sheet).

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

<div align="center"> is preferred generic container for holding items other than paragraphs of text.</div> Combined with a CSS style sheet that sets class attributes like positioning, background, borders, and so on it can be a very powerful tag. There are two <div id="container"> </div> <div id="footer">footer </div> that set the margins, padding and transparent borders of the content and footer of this and my other pages. Note that id= should only be used once per page where class= can be used in any tag..

Span should be used to set the CSS class of an element with out affecting the formatting of the page <span class="XXL"> This is really large text </span> I changed the data in the span but not the page around it.

Horizontal Rule
This is a plain <hr>


This is a <hr> wide Horizontal Rule <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 which is a common mistake I see. The size sets the height, default size 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, but you could also align it left or right.

You can also set the width of hr horizontal rule <hr noshade size="5" width="50%" align="left"> and align it left just because we can.

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




Tables

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 left
  </td>
  <td>
        This is the second cell right
  </td>
</tr>
</table>

EXAMPLE:

This is the left cell This is the right cell


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

This is the first row
This is the second row




You can do any combination of columns and rows, tables can be quite complex and easy to be messed up. Just remember that <td>Table Data/cell/column</td> must be inside <tr>Table Row</tr> but you can have any number of <td>Table Data/cell/column</td> pairs inside the <tr>Table Row</tr> The more <td>content column</td> pairs you the more columns you will have. This is an example of a page with complex table structure you can see: Scott's Weather Station near 43rd Ave & Camelback Rd, Phoenix, AZ, Phoenix area Weather Exchange

This is the structure of the 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 visible to the viewer. 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. The header would be here with the logo and images would be here inside another table which places the elements of the header,
This is the left column where the navigation code would go.
This is the right data column where the contents go.
more stuff would follow
and more stuff.


The code for the above table looks something like this


<table align="center" cellpadding="2" cellspacing="2" width="95%" border="3">
  <tr>
   <td colspan="2" align="center" bgcolor="#ffffff">
        images and logos
   </td>
 </tr>
 <tr>
   <td width="15%" bgcolor="#ffffff" valign="top">
        This would create a two cell row this is the first cell
  </td>

  <td width="85%" valign="top" bgcolor="#ffffff">
        This is the second cell
  </td>
</tr>
</table>

Table errors will cause your pages to display wrong or not at all, as can other tag nesting order problems. Common problems I see in pages are <td> table data tags are not closed or <tr> table rows tags are not closed or not closed in the correct order. A good rule with </tr> close table row tag is either it must be followed by a new <tr> tag or the table must be closed </table>. Also all data in the table MUST be inside a pair of <td>this is Data </td> tags, and all <td> tags pairs must be inside of a Table Row <tr> tag pair. You can have more than one pair (as many as you need) of <td> </td> between <tr> </tr> tags but they must be paired. The Table Data tags <td> must be closed </td> before the next <td> is opened or the next <tr> tag. Tables can be much larger and complex than the samples above with multiple rows and columns. Think of it as <td> </td> creates a box followed by more <td> </td> will create a row of boxes or in combination with <tr> <td> </td> </tr> can create rows of one box or 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 which is used inside the <table> </table> before and after all the <tr> tags, it is not necessary and many browsers do not support it but they will just ignore it. Front Page and some other editors seem to put it in anyway.




Element Alignment

<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 or their contents you'd like to position; table, td, th, div, p, hr, h1 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 table <td> </td>(table data).

You can vertically align and center data in 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.

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

Using quotes on values

Any value that follows an equal sign must be quoted thus; align="center",  width="600", height="20", border="0" <a href="index.html"> not a real link</a> also links out side of the site must be preceded with the http <a href="http://scottsworld.info">Scott's World</a> before rest of the address. A link to a page on your site can be done thus: <a href="index.html">Home Page</a> as long as they are in the same folder. If you wanted to link to a file in a folder above the one your file is in you would do this <a href="../index.html">Home Page</a>.




ASCII code

You should not use high value ASCII code in the text of your web pages, it may or may not display correctly. Firefox displays stuff that isn't coded right as a diamond with a question mark in the middle of it. The common ones are that should be replaced are " which you should use &quot;, & &amp;, © &copy;, ° &deg; and ¶ &para; , < &lt; Less than sign, > &gt; Greater than sign, any accented letter symbles such as aacute á &aacute; and there are a lot more. See Character Entity Sets for an extensive list, also ASCII Character Codes Chart There are a lot of them in my Spanish/Espanol version of the Plan of Salvation page El Plan de Dios de la redencion y la salvacion.




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. If you change UL to OL, an ordered list, then it will number the list items instead of display a dot. Using style sheet commands gives you a lot more options for the list style types and do other things you can't with HTML.

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:


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

I use Detail Lists </dl> a lot for scripture placement on God's Plan of Salvation, and Which is the True Church?
The questions on this page are in a OL <ol> list which generates the numbers next to them.   101 Answers from the Book of Mormon to life's great questions

The first two lists use <li> for elements </li> can NOT be used with 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 <ul> on my General Bookmarks links page of my personal website. This is a link to my list of helpfull pages to learn about html, CSS and being a webmaster.

Scott's World 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




Fonts

<font> are also depreciated (being phased out) it is highly recommended you use a Cascading Style Sheet instead. If you really need to change one line or word for some reason you can use an inline style like an old font tag. This is an inline styled span element it looks like this: <span style="color: #ff0000; font-size: 26px; font-weight: 300; font-family: "Times New Roman", serif;">This is an inline styled span element it looks like this:</span>

I am not an expert on style sheets (still learning) 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 unnecessary code from your pages. If you decide you want to change how text looks, an element should be bold, bigger, smaller, italic, centered, sanserif instead of serif, what ever you want, you can change the element attributes in your style sheet and it will change the look of every instance of that element on every page of your website when you upload the style sheet and you only had to edit one file! You should have a link to your style sheet <head> some where between the </head> tags of your website. The metatag 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>

Colors

You can use named colors, hexdecimal colors, or RGB color coding. I've not played with RGB values, if you know them great, if not stick with hex or named colors. You can color text, backgrounds, borders and maybe other things I haven't thought of as I write this.. You can use either the color keywords or the hex values. You can set the background of the page <body background="white">, background of table elements is bgcolor="#E1E1E1". In CSS you do it a bit diffrently color: Black; or in hexdecimal color: #000000; would set the color of text,

HTML4 keyword color names
     Aqua = #00FFFF      Olive = #808000
     Black = #000000      Purple = #800080
     Blue = #0000FF      Red = #FF0000
     Fuchsia = #FF00FF      Maroon = #800000
     Gray = #808080      Silver = #C0C0C0
     Green = #008000      Teal = #008080
     Lime = #00FF00      White = #FFFFFF
     Navy = #000080      Yellow = #FFFF00


There are several links about color use on my general links page under HTMLWeb education A some what complex explination of different color codes. CSS3 Color Module


Style precedence

You can do Styles in three ways and this is the order of their precedence. Inline styles override everything above them, styles in the head of the page come second and an external style sheet comes last. It is best to put your styling in the external sheet so you can control the whole website with it. If you need to change something on one page that is different then you would use Internal styles in the head or inline styles to control a particular element. This page will tell you more about that (note it opens a new window) CSS Basics.com Chapter: 1 - Introduction to CSS.

Selectors

When I told you about Span <span class="XXL">This is really large text</span> I need to tell you that class=XXL is a CSS selector, one of several I use to select font sizes from my external style sheet, not a standard CSS command. A Selector is any command or collection of commands that starts ".selectorname", in your Style Sheet you call it though the use of the class="selectorname", which you could put in about any HTML element. You can name it anything you want, but it can not start with a number, also you should know they are CaSe sensitive and your .selectorname and class="selectorname" must be exactly the same. In my external style sheet the selector looks like this:
.XXL { font-style: normal; font-size: 26px; font-weight: 300; }
called by class="XXL" can be used as many times as needed.

#container{ width: 90%; padding: 8px; border: 0px none transparent; background-color: #ffffff; background-image: none; }
called by id="container" note you don't use the #, should only be used once in a page.

Selectors are used to control special elements, I use them to set things like the size, color and boldness of special text and to make headlines. For the most part the power of CSS is to set the attributes of an HTML element so you don't have to use all those class= or id= commands which just add more junk that really doesn't need to be there. I've read that you can use class="whatever" as many times as you need, but id="specific" should only be used once per page. When I see a page full of inline styles that are set in the code instead of an external style sheet I have to wonder why?? It is no different than using all those font tags they were meant to replace and makes the code bloated and more complex which pretty much defeats the whole idea of a style sheet. I'm not saying you should never use inline styles or class statements, sometimes they are necessary which is why the exist, but just because you can do something doesn't mean you should unless you absolutely have too. Keep it simple! An example of the styling of the HTML element <p> that I am using:
p { text-indent: 30px; font-style: normal; font-size: 19px; font-weight: 300; }

Sample style sheets and expmple sites

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

You might find these pages interesting, I used them when I was testing the style sheet for my website and testing font sizes control methods. I choose to use px because it seems (to me) to give the most consistent size between different browsers. Most sites will tell you to use proportional fonts to accommodate the people who use font control in IE, but very few mention that if you have one element inside another and both have a proportional font set the inner element will in proportion to the first and therefore smaller, so you have to be careful with them. Fixed fonts have no such problem. I have tested it and you can zoom the page in and out on my site in both Firefox and IE using <ctrl> + plus or - Minus, <ctrl> and the scroll wheel on a mouse will do the same. It only affects those few people who have used Page; Font Size and changed it there in IE. I think the solution is to not use tiny fonts in the first place, you will note I use fairly large text on my site. I am near sighted so I appreciate sites that use decent font sized fonts and I have a Firefox plug in called Stylish that can change the styles of other sites I need to. You can see the few I've published at Userstyles.org Scott's User styles They also work with Grease Monkey which I've not used.
Try viewing the pages with Firefox and IE and note the differences between they way display the pages.
CSS Test 1/Demonstration Page
CSS Test & Font size Demonstration Page
Sample Page




DOCTYPE

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.
You can learn why DocType is important from these two sites (opens new windows) Fix Your Site With the Right DOCTYPE!Dive Into Accessibility: Day 6: Choosing a DOCTYPE



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>



For HTML strict: (Use this doctype if your document is in HTML 4.01, uses a style sheet and contains no deprecated tags.) Be sure you validate you code as perfect to use this DocType.
<!doctype html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>






Page Stucture

This is a basic structure of a page in HTML 4.01, with a style sheet.   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... If you cut and past the below into notepad and saved it as a filename.html you would have the beginnings of a page that just add needed content and proper title, ect. You would also have to save the style sheet download sample generic style sheet, sample page below.


<!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
     <title>sample</title>
    <meta name="description" CONTENT="sample page description">
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <link rel="stylesheet" type="text/css" href="sample.css" title="Default">
 </head>
 <body>

 </body>
</html>

This is close to the structure of the sample page with out the content


<!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
     <title>sample</title>
    <meta name="description" CONTENT="sample page description">
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <link rel="stylesheet" type="text/css" href="sample.css" title="Default">
 </head>
 <body>
 <!-- Begin Container -->
 <div id="container">
<h1 align="center">HTML Help</h1>
<hr noshade size="3">
   <p>           Content goes between the <body>Body tags</body>, 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>this is my page</title> tag tells what your website is and what the page is.
   </p>

   <p>
          More content would go in the next paragraph
   </p>
<hr noshade size="3"
 </div>  <!-- End Container -->
 <!-- Begin Footer -->
 <div id="footer">
<span class="S"> This page was last updated <script language="JavaScript" type="text/JavaScript"> <!-- document.write("modified " + document.lastModified); // ********** --> </script> <br> Copyright &copy; 1998 - <dscript language="JavaScript" type="text/JavaScript"> <!-- ********** Begin var months=new Array(13); var time=new Date(); var lmonth=months[time.getMonth() + 1];var date=time.getDate();var year=time.getYear();if (year < 2000) // Y2K Fix, Isaac Powell year = year + 1900; // http://onyx.idbsu.edu/~ipowell document.write(year + ""); // End ********** -->
</script> by Scott<br>
All Rights Reserved<br>
</span>
 </div>
 <!-- ********** END Footer ********** -->
 </body>
</html>

Comments

BTW this is a HTML comment it starts with <!-- and ends with -->, <!-- this is a note in the code that can't be seen in the page --> it is a good idea to put notes in your code so you know what you did later.. The *** makes it easer for me to find the comments, I use them as markers in sections of the code. /* this is a comment in a style sheet */, it starts with /* and ends with */ and allows you to put comments in your style sheet what things do.

Here is a full Sample Page with some various example content for you to look at. Here is the same page with out the CSS so you can see what the CSS does Sample no CSS Page. Open the page and then right click anywhere on the page (except over images) and select view source to see the code and contents, the style sheet is above. You can do this with most any page to see how it is constructed. Something else I should mention you should create a template page and then use it to create other pages then it will already have the begining structure of a page so you don't have to start from scratch each time and then you just need to add the content, change the title of the page and save the page as whatever.htm or what ever you want to call it. Don't forget to make links to your new page in your old pages. Navigation, how people get around your site is very important. If they can't find their way around they will leave. Most visitors look at a page and if they don't like what they see they leave quickly. You could copy the above in to a file, remove the words and save it as your template if you wanted.

Validate Your Code

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.

Valid HTML 4.01 Transitional Valid CSS!



Spam Proof Email Link

BTW, the below 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>



Share




Valid HTML 4.01 Transitional Valid CSS!



If the links don't work right in your browser (IE), there are text links near the bottom of the page. Try Firefox





[About Scott] [Genealogy, Scott's Ancestry]
[Scott's Testimony of The Church of Jesus Christ of Latter-day Saints]
[Gospel Principles lessons list] [Gospel Principles Comments and Resources]
[COME NOW, AND LET US REASON TOGETHER]
[God's Plan of Salvation] [Questions Answered by the Book of Mormon]
[101 Answers from the Book of Mormon to life's great questions]
[The Challenge the Book of Mormon Makes to the World] [Bible Prophecies of the Book of Mormon]
[Which is the True Church?] [The Bible is the Only word of God?]
[The People's Right to Bear Arms] [2nd Amendment Quotes] [Conservative Opinions]
[LDS & Genealogy Bookmarks] [General Bookmarks] [RKBA, Political & news Bookmarks]
[Home] [E-Mail Scott] [Site Map]
[HTML 4.01 help and hints] [About Scott's World Web Pages]
[Descendants of Capt. Henry Woodward.] [LDS Singles List and LDS Singles Webring]
[Scott's Conservative Blog] [Scott's World Blog]


Links to me