2 Create a Website
Mar 11
What Is HTML - HTML Introduction PDF Print E-mail
Written by Administrator   
Sunday, 03 January 2010 09:31

HTML Tutorials

HTML Introduction

Before we start working through the different tutorials of HTML, lets have a look at some background information of HTML.

2 Create A Website 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 from one page to the next.

This markup language files can have the extension of .html or .htm. eg. index.html

2 Create A Website 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 here are the most popular are:

  1. Microsoft Internet Explorer
  2. Mozilla Firefox
  3. Google Chrome
  4. Opera

What is WWW?

WWW stands for world wide web. Basically the www is an entity that consists of computers (servers) that are connected to each other 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:

  1. http://www.how-2-create-a-website.com
  2. http://how-2-create-a-website.com
  3. 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

  1. Strict DTD
  2. Loose DTD
  3. 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">

 

2 Create A Website HTML Basic Document Structure

A proper HTML document should comprise of the following 3 parts.

  1. A Document Type Definition (DTD)
  2. A Head section
  3. 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> </head> 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