Detta's Tips

Detta's Tips for Site Design and Validation

Intro
Use External Cascading Style Sheets
Validate Your Cascading Style Sheets
Review Your Site
Using JavaScripts
Before You Validate Your HTML 4.01
Validate Your HTML 4.01
Submitting Your Site:

Intro:

When I started out in web design, I made many mistakes. So I thought it would be nice to share some of the things I've learned so that you don't make the mistakes that I did. I'd like to thank Ian for suggesting that I include tips on my website.

The World Wide Web Consortium (W3C) made vast changes to the Hyper Text Markup Language (HTML) in Version 4.01. Many of the common tags, such as <font>, <center>, and <applet> are deprecated. The formal definition of deprecate is "express disapproval or disparagement of."

How does this apply to you? It means that future versions of HTML and XHTML will not include these tags. If you are designing your site to last several years, it is important to start using Cascading Style Sheets (CSS) and Dynamic Hypertext Markup Language (DHTML) or eXtensible Markup Language (XML) with it's own version of style sheets (XSLT).

Use External Cascading Style Sheets:

Using external files for CSS will save you lots of time if you later decide to make changes. In order to make an external sheet, all you need is a simple text editor, such as "Wordpad" or "Notepad". The text file created in the text editor for an external CSS should be saved as yourfilename.css.

If you don't know how to work with CSS, you may want to invest in a good book. I refer to Jason Cranford Teague's DHTML and CSS for the World Wide Web, 2nd Edition. In addition, I also refer to the many great sources on the Internet, such as Miraz Jordan's Getting Started with Cascading Style Sheets, W3School's CSS Tutorial and W3C's Learning CSS. Once you've started out with a simple style sheet, it's easy to add more styles to it. Any changes made to the external style sheet will be made to all your pages in your website.

To link the external CSS file to your website, put the following between the <head> and </head> tags for each of your pages:

NOTE: It is important to include the rel="stylesheet" in order to pass HTML 4.01 validation. Also, the external stylesheet reference must be in the head and not the body of your HTML code.

My beginning external style sheet looked like this:

body {
background: #99CCFF;
background-image: url(http://www.oocities.org/dian_hildebrandt/images/blucloudpap.jpg);
color: black;
}

p {
font-family: Tahoma, Kristen ITC, Arial, sans-serif;
font-size: 12pt;
color: black;
}

.reg {
font-family: Tahoma, Kristen ITC, Arial, sans-serif;
font-size: 12pt;
color: black;
}

NOTE: The background color will load before the image, so you need to set the background color before the image. The ".reg" is a class, and you use it by adding class="reg" inside your <p>, <table>, <div>, or <span> tag. For example:

Validate Your Cascading Style Sheets:

To make sure your style sheets will work correctly in the majority of browsers, you should validate it. I use the W3C CSS Validator. You may upload the files from your hard drive or have them checked from your URL.

Using JavaScripts:

For a JavaScript code that is embedded within the page use:

NOTE: It is important to include the type="text/javascript" in order to pass HTML 4.01 validation.

If you use the same JavaScript on more than one of the pages in your website, it may be a good idea to make it an external file. Copy the information between the <script> tags, then paste it into a text editor, such as "Wordpad" or "Notepad". Next, remove the comment tags from the very beginning and the very ending of the script. In the following example, the entire first line and last line would be removed:

Once you've done this, you're ready to save the file as yourfilename.js. To link the external JavaScript file to your website, put the following HTML code on your page:

NOTE: It is important to include the type="text/javascript" in order to pass HTML 4.01 validation. Also, if you have an external JavaScript reference in the <head> tag of your HTML code, it is best to place it as the last element before the </head> tag. The <noscript> tags are never placed inside the <head> tag.

Review Your Site:

It's always a good idea to check how your website will look to people using other browsers. If you normally use a version of Internet Explorer, try viewing your site in the different browser versions of Netscape or Opera, or vice versa. If your computer is a personal computer, ask someone you know that uses a Mac (or vice versa) to view your site and tell you if they encounter any problems.

Before You Validate Your HTML 4.01:

Before the beginning <html> tag, you need to put the following tag exactly as it appears below:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

If your site is made using frames, you would use this on the very first page which contains all the frames (not in each frame page):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

The charset declaration inside your<head> tag is best changed from: <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> to:

It's also a good idea to add these meta tags inside the <head> tag:

Make sure that you don't forget to supply a good site title, description, and keywords for each page. These three things are "search engine food," and help your site to be properly indexed. While there is not a best order for the elements in the <head> tag, some search engines prefer one or two elements to appear first, especially the title, so it may be a good idea to follow this order:

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Your Title Here</title>
<meta name="keywords" content=Your Keywords Here>
< meta name="description" content=Your Description Here>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<meta name="MSSmartTagsPreventParsing" content="true">
<link href="yourfilename.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="JavaScript" src="yourfilename.js"></script>
</head>
<body>

Be sure to check that your beginning tags have closing tags. For example, if you start a paragraph with a <p> tag, make sure your paragraph is closed with a </p> tag. This is a relatively common mistake.

Be sure that all of your image tags include alternative text (alt). For example, the image tag for my top navigation button is:
<img border="2" src="images/topbtn.gif" alt="Go to top of page" align="right" width="60" height="30">.

Double check how your tags are nested. They should be nested similar to the Algebraic "foil" method for multiplying algebra problems: "first, outer, inner, last." For example, an image centered inside a cell of a table should be nested as follows:

If you use any type of comment or if there are comments in any of the scripts, make sure it is in the correct format. There must be a space between the two hypens and the text. For example:

Validate Your HTML 4.01:

To make sure your HTML code will work correctly in the majority of browsers, you should validate it. I use the W3C HTML 4.01 Validator. You may upload the files from your hard drive or have them checked from your URL. This site also offers validation for XHTML.

Submitting Your Site:

Once your site passes validation, tell all of your friends and family to come view it and ask them to have their friends view it too. However, in order to bring the most visitors to your site, you'll need to submit it to search engines. The searches engines listed below are free:

ExactSeek.com

www.google.com

www.Kunani.com

www.SearchIt.com

www.Subjex.com

SurfGopher.com

Search Open Directory
Arts Business Computers Games Health Home News	Recreation Reference Regional Science Shopping Society Sports