Creating an HTML document is straightforward. All that's required is a simple text editor such as Notepad or Wordpad (not Word) that can save a file as simple text (not rich text).
HTML instructions are typed in and the file then saved to the hard drive with a .html or .htm extension (instead of .txt). The file can then be viewed in the browser by going to the File menu, selecting Open, browsing the hard drive to find the file then double clicking it.
HTML Tags
An HTML document consists of the text to be displayed in the browser, interspersed with HTML tags. Tags are instructions to the browser on how to render the document and a tag begins with the less than character < and ends with the greater than character > with the name of the instruction (element) between. Most HTML elements have a start tag and a closing tag with whatever the element is to operate on, written between the tags.
Example: To create bold text the bold element can be used. "I want <b>this</b> in bold." Will produce "I want this in bold."
Almost all HTML elements have a start and closing tag, with the forward slash at the beginning of the closing tag but there are few exceptions. For example the element to break to new line has no closing tag and is written as <br>.
If the browser encounters a tag it doesn't recognise, for example <nonsense> (there's no such tag), it just ignores it. HTML differs from languages like PHP in that an error will not stop processing (PHP stops when it encounters an error). This is to avoid pages breaking, and even badly written HTML will normally display reasonably well.
Attributes
Attributes extend the capabilities of elements and are placed within the opening tag. For example a heading element such as <h1>My Heading</h1> will align left by default but can be centred with the align attribute. e.g. <h1 align="center">My Heading</h1>. Many tags support multiple attributes that can be used to give fine control of the formatting of a document.
Required Elements
As a minimum an HTML document should contain the following elements.
<!doctype>. This declares the type of document and what version of HTML has been used - it has no closing tag. A document will display without this element but it can't be properly validated.
<html>. This signals the start of the HTML document and should have a corresponding closing tag at the end of the document.
<head>. This is the header of the document and contains information such as the title etc. which will not actually appear on the page. It has a corresponding closing tag.
<body>. This is where all the elements and content go that will be displayed on the page. It also has a corresponding closing tag.
Document Types
The two most up to date document types are HTML 4.01 and XHTML 1.0 and both of these can be written as transitional or strict. Transitional allows you to use mark-up from earlier versions which would now be considered obsolete (depreciated) if validated as strict.
The difference between HTML and XHTML is that HTML does not conform fully to the syntax of XML whereas XHTML does. XML is more portable than HTML and is extensible therefore XHTML is considered to be extended XML.
HTML or XHTML?
Whether you choose to use HTML or XHTML is up to you since there's not much difference, but XHTML is probably favourite.
If you choose to go for HTML 4.01 transitional then ...
the document declaration is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
all elements should be in lower case.
If you choose to go for XHTML 1.0 transitional then ...
the document declaration is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
all elements must be in lower case.
all elements that have no closing tag must end with space forward slash e.g. <br> becomes <br />.
Therefore a basic document with required elements should be like one of the ones below.
HTML 4.01 transitional Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> </head> <body> Some content here <br> Some more content here </body> </html>
XHTML 1.0 transitional Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> Some content here <br /> Some more content here </body> </html>