HTML:Basics

Main Page >> Website fundamentals >> Workbook >> HTML >> HTML Basics

HTML file extensions

A HTML document or webpage is simply a text document with a different file extension. Instead of a ".txt" at the end of the file name, signifying that the document is a text file, a ".htm" or ".html" extension signifies that the file is a HTML document (web page).

• HINT: "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/Safari) the text in the file appears in the web browser window.

HTML Tags

A HTML tag is an implementation of a HTML element. For example, the paragraph element is defined in the DTD. You are able to create a paragraph (aka implement an instance of the paragraph element) by writing the element-name (P) in the form of a tag (<P>).

When a web browser opens a HTML file, it reads the file looking for any HTML tags, references the DTD to find out how to treat the tags, and adjusts the display of the content according to the command.

For example, in the previous section we used a paragraph. We did not specify things like font, font sizes, alignment, colours, and so on. The DTD tells the browser what to do with a paragraph, and the browser will have a series of default settings for paragraphs if the font etc. are not defined in the webpage.

HINT: 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

<IMG src="homer.jpg" alt="Homer">

Almost all HTML tags also have attributes. An attribute is something that adds additional control to a HTML tag. In the example above, the <IMG> tag tells your browser that the image to be shown at this location is found in the source file (SRC) homer.jpg, and that the alternative text (ALT) to be displayed when no images can be shown is the word Homer.

SUMMARY: IMG is the element, src is the attribute, homer.jpg is the value of the attribute. Element, 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 and Grammar

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.

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

The sentence above is 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 an element-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 "centre" is spelt in British-English. 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//EN" "http://www.w3.org/TR/html4/strict.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."

HTML Good Practice

Throughout this workbook, there are a number of items that fall under HTML Good Practice. 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.

HTML Good Practice - 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 HTML:Essentials

Related Pages

<categorytree mode="pages">HTML</categorytree>