HTML stands for HyperText Markup Language. In short it is a protocol that include “tags” that are used to encode and format text, graphics, animation, sound, and other types of files on the World Wide Web.
Basic steps: using tags
Tags are used by HTML to communicate to the browser on how to display text and images. Tags are < > symbols. You normally start with the beginning tag, put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag.
For example, to create a title for a document you would do the following:
<title>Basic HTML Explained</title>
The closing tag normally contains a “/” before the directive to indicate the termination of the action.
HTML tags are not case-sensitive, but URLs generally are. In most cases (with the exception of preformatted text) HTML collapses many spaces to one space and does not read blank lines. Although I would recommend when you write your text that you should leave several blank lines between paragraphs as this will make future editing easier.
The HTML tag
The <html> tag shows the point where text should start being interpreted as HTML code. The <html> tag is normally placed on the first line of your document and you should close the document with the </html> tag.
The head tag
The head of an HTML document contains information such as its title. The head of a document is show by <head> and </head>.
For the purposes of this class, only the title tag, below, should be included in the document head. A typical head section might look like:
<html>
<head>
<title>Basic HTML explained</title>
</head>
Titles
A title tag allows you to specify a Document Title in your browser window.
The format is:
<title>Basic HTML explained</title>
Remember, the title usually doesn’t appear in the document itself, but in a title box or bar at the top of the window.
The body tag
Like you might expect, the body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be in the body of the document.
The body should start after the head. A typical page might begin like
<html>
<head>
<title>Basic HTML explained</title>
</head>
<body>
Headers
There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 being the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another.
<h1>HEADER 1</h1>
HEADER 1
<h2>HEADER 2</h2>
HEADER 2
<h3>HEADER 3</h3>
HEADER 3
<h4>HEADER 4</h4>
HEADER 4
<h5>HEADER 5</h5>
HEADER 5
<h6>HEADER 6</h6>
HEADER 6
Headers, as you notice, not only vary in size, they are also bold. It’s important to use headers only for headings, not just to make text bold (I will cover the bold tag later).
Paragraphs
In HTML, a paragraph tag should be put at the end of every paragraph of “normal” text (normal being defined as not already having a tag associated with it).
<p> causes a line break and adds a trailing blank line
<br> causes a line break with no trailing blank line
As a convenience to yourself and others who might have to edit your HTML documents, it’s a very good idea to put two or three blank lines between paragraphs to facilitate editing.
Pre-formatted text
The pre-formatted text tag allows you to include text in your document that normally remains in a fixed-width font and retains the spaces, lines, and tabs of your source document. In other words, it leaves your text as it appears initially or just as you typed it in. Visually, preformatted text looks like a courier font.
<pre>this is
an example
of a preformatted
text tag</pre>
And this is how it displays:
this is
an example
of a preformatted
text tag
Bold, Italics and Underline
You can add emphasis to text by using the bold and italic tags or the emphasis and strong tags.
When using these tags, you usually cannot (and probably should not) have text that is both boldface and italics; the last tag encountered is usually the tag that is displayed. For example, if you had a boldface tag followed immediately by an italic tag, the tagged word would appear in italics.
Physical tags
This is a <b>bold</b> tag.
This is an <i>italic</i> tag.
This is an <u>underline</u> tag.
This is a bold tag.
This is an italic tag.
This is an underline tag.
Physical tags
This is a <strong>strong</strong> tag.
This is an <em>emphasized</em> tag.
This is an <ins>underline</ins> tag.
This is a strong tag.
This is an emphasized tag.
This is an inserted tag.
There is a subtle distinction between the above “physical” tags that merely change the displayed font, and “logical” styles that are used (or eventually will be) to make types of emphasis client specific (for instance, using the <em> tag would make text red). While either style is fine, be aware that differences in these two kinds of tags may be more apparent with advances in HTML.
Center
You can center text, images, and headings with the HTML center tag:
<center>HTML center tag</center>
HTML center tag
The center tag automatically inserts a line break after the closing center tag.
Addresses
The <address> tag normally appears at the end of a document and is used most frequently to mark information on contacting the author or institution that has supplied this information. Anything contained within the address tag appears in italics. The address tag is another example of a logical tag, and although it currently does nothing but make text appear in italics, this could change as HTML code advances.
Here is an example of how an address might appear:
<address>
Introduction to HTML / Paul Reed / p.reed@znhosting.com
</address>
And it would appear as:
Introduction to HTML / Paul Reed / p.reed@znhosting.com
Comments
You can include comments in an HTML document that do not appear when seen through a browser. This is very useful to give warnings, advice and special instructions to future editors of your document.
Comments take the form:
<!-----This comment will not appear in the browser----->
Strike-through
Finally there is a strike-through tag, which displays text with a strike.
<strike>Strike-through tag</strike>
This would appear as:
Strike-through tag
