XP

New Perspectives on Creating Web Pages

with HTML

Tutorial 1: Developing a Basic Web Page

Creating Web Pages with HTML, 3e 1

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Tutorial Objectives

• Explore the structure of the World Wide Web

• Learn the basic principles of Web documents
• Create a HTML document
• View an HTML file using a Web browser
• Use HTML tags for text, headings, paragraphs,
and lists
• Insert character tags into an HTML document

Creating Web Pages with HTML, 3e 2

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Tutorial Objectives Continued

• Insert an inline graphic image into a HTML

document
• Add special characters to an HTML document
• Insert horizontal lines into an HTML document

Creating Web Pages with HTML, 3e 3

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Introducing the World Wide Web

• In order for computers to share resources

efficiently, they can be linked together in one of
the following structured networks:
– linked within a local area network (LAN)
– linked across a wide area network (WAN)
• Networks are very useful, their use led to a
“network of networks” called the Internet.

Creating Web Pages with HTML, 3e 4

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
The Internet

• The Internet consists of millions of interconnected

computers that enable users to communicate and
share information.
• Many Internet tools required users to master an
array of terms, acronyms, and commands before
they could navigate the Internet.
• The World Wide Web was developed to make the
Internet easier to use and give quick access to
users.
Creating Web Pages with HTML, 3e 5
Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Structure of the Internet

This figure shows the physical structure of the Internet, which uses fiber-optic cables,
satellites, phone lines, and other telecommunications media to send data back and forth.

Creating Web Pages with HTML, 3e 6

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
The Development of the
World Wide Web

• In 1989, Timothy Berners-Lee and other

researchers at the CERN nuclear research facility,
laid the foundation of the World Wide Web, or the
Web.
– created an information system that would make it easy
for researchers to locate and share data
– required minimal training and support
– developed a system of hypertext documents, electronic
files that contain elements that you can easily select

Creating Web Pages with HTML, 3e 7

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Hypertext Documents

• Hypertext offers a better way of locating

information.
• When you read a book, you follow a linear
progression, reading one page after another.
• With hypertext, you progress through pages in
whatever way is best suited to you and your
objectives.
• Hypertext lets you skip from one topic to another.

Creating Web Pages with HTML, 3e 8

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Linear Versus Hypertext Documents

This figure shows how topics can be related in a hypertext fashion,

as opposed to a linear fashion.

Creating Web Pages with HTML, 3e 9

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Hypertext Documents Continued

• The key to hypertext is the use of links, which you

activate to move from one topic to another.
– a link can open a document on a computer anywhere in
the world
• Hypertext has become the dominate method of
sharing and retrieving information on the Internet,
becoming known as the World Wide Web, or the
Web.
• Documents on the Web are known as Web pages.
Creating Web Pages with HTML, 3e 10
Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Web Pages and Web Browsers

• A Web page is stored on a Web server, which

makes the page available to users of the Web.
• To view a Web page, the user runs a Web
browser, a software program that retrieves the
page and displays it.
• A Web browser can either be text-based, or
graphical.

Creating Web Pages with HTML, 3e 11

Prepared by: C. Hueckstaedt, Tutorial 1
 Using a Browser to View a Web XP
Document on a Server
This figure shows to view web pages, the user runs a Web browser,
a software program that retrieves the page and displays it.

Creating Web Pages with HTML, 3e 12

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Internet Explorer and Netscape

• The most common Web browsers available today

are:
– Microsoft Internet Explorer
– Netscape Navigator

Creating Web Pages with HTML, 3e 13

Prepared by: C. Hueckstaedt, Tutorial 1
 Web Page with Interesting Fonts,XP
Graphics, and Layout

This figure shows a Web page is

not only a source of information,
it can also be a work of art.

graphic image
links

interesting fonts

The Web designer has a great

deal of control over the format of
the page.

Creating Web Pages with HTML, 3e 14

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
HTML: The Language of the Web

• Web pages are text files, written in a language

called Hypertext Markup Language or HTML.
• A markup language is a language used to describe
the contact and format of documents.
• HTML was developed from the Standard
Generalized Markup Language (SGML), a
language used for large-scale documents.
• SGML proved to be cumbersome and difficult,
thus HTML was created.

Creating Web Pages with HTML, 3e 15

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Hypertext Markup Language (HTML)

• HTML allows Web authors to create documents that

can be displayed across different operating systems.
• HTML code is easy to use, that even
nonprogrammers can learn to use it.
• HTML describes the format of Web pages through
the use of tags.
– it’s the job of the Web browser to interpret these tags and
render the text accordingly

Creating Web Pages with HTML, 3e 16

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Versions of HTML

This figure presents a history of the various versions of HTML that have been
released by the World Wide Web Consortium (W3C).

Creating Web Pages with HTML, 3e 17

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Hypertext Markup
Language (HTML) Continued

• HTML has a set of rules, called syntax.

– syntax are a set of standards or specifications developed
by a consortium of Web developers, programmers, and
authors called the World Wide Web Consortium (WC3)
• HTML extensions have been added to support new
features, which have been adopted in subsequent sets
of standards released by the W3C.
– these extensions have provided Web page authors with
more options

Creating Web Pages with HTML, 3e 18

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Web Development

• Web designers need to determine which browsers

and browser versions support their web pages.
• In the future, Web development is focusing more
on XML (Extensible Markup Language) and
XHTML (Extensible HyperText Markup
Language) for developing document content.
– XML combined with style sheets provides the same
functionality as HTML, but with greater flexibility
– XHTML was designed to overcome some of the
problems with competing HTML standards

Creating Web Pages with HTML, 3e 19

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Tools for Creating HTML Documents

• HTML documents are text files, which a text editor

such as Windows NotePad can be used to create.
• You can also use an HTML converter or an HTML
editor.
– an HTML converter like Microsoft Word takes text
in one format and converts it to HTML code
– an HTML editor helps you create an HTML file by
inserting HTML codes for you as you work

Creating Web Pages with HTML, 3e 20

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Creating an HTML Document

It’s always a heading 1

good idea to
plan the image
appearance of
your Web page horizontal line
before you start paragraph
writing code.
list

heading 3
bold and italic
text

Creating Web Pages with HTML, 3e 21

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
HTML Syntax

• Document content is what the users sees on the

page, such as headings and images.
• Tags are the HTML codes that control the
appearance of the document content.
– tag is the name of the HTML tag
– attributes are properties of the tag
– document content is actual content that appears in the
Web page

Creating Web Pages with HTML, 3e 22

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
HTML Tags

• Tags can be one-sided or two-sided.

– two-sided tags contain an opening tag <b> that tells the
browser to turn on a feature and apply it to the contact
that follows, and a closing tag </b> that turns off the
feature
– one-sided tags are used to insert noncharacter data into
the Web page, such as a graphic image or video clip
<tag attribute>
• Tags are not case sensitive. The current standard
is to display all tags in lowercase letters.

Creating Web Pages with HTML, 3e 23

Prepared by: C. Hueckstaedt, Tutorial 1
 Interpretation of the <H1> tag byXP
Different Browsers
This figure shows how three different browsers might interpret a line of HTML code.

Creating Web Pages with HTML, 3e 24

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Initial HTML Tags in Notepad

Your text editor may not display the file extension

in the title bar. This is okay.

<html> tag
indicates that
this file is
written in <title> tag contains
HTML the Web page title
Page content will
go between the
<head> tag
<body> tags
contains
information about
the Web page

Creating Web Pages with HTML, 3e 25

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
The Initial HTML File in
Internet Explorer
the title you
entered between
the <title>
tags
address box
You should occasionally
indicates the
view the formatted page
name and
with different Web
location of the
browsers to check
HTML file
compatibility, verify
page content will that there are no syntax
appear here errors, or other
problems.

Creating Web Pages with HTML, 3e 26

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Creating Heading Tags

• HTML supports six levels of headings, numbered

<h1> through <h6>, with <h1> being the
largest and most prominent.
• Headings are always displayed in a bold font.

Creating Web Pages with HTML, 3e 27

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Six Heading Levels

This figure
illustrates the
general
appearance of the
six heading styles.
Your browser
might use slightly
different fonts and
sizes.

Creating Web Pages with HTML, 3e 28

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Entering Heading Tags and Text

heading tags

As of HTML 3.2, the heading tag can

contain additional attributes, one of
which is the alignment attribute.

Creating Web Pages with HTML, 3e 29

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Headings As They Appear
in the Browser

<h1>

<h2>

<h3>

Creating Web Pages with HTML, 3e 30

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Entering Paragraph Text

If you are using a test editor

like NotePad, the text might
not wrap to the next line
automatically.

Selecting the Word Wrap

command within NotePad will
allow you to see all the text on
your screen.

Creating Web Pages with HTML, 3e 31

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Paragraph Text in the Browser

Creating Web Pages with HTML, 3e 32

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Adding Paragraphs

adding
paragraphs

Creating Web Pages with HTML, 3e 33

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
The Paragraphs Displayed
by the Browser

Remember:
HTML formats
text only through
the use of tags
and ignores such
things as extra
blank spaces,
blank lines, or
tabs.

four grading
paragraphs
are not
separated

Creating Web Pages with HTML, 3e 34

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
The Grading Text Separated
into Paragraphs
To add space
between
paragraphs,
you use the
paragraph tag
<p>.

text is now
separated
into four
paragraphs

Creating Web Pages with HTML, 3e 35

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Creating Lists

• HTML supports three kinds of lists:

– an ordered list, which is used to display information in
a numeric order
– an unordered list, which list items are not listed in a
particular order i.e. bullets
– a definition list, which is a list of terms, each followed
by a definition line that is typically indented slightly to
the right

Creating Web Pages with HTML, 3e 36

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Entering an Unordered List

<ul> unordered
list tag
<li> list
item tag

Creating Web Pages with HTML, 3e 37

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
The Unordered List in the Browser

An unordered
list is a bulleted
list.

unordered
list

Creating Web Pages with HTML, 3e 38

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Creating Character Tags

• HTML also lets you format individual characters.

• A tag that you apply to an individual character is
called a character tag. There are two types of
character tags:
– logical character tag
– physical character tag

Creating Web Pages with HTML, 3e 39

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Common Logical Character Tags

This figure lists some common logical character tags.

Creating Web Pages with HTML, 3e 40

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Common Physical Character Tags

This figure shows examples of how these tags can be displayed in a browser.

Creating Web Pages with HTML, 3e 41

Prepared by: C. Hueckstaedt, Tutorial 1
 Logical Character Tags as They XP
Appear in the Browser

examples of
individual
tags

example of
combined
tags

Creating Web Pages with HTML, 3e 42

Prepared by: C. Hueckstaedt, Tutorial 1
 Physical Character Tags as TheyXP
Appear in the Browser

Underline text
can sometimes be
confused with
hyperlinked text
(which is usually
underlined), and
for that reason,
use of the <u> tag
is discouraged.

Creating Web Pages with HTML, 3e 43

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Applying Character Tags

Italic <i> </i>

and bold
<b> </b>
character tags

If you support
users with older
browsers, you
should use a logical
tag. Otherwise, use
physical tags, which
are more common
and easier to
interpret.
Creating Web Pages with HTML, 3e 44
Prepared by: C. Hueckstaedt, Tutorial 1
 The Effect of the Character TagsXP
in the Browser

text
formatted
with bold
and italic

Creating Web Pages with HTML, 3e 45

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Inserting a Graphic

• Images can be displayed in two ways: as inline

images or as external images.
– an inline image displays directly on the Web page and
is displayed when the page is accessed by a user
– an inline image can be placed on a separate line in your
HTML code, or it can be placed directly within a line of
text
– inline images should be in one of two file formats: GIF
(Graphics Interchange Format) or JPEG (Joint
Photographic Experts Group)
Creating Web Pages with HTML, 3e 46
Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Inserting a Graphic Continued

– an external image is not displayed with the Web page,

the browser must have a file viewer, which is a separate
program that the browser launches when it encounters
an external image file
– external images are represented by an icon that a user
clicks to view the image
– external images are not limited to GIF or JPEG formats

Creating Web Pages with HTML, 3e 47

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Inserting a Graphic

Image file
dube.jpg

use the <p>

tag so you
can center
the image

Creating Web Pages with HTML, 3e 48

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
The Image File as it Appears
in the Browser

Creating Web Pages with HTML, 3e 49

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Special Characters

• Occasionally you will want to include entities or

special characters in your Web page that do not
appear on your keyboard. For example:
– registered trademark symbol ®
– copyright symbol ©
• HTML supports the use of character symbols that
are identified by a code number or name.

Creating Web Pages with HTML, 3e 50

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Special Characters and Codes

This figure shows some HTML symbols and the corresponding code numbers or names.

Creating Web Pages with HTML, 3e 51

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Special Characters in the Browser

This figure shows an example of the code “Welcome to Mr. Dub&#233’s

Web site”, which accented the é in his last name..

accented é added
to last name

Creating Web Pages with HTML, 3e 52

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Inserting Horizontal Lines

• A horizontal line can improve the appearance of a

Web page.
• The syntax for creating a horizontal line is:
<hr align=“align” size=“size”
width=“width” color=“color” noshade>

Creating Web Pages with HTML, 3e 53

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Inserting Horizontal Lines

• The HTML horizontal syntax includes the following:

– align specifies the horizontal alignment of the line on
the page (center, left, or right)
– size specifies the height of the line in pixels or
percentage of the screen width
– width indicates the width of the line in pixels or
percentage of the screen width
– color indicates the color of the line
– noshade specifies that the browser display a solid line

Creating Web Pages with HTML, 3e 54

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Different Line Styles

<hr align=“center” size=“12” width=“100%”>

size=12
width-100%
<hr align=“center” size=“6” width=“50%”>
size=6
width-50%
<hr align=“center” size=“3” width=“25%”>
size=3
width-25%
<hr align=“center” size=“1” width=“10%”>
size=1
width-10% You can use line styles
to improve the
appearance of your
Web page.

Creating Web Pages with HTML, 3e 55

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Horizontal Line Added to the Page

horizontal line

Creating Web Pages with HTML, 3e 56

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Tutorial 1 Summary

• Learned about the history and structure of the

World Wide Web.
• Introduced the basic principles of Web documents
and about the HTML language.
• Learned how to create a Web page using basic
layout tags.
• Learned how to create paragraphs, headings and
lists (both ordered and unordered).

Creating Web Pages with HTML, 3e 57

Prepared by: C. Hueckstaedt, Tutorial 1
 XP
Tutorial 1 Summary Continued

• Worked with character tags and special characters.

• Introduced to working with graphics by creating a
horizontal line and an inline graphic image.

Creating Web Pages with HTML, 3e 58

Prepared by: C. Hueckstaedt, Tutorial 1