The more constraints one imposes, the more one frees oneself of the chains that shackle the spirit... the arbitrariness of the constraint only serves to obtain precision of execution.

—Igor Stravinsky

HTML

The documents you will be creating are text-only documents. No matter how fancy the page is, how many animations or images, the foundation of it all is a simple text document.
The text in the source document contains two things:

1. the actual text to be displayed
2. special markers called elements and tags, which specify the structure of the web page such as headings, paragraphs and so on. For most elements you use pairs of tags (an open and a close tag). Tags are set off from the the regular text by < and > symbols.

The closing tag contains a / to indicate the termination of the element. Between the pair of tags you place the text to be displayed.

Syntax refers to the rules for how something needs to be written and punctuated.
Before you can write HTML pages, you need to understand structure and syntax.

The source document has two sections
1. the head
2. the body

The head element, marked by the <head> </head> tags contains special information such as the the tags that define the documents title:

<head>
<title>WWW Introduction</title>
<meta name="generator" content="BBEdit 7.0.3" />
</head>

The body element of the source document contains everything that will be displayed by the browser as the Web page and is marked by the <body> </body> tags. Keep in mind that you cannot put just text within the body tags. The text must be within header, p, div or table tags. Common tags are header and p tags.

I generally put a pair of div tags within my bodytags so that I don't have to use p tags.
The largest header is marked using the <h1> and </h1> tags

<h1>Level 1 Header </h1>

<h2>Level 2 Header </h2>

<h3>Level 3 Header </h3>

<h4>Level 4 Header </h4>

<h5>Level 5 Header </h5>

<h6>Level 6 Header </h6>

To mark paragraphs you can use the <p></p> tags which will insert a blank line at the beginning and at the end of your text block.

The entire source code is enclosed within the <html> </html> tags and the first line of the document specifies the document type.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
</head>
<body>
<div>
<h1>The HTML document</h1>

<p>Interdum volgus videt, est ubi peccat. Si veteres ita miratur
laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si
quaedam nimis antique, si peraque dure dicere credit eos, ignave multa
fatetur, et sapit et mecum facit et Iova iudicat aequo. Non equidem
insector delendave carmina Livi esse reor, memini quae plagosum mihi
parvo Orbilium dictare; sed emendata videri pulchraque et exactis
minimum distantia miror. Inter quae verbum emicuit si forte decorum, et
si versus paulo concinnior unus et alter, iniuste totum ducit venditque
poema.</p>

<img src="images/macaroni.gif" alt="" width="43" height="81" />

</div>
</body>
</html>

produces a page like this:

The HTML document

Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo. Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, iniuste totum ducit venditque poema.

Creating pages

You could use any text editor to create a web page, but we will use BBEdit. Text editors that create text-only documents, create documents that do not contain any hidden formatting characters.

Open BBEdit
Select Control+ +N to open a new HTML document.
Make sure XHTML 1.0 Strict is selected
Give your document a title (This is what appears on the top of your browser).
Press OK
Save the document in your web folder and include the extention .html

XHTML

XHTML stands for Extensible Hypertext Markup Language Officially released in January of 2000, XHTML is based on XML rules and philosophy and was created to standardize HTML. Basically XHTML separates the content from the presentation.

Other useful tags

The <br /> element specifies a line break. This tag is an exception to the rule that elements always have a separate open and close tag. There is no </br> tag. This tag is referred to as an empty element. To indicate that it is an empty tag you place a space and the / after the element: <br />

Within a paragraph you might want to make a word italic or bold. You would use the inline <em> </em> or <strong> </strong> elements.

If you wanted to classify a block of text as a long quotation, you might want to use the block-level <blockquote><p> </p><blockquote> element:

Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit

While the preferred way to specify a font is through a stylesheet, you can use the <big> <big> element to specify Big text or the <small> <small> element to spacify small text.

In order to make your code more readable you should use comments:

<!--  your comment here -->

Links

Links are created using the anchor tag <a href="url">text</a>

Standard unvisited links are underlined and blue and visited links are purple.

All links must include "link text" — that is the text (or image) that serves as the link. Here this is the link text.

Absolute Links

This method of linking uses the full URL for the resource you are linking to. Use this type of link when you are linking to resources that are not within your site.

Relative Links

The notation of "../" is used to move up one level in the hierarchy. To move down in the folder hierarchy, enter the name of the folder. If the file you are linking to is in the same folder, simply use the name of the file.

XHTML