1. WHAT IS HTML?
HTML (Hyper Text Markup Language) is the core language used in formatting and structuring Web based documents and content.
HTML (and the World Wide Web) was first proposed in 1989 by Tim Berners-Lee an English researcher at the CERN laboratories in Switzerland. The first HTML based system came on line in 1990 and the nascent World Wide Web debuted the following year (1991).
Initially a completely text-based formatting language, HTML has since undergone extensive revisions and extension incorporating first images and later dynamic content and other embeded media.
HTML standards (most recently HTML 4.0) are currently maintained by a private non-profit foundation, the World Wide Web Consortium (WC3).
2. USING HTML
HTML documents are simple text files that can be created, edited and saved using (among other tools) the utility text editors bundled with most operating systems (e.g. Window's Notepad, Apple's TextEdit and so on).
HTML pages are saved with the extension .html (or .htm on Win 9x systems)
Most HTML document include at least two components:
First, an HTML document contains the plain text which displays when the document is viewed in a browser.
Second, an HTML document includes formatting and layout instructions known as markup and which are hidden from the browser within angle brackets (< >) or "tags".
The displayed and hidden contents are collectively known as the document's "source code". Here is the source code for a very basic HTML document (document.html):
Listing 2.1 Source of document.html
<html>
<body>
<center>Plain Text</center>
</body>
</html>
This is how document.html would display in a browser:
Listing 2.2 Result of document.html
Some Text
3. HTML TAGS
There are two general types of HTML markup: structural and formatting.
Structural markup controls the layout and positioning of document contents and includes, among other things: paragraphs (<p></p>) and line breaks (<br />)
Formatting markup controls the appearance of the displayed content and includes, among other things: bold (<b></b>) and italic (<i></i>) tags.
Listing 3.1 HTML Markup
<html>
<body>
<p>A paragraph with plain text</p>
<p>A paragraph with <i>italic</i> text</p>
<p>A paragraph with <b>bold</b> text</p>
<p>A paragraph with a <br />line break</p>
<p align=center>A centered paragraph</p>
</body>
</html>
A paragraph with plain text
A paragraph with italic text
A paragraph with bold text
A paragraph with a
line break
A centered paragraph
3.1 OPENING & CLOSING TAGS
Note that some of the tags are in fact tag sets (e.g. <p></p>) while some tags (<br />) stand alone.
In the case of the paragraph (<p>) the closing tag in the set is optional. In practical terms this means that the paragraph ends (is closed) when the browser reaches the next paragraph tag.
In the case of the bold (<b>) the closing tag in the set is required. In practical terms this means that the browser will continue bolding text until it encounters a closing tag (and won't make text any bolder if it encounters additional initial bold tags)
3.2 ATTRIBUTES
Note also that one of the paragraphs contained an internal value assignment (<p align=center>)
This key/value pair is known as an attribute.
The paragraph has one optional attribute (align) which determines the horizontal alignment of text and other elements within the paragraph and has four optional values (left | center | right | justify).
Listing 3.2 Attributes
<html>
<body>
<p>A default aligned paragraph</p>
<p align=left>A left aligned paragraph</p>
<p align=center>A center aligned paragraph</p>
<p align=right>A right aligned paragraph</p>
</body>
</html>
A default aligned paragraph
A left aligned paragraph
A center aligned paragraph
A right aligned paragraph
The attributes (optional and otherwise) associated with the various elments are amply set forth below.
4. STRUCTURAL ELEMENTS
An HTML document has no default structure and largely ignores text layout conventions (hard line breaks, returns, tabs) found in the source contents.
All whitespace in an HTML document (spaces, tabs, line breaks, carriage returns) are rendered as a single inline space:
Listing 4.1 Whitespace
<html>
<body>
<p>All
whitespace is
rendered
as a
single
space
</p>
</body>
</html>
All
whitespace
is
rendered
as a
single
space
Structure can be added to the document using structural markup including the paragraph (<p>) and line break (<br />) elements above as well as with, among things, heading elements, list elements, tables (<table></table>) and page divisions (<div></div>).
4.1 PARAGRAPHS
The paragraph is a block level structural element. Contents enclosed in the paragraph are displayed following a hard return and one line of intial offset from the proceeding element in the document.
The paragraph includes a start and end tag. The end tag is optional.
4.1.1 PARAGRAPH ATTRIBUTES
As already noted, the paragraph has one optional attribute (align) which determines the horizontal alignment of text and other elements within the paragraph.
Align has four possible values: (left | center | right | justify) with left as the default when not explicitly assigned:
Listing 4.2 Paragraphs
<html>
<body>
<p>A default aligned paragraph</p>
<p align=left>A left aligned paragraph</p>
<p align=center>A center aligned paragraph</p>
<p align=right>A right aligned paragraph</p>
</body>
</html>
A default aligned paragraph
A left aligned paragraph
A center aligned paragraph
A right aligned paragraph
4.2 LINE BREAKS
The line break element is displayed as a single line return. The line break includes only a start tag which may be rendered as (<br> or preferably <br />)
4.2.1 LINE BREAK ATTRIBUTES
Line breaks have no standard attributes.
Listing 4.3 Line Breaks
<html>
<body>
<p>A single<br />line break</p>
<p>A double<br /><br />line break</p>
<p align=center>A line break<br />in centered paragraph</p>
</body>
</html>
A single
line break
A double
line break
A line break
in centered paragraph
4.3 LISTS
HTML lists are block level structural elements enclosing one or more list items (<li></li>).
There are two basic kinds of lists: unordered (<ul><li></li></ul>); and ordered (<ol><li></li></ol>).
Unordered lists display list contents in the form of block level bulleted list with a hanging left indent.
Ordered lists display list contents in the form of block level numbered list with a hanging left indent.
Listing 4.4 Lists
<html>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
<ol>
<li>list item 1</li>
<li>list item 2</li>
</ol>
</body>
</html>
4.3.1 UNORDERED LIST, MENUS AND DIRECTORIES
HTML includes three unordered list types:
These are all rendered more or less equally by browsers (and much like the list above) with the list being displayed following a hard line break and one line of offset from the proceeding element and list items being displayed with a bullet and hanging left indent
The list parent elements include start and end tags. The parent end tag is required.
The list child items (li) include start and end tags. The item end tag is optional.
4.3.1.1 UNORDERED LIST, MENU AND DIRECTORY ATTRIBUTES
Unordered lists, menus and directories parent elements have no standard attributes.
Unordered lists, menus and directories child list elements have one standard attribute (type) which determines the type of bullet to be displayed: (circle | disc | square)
Listing 4.5 Unorder Lists, Menus, Directories
<html>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li type=circle>list item circle</li>
<li type=disc>list item disc</li>
<li type=square>list item square</li>
</ul>
<menu>
<li>list item 1</li>
<li>list item 2</li>
</menu>
<dir>
<li>list item 1</li>
<li>list item 2</li>
</dir>
</body>
</html>
- list item 1
- list item 2
- list item circle
- list item disc
- list item square
list item 1
list item 2
4.3.2 ORDERED LISTS
The ordered list parent elements include start and end tags (<ol></ol>). The parent end tag is required.
The list child items (<li></li>) include start and end tags. The item end tag is optional.
4.3.2.1 ORDERED LIST ATTRIBUTES
Ordered list parent elements have no standard attributes.
Ordered list child list items have two optional attributes (type and value) which determines the type and value of the ordinal character to be displayed.
Type: Ordinal character types include integers as well as upper and lower case roman and alphanumeric values: (1 | I | i | A | a)
Value can be set to an integer which represents a literal value to be assigned to the items displayed order (and resets the list counts for subsequent items):
Listing 4.6 Order Lists
<html>
<body>
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<ol>
<li type=A>list item 1</li>
<li type=A>list item 2</li>
<li type=A>list item 3</li>
</ol>
<ol>
<li type=i>list item 1</li>
<li type=i>list item 2</li>
<li type=i>list item 3</li>
</ol>
<ol>
<li type=1 value=20>list item 1</li>
<li type=1>list item 2</li>
<li type=1>list item 3</li>
</ol>
</body>
</html>
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
- list item 1
- list item 2
- list item 3
See, also: strike, strike
5. FORMATTING ELEMENTS
5.1 BOLD, ITALIC, UNDERLINE
5.1.1 BOLD, ITALIC, UNDERLINE ATTRIBUTES
The Bold, Italic, Underline elements have no standard attributes.
Listing 5.1 Bold, Italic, Underline
<html>
<body>
<p><b>Bold</b> Text</p>
<p><i>Italic</i> Text</p>
<p><u>Underlined</u> Text</p>
</body>
</html>
Bold Text
Italic Text
Underlined Text
See, also: strike, strike
5.2 BIG, SMALL, SUPERSCRIPT, SUBSCRIPT
5.2.1 BIG, SMALL, SUPERSCRIPT, SUBSCRIPT ATTRIBUTES
The Big, Small, Superscript, Subscript elements have no standard attributes.
Listing 5.1 Big, Small, Superscript, Subscript
<html>
<body>
<p><big>T</big>HE <big>T</big>REATISE</p>
<p>T<small>HE</small> T<small>REATISE</small></p>
<p>The Treatise<sup>n.1</sup></p>
<p>H<sub>2</sub>O</p>
</body>
</html>
THE TREATISE
THE TREATISE
The Treatisen.1
H2O
See, also: strike, strike
6. EMBEDED ELEMENTS
6.1 ANCHOR LINKS
Listing 6.1 Anchor
<html>
<body>
<p><a href="#">link</a></p>
</body>
</html>
6.2 IMAGES
The image element <img /> embeds an image file (.jpg, .gif or .png) that will diplay with the document's contents.
6.2.1 IMAGE ATTRIBUTES
The image element accepts one (1) required attribute (src) and five (5) optional attributes (width, height, alt, border and align)
<img src="source" width="length" height="length" alt="alt text" />
6.2.1.1 IMAGE SRC
The value assigned src attribute is a URI that represents the location of the image file to be displayed.
The src attribute can be assigned to a file in the same directory as the HTML file, a relative directory or even a directory in remote domain:
Listing 6.2 Image Src
<html>
<body>
<p><img src="example.gif" /></p>
<p><img src="images/example.gif" /></p>
<p><img src="../images/example.gif" /></p>
<p><img src="http://example.com/images/example.gif" /></p>
</body>
</html>
6.2.1.2 IMAGE WIDTH & HEIGHT
6.2.1.3 IMAGE BORDER
< ! > UNDER CONSTRUCTION < ! >