Basic HTML Commands
Uploaded by
Vedamurthy JBasic HTML Commands
Uploaded by
Vedamurthy JBasic 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>
<title>My First HTML Document</title>
</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:
<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>
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
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 <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.
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 <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.
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 <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.
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>
Here is how that list would display:
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>
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
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:
<!-----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--->
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:
á .... á â .... â æ .... æ
à .... à & .... & å .... å
ã .... ã ä .... ä ç .... ç
é .... é ê .... ê è .... è
ð .... ð ë .... ë > .... >
í .... í î .... î ì .... ì
ï .... ï < .... < ñ .... ñ
ó .... ó ô .... ô ò .... ò
ø .... ø õ .... õ ö .... ö
" .... " ß .... ß þ .... þ
ú .... ú û .... û ù .... ù
ü .... ü ý .... ý ÿ .... ÿ
Tag Name Usage
<a> Link.
<b> Bold the text within the tag.
<body> The information within this tag is the body of the HTML document.
<br> Line break.
<center> Center the text within the tag.
<font> Specify the font type, size, and color for the text within the tag.
<frame> Specifies the properties within each frame.
<frameset> Signifies that this HTML page is composed of frame(s).
<h1>...<h6> The text within these tags are treated as headers.
<head> The text within this tag specifies the header information for the HTML document.
<i> Italicize the text within the tag.
<img> Specifies the image to be shown on the HTML document.
<li> Itemized list.
Specifies information about this HTML page. This information is not displayed on the browser
<meta>
but may be used by search engines.
<ol> Ordered list, usually followed by one or more <li> tags.
<p> New paragraph.
<table> Signifies the presence of an HTML table.
<td> Specifies column properties in a table.
<tr> Specifies row properties in a table.
<title> The text within this tag specifies the title of the HTML document.
<u> Underline the text within the tag.
<ul> Unordered list, usually followed by one or more <li> tags.
HTML Commands
We offer this table as a quick reference to supplement the HTML tutorial. It
shows the commands, a brief statement of their use, which attributes can modify
them, and which commands they can inhabit or include, but it doesn't go over
the basics of HTML syntax. If you're new to HTML, visit Spin Doctor's Web
Design 101 first.
Body:
Character Formatting
Global Head Breaks, Headings, and Titles
Images and Forms
Lists and Tables
Hypertext Anchors
Attributes and Can Can be
Commands Purpose
Extensions Subsume: Nested inside:
Global
<<<Top
Next>>
<!--...--> allows you to insert a line of some browsers may execute the tags
browser-invisible comments in inside comment lines, so it's best to
avoid nesting commands within
your document
comments
marks the opening and closing <head>...</head> surrounds all other
<html>...</html> of an HTML document <body>...</body> HTML commands
<title>...</title>
immediately after
<meta>
<HTML> and
creates the head of an HTML <isindex>
<head>...</head> document <base>
before
<BODY>...</BO
<nextid>
DY>
<link>
background=
designates a file to
be displayed as
background
bgcolor="#(hexade
cimal color code)"
sets the
background color
text="#(hexadecim
al color code)" sets
all lists,
creates the color of plain
anchors, tables, inside
the body text
forms, images, <html>...</html>
<body>...</body> of an link="#(hexadecim
text, breaks, and after
HTML al color code)" sets
characters, <head>...</head>
document the color of
and headings
unfollowed text
links
alink="#(hexadeci
mal color code)"
sets the color of
active text links
vlink="#(hexadeci
mal color code)"
sets the color of
visited text links
HTML 3.0: <blockquote>
activates
prompt="..." allows you to specify the ...</blockquote>
the
search prompt. <body>...</body>
<isindex> browser's
(default prompt is "This is a <dd> or <li>
searching
searchable index. Enter search <form>...</form>
function
keywords:") <head>...</head>
Head
<<Previous
Top
Next>>
this
command
,
primarily
used by
HTML-
generatin
href="url" of document linked to this
g tools,
one
indicates
name=anchor (if the link is an anchor)
a
rel="(linked to document in relation to
relationsh
this document)"
ip to
<link> other
rev="(reverse rel b/w this doc and
other doc)"
document
urn=uniform resource number
s (and
title="title of linked-to doc"
unlike
methods="ftp, gopher, etc." (method
anchors,
of retrieving other document)
cannot
indicate
relationsh
ips to
parts of
document
s)
allows inside
you to
specify <HEAD>
metacont ...</HEAD>
ent (self-
http-equiv="name" content="value"
referentia
names a new HTTP header field
l content,
whose data will be specified as
or
CONTENT
informati
<meta> on about
HTTP-Equiv="Expires
content="never"
the
document
name="key" of key/value pair.
itself--
content="value" of key/value pair.
meant to
be read
by
machines
)
indicates
the full
URL of
<base> the
href="URL"
Body
<<Previous
Top
Next>>
Formatting
<<Previous
Top
Next>>
<br>
<a>...</a> or
<img>
<address>...</add <blockquote>
ress> ...</blockquote>
<em>...</em>
<strong>...</stron <body>...</body>
<center>...</cente centers g>
enclosed <code>...</code> <form>...</form>
r> text <samp>...</samp
> <dd> or <li>
<kbd>...</kbd>
<var>...</var> <th>...</th> or
<cite>...</cite> <td>...</td>
<tt>...</tt>
<b>...</b>
<i>...</i>
<font size=# >...</font> <br> <p>
<img> <a>...</a>
<a>...</a> <address>...</addr
Netscape extension <em>...</em> ess>
<strong>...</stron <b>...</b>
the value for the size attribute can be a number from 1 to g> <cite>...</cite>
7 (default is 3), or (in quotation marks) a number relative <code>...</code> <code>...</code>
to the current size, e.g. "+2". <samp>...</samp <dd>, <dt>, or
> <kbd>...</kbd> <li>
<h#>...</h#>
<em>...</em>
<i>...</i>
<kbd>...</kbd>
<var>...</var>
<pre>...</pre>
<cite>...</cite>
<samp>...</samp>
<tt>...</tt>
<b>...</b>
<td>...</td>
<i>...</i>
<strong>...</stron
g>
<tt>...</tt>
<var>...</var>
<p>
<a>...</a>
<address>...</add
ress>
<b>...</b>
<cite>...</cite>
<code>...</code>
<basefont size=#> <dd> or <li>
<em>...</em> can be used only
Netscape extension <h#>...</h#> once inside
<i>...</i> <body>...</body>
the value for the size attribute can be a number from 1 to <kbd>...</kbd>
7. the default is 3. <pre>...</pre>
<samp>...</samp
>
<strong>...</stron
g>
<tt>...</tt>
<var>...</var>
<b>...</b> emboldens enclosed text <p>
tells browser to emphasize <a>...</a>
<em>...</em> enclosed text
<br>
<address>...</addr
<strong> tells browser to place stronger ess>
...</strong> emphasis on enclosed text
<img>
<b>...</b>
<cite> a citation <cite>...</cite>
...</cite> <a>...</a>
<code>...</code>
<kbd>...</kbd> distinguishes text to be typed
<em>...</em>
<dd>, <dt>, <li>
<samp> sample text
...</samp> <strong>...</stron
<h#>...</h#>
g>
renders text in monospaced <kbd>...</kbd>
<tt>...</tt> typewriter font
<em>...</em>
<i>...</i> puts the text in italics <code>...</code>
preformatted <pre>...</pre>
t e x t
<pre>...</pre> to be displayed with spacing
<samp>...</samp
>
<samp>...</samp>
intact
<strong>...</stron
used to format, for example, g>
signature files <kbd>...</kbd>
<address> and/or copyright information <tt>...</tt>
...</address>
at the end of a document <var>...</var>
<var>...</var>
<code>...</code> code sample
<th>...</th> or
<cite>...</cite>
placeholder or variable for <td>...</td>
<var>...</var> some other value
<tt>...</tt>
<blink>...</blink makes the text blink. use at
your own risk. <blockquote>
> ...</blockquote>
<b>...</b> <body>...</body>
<h1>...</h1> marks six <pre>...</pre>
<address>...</addr
<h2>...</h2> levels of
headings
<i>...</i> ess>
(1 is align=center (3.0) <form>...</form>
<h3>...</h3> largest; <th>...</th> or
<h4>...</h4> 6 <td>...</td>
<h5>...</h5> smallest)
Refer to this chart if you plan to use special characters--machine-
readable characters like <brackets>, "quotation marks", &
ampersands--in your text.
Lists
<<Previous
Top
Next>>
Netscape
allow you
type= sets the type
to create <blockquote>
of marker (1, A, a, <li>, for ordered
lists: ...</blockquote>
<ul>...</ul> 1.
i, disc, circle, and unordered
<body>...</body>
square) introducing lists;
<ol>...</ol> ordered,
each list item
<dd> or <li>
<form>...</form>
<dl>...</dl> unordered
start= overrides <dt> and <dd>
<th>...</th> or
usual for definition lists
, or <td>...</td>
alphabetical/numer
plain
ical sequence of
ordered lists
opens an dir menu ol ul
indented
list item
type= sets the type
(with a
of marker (1, A, a,
number, <a>...</a> <img>
i, disc, circle,
in an
square) introducing <br> em strong
ordered code samp kbd
<li> [...</li>] list,
each list item
var cite tt
value= allows you
or a <b>...</b> i <p>
to set the number
ol ul dir menu dl <dl>...</dl>
or letter of an
bullet, in <pre>...</pre>
ordered list item
an <blockquote>
unordered ...</blockquote>
list)
<dt> these tags mark the terms and
definitions (respectively) in a
<dd> definition list
Tables
<<Previous
Top
Next>>
Netscape
extensions:
border=
(width, in pixels, of
the border to be
drawn around the
table. a value of
FRAME will
enclose just the
outside of the table; <blockquote>
BASIC, the border <tr>...</tr> ...</blockquote>
creates a and cells) <body>...</body>
<table>...</table> table cellpadding= <caption>...</cap <dd> or <li>,
(spacing between tion> <form>...</form>
the contents of the <td>...</td>
cell and the cell
borders)
cellspacing= (size
of the lines
dividing the data
cells) width=
(width in pixels or
a percentage of the
window)
allows
<caption>...</capt you to
label a align=top, bottom <table>...</table>
ion> table with
a caption
align=leftrightcente
creates a r valign= <th>...</th> or
<tr>...</tr> table row (top middle bottom <td>...</td>
<table>...</table>
baseline)
<td>. . .</td> creates a rowspan= <p><isindex> <tr>...</tr>
data cell (the number of <hr>
<th>. . .</th> or header rows spanned by <a>...</a>
the cell) colspan=
(the number of
columns spanned
by the cell)
align= (left, right,
<h#>...</h#>
center: horizontal
ol, ul, dir, menu,
alignment of the
dl,
cell contents)
pre,
valign= (top,
cell in a <blockquote>
middle, bottom: the
table row ...</blockquote>
vertical alignment
<form>...</form>
of the cell contents)
nowrap (indicates
<address>...</add
not to wrap the cell
ress> table
contents)
width= (width in
pixels or in a
quoted percentage
of the window)
Hypertext
<<Previous
Top
Next>>
<body>...</body>
<img> <address>...</addr
<br> ess> b cite code
creates a href="URL" or <em>...</em> <dd>, <dt> or <li>
link to "file" or "#name" <strong>...</stron <em>...</em>
another of subfile in the g> <h#>...</h#>
document document <code>...</code> <i>...</i>
or to name="name of <samp>...</samp <kbd>...</kbd>
<a>...</a> another subfile in this > <pre>...</pre>
segment document" <kbd>...</kbd> <samp>...</samp>
of the <var>...</var> <strong>...</stron
same rel, rev, urn, title, <cite>...</cite> g>
document methods <tt>...</tt> <tt>...</tt>
<b>...</b> <var>...</var>
<i>...</i> <th>...</th> or
<td>...</td>
Images
<<Previous
Top
Next>>
ismap=
src=
alt="text" <a>...</a>
Netscape extensions: <address>...</addr
align texttop/ absmiddle /baseline ess>
loads an /bottom, <b>...</b>
<img> inline vspace cite code <dd>,
image hspace <dt>, or <li> em
width <h#>...</h#> i kbd
height p samp strong tt
border var
lowsrc="file to be loaded with the
main document"
Forms
<<Previous
Top
Next>>
action="URL" of
script to process
form input
method="get" or
"post" how the <h#>...</h#> p,
<blockquote>
input will lists, pre,
...</blockquote>
be sent to the <blockquote>
creates a <body>...</body>
<form>...</form> form
gateway on the ...</blockquote>,
<dd> or <li>
server side isindex table hr
<th>...</th> or
enctype= address input
<td>...</td>
"application/ x- select textarea
www-form-
urlencoded" only
one value possible
right now
type="(checkbox/ hidden/ radio /reset
/submit /text /image)"
name="name of this item as passed to
the script (in name/value pair),"
value="default value (for text or
hidden widget);
value to be submitted with the form
input (for a checkbox or radio button);
<input> widget or label (for Reset or Submit buttons)" <form>...</form>
for a form src="source file for an image",\
checked indicates that checkbox or
radio button is checked
size="size in chars of text widget"
maxlength="no of characters in a text
field"
align="(texttop/ absmiddle /baseline
/bottom,)"
name=" (name to be passed to the
<textarea>... multiline
script as part of name/value pair)"
text entry <form>...</form>
</textarea> rows="no. of rows"
widget
cols="(no. of cols.)"
creates a name=name of
menu or data field
scrolling size=#of items to
<select> list of display
<option> <form>...</form>
possible multiple allows
items multiple selections
indicates
a possible
selected=default selection
item
<option> within a
value="data submitted if this option is <select>
selected"
select
widget
Breaks, Headings, and Titles
<<Previous
Top
allows you to select a title
inside <HEAD>
<title>. . .</title> that will appear above your browser window
...</HEAD>
(default is the actual filename of your document)
marks six <blockquote>
<h1>...</h1> levels of ...</blockquote>
<h2>...</h2> headings <body>...</body>
<a>...</a> img
(1 is <pre>...</pre>
<h3>...</h3> br em strong code
largest; <address>
<h4>...</h4> samp kbd var cite
6 ...</address>
<h5>...</h5> tt <b>...</b> i
<h6>...</h6> smallest) <form>...</form>
align=center (3.0) <th>...</th> or
<td>...</td>
creates a
<a>...</a> <blockquote>
paragraph
<p> <img> and <br> ...</blockquote>
em strong code <body>...</body>
break
samp kbd var cite <dd> or <li>
tt <b>...</b> i <form>...</form>
<a>...</a>
<address>
...</address>
<b>...</b>
cite
code
<dd>, <dt> or <li>
forces
<h#>...</h#>
a
<br> line
clear=right, left, all (3.0) em
i
break
kbd
<p>,
<pre>...</pre>
samp
strong
tt
var
Netscape extensions:
size=(in pixels, the width of the line
<blockquote>
itself)
...</blockquote>
draws a width=(in pixels, or a "#%" of the
<body>...</body>,
<hr> horizontal screen, the width traversed by the line)
<form>...</form>,
rule line align=(horizontal placement of the
<pre>...</pre>,
line, if it doesn't cross the entire
<td>...</td>
screen)
noshade eliminates the line's shadow
Table Tags
<table>
The <table> tag specifies the presence of a table. This is very often used in conjunction with the <tr> and
the <td> tags. The following attributes are commonly used to define the properties of this table:
• width: This specifies the width of the table. Can be specified in pixels or in relative terms (for
example, 100%).
• border: This specifies whether the table will have a border. The number indicates the thickness of
the border.
• cellspacing: The amount spacing between the cell wall and the cell border. The area enclosed by
the cell walls are the maximum amount of area that text can be displayed in a cell.
• cellpadding: The amount padding between cells and the each cell wall in a table.
• bgcolor: This specifies the background color for this table. The color value may be specified as
the color name or the six-character color code.
<tr>
The <tr> tag specifies the presence of a row. The following attributes are commonly used to define the
properties of this row:
• bgcolor: This specifies the background color for this row. The color value may be specified as the
color name or the six-character color code.
• height: This specifies the height of the row.
• rowspan: This specifies the number of rows this particular row occupies.
<td>
The <tr> tag specifies the presence of a column. Columns are specified within each row. The following
attributes are commonly used to define the properties of this column:
• valign:
• width: This specifies the width of the column. Can be specified in pixels or in relative terms (for
example, 50%).
• bgcolor: This specifies the background color for this column. The color value may be specified as
the color name or the six-character color code.
• colspan: This specifies the number of columns this particular column occupies.
Example 1
HTML:
<table border=1>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
Element 1 Element 2 Element 3
Element 4 Element 5 Element 6
Example 2
HTML:
<table border=1 width=500>
<tr><td width=200>Element 1</td><td width=150>Element 2</td><td width=150>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
Element 1 Element 2 Element 3
Element 4 Element 5 Element 6
Example 3
HTML:
<table border=1 width=500>
<tr bgcolor=red><td width=200><b>Element 1</b></td><td width=150>Element 2</td><td
width=150>Element 3</td></tr>
<tr><td bgcolor=55ff55>Element 4</td><td>Element 5</td><td><i>Element 6</i></td></tr>
</table>
Display:
Element 1 Element 2 Element 3
Element 4 Element 5 Element 6
Example 4
HTML:
<table border=1>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td colspan=2>Element 4</td><td>Element 5</td></tr>
</table>
Display:
Element 1 Element 2 Element 3
Element 4 Element 5
Example 5: cellspacing and cellpadding attributes.
HTML:
<table border=1 cellspacing=10 cellpadding=0>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
Element 1 Element 2 Element 3
Element 4 Element 5 Element 6
Example 6: cellspacing and cellpadding attributes.
HTML:
<table border=1 cellspacing=0 cellpadding=10>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
Element 1 Element 2 Element 3
Element 4 Element 5 Element 6
Example 7: cellspacing and cellpadding attributes.
HTML:
<table border=1 cellspacing=10 cellpadding=10>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>
Display:
Element 1 Element 2 Element 3
Element 4 Element 5 Element 6
List tag
This section lists the tags often used with HTML lists: <ol>, <ul>, and <li>.
<ol>
The <ol> tag specifies that the following list is ordered.
<ul>
The <ul> tag specifies that the following list is unordered.
<li>
The <li> tag lists each item, whether ordered or numbered. Note that each item is indented.
Example 1: ordered list.
HTML:
<ol>
<li>Unordered list 1.</li>
<li>Unordered list 2.</li>
</ol>
Display:
1. Unordered list 1.
2. Unordered list 2.
Example 2: unordered list.
HTML:
<ul>
<li>Unordered list 1.</li>
<li>Unordered list 2.</li>
</ul>
Display:
• Unordered list 1.
• Unordered list 2.
Forms tag
<form action=xxx>
...
[section specifying the value for each key]
...
<input type=submit value=Go>
</form>
The text after action= specifies the script to be executed after the user submits the information. <input
type=submit> gives a button that the user clicks when she is ready to submit the information. The
value=Go piece specifies the text appearing on the button, in this case 'Go'. This is shown below:
The following list gives the most common ways for users to specify the value:
• Text input
• Radio button
• Checkbox
• Drop-down menu
Text input
One way users can enter data into a HTML document is via text. The most common scenario is when
users have to enter a username and password to enter a site. There are three common types of text
input:
• text: In this type of input, we get a single-line text box to enter data. The texts typed appear
directly on the web page.
The syntax is <input type=text name=c>. Here, the key for this text input value is 'c'. Below is an
example:
Text example:
• password: In this type of inpu, we get a single-line text box to enter data. The text typed do not
appear directly on the web page.
The syntax is <input type=password name=pwd>. Here, the key for this password input is 'pwd'.
Below is an example:
Text example:
• textbox: In this type of input, we get a multi-lin text book to enter data. The texts typed appear
directly on the web page.
The syntax is <textarea rows=[row height] name=area>. The key for this textarea input is 'area'.
Below is an example, with [row height] = 2:
Radio Buttons
A second type of input is the radio button. Radio buttons are used when you want users to be able to
select one and only one of the options. Below is an example:
Code:
<input type="radio" name="color" value="red">Red<br>
<input type="radio" name="color" value="green">Green<br>
<input type="radio" name="color" value="blue">Blue<br>
Red
Green
Blue
In this case, the key is color, and the values can be either red, green, or blue, depending on the radio
button selected.
If we want to pre-select a radio button, we'll specify "selected" at the end of the <input> tag, such as
follows:
Checkbox
Another type of input is the check box. Check boxes are used when you want users to be able to select
more than one of the options. Below is an example:
Code:
<input type="checkbox" name="color" value="red">Red<br>
<input type="checkbox" name="color" value="green">Green<br>
<input type="checkbox" name="color" value="blue">Blue<br>
Red
Green
Blue
In this case, the key is color, and the values can be either red, green, or blue, depending on the check
box(es) selected. If multiple check boxes are checked, the "color" key will then have multiple values.
If we want to pre-select a check box, we'll specify "checked" at the end of the <input> tag, such as follows:
<input type="checkbox" name="color" value="red" checked>Red<br>
Drop Down Menu
Drop down menu is another common way to specify input data. For example, selecting a state is often
done via a drop down menu. Users can select one or more items in a drop-down menu. Below is an
example for a single-selection drop down menu:
Code:
<select name=color>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
In this case, the key is color, and the values can be either red, green, or blue, depending on the item
selected.
If we want to pre-select a check box, we'll specify "selected" at the end of the <input> tag, such as follows:
<input type="checkbox" name="color" value="red" selected>Red<br>
If we want to select multiple items, we specify "multiple" at the end of the <select> tag, i.e.,
<select name=color multiple>
Remarks:
• An attribute value must be quoted if it contains any character other than
letters (A-Za-z), digits, hyphens, and periods; use quotes if in doubt.
Here is an example:
<a href="http://www.math.uh.edu" name="start">Dept. of Math.</a>
• NONE in the "value" field below means that one can use the attribute without
a value.
HTML commands:
<a>, </a>
• purpose: anchor, for links and labels
• example: <a href="http://www.math.uh.edu" name="start">Dept. of
Math.</a>
• attributes:
Attribu
Values Meaning Remarks
te
href URL address of link
label of this
name text position in the
file
target name_of_fra frame in o These items might be
me which the link case-sensitive!
should be o If the named frame does not
rendered exist, the link is rendered in
a new window (unless
overridden by the user).
renders the
link in a new,
_blank o _self is useful for overriding
unnamed a BASE TARGET
window
renders the
link in the
_parent immediate
FRAMESET
parent
renders the
link in the full,
_top
unframed
window
renders the
_self link in the
current frame
<img>
• purpose: inline image
• example: <img src="../picture.jpg" height="20%" alt="campus map">
• attributes:
Attribu
Values Meaning Remarks
te
src URL source file
pixel size, % of
height number, percentage
page height
pixel size, % of
width number, percentage
page width
alt text show if no
image
top, middle, bottom, deprecated, use <br
align
left, right clear> instead
border="0" means no
border number size in pixels
border
<br>
• purpose: line break
• attributes:
Attribu Remar
Values Meaning
te ks
left, all, right, clear floating
clear
NONE objects
<p>
• purpose: new paragraph
• attributes:
Attribu Meani
Values Remarks
te ng
left, center, right, deprecated; horizontal
align
justify alignment
<hr>
• purpose: horizontal rule
• example: <hr noshade size="2" width="50%" align="center">
• attributes:
Attribu Remar
Values Meaning
te ks
noshade solid line
size number height in pixels
center, left,
align
right
number, pixels, % of page-
width
percentage width
fonts & co.
• purpose: use a particular font, select size, heading etc.
• tags:
Tag and endtag Effect, Meaning Remarks
<font>, </font> see below
creates a separate
paragraph
<pre>, </pre> preformated
text spaces and line-breaks
matter
headings create a separate
<h1>, </h1> level-one paragraph
heading levels go from 1 (largest) to
6 (smallest)
<h6>, </h6>
level-six heading
<i>, </i> italic text
<b>, </b> bold text
<tt>, </tt> teletype text
<em>, </em> emphasis
<strong>,
</strong>
strong emphasis
<cite>, </cite> citation
<big>, </big> big text
<small>,
small text
</small>
<sub>, </sub> subscript
<sup>, </sup> superscript
deprecated; use cite or
<u>, </u> underline
strong
<s>, </s> strike-through text deprecated
<strike>, better supported than <s>;
</strike>
strike-through text
deprecated
use it to stress the
<code>, </code> computer code
meaning of the text
not implemented yet;
<del>, </del> deleted text
preferred to <strike>
<font>, </font>
• purpose: change font size, color, type etc.
• example: <font size="+1" color="red">larger red words</font>
• remark: a better way to achive this is using style sheets
• attributes:
Attribu
Values Meaning Remarks
te
1, ..., specifies size
7
default starting size is 3
to be used
size changes size
-3, ..., from that
+3 previously in
use
Color attribute values give a color
definition. The value can be any
hexadecimal number, specified
value or word
red, according to the sRGB color space, or
color
#FF00FF
to describe
one of sixteen color names.
color
Hexadecimal numbers must be
prefixed by a "#" character. Here is a
list of colors.
face specifies list of the browser will use the first one
fonts to be
used (in order available from the list
of preference)
lists
• there are three types of lists:
o ordered lists: <ol>, </ol>
the elements of the list are introduced by <li> (list item)
the end tag </li> is optional
to change the current label to 30, use <li value="30">
o unordered lists: <ul>, </ul>
the elements of the list are introduced by <li> (list item)
the end tag </li> is optional
o definition lists: <dl>, </dl>
the elements of the list are pairs term-definition introduced by
<dt> (definition term)
<dd> (definition definition)
the end tags </dt> and </dd> are optional
• lists can be nested
• examples:
Type of
How it looks HTML code
list
Ordered 1.first item <ol>
2.second item <li> first item
List
<li> second item
<li value="33">
o third item, but we want it to third item, but we
have label 33 want it to have label
33
o next item; note the label <li> next item;
note the label
</ol>
Unorder o first item <ol>
<li> first item
ed List
<li> second item
o second item </ol>
Definitio Texas <dl>
<dt> Texas
n List
state of US <dd> state of US
<dt> Houston
<dd> city in
Houston Texas
</dl>
city in Texas
Nested o cities: <ul>
<li> cities:
lists
<ol>
Athens <li> Athens
Sparta <li> Sparta
o continents: </ol>
<li> continents:
Africa <ul>
America <li> Africa
<li> America
Asia <li> Asia
<li> Europa
Europa </ul>
</ul>
tables
• simplified example (from HTML 4.0 Reference):
Rendering in Your
Entit Decim Browser
Character Hex
y al
Entity Decimal Hex
&nbs   

non-breaking space
p; ; 0;
quotation mark = APL " 
" " " "
quote ; 2;
& 
ampersand & & & &
; 6;

less-than sign < < < < <
C;

greater-than sign > > > > >
E;
•
• the HTML code that produced it:
• <TABLE border="1">
• <THEAD>
• <TR>
• <TH ROWSPAN=2>Character</TH>
• <TH ROWSPAN=2>Entity</TH>
• <TH ROWSPAN=2>Decimal</TH>
• <TH ROWSPAN=2>Hex</TH>
• <TH COLSPAN=3>Rendering in Your Browser</TH>
• </TR>
• <TR>
• <TH>Entity</TH>
• <TH>Decimal</TH>
• <TH>Hex</TH>
• </TR>
• </THEAD>
• <TBODY>
•
• <TR>
• <TD>non-breaking space</TD>
• <TD>&nbsp;</TD>
• <TD>&#160;</TD>
• <TD>&#xA0;</TD>
• <TD> </TD>
• <TD> </TD>
• <TD> </TD>
• </TR>
•
• etc.
•
• </TBODY>
• </TABLE>
•
• ingredients:
o <table>, </table>: encloses the table
o <thead>, </thead>: encloses the table head; this helps the
browser display the head on each page, if the table is longer.
o <tfoot>, </tfoot>: encloses the footer of the table; it must
precede the <tbody>
o <tbody>, </tbody>: encloses the body of the table
o <tr>, </tr>: table row
o <th>, </th>: table header cell; used within <tr>
o <td>, </td>: table data cell; used within <tr>
• arguments of <th> and <td>:
Attribu Remar
Values Meaning
te ks
colspan number columns spanned by
the cell
rows spanned by the
rowspan number
cell
center , left , right ,
align horizontal alignment
justify
valign top , bottom , middle vertical alignment
nowrap suppress word wrap
• the example with more features.
To be added:
• more about table arguments
• <center>
• <basefont>
• <blockquote>, <q>
• <base>
• <address>
• forms
• frames
