Tutorial 1

Developing a Basic
Web Page
Objectives XP

• Learn the history of the Web and HTML

• Describe HTML standards and specifications
• Understand HTML elements and markup tags
• Create the basic structure of an HTML file
• Insert an HTML comment
• Work with block-level elements
• Create ordered, unordered, and definition lists

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 2

Objectives XP

• Work with inline elements

• Understand the div and span elements
• Add attributes to HTML elements
• Format page content using the style attribute
• Mark empty elements with one-sided tags
• Add an inline image to a Web page
• Work with character sets and codes

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 3

Exploring the History of the World XP
Wide Web
• A network is a structure linking computers together for
the purpose of sharing information and services
• Users typically access a network through a computer
called a host or node
• A node that provides information or a service is called a
server

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 4

Exploring the History of the World XP
Wide Web
• A computer or other device that requests services from
a server is called a client
• One of the most commonly used designs is the client-
server network
• If the computers that make up a network are close
together (within a single department or building), then
the network is referred to as a local area network (LAN)

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 5

Exploring the History of the World XP
Wide Web
• A network that covers a wide area, such as several
buildings or cities, is called a wide area network (WAN)
• The largest WAN in existence is the Internet
• In its early days, the Internet was called ARPANET and
consisted of two network nodes located at UCLA and
Stanford, connected by a phone line

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 6

Exploring the History of the World XP
Wide Web
• Today the Internet has grown to include an uncountable
number of nodes involving computers, cell phones,
PDAs, MP3 players, gaming systems, and television
stations
• The physical structure of the Internet uses fiber-optic
cables, satellites, phone lines, wireless access points,
and other telecommunications media

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 7

Structure of the Internet XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 8

Exploring the History of the World XP
Wide Web
• Timothy Berners-Lee and other researchers at the CERN
nuclear research facility near Geneva, Switzerland laid
the foundations for the World Wide Web, or the Web,
in 1989
• They developed a system of interconnected hypertext
documents that allowed their users to easily navigate
from one topic to another
• Hypertext is a method of organizing information that
gives the reader control over the order in which the
information is presented

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 9

Hypertext Documents XP

• 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

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 10

Hypertext Documents XP

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

elements in a hypertext document that allow you to
jump from one topic or document to another
• A link may point to another section of the same
document, or to another document entirely
• A link can open a document on your computer, or
through the Internet, a document on a computer
anywhere in the world

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 11

Web Pages and Web Servers XP

• Each document on the World Wide Web is referred to as

a Web page
• Web pages are stored on Web servers, which are
computers that make Web pages available to any device
connected to the Internet
• A Web browser retrieves the page from the Web server
and renders it on the user’s computer or other device
• The earliest browsers, known as text-based browsers,
were incapable of displaying images

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 12

Web Pages and Web Servers XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 13

Introducing HTML XP

• A Web page is a text file written in a language called

Hypertext Markup Language
• A markup language is a language that describes a
document’s content and structure
• HTML is not a programming language or a formatting
language
• Styles are format descriptions written in a separate
language from HTML that tell browsers how to render
each element for particular devices

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 14

The History of HTML XP

• The first version of HTML was created using the

Standard Generalized Markup Language (SGML)
• In the early years of HTML, Web developers were free to
define and modify HTML in whatever ways they thought
best
• Competing browsers introduced some differences in the
language The changes were called extensions

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 15

The History of HTML XP

• A group of Web developers, programmers, and authors

called the World Wide Web Consortium, or the W3C,
created a set of standards or specifications that all
browser manufacturers were to follow
• The W3C has no enforcement power
• The recommendations of the W3C are usually followed
since a uniform approach to Web page creation is
beneficial to everyone

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 16

History of HTML and XHTML XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 17

The History of HTML XP

• Older features of HTML are often deprecated, or phased

out, by the W3C That does not mean you can’t continue
to use them—you may need to use them if you are
supporting older browsers
• Current Web developers are increasingly using XML
(Extensible Markup Language)
• XML (Extensible Markup Language) is a metalanguage
like SGML, but without SGML’s complexity and overhead

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 18

The History of HTML XP

• XHTML (Extensible Hypertext Markup Language) is a

stricter version of HTML and is designed to confront
some of the problems associated with the different and
competing versions of HTML
• XHTML is also designed to better integrate HTML with
other markup languages such as XML

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 19

The History of HTML XP

• HTML will not become obsolete anytime soon

• XHTML 2.0 is still in the draft stage, and is not backward-
compatible with earlier versions of HTML and XHTML
• HTML 5 is being developed under the XML specifications
as XHTML 5.0

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 20

Writing HTML Code XP

• Become well-versed in the history of HTML

• Know your market
• Test your code on several different browsers and
browser versions
• Read the documentation on the different versions of
HTML and XHTML

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 21

Tools for Creating XP
HTML Documents
• Basic text editor such as Windows Notepad
• HTML Converter – translates formatted text into HTML
code
– Can create the source document in a word processor
and then convert it
– HTML code created using a converter is often longer
and more complicated than necessary, resulting in
“bloated” code

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 22

Tools for Creating XP
HTML Documents
• HTML Editor – helps you create an HTML file by
inserting HTML codes for you as you work
– They can save you a lot of time and help you work
more efficiently
– Advantages and limitations similar to those of HTML
converters
– Allow you to set up a Web page quickly
– Will usually still have to work with HTML code to
create a finished document

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 23

Creating an HTML Document XP

• Plan out your Web page before you start coding

• Draw a planning sketch or create a sample document
using a word processor
• Preparatory work can weed out errors or point to
potential problems

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 24

Creating an HTML Document XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 25

Creating an HTML Document XP

• In planning, identify a document’s various elements An

element is a distinct object in the document, like a
paragraph, a heading, or a page’s title
• Formatting features such as boldfaced font, and
italicized text may be used

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 26

Marking Elements with Tags XP

• The core building block of HTML is the tag, which marks

the presence of an element
• A two-sided tag is a tag that contains some document
content General syntax for a two-sided tag:
<element>content</element>

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 27

Marking Elements with Tags XP

• A two-sided tag’s opening tag (<p>) and closing tag

(</p>) should completely enclose its content
• Elements can contain other elements
– Tags cannot overlap

<p>Welcome to <b>Dave’s Devil Sticks</b></p>

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 28

The Structure of an HTML File XP

• The opening <html> tag marks the start of an HTML

document, and the closing </html> tag tells a browser
when it has reached the end of that HTML document
– <html> marks the root element
• Anything between these two tags makes up the
document content, including all other elements, text,
and comments

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 29

The Structure of an HTML File XP

• An HTML document is divided into two main sections:

the head and the body
• The head element contains information about the
document, for example the document title or the
keywords
• The content of the head element is not displayed within
the Web page

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 30

The Structure of an HTML File XP

• The body element contains all of the content to appear

on the Web page
• The body element can contain code that tells the
browser how to render the content
• The title element contains the page’s title A document’s
title is usually displayed in the browser’s title bar

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 31

Converting an HTML Document XP
into XHTML
• There is considerable overlap between HTML and XHTML
• You can convert an HTML file into an XHTML file by
replacing the opening <html> tag with the following
three lines of code:
– <?xml version="10" encoding="UTF-8" standalone="no" ?
>
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10
Strict//EN” “http://wwww3org/TR/xhtml1/DTD/xhtml11-
strictdtd">
– <html xmlns=http://wwww3org/1999/xhtml>

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 32

Adding Comments XP

• The comment tag adds notes to your HTML code

<!-- comment -->
• Comments can be spread over several lines
• Comments are useful in documenting your HTML code
for yourself and others

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 33

Adding Comments XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 34

Displaying an HTML File XP

• As you continue modifying the HTML code, you should

occasionally view it with your Web browser to verify
that you have not introduced any errors
• You may want to view the results using different
browsers to check for compatibility

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 35

Displaying an HTML File XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 36

Working with XP
Block-Level Elements
• Block-level elements are elements that contain content
that is viewed as a distinct block within the Web page
• Heading elements are block-level elements that contain
the text of main headings on the Web page
– <hn>content<hn>
– n is an integer between 1 and 6
• <h1> is the largest heading
• <h6> is the smallest heading

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 37

Marking Block-Level Elements XP

• To mark a heading, enter

<hn>content</hn>
where n is an integer from 1 to 6 and content is the text of
heading
• To mark a paragraph, enter
<p>content</p>
• To mark a block quote, enter
<blockquote>content</blockquote>
• To mark a generic block-level element, enter
<div>content</div>
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 38
Adding <h1> and <h2> XP
Markup Tags

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 39

Marking Paragraph Elements XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 40

White Space and HTML XP

• HTML file documents are composed of text characters

and white space
• White space is the blank space, tabs, and line breaks
within the file
• HTML treats each occurrence of white space as a single
blank space
• You can use white space to make your document more
readable

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 41

Marking a Block Quote XP

• The syntax for making an extended quote is

– <blockquote>content</blockquote>

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 42

Marking a List XP

• HTML supports three kinds of lists: ordered, unordered,

and definition
• You use an ordered list for items that must appear in a
numerical order
• You use an unordered list for items that do not need to
occur in any special order
• One list can contain another list This is called a nested
list

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 43

Marking a List XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 44

Creating a Definition List XP

• The definition list contains a list of terms, each followed

by the term’s description
• Web browsers typically display the definition description
below the definition term and slightly indented:
Basic Stick
Easiest stick to learn

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 45

Using Other Block-Level Elements XP

• HTML supports the address element to indicate contact

information Most browsers display an address element
in an italicized font, and some right-justify or indent
addresses

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 46

Using Other Block-Level Elements XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 47

Working with Inline Elements XP

• An inline element marks a section of text within a block-

level element
• Often used to format characters and words
– Also referred to as character formatting elements

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 48

Working with Inline Elements XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 49

Logical Elements versus Physical XP
Elements
• A logical element describes the nature of the enclosed
content, but not necessarily how that content should
appear
• A physical element describes how content should
appear, but doesn’t indicate the content’s nature
• You should use a logical element that accurately
describes the enclosed content whenever possible, and
use physical elements only for general content

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 50

Using Element Attributes XP

• Many tags contain attributes that control the use,

behavior, and in some cases the appearance, of
elements in the document
• Attributes are inserted within the tag brackets

<element attribute1=“value1” attribute2=“value2” …

>content</element>

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 51

The Style Attribute XP

• Use the style attribute to control the appearance of an

element, such as text alignment
• The text-align style tells the browser how to horizontally
align the contents of an element
• The color style tells the browser to render the text in a
certain color
• Presentational attributes specify exactly how the
browser should render an element

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 52

The Style Attribute XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 53

The Style Attribute XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 54

Working with Empty Elements XP

• An empty element contains no content

• Empty elements appear in code as one-sided tags
– <element />
• The one-sided tag to mark a line break is
– <br />
• The horizontal rule element places a horizontal line
across the Web page
– <hr />

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 55

Working with Empty Elements XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 56

Working with Empty Elements XP

• To display a graphic, you insert an inline image into the

page An inline image displays a graphic image located in
a separate file within the page
– <img src="file" alt="text" />

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 57

Working with Empty Elements XP

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 58

Working with Character Sets XP
and Special Characters
• Character sets come in a wide variety of sizes, based on
the number of symbols required for communication in
the chosen Language
– ASCII (American Standard Code for Information
Interchange)
– Latin-1
– ISO 8859-1
– Unicode
– UTF-8

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 59

Working with Character Sets XP
and Special Characters
• To store a character set, browsers need to associate
each symbol with a number in a process called character
encoding
• Another way to insert a special symbol is to use a
character entity reference, in which a short memorable
name is used in place of the numeric character
reference

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 60

Working with Character Sets XP
and Special Characters

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 61

Working with Character Sets XP
and Special Characters

New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 62