HTML:Basics

HTML file extensions

As you have already discovered in the previous exercise, a HTML document is simply a text document with a different file extension. Instead of a ".txt" at the end of the filename, signifying that the document is a text file, a ".htm" or ".html" extension signifies that the file is a HTML document (web page).

HINTS: "htm" is the usual file extension for web pages in MS Windows operating systems, "html" is usually used on other operating systems, such as UNIX/LINUX/etc.

In the first exercise, you could have simply written any text you like, and save it with a "htm" extension. This is a web page. When opened in a web browser (Internet Explorer/Firefox/Netscape Navigator) the text in the file appears in the web browser window.

HTML Tags

What makes web pages different from text files is that we can use formatting commands to control the way the text is displayed. These formatting commands are called HTML TAGS. When the web browser opens the file, it reads the file looking for any HTML tags and adjusts the display of the text according to the command.

HINTS: The words "render" and "interpret" are used extensively throughout this workbook. Rendering or Interpreting is the way the web page is displayed in a web browser, example "…this is how the web page is rendered…" means "this is how the web page looks when displayed in a web browser."

The following is a line from a simple web page:

<P>Hello</P>

Most HTML tags come in two parts: the first part, known as the start tag, is the <P> in this example, and the second part, known as the end or closing tag, is the </P>. Almost all HTML tags must be used as a pair, though there are some exceptions that we’ll look at later. Any text placed between the start tag, and the end tag is displayed or rendered, according to what the tag defines. This example uses the paragraph tag, <P> and </P>, and tells the browser to render the text, "Hello" between the start and closing tag as a paragraph.

Tag Attributes

<P align="center">Hello</P>

Almost all HTML tags also have attributes. An attribute is something that adds additional control to a HTML tag. In the example above, the

<P align="center">

tag tells your browser that whatever text is between the start and end tags should be formatted as a paragraph and to centre justify the paragraph, so that the paragraph appears in the (horizontal) centre of the page.

SUMMARY: P is the tag name, ALIGN is the attribute, center is the value of the attribute. Tag, Attribute, Value. In order to follow established standards, ensure that all tags are uppercase, all attributes are lowercase, and all values are lowercase. You will be marked down in your assessments if you do not follow this.

HTML Syntax

VERY IMPORTANT NOTE: The World Wide Web Consortium (the group who wrote the rules for HTML) are an American based organisation, thus all the language used is American-English, not British-English. As such, all spellings must be American not British, like "center" above. Syntax

Put simply, the word "Syntax" means the way in which things are written. In the English language, syntax is important, but we can still understand what someone is trying to say, even if they say it with poor syntax.

"Thursday, the last one, not this one, bought I shoes, new, from town, when I went there."

The sentence above is syntactically and grammatically incorrect, but we can still understand what the writer is trying to tell us. A computer will not.

Computers are programmed to understand whatever humans tell them to understand. The syntax rules written for HTML are very strict – we say that all tags must start with a "<" symbol, then have a name, then optionally they can have attributes, and most attributes have values that we use the "=" symbol to set then close with the ">" symbol, and so on. The computer will not understand what to do with the page if we make any errors at all with the way we write the tag commands.

For example, the computer will not understand

<P align="centre">

even though it is obvious to us, because we have spelt centre in the British language version. It will not do what we expect it to do.

<P align="center">

is correct and will centre a paragraph.

More than 90% of the errors that you will face when writing HTML will come from syntax errors like the one described above.

Standard Web Page Structure

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <HTML>
   <HEAD>
      <TITLE> put your title here </TITLE>
   </HEAD>
   <BODY>
     put the contents of your webpage here
   </BODY>
 </HTML>

Above is the standard web page structure you must use for all of your web pages created for the exercises in this book. You should use the above structure, even if the example shows you just a few lines of HTML code. Unless otherwise prompted, all sample code not containing the standard web page structure should be inserted into the area marked "put the contents of your webpage here."

Matthew's Rules

Throughout this workbook, there are a number of Matthew's Rules. These have been designed to ensure that if you are following best practice in your work. If you are completing any assessed work for a module that this workbook is used for, it is highly likely that you will be assessed against these rules (and other criteria) to grade your work.

Failure to follow these rules in the creation of assessed material will likely result in poorer grades for any assessment.

Matthew's Rule 1 – Must Have Standard Structure

For the duration of this workbook, and any assessments you submit for this module, you MUST use the standard structure, as shown in the blue box above. Failure to do this, will result in your assessments grade being significantly reduced. Tutors will periodically check to make sure that you are following this rule in your workshop exercises.

Ready to move on?

If you're happy with the content of this page, try 03 - Essential Tags