HTML

Module 1 – Introduction to HTML

Training Manual
Corporate Edition

C C T G L O B A L .C O M
© 1995-2002 Cheltenham Computer Training
Crescent House

All trademarks acknowledged. E&OE.

© Cheltenham Computer Training 1995-2002 No part of this document may be copied without written permission from
Cheltenham Computer Training unless produced under the terms of a courseware site license agreement with
Cheltenham Computer Training.

All reasonable precautions have been taken in the preparation of this document, including both technical and non-
technical proofing. Cheltenham Computer Training and all staff assume no responsibility for any errors or omissions . No
warranties are made, expressed or implied with regard to these notes . Cheltenham Computer Training shall not be
responsible for any direct, incidental or consequential damages arising from the use of any material contained in this
document. If you find any errors in these training modules, please inform Cheltenham Computer Training. Whilst every
effort is made to eradicate typing or technical mistakes, we apologize for any errors you may detect. All courses are
updated on a regular basis, so your feedback is both valued by us and will help us to maintain the highest possible
standards.

Sample versions of courseware from Cheltenham Computer Training

(Normally supplied in Adobe Acrobat format)
If the version of courseware that you are viewing is marked as NOT FOR TRAINING, SAMPLE, or similar, then it cannot
be used as part of a training course, and is made available purely for content and style review . This is to give you the
opportunity to preview our courseware, prior to making a purchasing decision. Sample versions may not be re-sold to a
third party.

For current license information

Cheltenham Computer Training reserves the right to alter the licensing conditions at any time, without prior notice. No
terms or conditions will affect your rights as defined under UK law . Please see the site license agreement available at:
www.cctglobal.com/agreement

Courseware Release Version 5.0

INTRODUCTION TO HTML ...................................................................................................................................1
HYPERTEXT M ARKUP LANGUAGE ............................................................................................................................ 2
Working with HTML ..............................................................................................................................................2
Working with HTML Versions.............................................................................................................................3
HTML SYNTAX ........................................................................................................................................................... 4
Using Elements and Tags.....................................................................................................................................4
Nesting Elements....................................................................................................................................................4
Reading a Basic HTML Document .....................................................................................................................5
Reading a XHTML 1.0 Document.......................................................................................................................5
HTML EDITORS........................................................................................................................................................... 6
Working with HTML Editors................................................................................................................................6
Working with WYSIWYG Editors ........................................................................................................................7
Working with Tag-based Editors.........................................................................................................................8
REVIEW QUESTIONS.................................................................................................................................................... 9
UNDERSTANDING A WEB SITE ........................................................................................................................11
FILE TYPES AND FILE STRUCTURE.......................................................................................................................... 12
Working with HTML Files..................................................................................................................................12
Working with Image Files...................................................................................................................................12
Working with Multimedia Files.........................................................................................................................12
Naming Files.........................................................................................................................................................13
Working with URLs..............................................................................................................................................13
Working with File Structure...............................................................................................................................14
UNDERSTANDING COLORS....................................................................................................................................... 15
Working with Colors............................................................................................................................................15
Using Web-safe Colors .......................................................................................................................................16
Using Word Colors ..............................................................................................................................................17
REVIEW QUESTIONS.................................................................................................................................................. 19
HTML DOCUMENTS ...............................................................................................................................................21
CREATING HTML DOCUMENTS.............................................................................................................................. 22
Using Notepad ......................................................................................................................................................22
Writing a new HTML Document .......................................................................................................................23
Adding a Page Title.............................................................................................................................................23
Saving the HTML Document..............................................................................................................................24
Opening an HTML Document in Notepad.......................................................................................................25
Opening an HTML Document from Windows Explorer................................................................................26
Closing an opened HTML Document ...............................................................................................................26
Viewing an HTML Document in a Web Browser ...........................................................................................27
REVIEW QUESTIONS.................................................................................................................................................. 28
TEXT...............................................................................................................................................................................29
W ORKING WITH TEXT ............................................................................................................................................... 30
Working with Paragraphs...................................................................................................................................30
Importing Text by Copying and Pasting..........................................................................................................31
Typing more than one Space..............................................................................................................................31
Creating a Line Break.........................................................................................................................................31
Entering Special Characters..............................................................................................................................32
Using Character Map to enter Special Characters........................................................................................32
Deleting Text.........................................................................................................................................................33
FORMATTING TEXT ................................................................................................................................................... 34
Using the Font Element.......................................................................................................................................34
Using Physical Character Styles.......................................................................................................................36
Using Logical Character Styles.........................................................................................................................37

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
FORMATTING TEXT BLOCKS.................................................................................................................................... 40
Using the Heading Elements..............................................................................................................................40
Aligning Headings................................................................................................................................................41
Aligning Paragraphs...........................................................................................................................................42
Inserting a Horizontal Rule................................................................................................................................43
Indenting Quotations...........................................................................................................................................44
Using the Preformatted Element .......................................................................................................................45

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 1
HTML – Module 1 Learn iT! Computer Software Training

Introduction to HTML
When you • Work with HTML
have • Work with HTML versions
completed • Use Elements and Tags
this learning • Nest Elements
module you • Read a Basic HTML Document
will have • Read a XHTML 1.0 Document
seen how to: • Work with HTML Editors
• Work with WYSIWYG Editors
• Work with Tag-based Editors

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
2 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

HyperText Markup Language

HyperText Markup Language

• HyperText Markup Language (HTML) is
the most common language used in
creating Web documents.
• HTML is a Standard Generalized Markup
Language (SGML) Document Type
Definition (DTD).
• You can use HTML to create cross-
platform Web documents that contain
formatting, links, images, and
multimedia components.

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 2

Working with • HyperText Markup Language (HTML) is the most common language
HTML used in creating Web documents. HTML is a Standard Generalized
Markup Language (SGML) Document Type Definition (DTD).
• HTML is derived from SGML. SGML is a special language that was
created to standardize document formatting, allow the sharing of
documents over the Internet.
• You can use HTML to create cross-platform Web documents that
contain formatting, links, images, and multimedia components.
• HTML files are plain text documents that have the .htm or .html file
extension.
• Although you can use simple text editors to view and edit the HTML
source code, you will need a web browser to view the formatted
document with images, links, etc.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 3
HTML – Module 1 Learn iT! Computer Software Training

Working with • The HTML presented in this manual will use the XHTML 1.0
HTML Transitional specification, which is the latest specification from the
Versions World Wide Web Consortium.

"The World Wide Web Consortium (W3C) develops interoperable

technologies (specifications, guidelines, software, and tools) to lead
the Web to its full potential as a forum for information, commerce,
communication, and collective understanding."
-- The World Wide Web Consortium Web site (www.w3.org)

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
4 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

HTML Syntax

Using • HTML documents are made up of different elements. For example,

Elements and head, title, body, p, table, etc.
Tags • Each HTML element contains an opening tag, content, and a closing
tag. The opening tag is simply the name of the element enclosed by
angled brackets (<head>), and the closing tag is a slash and the name
of the element inside angle brackets (</head>). The content falls
between the opening and closing tags to create an element:

• Each element can be customized using its set of attributes. The

attributes are included in the opening tag. In the following example,
the paragraph contains the align attribute:

Nesting • Elements can be nested to provide you with the effect you want. In
Elements the following example, we have nested the bold <strong> element
within the paragraph <p> element. The bold effect will be applied to
the contents between the opening and closing tags:

Note: To nest an element correctly, you should make sure that the
inner element is closed before the outer element is closed. It is
incorrect to straddle elements as shown in the following:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 5
HTML – Module 1 Learn iT! Computer Software Training

Reading a • An HTML document is divided into the head and the body elements.
Basic HTML The head element contains the title element. The body element
Document contains the content of your HTML page.
• A basic HTML document consists of the following elements:

<html> - The HTML tags define the beginning and ending of an HTML
document.

<head> - The head tags define the beginning and ending of the head
section of the HTML document.

<title> - The title tags nested inside the head tags and defines the
page title of the HTML document.

<body> - The body tags define the beginning and ending of the body
section of the HTML document.

• The following is an example of a basic HTML document:

Reading a • A valid XHTML 1.0 document includes version information. The

XHTML 1.0 version information states the HTML version that a document will
Document follow. In addition, the root element must designate the XHTML
namespace using the xmlns attribute.
• The DOCTYPE declaration in the document must be prior to the root
element.
• The following is an example a valid XHTML 1.0 document:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
6 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

HTML Editors

HTML Editors

• There are two categories of editors: WYSIWYG and Tag-

based. With WYSIWYG editors, you can work with the
layout of the page instead of the HTML source code as you
would with Tag-based editors.

WYSIWYG Editor Tag-based Editor

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 4

Working with • Although you can use a plain text editor such as Notepad to write and
HTML Editors edit your HTML documents, you may want to consider using an HTML
editor to simplify your task.
• There are two categories of editors: WYSIWYG and Tag-based. With
WYSIWYG editors, you can work with the layout of the page instead of
the HTML source code as you would with Tag-based editors.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 7
HTML – Module 1 Learn iT! Computer Software Training

Working with • WYSIWYG or What-You-See-Is-What -You-Get editors allow beginners

WYSIWYG to quickly create and edit HTML documents.
Editors • You can see the layout of page as you add elements and text. Some
editors come with page templates to help you quickly create your page:

• Since WYSIWYG editors will generate the HTML source code for you,
they may introduce code that can create problems in your HTML
document. However, the popular editors do allow you to edit the
HTML source code directly.
• Examples of WYSIWYG editors include: Adobe GoLive, Adobe
PageMill, Macromedia DreamWeaver, Microsoft FrontPage, and
NetObjects Fusion.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
8 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Working with • One of the main goals of Tag-based editors is to help you write and
Tag-based edit HTML source code. With Tag-based editors, you work with the
Editors HTML source code. Unlike plain text editors, Tag-based editors will
color code your HTML, providing better readability.
• To use these editors, you need to know how to lay out a page with
HTML, and to understand HTML code:

• Tag-based editors have tools to help you enter tags quickly. For
example, commonly used tags have icons that you can click to add
them. With more complex tags, wizards or dialog boxes are provided
to help you add the tag with the attributes you want:

• Examples of Tag-based editors include: Macromedia HomeSite,

HotDog Professional, and WebEdit Pro.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 9
HTML – Module 1 Learn iT! Computer Software Training

Review Questions

Review Questions

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 5

How would • Work with HTML?

you: • Work with HTML versions?
• Use Elements and Tags?
• Nest Elements?
• Read a Basic HTML Document?
• Read a XHTML 1.0 Document?
• Work with HTML Editors?
• Work with WYSIWYG Editors?
• Work with Tag-based Editors?

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 11
HTML – Module 1 Learn iT! Computer Software Training

Understanding a Web Site

When you • Work with Web Browsers
have • Work with HTML Files
completed • Work with Image Files
this learning • Work with Multimedia Files
module you • Name Files
will have • Work with URLs
seen how to: • Work with File Structure
• Work with Colors
• Use Web-safe Colors
• Use Word Colors

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
12 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

File Types and File Structure

File Types and File Structure

• To create web pages for your web site, you need to create
HTML files. Web browsers process HTML files to display
the formatted document with the appropriate images,
multimedia elements, and links. This file format uses the
extension .htm or .html.
• When you write your HTML document, you will be
referencing images, links, and other elements using URLs.
In most cases, you should use relative URLs to make your
web site more portable, allowing you to move your web site
without breaking the links.

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 7

Working with • To create web pages for your web site, you need to create HTML files.
HTML Files Web browsers process HTML files to display the formatted document
with the appropriate images, multimedia elements, and links. This file
format uses the extension .htm or .html.

Working with • You can add JPEG or GIF image files to your web page using the IMG
Image Files element in your HTML document. JPEG image files use the .jpg or
.jpeg file extension. GIF image files use the .gif file extension.

Working with • A wide range of multimedia files can be added to your web pages
Multimedia using the appropriate elements in your HTML document. These files
Files will be covered in the HTML Intermediate courseware.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 13
HTML – Module 1 Learn iT! Computer Software Training

Naming Files • You HTML files will eventually reside on a web server, allowing your
users to access the pages through the Internet. Although each web
server platform have slightly different naming conventions for files, you
can follow some basic rules that would work with most web server
platforms:

Use only the characters A to Z, a to z, 0 to 9, - (hyphen), and _

(underscore).

Do not use spaces, slashes, backslashes, colons, semi-colons,

question marks, ampersands, or accented characters.

Use a consistent approach when using mixed case names since your
web server may require case-sensitive file names.

Working with • Uniform Resource Locators (URLs) are web addresses that point to
URLs web pages, images, movies, or any file accessible on the Internet. For
example, you can access a web page by entering the URL of the web
page in your browser window:

• A URL contains many elements. To identify the elements, we will use

http://www.cctglobal.com/ecdl/index.html as the sample URL:

Protocol: defines the protocol used in opening the requested file. For
example, http://.

Server Name: identifies the server where the requested file is located.
In most cases, domains will only have one server, in which case, the
server name would usually be www.

Domain Name: identifies the domain where the requested file is

located. For example, cctglobal.com.

Directory: identifies the directory and subdirectories in which the

requested file is located. If the file is in the root directory, this element
of the URL is not needed. For example, ecdl.

File Name: identifies the name of the requested file. For example,
index.

File Extension: identifies the file extension of the requested file. For
example, html.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
14 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Working with • When you write your HTML document, you will be referencing images,
File Structure links, and other elements using URLs. In most cases, you should use
relative URLs to make your web site more portable, allowing you to
move your web site without breaking the links.
• Relative URLs are URLs defined based on the URL of the current file.

If the file you want to reference is located in the same directory as your
HTML document, then the relative URL is simply the file name and file
extension of the file you want. For example, if you are working on the
index.html page and you want to link to feedback.html, then the
relative URL is "feedback.html":

If the file you want to reference is in a subdirectory located in the same

directory as your HTML document, then the relative URL is the name
of the directory plus the file name and file extension of the file you
want. For example, if you are working on the index.html page and
you want to link to the canyon.html file in the adventures folder, then
the relative URL is "adventures/canyon.html".

If the file you want to reference is not located in the same directory as
your HTML document, then you can use ../ to go up one directory level
in the relative URL. Go up as many directory levels as you need so
that you are in the same directory level as the directory that contains
the file you want. You may need to include directory names if the file
you want is located within subdirectories. For example, if you are
working on the canyon.html page in the adventures folder and you
want to link to the canyon.gif file in the media folder, then the relative
URL is "../media/canyon.gif":

• You can simplify the use of relative URLs by creating file structures
that do not contain too many levels of subdirectories.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 15
HTML – Module 1 Learn iT! Computer Software Training

Understanding Colors

Understanding Colors

• Colors in HTML documents are represented by a six-digit

hexadecimal (hex).
• To define a color, you will need to convert the color's RGB
(Red-Green-Blue) values into a hexadecimal.
• The first two digits represent the red value, the middle two
digits represent the green value, and the last two digits
represent the blue value.

000000
Red Blue

Green

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 8

Working with • Colors in HTML documents are represented by a six-digit hexadecimal

Colors (hex). To define a color, you will need to convert the color's RGB
(Red-Green-Blue) values into a hexadecimal. The first two digits
represent the red value, the middle two digits represent the green
value, and the last two digits represent the blue value.
• We normally work with numbers that are base 10. In comparison,
hexadecimal is base 16. Hex counts 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C,
D, E, and F. F is the highest single digit value. Thus, if you increase F
by one, you would get 10.
• For example, to represent black (RGB - 0,0,0) in hex, you would use
000000. To represent white (RGB - 255,255,255) in hex, you would
use FFFFFF.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
16 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Using Web- • For cross-platform compatibility, you may want to use Web-safe colors.
safe Colors This is a set of 216 colors that are common to the PC and Mac system
palette.
• These colors are good for backgrounds, text, links, and logos with flat
color. The colors are also referred to as non-dithering since they are
displayed as smooth, solid colors.
• You can create these colors by using any combination of the hex values
00, 33, 66, 99, CC, and FF for each of the red, green, and blue values.
• Web graphics programs, such as Adobe ImageReady and Macromedia
Flash, will come with the web-safe color palette. The following shows
the ImageReady Color Picker with Only Web Colors selected:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 17
HTML – Module 1 Learn iT! Computer Software Training

Using Word • Instead of using hex colors, you can use word colors. There are 140
Colors colors that have words assigned. The following is a list of the words
and their hex numbers:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
18 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 19
HTML – Module 1 Learn iT! Computer Software Training

Review Questions

Review Questions

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 9

How would • Identify your Target Audience?

you: • Work with Internet Connections?
• Work with Display Resolutions?
• Work with Web Browsers?
• Work with HTML Files?
• Work with Image Files?
• Work with Multimedia Files?
• Name Files?
• Work with URLs?
• Work with File Structure?
• Work with Colors?
• Use Web-safe Colors?
• Use Word Colors?

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 21
HTML – Module 1 Learn iT! Computer Software Training

HTML Documents
When you • Use Notepad
have • Write a new HTML Document
completed • Add a Page Title
this learning • Save the HTML Document
module you • Use Meta Data
will have • Identify the Author
seen how to: • Add Key Words
• Add a Description
• Set the Background Color
• Set the Text Colors
• Set the Base URL
• Open an HTML Document in Notepad
• Open an HTML Document from Windows Explorer
• Close an opened HTML Document
• View an HTML Document in a Web Browser

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
22 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Creating HTML Documents

Creating HTML Documents

• In this manual we will use Notepad as our HTML

editor.
• Once you have learned to create HTML
documents using a plain text editor, you will find
that it is relatively easy to understand and learn
to use the other editors.

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 10

Using • In this manual we will use Notepad as our HTML editor. Once you
Notepad have learned to create HTML documents using a plain text editor, you
will find that it is relatively easy to understand and learn to use the
other editors.
• From the Windows taskbar, click on the Start button, and choose
Programs > Accessories > Notepad. This will create a new Untitled
text document:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 23
HTML – Module 1 Learn iT! Computer Software Training

Writing a new • Start Notepad to create a new Untitled text document.

HTML • Type in the version information (<!DOCTYPE html PUBLIC "-
Document //W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-
transitional.dtd">).
• Type in the HTML tags (<html></html>).
• Type in the HTML namespace using the xmlns attribute. The
namespace for XHTML is defined to be http://www.w3.org/1999/xhtml.
• Place the insertion point between the opening and closing HTML tags
and press the Enter key twice to insert a new line.
• In the new line, type in the head tags (<head></head>).
• Place the insertion point between the opening and closing head tags
and press the Enter key twice to insert a new line.
• In the new line, type in the title tags (<title></title>).
• Place the insertion point at the end of the head tags and press the
Enter key to insert a new line.
• In the new line, type in the body tags (<body></body> ).
• The following is an example:

Note: You can save this basic HTML document as a sample to save
re-typing this information every time you want to create a new HTML
document.

Adding a • It is a good idea to give each page a title. The page title should be
Page Title descriptive of the page’s content. This title will appear in the title bar
of the web browser:

• Place the insertion point between the opening and closing title tags.
• Type in the page title you want. In the following example, the page
title is Welcome:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
24 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Saving the • The document we just wrote is in the text file format. To create the
HTML HTML document, you need to save it with the .htm or .html file
Document extension. Once it is saved with an HTML extension, the web browsers
will recognize the text file as an HTML document, and will process the
code to display the web page.
• From Notepad, choose File > Save As to display the Save As dialog
box:

• From the Save as type dropdown list, select All Files (*.*).
• Enter a name with the .htm or .html file extension in the File name text
box.
• Click Save.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 25
HTML – Module 1 Learn iT! Computer Software Training

Working with HTML Documents

Working with HTML Documents

• To open an HTML document
from Notepad, choose File >
Open to display the Open Dialog
box.
• Locate and select the HTML
document you want.
• Click Open.

• To open an HTML document from Windows

Explorer or My Computer, locate and select
the HTML document you want.
• Press the Shift key and right-click on the file's
icon or name, and select Open With to choose
an application.

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 13

Opening an • From Notepad, choose File > Open to display the Open dialog box:
HTML
Document in
Notepad

• Click on the Files of type down arrow, and select All Files (*.*).
• Locate and select the HTML document you want.
• Click Open.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
26 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Opening an • You can open an HTML document from Windows Explorer or My

HTML Computer.
Document • Locate and select the HTML document you want.
from • Press the Shift key and right-click on the file's icon or name:
Windows
Explorer

• Choose Open with from the popup menu to display the Open With
dialog box:

• Select NOTEPAD from the list of applications.

• Click OK.

Closing an • From Notepad, choose File > Exit to close Notepad.

opened HTML
Document Note: Be sure to save your file before exiting Notepad.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 27
HTML – Module 1 Learn iT! Computer Software Training

Viewing an • To see how your HTML document is displayed as a web page, open
HTML the document in a web browser.
Document in
a Web To open from Microsoft Internet Explorer:
Browser • From Internet Explorer, choose File > Open to display the Open
dialog box:

• Click on the Browse button to display the Microsoft Internet

Explorer dialog box.
• Locate and select the file you want, and click Open.
• Click OK.

To open from Netscape Navigator:

• From Netscape Navigator, choose File > Open Page to display the
Open Page dialog box:

• Click on the Choose File button to display the Open dialog box.
• Locate and select the file you want, and click Open.
• Click Open.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
28 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Review Questions

Review Questions

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 14

How would • Use Notepad?

you: • Write a new XHTML Document?
• Add a Page Title?
• Save the HTML Document?
• Use Meta Data?
• Identify the Author?
• Add Key Words?
• Add a Description?
• Set the Background Color?
• Set the Text Colors?
• Set the Base URL?
• Open an HTML Document in Notepad?
• Open an HTML Document from Windows Explorer?
• Close an opened HTML Document?
• View an HTML Document in a Web Browser?

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 29
HTML – Module 1 Learn iT! Computer Software Training

Text
When you • Work with Paragraphs
have • Import Text by Copying and Pasting
completed • Type more than one Space
this learning • Create a Line Break
module you • Enter Special Characters
will have • Use Character Map to enter Special Characters
seen how to: • Delete Text
• Use the Font Element
• Use Physical Character Styles
• Use Logical Character Styles
• Use the Heading Elements
• Align Headings
• Align Paragraphs
• Insert a Horizontal Rule
• Indent Quotations
• Use the Preformatted Element
• Create a Bulleted List
• Create a Numbered List
• Create a Definition List
• Nest Lists

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
30 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Working with Text

Working with Text

• You can use Paragraphs to add text to your web page.
• Unlike with word processors or typewriters, regular spaces
created with the Spacebar are translated into a single space
in the web browser. To type more than one space, you will
need to insert a special HTML character.
• Special Characters in HTML begin with the ampersand (&)
and end with the semicolon (;). They are identified by their
code, which you can look up using Character Map.

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 15

Working with • You can use Paragraphs to add text to your web page. HTML
Paragraphs paragraphs allow you to create blocks of text that are separated by a
blank line. The Paragraph or p element must be nested within the
body element.
• In the basic HTML document, place the insertion point between the
opening and closing body tags and press the Enter key twice to insert
a new line.
• In the new line, type the following, replacing the sentence Insert text
for the first paragraph with the text of your paragraph.

<p>Insert text for the first paragraph</p>

• You can continue to add more paragraphs by placing the insertion

point at the end of the </p> tag, pressing the Enter key to insert a new
line, and repeating the above process.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 31
HTML – Module 1 Learn iT! Computer Software Training

• The HTML document should appear as follows:

• In a web browser, the HTML document will appear as follows:

Importing • Start by copying text from another application.

Text by • In the HTML document, place the insertion point where you want to
Copying and add the copied text.
Pasting • From Notepad, choose Edit > Paste

OR press the Ctrl+V key combination.

Typing more • Unlike with word processors or typewriters, regular spaces created
than one with the Spacebar are translated into a single space in the web
Space browser. To type more than one space, you will need to insert a
special HTML character.
• In the HTML document, place the insertion point where you want to
add extra spaces.
• Type in &nbsp; for every space you want to add.

Note: You can also use the preformatted or pre element to add
multiple spaces. This setting is better suited for formatting a block of
text. (You will learn how to use it later in this manual.)

Creating a • As with extra spaces, web browsers do not recognize any line breaks
Line Break created with the Enter key. A line break forces the text that follows to
begin on a new line. To create a line break in your text, you will need
to insert the br element.
• In the HTML document, place the insertion point where you want to
create a line break.
• Type in <br />.

Note: The br element is a self-contained tag and ends with />.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
32 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Entering • In HTML, Special Characters begin with the ampersand (&) and end
Special with the semicolon (;).
Characters • To enter a special character, find the HTML code for the character you
want.
• In the HTML document, place the insertion point where you want the
character to be added, and enter the character's HTML code.
• The following is a list of common special characters:

& Ampersand &amp;

« Angle quotation, left &laquo;
» Angle quotation, right &raquo;
¢ Cent sign &cent;
© Copyright sign &copy;
° Degree sign &deg;
÷ Division sign &divide;
… Ellipsis &#133;
— Em dash &#151;
¼ Fraction 1/4 &frac14;
½ Fraction 1/2 &frac12;
¾ Fraction 3/4 &frac34;
> Greater than sign &gt;
< Less than sign &lt;
µ Micro sign &micro;
· Middle dot &middot;
± Plus or minus sign &plusmn;
£ Pound sign &pound;
® Registered sign &reg;
¥ Yen sign &yen;

Using • You can use Character Map to look up special characters. Character
Character Map is a program that is included with Microsoft Windows.
Map to enter • From the Windows Taskbar, click on the Start button and choose
Special Programs > Accessories > System Tools > Character Map to start
Characters the application:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 33
HTML – Module 1 Learn iT! Computer Software Training

• Locate and select the special character you want to insert into your
HTML document. In the following example, we will select the é (small
e with an acute accent) character:

Note: To see the enlarged version of the character, click and hold
down the mouse button.

• In the bottom-right corner of the screen, you will see the Keystroke
entry. We are only interested in the numeric portion of this entry. In
our example, the numeric value is 0233:

• In the HTML document, place the insertion point where you want to
add the special character.
• Type in &#xxxx; to insert the character. Replace the xxxx with the
numeric value from the Character Map. In our example, type in
&#0233;

Note: Any leading zeros in the numeric value are optional.

Deleting Text • Select the text you want to delete, and press the DELETE key.

Note: You should be very careful when deleting text since accidental
deletion of HTML code may have adverse effects on your web page.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
34 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Formatting Text

Formatting Text

• Unless you specify a font style for your text, the viewer’s web
browser will use the browser defaults. Use the FONT element
to specify the type, size, and color of font you want to use. You
can use Physical and Logical character styles to further format
your text.
• Physical character styles define the actual appearance of the
selected text. The appearances of the physical styles are
consistent across web browsers.
• Logical character styles define the intended
appearance of the selected text. The
appearances of the logical styles may not be
the same across web browsers.

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 17

Using the • Unless you specify a font style for your text, the viewer’s web browser
Font Element will use the browser defaults. You can use the font element to specify
the type, size, and color of font you want to use. The FONT element
must be nested within the body element.
• In the HTML document, place the insertion point before the text you
want to affect. For example, to specify a font style for the entire page,
you would place the insertion point after the <body> tag.

To specify a font type:

• Type the following, replacing the font name Arial with the font you
want:

<font face=”arial”>

Note: If you specified a font type that is not installed on the viewer’s
computer, the text will be displayed using the default font.

To specify a list of font types:

• Type the following, replacing the list of font names in quotation marks
with the list of font names you want. The fonts in your list should be
separated by commas:

<font face=”arial,helvetica,sans serif”>

Note: If the first font type in your list is not installed on the viewer’s
computer, the web browser will use the next font type, and so on.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 35
HTML – Module 1 Learn iT! Computer Software Training

To specify a font size:

• Type the following, replacing the -1 with the font size you want.

<font size=”-1”>

Note: Font sizes are set relative to the base font value of the viewer’s
web browser. For example, with the default base font value of 3, you
can decrease the relative font size to –2, and increase the relative font
size to +4.

To specify a font color:

• Type the following, replacing navy with the font color you want.

<font color=”navy”>

Note: You can use hex colors or word colors.

• If you are specifying all three FONT attributes at the same time, you
can put them all in one <font> tag. For example, you can use the
following HTML code:

<font face=”arial” size=”-1” face=”navy ">

• In our example, the HTML document should appear as follows:

• In a web browser, the HTML document will appear as follows:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
36 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Using • Physical character styles define the actual appearance of the

Physical selected text (vs . logical character styles which define the intended
Character appearance of the selected text). The appearances of the physical
Styles styles are consistent across web browsers.
• There are five physical character styles: Plain, Bold, Italic, Underline,
and Teletype (tt).
• The Plain text style is the default style. It is specified with the
absences of any character style formatting:

<p>Text with plain style</p>

• The Bold text style is specified using the <strong> element. To bold
a selection of text, insert the <strong> tag at the beginning of the
selection and the </strong> tag at the end of the selection:

<p><strong>Text with bold style</strong></p>

• The Italic text style is specified using the <em> element. To italicize a
selection of text, insert the <em> tag at the beginning of the selection
and the </em> tag at the end of the selection:

<p><em>Text with plain style</em></p>

• The Underline text style is specified using the u element. To

underline a selection of text, insert the <u> tag at the beginning of the
selection and the </u> tag at the end of the selection:

<p><u>Text with underline style</u></p>

• The Teletype text style is specified using the tt element. To teletype a

selection of text, insert the <tt> tag at the beginning of the selection
and the </tt> tag at the end of the selection:

<p><tt>Text with teletype style</tt></p>

• The following HTML document uses all five physical character styles:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 37
HTML – Module 1 Learn iT! Computer Software Training

• In a web browser, the HTML document will appear as follows:

Using Logical • Logical character styles define the intended appearance of the
Character selected text (vs . physical character styles which define the actual
Styles appearance of the selected text). The appearances of the logical
styles may not be the same across web browsers.
• There are seven logical styles: Citation, Code, Emphasis, Keyboard,
Sample, Strong, and Variable.
• The Citation text style marks a cited work, and is usually displayed
with italics. You can specify the Citation text style using the cite
element. To apply the style to a selection of text, insert the <cite> tag
at the beginning of the selection and the </cite> tag at the end of the
selection:

<p><cite>Text in citation style</cite></p>

• The Code text style identifies text as computer code, and is usually
displayed with a mono-spaced font. You can specify the Code text
style using the CODE element. To apply the style to a selection of
text, insert the <CODE> tag at the beginning of the selection and the
</CODE> tag at the end of the selection:

<p><code>Text in code style</code></p>

• The Emphasis text style marks text for emphasis, and is usually
displayed with italics. You can specify the Emphasis text style using
the em element. To apply the style to a selection of text, insert the
<em> tag at the beginning of the selection and the </em> tag at the
end of the selection:

<p><em>Text in emphasis style</em></p>

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
38 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

• The Keyboard text style identifies text to be entered by the user as input,
and is usually displayed with a mono-spaced font. You can specify the
Keyboard text style using the kbd element. To apply the style to a selection
of text, insert the <kbd> tag at the beginning of the selection and the </kbd>
tag at the end of the selection:

<p><kbd>Text in keyboard style</kbd></p>

• The Sample text style identifies computer output, and is usually displayed
with a mono-spaced font. You can specify the Sample text style using the
samp element. To apply the style to a selection of text, insert the <samp>
tag at the beginning of the selection and the </samp> tag at the end of the
selection:

<p><samp>Text in sample style</samp></p>

• The Strong text style marks text for prominence, and is usually displayed
with bold text. You can specify the Strong text style using the strong
element. To apply the style to a selection of text, insert the <strong> tag at
the beginning of the selection and the </strong> tag at the end of the
selection:

<p><strong>Text in strong style</strong></p>

• The Variable text style marks text as a variable in a computer program, and
is usually displayed with italics. You can specify the Variable text style using
the var element. To apply the style to a selection of text, insert the <var>
tag at the beginning of the selection and the </var> tag at the end of the
selection:

<p><var>Text in emphasis style</var></p>

• The following HTML document uses all seven logical character styles:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 39
HTML – Module 1 Learn iT! Computer Software Training

• In a web browser, the HTML document will appear as follows:

Note: Although the appearances of some of the logical character

styles may be similar, the elements were created for future indexing
purposes.

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
40 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

Formatting Text Blocks

Formatting Text Blocks

• Headings can be used to
separate your page into
sections. There are six
different heading elements,
ranging from H1 (most
prominent) to H6 (least
prominent).
• To further organize your page,
you can use Horizontal Rules
to help break up sections of
your page. You can
customize the horizontal rule
or HR element by changing
the width, thickness, shading,
and alignment options.

© Cheltenham Computer Training 2002 HTML 4 Foundation - Slide No 18

Using the • Headings can be used to separate your page into sections. There are
Heading six different heading elements, ranging from h1 (most prominent) to h6
Elements (least prominent). The heading formatting identifies text as headings;
the display size of the heading will depend on the web browser.
• To apply the style to a selection of text, insert the <hx> tag at the
beginning of the selection and the </hx> tag at the end of the
selection. Replace the x with the prominence number you want.
• The following HTML document uses all six heading elements:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 41
HTML – Module 1 Learn iT! Computer Software Training

• In a web browser, the HTML document will appear as follows:

Note: Headings h4 to h6 are not normally used.

Aligning • You can use the align attribute in the hx elements to align your headings.
Headings • To apply an alignment to your heading, insert the attribute align="left" in the
<hx> tag. You can replace left with center, right, or justify, depending on
the alignment you want.
• The following HTM L snippet contains all four heading alignments:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
42 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

• In a web browser, the above HTML snippet will appear as follows:

Aligning • You can use the align attribute in the p element to align your text blocks.
Paragraphs • To apply an alignment to your paragraph, insert the attribute align="left" in the
<p> tag. You can replace left with center, right, or justify, depending on the
alignment you want.
• The following HTML snippet contains all four paragraph alignments:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 43
HTML – Module 1 Learn iT! Computer Software Training

• In a web browser, the above HTML snippet will appear as follows:

Note: By default, all paragraphs are left aligned.

Inserting a • To further organize your page, you can use Horizontal Rules to help
Horizontal break up sections of your page. You can customize the horizontal rule
Rule or hr element by changing the width, thickness, shading, and
alignment options.
• In the HTML document, place the insertion point where you want to
add the Horizontal Rule, and type in the <hr> tag.

To specify a width:
• Type the following, replacing the pixel width of 300 with the value you
want:

<hr width=”300” />

To specify a thickness:
• Type the following, replacing the pixel thickness of 5 with the value
you want:

<hr size=”5” />

To specify no shading:
• Type the following:

<hr noshade=”noshade” />

To specify an alignment:
• Type the following, replacing center with the alignment you want:

<hr align=”center” />

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
44 Introduction to HTML
Learn iT! Computer Software Training HTML – Module 1

• If you want to specify more than one hr attributes at the same time,
you can place them all in one <hr> tag. For example, you can use the
following HTML code:

• In a web browser, the HTML document will appear as follows:

Indenting • You can indent quotations using the blockquote element. The blockquote element
Quotations will indent your text by increasing the left and right margins.
• To indent a selection of text, insert the <blockquote> tag at the beginning of the
selection and the </blockquote> tag at the end of the selection.
• The following HTML snippet uses the blockquote element:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com
Introduction to HTML 45
HTML – Module 1 Learn iT! Computer Software Training

• In a web browser, the HTML snippet may appear as follows:

Using the • You can use the Preformatted element to display basic tabular text
Preformatted without using tables. The Preformatted or pre element uses a fixed-
Element width font and displays all regular spaces rather than collapsing them
into a single space.
• To apply the Preformatted formatting to a selection of text, insert the
<pre> tag at the beginning of the selection and the </pre> tag at the
end of the selection.
• The following HTML snippet uses the PRE element:

• In a web browser, the HTML snippet may appear as follows:

FOR USE AT THE LICENSED SITE(S) ONLY

 Cheltenham Computer Training 1995-2002 - www.cctglobal.com