How 2 Create A Website | HTML 4 Introduction
Before we start working through the different tutorials of HTML, lets have a look at some background information of HTML.
What is HTML?
Hypertext Markup Language is the authoring software language used on the Internet's World Wide Web. HTML is used for creating World Wide Web pages.
MARKUP is a method used to tell a web browser how to display a page and content.
HYPER TEXT - Link HTML pages together in such a way that you can navigate form one page to the next.
This markup language files can have the extension of .html or .htm. eg. index.html
How can you view html?
To view HTML you will need to have a web browser to compile the HTML code and display it to you in a readable form. You can also view html in authoring software eg. Microsoft Frontpage and Dreamweaver.
There are lots of web browsers on the market, but the two most popular are
- Microsoft Internet Explorer
- Mozilla Firefox
What is new in HTML 4?
There are lots of new features in HTML 4, but I will mention a few of them.
|
What is WWW?
WWW stands for world wide web. Basically the www is an entity that consists of computers (servers) that are connected to eachother via telephone lines, or satelite.
The html hyperlink makes it possible for us to surf the www between different websites. What makes this all possible is a protocol called (HTTP) HyperText Transfer Protocol, which allows communication between pc's and servers.
Domains
This is basically the address of a website. The same like we have letterboxes and have addresses, so does domains work.
Here is an example of a domain http://www.how-2-create-a-website.com
In actual fact the above domain name actually consists of an IP address eg. 127.2.1.3
I can address this website address name with different variations:
- http://www.how-2-create-a-website.com
- http://how-2-create-a-website.com
- http://how-2-create-a-website.com/index.html
Who control the HTML standard?
The World Wide Web Consortium (W3C) create a standard so that all web browsers can conform to this standard.
Check them out here at W3C
Document Type Definitions
The W3C consortium developed 3 types of document declarations.
Your first line of HTML code should contain a declaration of which version of HTML you are using in the document.
This document declaration is called "Document Type Definitions" or DTD in short. Basically this states the language rule used in html document.
Here are the three DTD's
- Strict DTD
- Loose DTD
- Frameset DTD
1. Strict DTD
Strict DTD is used in documents that uses valid HTML 4markup .
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
2. Loose DTD
This specification is not as strict as strict dtd, but accomodate older markup that is not used anymore. Back compatible.
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
3. Frameset DTD
This DTD is used for a HTML frameset document that uses frames.
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
HTML Basic Document Structure
A proper HTML document should comprise of the following 3 parts.
- A Document Type Definition (DTD)
- A Head section
- A body section
Here is an example HTML document structure.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> [Head info {title and meta tags} will be here] </head> <body> [Body {content} info will be here] </body> </html> |
Title Tag
The title is between the <head> </tags> tags. the title tag displays the document titile in the web browser windo title bar on top.
| <head> <title>New Page 1</title> </head> |
Body Tag
In the body tag you can type your content eg. Hello World!
<body> Hello World! </body> |
The web browser will display the words
Hello World!
What tools can you use to create HTML documents?
A simple free tool that can be used is Microsoft Notepad. You only need to save the file with the extension .html or .htm to create your web page. You will have code everything yourself.
There are WYSIWYG (What you see is what you get) tools that you can buy like Microsoft Frontpage and Dreamweaver.
These authoring tools have syntax color highlighting and offers preview modes to see how the page will look. You can quickly create a webpage without coding everything yourself. Almost drag and drop.
How can you validate your HTML to see if it conforms to the W3C standard?
Dreamweaver 8 has a feature built in which can validate markup.
Alternatively you can go to W3C website and use their html validator at:
http://validator.w3c.org
This tool will quickly validate your document online and if there are errors, give you a breakdown and how to fix it.
HTML authoring tips
- Take into consideration universial accessibility
- Speed
- Make you html layout neat and readable
- Use new techology like css for presentation
next | working with html 4 code tutorials