Basic HTML Commands: Basic Steps: Using Tags

Basic HTML commands
This section covers some basic HTML commands and explains the steps involved in
preparing a document for viewing via the World Wide Web.
Basic steps: using tags

HTML uses tags to communicate to the client (browser) how to display text and
images. Tags are contained in < > symbols. In most cases you 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>My First HTML Document</title>
The closing tag normally contains a "/" before the directive to indicate the termination
of the action.
HTML tags are not case-sensitive, although 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. However, when you write your text you should leave
several blank lines between paragraphs to make editing your HTML source document
easier.
The HTML tag
Although not currently required by all clients, the <html> tag signals the point where
text should start being interpreted as HTML code. It's probably a good idea to include
it in all your documents now, so you don't have to go back to your files and add it
later.
The <html> tag is usually placed on the first line of your document. At the end of
your document you should close with the </html> tag.
The head tag

Just like the header of a memo, the head of an HTML document contains special
information, like its title. The head of a document is demarcated by <head> and
</head> respectively.
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>
</head>
Titles
A title tag allows you to specify a Document Title in your browser window. When
people make hotlists, this title is what they see in their list after they add your
document. The format is:
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>
</head>
<body>
Headers
There are up to six levels of headers that can be used in your document, h1 through
h6. Header 1 is 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>This is a header 1 tag</h1>
This is a header 1 tag
Headers, as you notice, not only vary in size, they are also bold and have a blank line
inserted before and after them. It's important to use headers only for headings, not just
to make text bold (we 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).
 causes a line break and adds a trailing blank line
 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.
Preformatted text
The preformatted 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. Most clients collapse multiple spaces into one space, even tabs are collapsed to
one space. The only way to circumvent this is to use the preformatted tag. 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
Boldface and Italics
You can add emphasis to text by using the boldface and italic tags or the emphasis and
strong tags.
There is an underline tag as well, but most people don't use it since text that is linked
is often underlined. The potential for confusion and the archaic nature of underlining
in general make it a poor marker for emphasis.
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 boldface tag.
This is how boldfacing appears.
This is an italic tag.
This is how italics appear.
Logical tags
This is a strongly emphasized tag.
This is a strongly emphasized tag.
This is an emphasized tag.
This is an emphasized tag.
There is a subtle distinction between the above "physical" tags which merely change
the displayed font, and "logical" styles which are used (or eventually will be) to make
types of emphasis client specific (for instance, using the 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.
Lists
There is an easy way in HTML to have numbered, unnumbered, and definition lists.
In addition, you can nest lists within lists.
When using lists, you have no control over the amount of space between the bullet or
list number, HTML automatically does this for you. Neither (as yet) do you have
control over what type of bullet will be used as each browser is different.
Unnumbered lists
Unnumbered lists are started with the <ul> tag, followed by the actual list items,
which are marked with the <li> tag. The list is ended with the ending tag </ul>.
For example, here is an unnumbered list with three items:

<ul>
<li> list item 1
<li> list item 2
<li> list item 3
</ul>
Here is how that list would display:
 list item 1
 list item 2
 list item 3
Numbered lists
Here is the same list using a numbered list format:
<ol>
<li> list item 1
<li> list item 2
<li> list item 3
</ol>
1. list item 1
2. list item 2
3. list item 3
Definition lists
Definition lists allow you to indent without necessarily having to use bullets.
<dl>
<dt> This is a term
<dd> This is a definition
<dd> And yet another definition
<dt> Another term
<dd> Another definition
</dl>
And here is how this would be displayed
This is a term
This is a definition.
And yet another definition.
Another term
Another definition
Nested lists
Finally, here is a nested list within an unnumbered list (we could just have easily had
a nested list within a numbered list).
<ul>
<li> list item 1
<ul>
<li> nested item 1
<li> nested item 2
</ul>
<li> list item 2
<ul>
<li> nested item 1
<li> nested item 2
</ul>
<li> list item 3
<ul>
<li> nested item 1
<li> nested item 2
</ul>
</ul>
 list item 1
o nested item 1
o nested item 2
 list item 2
o nested item 1
o nested item 2
 list item 3
o nested item 1
o nested item 2
Blockquote
The blockquote tag indents the text (both on the left and right) inside the tags. The
blockquote tag looks like this:
<blockquote>...</blockquote>
and displays like this:
Blockquoted text is often used for indenting big blocks of text such as quotations. The
text will be indented until the ending tag is encountered. Again, note that the text here
is indented on both the left and the right margins.
Center
You can center text, images, and headings with the center tag:
<center>This is a centered sentence</center>
This is a centered sentence.
The center tag automatically inserts a line break after the closing center tag.
Horizontal Rule
To separate sections in a document, you can insert a horizontal rule tag <hr>. A
horizontal rule is displayed as follows:
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 / Pat Androget / Pat_Androget@ncsu.edu
</address>
And it would appear as:
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu
Comments
It is possible to include comments in a source HTML document that do not appear

when seen through a browser. This is most useful for giving warnings and special
instructions to future editors of your document.
Comments take the form:


The comment can even break lines

Strike-through
Should you want it, there is a strike-through tag which displays text with a strike.
<strike>This is struck through text</strike>
displays as
This is struck through text
Special Characters
Finally, if you often use the characters which make up HTML tags (such as < >, and
&), or you use special characters not in the ascii standard, you will have to use special
tags. Here are the codes:
á .... á â .... â æ .... æ
à .... à & .... & å .... å
ã .... ã ä .... ä ç .... ç
é .... é ê .... ê è .... è
ð .... ð ë .... ë > .... >
í .... í î .... î ì .... ì
ï .... ï < .... < ñ .... ñ
ó .... ó ô .... ô ò .... ò
ø .... ø õ .... õ ö .... ö
" .... " ß .... ß þ .... þ
ú .... ú û .... û ù .... ù
ü .... ü ý .... ý ÿ .... ÿ
Return to Table of Contents

Basic HTML Commands: Basic Steps: Using Tags

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic HTML Commands: Basic Steps: Using Tags

Uploaded by

Copyright:

Available Formats

Basic HTML commands

Basic steps: using tags

The HTML tag

The head tag

The body tag

<h2>This is a header 2 tag</h2>

This is a header 2 tag

<h3>This is a header 3 tag</h3>

This is a header 3 tag

<h4>This is a header 4 tag</h4>

This is a header 4 tag

<h5>This is a header 5 tag</h5>

This is a header 5 tag

<h6>This is a header 6 tag</h6>

This is a header 6 tag

Boldface and Italics

For example, here is an unnumbered list with three items:

Here is an example of how an address might appear:

It is possible to include comments in a source HTML document that do not appear

Comments take the form:

This is struck through text

You might also like