header
 
     
 
pixel
pixel pixel

Introduction to HTML

HTML (HyperText Markup Language) is the language World Wide Web hypertext documents are written in. It features hypertext links where you click on a string of highlighted text and access a new document which can be at that site or anywhere else in the world. The new document is located by its URL (Universal Resource Locator) and can be another HTML document, pictures, sound files, etc. HTML is designed to be platform independent, not bound to a particular hardware or software environment.

HTML programs are written as plain, ASCII text files. This means they can be written in any text editor such as Write or Notepad. Personally, I use Dreamweaver but am regularly switching to code mode to edit the HTML directly anyway. I'm not a big fan of most HTML editors - without naming any names <cough>Frontpage</cough> they add all this needlessly complex HTML to your pages and I seem to spend more time cleaning unwanted code.

In the old days (eg - a year or two ago), the emphasis of HTML was on the structure of the text, leaving the appearance of your document up to the browser. With each new version of HTML, the web designer seems to have more control over the look of their webpages.

Elements and Tags

A HTML document is made up of elements. A typical element takes the form:
<h1> This is a Heading 1 Element </h1>
The bits at the beginning and end of the element, <h1> and </h1>, are called tags and usually enclose some text. The text within the < > denotes what kind of element you want. The <h1> indicates the start of the element, the </h1> with the forward slash marks the end. Of course, not all elements have a starting and ending tag. Elements that don't require an end tag are called empty or open elements (ie - <BR> forces a line break and doesn't enclose any text).

Some elements include attributes within the tag. An attribute is a variable that is assigned a value such as a filename, a number or whatever. Here's an example of an IMG tag with the attribute SRC in it:
<IMG SRC="filename.gif"> 
The IMG tag displays a graphic in your web page. The attribute SRC is the source of your image. filename.gif is the name of your graphic file. There'll be more on attributes and the IMG tag later.

Structure of a HTML document

Your whole HTML document is one big HTML element. In other words, it starts with a <html> tag and ends with a </html> tag.

Within the HTML element, your document is divided into two sections: the <head> and <body> elements. The <head> element contains descriptive information about the document. For example, the <title> element is found here. Generally, the <head> element is used for describing the document, not for displaying information (the exception - whatever text you have between your <title> </title> tags is displayed at the top of the browser). The real guts of your document is found within the <body> element. Here you display all your text, graphics, links and so on.

HTML documents have a logical structure. Elements are nested within each other adhering to certain rules and cannot overlap in an unstructured fashion. Here is an example of the overall structure of an HTML document:
<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        Info displayed in browser.
    </body>
</html>
And there is a basic overview of HTML. The other elements you can use within your Head and Body Elements will be covered in other tutorials.

Unhelpful Helpful Rating 1.3 (score out of 5, no. of ratings: 35)
Comments
Comment by B-Beach on 2004-12-14
need more information for new kid on the block

Comment by E. HOSTE on 2007-02-09
At last I have SOME idea what it is about & look forward to more. Thanks for making it free.

Comment by Willem Broekers on 2007-07-25
Finally I am getting to know what it is I\\\'m trying to do! Thanks for making it free. Looking forward to more info.

Post a Comment
Name
Email
(optional)
Comment
RatingUnhelpful Helpful
Security Image* (this is just to prevent spam submissions)
Security Image