HTML Help & Resources
Getting Started
This section of our help reference focuses solely on beginners and people who have absolutely no knowledge of programming or HTML. So, if you already have a basic knowledge of HTML you may want to skip this page.
Before learning the HTML language, discovering what software or programs you can use to experiment, and learn by trial and error is important. Basically, you can create an HTML document in just about any word processing software, such as Microsoft Windows Notepad, Wordpad, or Word. In fact, any program in which you can edit and save text, is potentially one in which you could save an HTML document.
HTML documents, saved from a text file or word processor, need to have a file extension of .HTML or .HTM. Of course, these extensions inform your operating system which program to use to open these documents. In the case of HTML extensions, your browser, such as Internet Explorer, FireFox, or Safari will launch when attempting to execute the process of opening these files.
If the process of saving and executing these files seems to complicated or confusing, don't worry. Using our product to create HTML documents and pages is easy. All that is required of you is to input the code and press the preview button, in which case the code is automatically saved and executed to your screen for you to examine the results. However, once you've learned the basics, it may ultmately be easier and more efficient to experiment and test outside of our product enviroment, using your own resources instead.
All HTML documents have the same basic outline, no matter what they end up outputing to the screen. They have starting and ending points:
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Each element of an HTML document usually has a starting/opening tag followed by a ending/closing tag. And, these tags are defined by an opening identification character < followed by an ending identification character >. However, if the tag is to signify the end of a tag, the / character precedes the tag name as shown in the example at left.
In the example above we have 3 tags used, and each tag has a start and an end. Everything between the start and end of a tag is defined as a member of that tag. For instance, in the above example, the <HEAD> and <BODY> tags are members of the <HTML> tag because they fall between the start ( <HTML> ) and the end ( </HTML> ) of the <HTML> tag. This is referred to as “nesting” - the HEAD and BODY tags are nested inside the HTML tag.
The above example serves as the basis in which to create any HTML document. the <HTML> tag represents the start of every HTML document. Likewise, every document must have a closing HTML tag.
Inside the HTML tag we have the HEAD and BODY elements, and much like a human being, the head, or what's inside the head, can control or inform the body. In the case of HTML, the head does, in fact, inform the body of how, or under what context, to display information. Both of these tags are necessary and mandatory parts of a properly constructed HTML document. Without the head, the document is defined by a user's operating system and browser, followed by the content inside the body tags. In other words, without using the head element in HTML documents, you lose a certain level of control over what and how content appears. Conversely, if you omit the body tag, your document will not display properly, if at all.
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY>
This is my first HTML document.
</BODY>
</HTML>
Open your favorite text editor and copy and paste the example at left into the editor. Save the file, choosing any name you like, except instead of .doc or .txt, enter .htm - and save the file to a location, like your desktop, or somewhere easy to find. Locate the newly created .htm file and double click on the filename. Your default browser will open and display the contents - which will read “This is my first HTML document.”.
The HTML Document Version
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The HTML document version is very important, and especially if you want your documents to appear as close to the same in every browser as possible. As you may know, each browser type has unique and different methods in which they interpret HTML and CSS code. And, as the versions of HTML pass, more and more elements and tags are classified as depreciated, which means browsers, if left to their own devices, will not display outdated or depreciated items.
For example, the tag <B>, which is used to make text bold, is a depreciated HTML element, and if you do not plan for this in your documents you will encounter inconsistent results using this tag. To remedy this, we implement the “ TRANSISTIONAL ” description for the document version. This informs the browser to continue to display and utilize depreciated HTML tags.
And, just as important, is the line, or link, that appears directly below the transistional description - http://www.w3.org/TR/html4/loose.dtd. This allows browsers to immediately download a reference to be used with the document in displaying the items neccessary.
| Internet Explorer | 64% |
| FireFox | 18% |
| Safari | 11% |
| Google Chrome | 4% |
| Opera | 2% |
| Mozilla | 1% |
| All Others | 1% |
It's important to note, not all browsers will rely solely on the document version, instead overriding and implementing its own display preferences. This, of course, can drive programmers insane, because of the inconsistent results. That's why programmers must download all of the different browser versions and test each configuration, adapting their code to suit each browser preference, if necessary. However, all of the more popular, modern, browsers do rely on the document version, allowing the standardized display of documents. A list below describes the estimated and approximate market share for each browser:
The Home Page
Every website has, or should have, a home or default starting page. And, this page is directly associated with the domain name, in that when a user visits www.domain.com they view the default page associated with the domain. This default page, is usually called index, default or home with the supporting extension such as .htm, .html, .php, .asp, and so on. Index is the only universally accepted name, included with every web hosting provider, which means a server will search for a file named “ index.??? ” first to display. In the absence of an index page, most servers will then search for “ default.??? ” or “ home.??? ”.
If none of these files are found, an error message is displayed ( 404 Error - File Not Found on this Server ). The only other, proper, way to call your home page something other than index, default or home, is to define this information inside an “ .htaccess ” file, inside the document root of your web hosting service provider, where you can define, or rewrite, the default name of your home page. Re-directing from your default page, using a meta refresh or using a dynamic, client-side script, will ultimately damage your website profile in search engines - avoid this method whenever possible.
Alternative methods to the re-direct, or client-side script, would include server-side elements, meaning your server ( web hosting service ) would configure what document is displayed instead of the browser allowing for a more consistent outcome. There are two common methods to be used:
- Using a 301 Re-Direct in an .htaccess file.
- Using a server-side scripting language such as PHP to display alternate content.
You're On Your Way
Of course, starting out is the easy part, as you've discovered. It's what's inside the HEAD and BODY tags that can appear to be complex at first. However, as you move along, learning more about the features of HTML, you'll discover it's really not that difficult to understand because of the consistent and methodical way tags and elements are processed.
You will progressively begin to see patterns and recognize how uniform and organized the language is, and you'll be on you way to programming documents in HTML. Read on further in our archives, use and copy the examples, test, analyze, and experiment.
Move on to the Next Topic - The Document Head.