HTML Tutorial

This document as been archived from previously offered UTS training course(s)
and is NOT updated or supported.
For information about current course offerings, please visit: UTS Training
For current versions of course handouts, please visit: UTS Training Course Handouts
UNIVERSITY OF DENVER
BASIC HTML
COURSE OBJECTIVES:
Following the completion of this course, students will be able to write html code to do
the following:
• Create paragraphs and line breaks
• Create headings
• Work with lists
• Apply comments
• Apply formatting to text
• Create tables
• Create links to other Web pages and e-mail addresses
• Insert graphics
• Create bookmarks within a page
• Create character entities
UNDERSTANDING HTML
HTML (HyperText Markup Language) is a programming language written in plain-text
format used to create interactive, online Web pages. The HTML is not displayed within
the browser, but rather provides the browser with instructions on how to display the
page content. It is important to have a basic understanding of HTML in order to
troubleshoot problems as they arise within your Web pages.
Web standards are not created by either Netscape or Microsoft. W3C or the World
Wide Web Consortium is the organizing body that dictates the standards which are
acceptable on the web. The most essential Web standards include: HTML, CSS and
XML.
HTML is made up of markup tags and attributes that work together to identify various
parts of the document and tell browsers how the document should be displayed.
Markup tags are enclosed in angle brackets (<>). Most tags are paired with an opening
(<>) and closing (</>) tag. The difference between the two is that the closing tag uses a
forward slash (/). HTML tags normally come in pairs such as:
This will boldface the text.
The text between the start and end tag is referred to as the element content.
HTML coding is not case sensitive. Entering the tag is the same as .
However, we suggest you get in the habit of using lowercase characters when writing
HTML tags. This is because the next generation of HTML (XHTML) will demand the
use of lowercase tags.
<!DOCTYPE…> TAG:
The <!DOCTYPE…> tag tells browsers what version of HTML is being complied with
and is the first line of HTML code that should be entered in a document. The document
type declaration tag names the Document Type Definition (DTD). HTML 4.01 lists three
different document type declarations: strict, transitional and frameset.
We recommend that you use the transitional declaration because it is the most flexible
version. The HTML 4.01 Transitional DTD should be typed as follows:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
"http://www.w3.org/TR/html14/loose.dtd">
In this example, the DTD element (Document Type Definition) tells browsers that the
document complies with the HTML version 4.01 Transitional standards. The Web
address included in the tag allows a browser to verify the correctness of the coding if it
chooses to do so. As new standards become available, the tag may change to indicate
a new version such as:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 5.23 Transitional//EN”
You do not need to revise the <!DOCTYPE> tag in existing documents as new
standards become available. The <!DOCTYPE> tag will not become invalidated.
STRUCTURE TAGS:
Structure tags provide browsers with information about the document. These tags
provide information such as the title of the page, what version of HTML is being used,
where the body of the document begins, etc. The content of these tags is not displayed
in the browser window.
HTML documents include four basic structure codes as displayed below:

<html>
<head>
<title> A title given to each page uniquely identifying the content of that
page </title>
</head>
<body>
The content of your page goes here.
</body>
</html>
The <html> tag identifies the start and end of the HTML document.
The <head> tag contains information about the Web page, such as the title of the page,
style sheets being used, and various other document descriptions. Text within the
<head> tag will not be displayed.
The <title> tag (within the <head> tag) is important because many search engines use
the title when retrieving relevant articles in a search. The text within the title tags will
also be displayed on the blue title bar of your browser as you view the page.
The <body> tag encloses all the information that will be displayed in the browser
window. Your entire Web page will be written between the beginning and ending
<body> tags.
META TAGS:
META tags, also located in the <head> section of your document, are used by many
search engines to compile their indices. You can improve a search engine's ability to
correctly index your page by including a brief description for your page in the
“Description” and “Keywords" META tag.
For example, if your page is about housing for DU freshman students, your META tags
might look like the following:
<meta name="description" content="Guide to Freshman housing on the
University of Denver campus">
<meta name="keywords" content="housing, Freshman, campus, University of
Denver">
COMMON TAGS AND ATTRIBUTES:

Once the structure of the web page has been created, the content can be entered in the
body section of the page. This content can be manipulated using a variety of HTML
tags. Paragraphs, headings and lists are just a few of the basic tags available to
manipulate the content. Tags within an HTML document will typically also have
attributes associated with them. An attribute provides additional information about an
HTML tag – usually instruction on how to format it.
Paragraphs and alignment attributes
The paragraph tag is the most common tag that you will use. The start tag 
designates where you wish to begin a paragraph and the end tag designates the
end of the paragraph.
The following example displays the HTML coding for a basic paragraph including the
center and left attribute which will either center or align that particular paragraph to the
left on the page. Note that the attributes are included within the start tag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
<html>
<head>
<meta name=“description” content=”Basic HTML guide”>
<meta name=”keywords” content=”html, basic, guide”>
<title>Basic HTML </title>
</head>
<body>
This is a very basic HTML document. No formatting, graphics or
styles have been applied to the text. The text lines will break depending upon
the size of the browser. This sentence will begin a new
paragraph even though I am typing the html coding on the same line as the
previous paragraph. It will be aligned to the left.
</body>
</body>
</html>
Below is how the document would look if you were to preview the page in Internet
Explorer:
From this example, note that the text within the <title> tags is displayed on the title bar
of the browser window. The tag marked the beginning of the paragraph and the
 tag marked the end of a paragraph regardless of the fact that you did not press the
Enter key on the keyboard to begin a new paragraph within your HTML coding.
Alignment attributes include the following:
align=left Aligns the paragraph or text to the left

align=right Aligns the paragraph or text to the right
align=center Centers the paragraph or text
NOTE: When using attributes it is important to understand that many of them are
deprecated. This means that they are outdated by newer capabilities. Deprecated
elements may soon become obsolete in future versions of HTML. Instead of applying
attributes, it is recommended that you create stylesheets to generate the formatting for
your text and link the stylesheet to your pages.
Applying Line Breaks:
The break tag is used when you want to begin a new line of text, but you don’t
want to create a new paragraph. No closing tag is needed for this tag.
Headings
Headings can be applied to break up large areas of text and announce various
categories within a document. HTML provides six different levels of headings. Heading
1 <h1> is the largest and Heading 6 <h6> is the smallest. By default, headings will
always be aligned to the left of your document. If you wish to center or right-align the
headings, apply the align attribute as described above. The align attribute would be
entered within the start heading tag.
Below is an example of how you might apply a heading tag.

<html>
<head>
<meta name=“description” content=”Basic HTML guide”>
<meta name=”keywords” content=”html, basic, guide”>
<title>Basic HTML </title>
</head>
<body>
<h1>This is an example of a heading 1 style</h1>
<h2>This is an example of a heading 2 style</h2>
</body>
</body>
</html>
Below is an example of how it would look in Internet Explorer:
Applying Comments:
A comment tag is used to insert a comment into the html code. Comment tags are
ignored by Web browsers so the text of a comment will never be displayed on the Web.
A comment might be inserted to provide explanation for the following code or it may
serve as a note to another user designating where they should input their data.
Below is an example of a comment tag:


Comment tags always begin with an exclamation point followed by two hyphens. They
always end with two additional hyphens.
Working with Lists:
When lists are created within HTML, the list is either created as an ordered <ol> or
unordered <ul> list. The ordered list contains numbers or letters and the unordered list
contains bullets. Within the list, each item is identified by a list item <li> tag.
Ordered List:
<html>
<head>
<title>To-Do List</title>
</head>
<body>
My To-Do List:

<ol>
<li>Laundry</li>
<li>Clean the house</li>
<li>Wash the car</li>
</ol>
</body>
</html>
Unordered List:
<html>
<head>
<title>To-Do List</title>
</head>
<body>
My To-Do List:

<ul>
<li>Laundry</li>
<li>Clean the house</li>
<li>Wash the car</li>
</ul>
</body>
</html>
Applying bold, italics, underline, super and subscript
Formatting can be applied to individual letters and words as well. For example, you can
make a word appear bold, underlined, or italicized. Below is a list of common
formatting tags you may want to apply as well as an example of how they would be
used.
 Bold
 Underline
 Italicize
 Subscript
 Superscript

<html>
<head>
<title>Basic HTML</title>
</head>
<body>
<h1 align="center">Basic HTML </h1>
This is a very basic HTML document. No graphics or hyperlinks have
been applied to the text. However, basic formatting has been applied.
 The text lines will break depending upon the size of the browser
window. This sentence is in superscript. While this line
is in subscript
</body>
</html>
Below is how the code looks if you were to preview the page in Internet Explorer:
You can also apply several formatting tags to the same body of text. This is referred to
as "nesting". For example:
<html>
<head>
<title>Basic HTML</title>
</head>
<body>
<h1 align="center">Basic HTML </h1>
This text is both italicized, underlined and in bold!

</body>
</html>
When nesting tags as illustrated above, always use the FILO rule (First In, Last Out.)
This means that the first tag listed initially, should be the last tag listed in the closing.
Applying color to a website
Colors are applied in HTML using hexadecimal numbers. Hexadecimal numbers

combine hues of red, green and blue to form a RGB number. RGB numbers are made
up of six digits, two for each portion of red, green and blue.
Web colors are often considered “unstable” and may display different hues from
computer to computer. This color instability is the result of differences in “gamma” and
the color space created by the operating system and monitor. Gamma is responsible
for the lightness and darkness of images. Various operating systems are based on
different standards of gamma, therefore; colors appear slightly different from one
computer to the next.
The only way to guarantee that the page will look the same on each user’s monitor is to
use “browser-safe” colors when designing your web page. Most monitors can display at
least 8 bit (256 colors), but only 216 colors are shared by various other browsers and
operating systems. These are considered the “browser-safe” colors. Many resources
are posted on the web listing “browser-safe” colors. One such site is
www.lynda.com/hexh.html.
When you have located a browser-safe hexadecimal value, enter the value as an
attribute of the body tag. For example, if you wish to change the background color
(bgcolor) of a page, enter the following:
<body bgcolor=FFFFCC>
To change the text color for the entire page, enter the following:
<body text=993300>
Applying fonts, font sizes and font color
The font tag allows you to specify criteria regarding the font of the text. For example,
the font, font size and color are all attributes which can be applied within the font tag.
Begin by first placing the font tag around the text you wish to apply formatting to:
This is the text I wish to format.
Specify the font face attribute you wish to apply:

This text should now be in the Arial font.
Specify the font size attribute you wish to apply:

This text is in the Arial font and is 14 points in
size.
Specify the font color attribute (using a hexadecimal value) you wish to apply:
 This text is typed in red Arial font
and is 14 points in size. 
Note: As mentioned previously, many of these attributes are deprecated and it is
recommended that you create a stylesheet containing all your formatting and then link
the stylesheet to your pages.
Working with Tables:
Tables are frequently used to organize the structure of a page. Several tags are
commonly used when creating a table:
<table> </table> Marks the start and end of a table.
<tr> </tr> Specifies the beginning and end of

a table row.
<td> </td> Specifies the beginning and end of

a cell.
<th> . Marks a heading cell within a table.
Below are two commonly used attributes that can be applied to the table tag. A variety
of other attributes could also be applied.
Border = “1” Specifies the width of the border.
Width = “100%” Specifies the overall width of the

table in relation to the screen size.
This attribute can also be applied to
the <td> tag.
<html>
<head>
<title>Example Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td width="50%">Courses Available:</td>
<td width="50%">Course Descriptions:</td>
</tr>
<tr>
<td width="50%">Beginning
Word</td>
<td width="50%">Concepts to be covered include: creating,
saving and opening documents, editing and deleting text, copying and moving blocks
of text, spell checking and previewing and printing documents.</td>
</tr>
<tr>
<td width="50%">Beginning
Excel</td>
<td width="50%">Concepts to be covered include: creating a
simple spreadsheet, opening and saving files, printing files, editing text (copying
and moving), formatting spreadsheets (fonts, alignment, borders, etc), changing the
print settings and creating simple formulas and functions.
</td>
</tr>
</table>
</body>
</html>
Below is how the code looks if you were to preview the page in Internet Explorer.
WORKING WITH LINKS:

Links can be used to navigate from one page to another within the Web or can be used
to link to e-mail addresses, graphics, movies, etc. Links are also referred to as
anchors. Links are made up of two components:
• An Anchor Tag (<a>) which marks the text as a hyperlink.
• An attribute, HREF=…which is located within the anchor tag and lists

the Web address for the link.
A basic html link to another Web page might look like this:

<html>
<head>
<title>Hyperlinks</title>
</head>
<body>
Please visit the <a href="http://www.du.edu">University of
Denver's</a> new
home page. 
</body>
</html>
The text between the start <a> and end tag </a> will be displayed as the hyperlink on
the Web.
Below is how the code looks if you were to preview the page in Internet Explorer:
E-mail links
Linking to an e-mail address is identical to linking to a Web page as described above.

The difference is that the href attribute references the mailing address of the individual
as illustrated below. The text between the start <a> and end tag </a> again represents
what will be displayed as the hyperlink on the Web.
<a href="mailto:kfriesen@du.edu">Kristi email</a>
WORKING WITH GRAPHICS:

The image tag <img> is used when a graphic is inserted into a Web page. There are
two components to this tag.
• The <img> tag specifies that it is an image. This is an "empty" tag

which does not require an end or closing tag.
• The “SRC=” is an attribute which specifies the graphic’s URL address

or file location where the graphic is stored.
An image tag referencing a graphic from the hard drive of your computer may look like
this:
<html>
<head>
<title>Fireworks</title>
</head>
<body>
A photo of the fireworks:
<img src="images/Fireworks.gif"> 
</body>
</html>
In this particular example, the Fireworks.gif image has been saved to the images folder
within the Web. The filename of the graphic is case sensitive. (You must then
remember to upload the images folder to the server in order for it be viewed correctly on
the Web.) Below is an example of how the code looks if you were to preview the page
in Internet Explorer:
An image tag referencing a graphic linked to a Website may look like this:
<img src="http://www.du.edu/clipart/library.gif">
Applying Alternative text
ALWAYS create alternative text for graphics you place on the Web. This is important in
order to meet ADA standards. It is also important for those who use text-only
browsers. The descriptions within these “alt tags” will be displayed by hovering your
mouse over the graphic within a Web browser.
To create alternative text for a graphic, simply add an “alt” attribute within the image
tag. The attribute should provide a brief explanation of the graphic. For example:
<img src="../My Documents/Word/Graphics/Scratch/Fireworks.gif" alt=”4th
of July Fireworks”>
Creating an Image Link
Images can also be used as a visual hyperlink. For example, the DU templates include
the DU logo in the top left corner. The logo is a hyperlink. If you click on the logo you
will be returned to the DU home page.
In the following example, if you click the graphic of Penrose Library, you will be taken to
the DU home page.
<a href="www.du.edu">
<img src="http://www.du.edu/clipart/library.gif" alt=Penrose library></a>
CREATING BOOKMARKS
Links within a page are referred to as "bookmarks." You can link to a bookmark from
any page in your Web, and you can establish bookmarks in any page within your
website. Bookmarks allow the user to jump directly into a specific section of the page
rather than forcing the user to scroll through the page looking for information.
You must first "bookmark" the text where you want the user to be directed to. The
name attribute is used within an anchor tag to create a bookmark. For example:
<a name="Help Desk">Help Desk positions</a>
To link to the bookmark or named anchor, add a # sign and the name of the bookmark
to the end of the href attribute. The text within the anchor tag again refers to the
hyperlinked text. For example:
<a href="#Help Desk">Positions within the Help Desk:</a>
CHARACTER ENTITIES
Many characters have a special meaning within HTML coding. For example, the less
than sign (<) designates an open tag and a slash (/) designates part of a closing tag.
When you need to use these characters within a document, you must instead insert
character entities into the source code.
Character entities contain three components: an ampersand (&), entity name, and a
semicolon (;).
The most common character entity is the non-breaking space. If you enter 15 spaces in
the HTML code, 14 of them will be removed. In order to add spaces within text, you
must apply the non-breaking space (nbsp) entity. It would look like:

Below is a chart of other commonly used entities:
Description Entity name
Non-breaking space
Greater than > >
Less than < <
Ampersand & &
Quotation mark " "
DU TEMPLATE TAGS:
GLOM tags:
When working with DU templates, you may see GLOM tags throughout the HTML
document. For example:



These tags are derived from Glommer which is a "home grown" DU program that lets
us quickly update a series of pages with standardized information. We recommend you
leave information between GLOM tags unchanged.
Link tags:
DU templates also include a “Link” tag located in the <head> section of your document.
It links your page to a DU specific stylesheet. This stylesheet gives a uniform look and
feel to many DU documents. For example, it indents the text on the page 15% from
either margin and includes styles for all your headings and text. We recommend you
leave the LINK tag as is. Below is an example of the LINK tag:
<LINK HREF="http://www.du.edu/dupages.css" REL="stylesheet" TYPE="text/css">
OTHER RESOURCES:
Here are some Websites you may find useful as you continue to learn HTML and build
Websites:
http://www.willcam.com/cmat/html/crossname.html
http://www.w3.org/TR/REC-html40/struct/global.html
http://www.w3.org
http://webreview.com
http://www.w3schools.com/default.asp
http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/
The following Websites provide free downloads for text editing software. You may find
software useful for writing HTML:
http://www.chami.com/html-kit/
www.editpadpro.com/editpadlite.html
The following Website provides another free trial version for text writing software:
http://www.textpad.com
University of Denver
University Technology Services - Training
Telephone: 303.871.3690 FAX: 303.871.4999 E-mail: kfriesen@du.edu
Copyright © 2003 University of Denver Page last revised September 11, 2003.

HTML Tutorial

Uploaded by

Document Information

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

HTML Tutorial

Uploaded by

Copyright:

Available Formats

This document as been archived from previously offered UTS training course(s)

and is NOT updated or supported.

• Create paragraphs and line breaks

• Work with lists

• Apply formatting to text

• Create links to other Web pages and e-mail addresses

• Create bookmarks within a page

• Create character entities

HTML documents include four basic structure codes as displayed below:

COMMON TAGS AND ATTRIBUTES:

Paragraphs and alignment attributes

Alignment attributes include the following:

align=left Aligns the paragraph or text to the left

Applying Line Breaks:

Below is an example of how you might apply a heading tag.

Below is an example of a comment tag:

Working with Lists:

<p>My To-Do List:</p>

<p>My To-Do List:</p>

Applying bold, italics, underline, super and subscript

<b> </b> Bold

<u> </u> Underline

<i> </i> Italicize

<sub> </sub> Subscript

<sup> </sup> Superscript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

Applying color to a website

Colors are applied in HTML using hexadecimal numbers. Hexadecimal numbers

Applying fonts, font sizes and font color

Specify the font face attribute you wish to apply:

Specify the font size attribute you wish to apply:

Working with Tables:

<table> </table> Marks the start and end of a table.

<tr> </tr> Specifies the beginning and end of

<td> </td> Specifies the beginning and end of

<th> . Marks a heading cell within a table.

Border = “1” Specifies the width of the border.

Width = “100%” Specifies the overall width of the

WORKING WITH LINKS:

• An Anchor Tag (<a>) which marks the text as a hyperlink.

• An attribute, HREF=…which is located within the anchor tag and lists

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

Linking to an e-mail address is identical to linking to a Web page as described above.

WORKING WITH GRAPHICS:

• The <img> tag specifies that it is an image. This is an "empty" tag

• The “SRC=” is an attribute which specifies the graphic’s URL address

Applying Alternative text

Creating an Image Link

Below is a chart of other commonly used entities:

Description Entity name

Non-breaking space &nbsp;

Greater than > &gt;

Less than < &lt;

Ampersand & &amp;

Quotation mark " &quot;

You might also like

Non-breaking space

Greater than > >

Less than < <

Ampersand & &

Quotation mark " "