1. HTML
HTML, which stands for HyperText Markup Language, is the
predominant markup language for web pages. It provides a
means to create structured documents by denoting structural
semantics for text such as headings, paragraphs, lists, links,
quotes, and other items. It allows images and objects to be
embedded and can be used to create interactive forms. It is
written in the form of HTML elements consisting of "tags"
surrounded by angle brackets within the web page content. It
can load scripts in languages such as JavaScript which affect
the behavior of HTML webpages. HTML can also be used to
include Cascading Style Sheets (CSS) to define the
appearance and layout of text and other material. The W3C,
maintainer of both HTML and CSS standards, encourages
the use of CSS over explicit presentational markup.
2. Basic HTML Commands
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.
3. 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>
<title>My First HTML Document</title>
</head>
4. 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:
<title>My First HTML Document</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>My First HTML Document</title>
</head>
<body>
5. 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
<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
6. Paragraphs
In HTML, a paragraph tag <p> 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.
7. 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
8. 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 <b>boldface</b> tag.
This is how boldfacing appears.
This is an <i>italic</i> tag.
This is how italics appear.
Logical tags
This is a <strong>strongly emphasized</strong> tag.
This is a strongly emphasized tag.
This is an <em>emphasized</em> tag.
This is an emphasized tag.
9. 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
10. *
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>
Here is how that list would display:
1. list item 1
2. list item 2
3. list item 3
11. 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
12. 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>
13. Here is how that list would display:
* 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
14. 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.
15. 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
16. 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:
<!-----This comment will not appear in the browser----->
The comment can even break lines
<!----This comment won't be seen by
anyone either even though it's broken between lines--->
17. 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
18. 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:
á .... á â .... â æ .... æ
à .... à & .... & å .... å
ã .... ã ä .... ä ç .... ç
é .... é ê .... ê è .... è
ð .... ð ë .... ë > .... >
í .... í î .... î ì .... ì
ï .... ï < .... < ñ .... ñ
ó .... ó ô .... ô ò .... ò
ø .... ø õ .... õ ö .... ö
" .... " ß .... ß þ .... þ
ú .... ú û .... û ù .... ù
ü .... ü ý .... ý ÿ .... ÿ
19. Advanced commands
Command Parameter
and Definition Corresponding Parameter Values
and Commands with Examples
action=" "
Defines the URL to which form output will be directed. If the action parameter is
omitted then the URL of the document, itself, if assumed.
Expressed as a target URL (Uniform Resource Locator).
<FORM>
Example:
action="http://www.txsi.com/cgi-bin/form.pl"
align=
Defines the alignment of an object, element or some text.
absbottom absmiddle abstop
20. alink=
Defines the default color displayed momentarily when a link is clicked on.
Expressed as a named color or as the hexadecimal code of a specific color in
#RRGGBB format.
<BODY>
Examples:
alink="blue"alink="#ff0000"
alt=" "
Defines some alternate text which is displayed either while an inline image is loading or in
place of the image if it cannot be displayed, as in a text-based browser, or if the user has
turned off inline image displays.
Can be any text, but it should be indicative of image content because it may be used by
browsers to locate images.
<IMG>
Example:
alt="George Washington - Copley portrait"
21. bgcolor=" "
Defines the default background color of the screen used for the page.
Expressed as a named color or as the hexadecimal code of a specific color in
#RRGGBB format.
<BODY>
Examples:
bgcolor="white" bgcolor="#ffffff"
bgproperties=
Used in conjunction with the background parameter in the Internet Explorer browser, this
command attribute will allow a background image to float on a page like a watermark.
fixed
<BODY>
Example:
bgproperties=fixed
22. border=
Defines the width in pixels of the border surrounding a bordered object.
Expressed as the number of pixels.
All commands using this parameter.
Example:
border=10
bordercolor=" "
Defines the color applied to the border of a bordered object.
Expressed as a named color or as the hexadecimal code of a specific color in
#RRGGBB format. The attribute is recognized only by the Internet Explorer browser.
<FRAME> <TABLE> <TD> <TH> <TR>
Examples:
bordercolor="blue" bordercolor="#0000ff"
23. cellpadding=
Defines the standoff or amount of white space between the edges of a table cell and the table data.
Expressed as the number of pixels.
<TABLE>
Example:
cellpadding=10
cellspacing=
Defines the amount of space or gutter to allow between table cells in a table.
Expressed as the number of pixels.
<TABLE>
Example:
cellspacing=5
clear=
Defines the mode in which the browser should clear the margins after the placement of an aligned inline image.
Value all clears both margins.
all left right
<BR>
Example:
clear=all
24. delay value.
<COMMANDS>
Example:
example
enctype value.
<COMMANDS>
Example:
example
25. face=" "
Defines a single font face or a list of font faces to be used. Only face names exactly matching
those installed on the user's microcomputer can be displayed. The first matching font face
presented in the font name list is accepted and displayed.
Any font face name.
<BASEFONT> <FONT>
Example:
face="geneva, arial, helvetica, helv, futura"
frame value.
<COMMANDS>
Example:
example
26. frameborder=
Used to toggle frame borders on and off or define their width.
Netscape allows only yes/no. The default value is yes.
Internet Explorer allows definition of frame border width in pixels. Obviously, setting the value to 0 toggles borders off.
See also: noframeborder.
<FRAME> <FRAMESET>
Examples:
frameborder="no" frameborder=0
framespacing=
Defines the amount of the standoff or white space around the inner margin of a frame.
Expressed as pixels. Specific to the Internet Explorer browser.
<FRAME> <FRAMESET>
Example:
framespacing=8
gutter=
Defines the amount of white space allowed between columns in multicolumn formatted text.
Expressed in pixels. Netscape browser only.
<MULTICOL>
Example:
gutter=10
27. id=" "
Supported only in Style Sheets by the Internet Explorer browser. Names a predefined Style
Sheet function. Each id within an HTML document must be unique.
Can be expressed by any name or label. Each defined id must be unique.
Any command that supports Style Sheet specifications.
Example:
id="redtext"
ismap
Declares an inline image to be a named server-side mapped image. The server on which the
image resides must have the appropriate software installed to parse the image map properly
and assign URLs to defined image areas.
Stands alone. Takes no value.
<IMG>
Example:
ismap
28. loop=" "
Used in the Internet Explorer browser to define whether or not a video image will loop back
to the beginning and how many times it will repeat.
Defined as a positive integer it sets the number of repetitions. Defined as infinite or
-1 it allows continuous looping. The parameter is specific to the Internet Explorer browser.
<IMG>
Example:
loop="-1"
loopdelay=
Used in the Internet Explorer browser to define the number of milliseconds to ellapse before
looping back to the start of a video image.
Expressed in milliseconds.
<IMG>
Example:
loopdelay=20
29. lowsrc=" "
Defines an alternate low resolution image source to be displayed by the browser while the
high resolution image is loading.
Expressed as the URL (Uniform Resource Locator) of the low resolution image. The
parameter is not supported by the Internet Explorer browser.
<IMG>
Example:
lowsrc="images/back_low.jpg"
marginheight
marginwidth
These parameters control the height and width, respectively, of the margins of frames in a
framed HTML document.
Expressed in pixels. A value of 0 is not allowed since the browser cannot allow
frames to overlap or touch. Ideally, these parameters should match for the best esthetic
effect.
<FRAME> <FRAMESET>
Examples:
30. method=
Defines the way in which HTTP will process form output.
Standard values are get and post. The default value is get and is assumed if the
parameter is omitted.
<FORM>
Example:
method=post
methods=" "
A very advanced HTML feature which allows the user to overide or predefine the HTTP
methods which a user is allowed to use to access and execute the code in the target URL.
A comma-delimited list of standard HTTP method values available from CERN and
UIUC.
<A>
name=" "
Generally specifies a name to a labeled HTML element or object.
Expressed as any unique label name. Objects or elements in the same class cannot
share the same label name.
31. vspace=
Defines the vertical standoff or amount of white space surrounding an object or element.
Expressed in pixels.
All commands using this parameter.
Example:
vspace=10
width=
Defines the width of an object or element.
Expressed either in pixels or as a percent of the space available for display.
All commands using this parameter.
Examples:
width=600width=75%
