Getting Started with HTML5
HTML and CSS
6TH EDITION
The Structure of an HTML5
Document
New Perspectives on HTML and CSS, 6th Edition
XP
2
Exploring the History of the WorldXP
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 node or host
• A host that provides information or a service is
called a server
New Perspectives on HTML and CSS, 6th Edition
3
Exploring the History of the WorldXP
Wide Web
• A computer or other device that receives a
service 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 and CSS, 6th Edition
4
Exploring the History of the WorldXP
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
• Today the Internet has grown to include an
uncountable number of networks and hosts
involving computers, mobile phones, PDAs,
MP3 players, gaming systems, and television
stations
New Perspectives on HTML and CSS, 6th Edition
5
Exploring the History of the WorldXP
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 organization in which data
sources are interconnected through a series of links
or hyperlinks that users can activate to jump from
one piece of information to another
New Perspectives on HTML and CSS, 6th Edition
6
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 and CSS, 6th Edition
7
Introducing HTML
XP
• A Web page is a text file written in Hypertext
Markup Language
• A markup language is a language that
describes the content and structure of a
document by identifying, or tagging, different
elements in the document
New Perspectives on HTML and CSS, 6th Edition
8
The History of HTML
XP
• The first popular markup language was
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
New Perspectives on HTML and CSS, 6th Edition
9
The History of HTML
XP
• A group of Web designers and programmers,
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 and CSS, 6th Edition
10
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 is a metalanguage like SGML, but without
SGML’s complexity and overhead
New Perspectives on HTML and CSS, 6th Edition
11
The History of HTML
New Perspectives on HTML and CSS, 6th Edition
XP
12
HTML and Style Sheets
XP
• HTML marks the different parts of a
document, but it does not indicate how
document content should be displayed by
browsers
• For this reason, the exact appearance of each
page element is described in a separate
document known as a style sheet
– Internal style sheets specify the appearance of
different HTML elements
New Perspectives on HTML and CSS, 6th Edition
13
Tools for Creating
HTML Documents
XP
• Basic text editor such as Windows Notepad
• Other software programs that enable you to
create documents in different formats, such as
Microsoft Word or Adobe Acrobat, include
tools to convert their documents into HTML
for quick and easy publishing on the Web
• Web publishing software manages all of the
code and extended features of your site
New Perspectives on HTML and CSS, 6th Edition
14
Entering Elements and Attributes XP
• An HTML document is composed of elements
that represent distinct items in the Web page,
such as a paragraph, the page heading, or
even the entire body of the page itself
– Elements are marked by one or more tags
• A two-sided tag is a tag that contains some
document content. General syntax for a twosided tag:
<element>content</element>
New Perspectives on HTML and CSS, 6th Edition
15
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 the J-Prop Shop</p>
New Perspectives on HTML and CSS, 6th Edition
16
Adding an Attribute to an ElementXP
• To add an element attribute, use the format
<element attribute1=”value1”
attribute2=”value2”
...>content</element>
where attribute1, attribute2, etc. are the names
of attributes associated with the element, and
value1, value2, etc. are the values of those
attributes
New Perspectives on HTML and CSS, 6th Edition
17
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 and CSS, 6th Edition
18
Exploring the Structure
of an HTML File
XP
<html>
<head>
head content
</head>
<body>
body content
</body>
</html>
New Perspectives on HTML and CSS, 6th Edition
19
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 and CSS, 6th Edition
20
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
New Perspectives on HTML and CSS, 6th Edition
21
Converting an HTML Document
into XHTML
XP
• 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/xhtml1strictdtd">
– <html xmlns=http://wwww3org/1999/xhtml>
New Perspectives on HTML and CSS, 6th Edition
22
The Document Type Declaration
XP
• Prior to the opening <html> tag, many HTML
files also include a Document Type
Declaration, or doctype, to indicate the type
of markup language used in the document
<!DOCTYPE html>
New Perspectives on HTML and CSS, 6th Edition
23
Defining the Page Title
New Perspectives on HTML and CSS, 6th Edition
XP
24
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 and CSS, 6th Edition
25
Adding Comments
New Perspectives on HTML and CSS, 6th Edition
XP
26
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 and CSS, 6th Edition
27
Displaying an HTML File
New Perspectives on HTML and CSS, 6th Edition
XP
28
Defining the Structure
of the Page Body
New Perspectives on HTML and CSS, 6th Edition
XP
29
Defining the Structure
of the Page Body
New Perspectives on HTML and CSS, 6th Edition
XP
30
Marking Structural Elements
in HTML5
XP
• To mark the page header, use the header
element
• To mark the page footer, use the footer
element
• To mark a main section of page content, use
the section element
• To mark a sidebar, use the aside element
• To mark an article, use the article element
New Perspectives on HTML and CSS, 6th Edition
31
Marking a Section
with the div Element
New Perspectives on HTML and CSS, 6th Edition
XP
32
Page Content Elements
New Perspectives on HTML and CSS, 6th Edition
XP
33
Working with Grouping Elements XP
New Perspectives on HTML and CSS, 6th Edition
34
Working with
Grouping Elements
XP
• Grouping 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 and CSS, 6th Edition
35
Marking Grouping Content
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>
New Perspectives on HTML and CSS, 6th Edition
36
Adding Headings
New Perspectives on HTML and CSS, 6th Edition
XP
37
Marking Paragraph Elements
New Perspectives on HTML and CSS, 6th Edition
XP
38
Marking a Block Quote
XP
• The syntax for making an extended quote is
– <blockquote>content</blockquote>
New Perspectives on HTML and CSS, 6th Edition
39
Marking an Address
XP
• <address>content</address>
New Perspectives on HTML and CSS, 6th Edition
40
Marking a List
XP
• HTML supports three kinds of lists: ordered,
unordered, and description
• 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 and CSS, 6th Edition
41
Description Lists
XP
• The description 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 and CSS, 6th Edition
42
Applying an External Style Sheet
XP
• Style sheets are written in the Cascading Style Sheet
(CSS) language
• To apply an external style sheet to a Web page, you
create a link within the document head to the style
sheet file using the link element
<link href=”file” rel=”stylesheet” type=”text/css” />
New Perspectives on HTML and CSS, 6th Edition
43
Linking to a JavaScript File
New Perspectives on HTML and CSS, 6th Edition
XP
44
Marking Text-Level Elements
New Perspectives on HTML and CSS, 6th Edition
XP
45
Using the Generic Elements
div and span
XP
• HTML supports two such generic elements: div
and span
– The div element is used to mark general grouping
content
– The span element is used to mark general textlevel content
New Perspectives on HTML and CSS, 6th Edition
46
Marking a Line Break
New Perspectives on HTML and CSS, 6th Edition
XP
47
Inserting an Inline Image
New Perspectives on HTML and CSS, 6th Edition
XP
48
Working with Character Sets
and Special Characters
XP
• To insert a symbol based on the encoding number, use the entity
&#code;
where code is the encoding number.
• To insert a symbol based on a character entity reference, use the
entity
char;
where char is the name assigned to the character.
• To insert a nonbreaking space, use the following entity:
&nbsp;
• To insert the < symbol, use the following entity:
&lt;
• To insert the > symbol, use the following entity:
&gt;
New Perspectives on HTML and CSS, 6th Edition
49
Working with Character Sets
and Special Characters
New Perspectives on HTML and CSS, 6th Edition
XP
50
Specifying a Character Set
New Perspectives on HTML and CSS, 6th Edition
XP
51
Developing a Basic Web Site
HTML and CSS
6TH EDITION
Creating Hyperlinks
New Perspectives on HTML and CSS
XP
53
Hierarchical Structures
New Perspectives on HTML and CSS
XP
54
Mixed Structures
XP
• As Web sites become larger and more
complex, you often need to use a combination
of several different structures
• The overall form can be hierarchical, allowing
the user to move from general to specific;
however, the links also allow users to move
through the site in a linear fashion
• A site index is a page containing an outline of
the entire site and its contents
New Perspectives on HTML and CSS
55
Mixed Structures
New Perspectives on HTML and CSS
XP
56
Protected Structures
XP
• Sections of most commercial Web sites are
off-limits except to subscribers and registered
customers
New Perspectives on HTML and CSS
57
Creating a Navigation List
XP
• Every Web site should include a navigation
list, which is a list containing links to the main
topic areas of the site
• HTML5 introduced the nav structural element
to make it easier to mark up navigation lists
New Perspectives on HTML and CSS
58
Creating a Hypertext Link
XP
• Hypertext links are created by enclosing some
document content within a set of opening and
closing <a> tags
• To mark content as a hypertext link, use
<a href=”reference”>content</a>
where reference is the location being linked to and
content is the document content that is being marked
as a link
New Perspectives on HTML and CSS
59
Creating a Hypertext Link
New Perspectives on HTML and CSS
XP
60
Attributes of the a Element
New Perspectives on HTML and CSS
XP
61
Specifying a Folder Path
New Perspectives on HTML and CSS
XP
62
Specifying a Folder Path
XP
• To create a link to a file located in a different folder than
the current document, you must specify the file’s
location, or path
• An absolute path specifies a file’s precise location within
a computer’s entire folder structure
• A relative path specifies a file’s location in relation to the
location of the current document
• If the file is in the same location as the current
document, you do not have to specify the folder name
• If the file is in a subfolder of the current document, you
have to include the name of the subfolder
New Perspectives on HTML and CSS
63
Specifying a Folder Path
XP
• If you want to go one level up the folder tree, you
start the relative path with a double period (..), a
forward slash, and then provide the name of the file
• To specify a different folder on the same level,
known as a sibling folder, you move up the folder
tree using the double period (..) and then down the
tree using the name of the sibling folder
• You should almost always use relative paths in your
links
New Perspectives on HTML and CSS
64
Specifying a Folder Path
New Perspectives on HTML and CSS
XP
65
Setting the Base Path
XP
• A browser resolves relative paths based on the
location of the current document
• You can change this behavior by using the base
element to specify a different starting location for all
relative paths
• To set the default location for a relative path, add
the element
<base href=”path” />
to the document head, where path is the folder
location that you want browsers to use when
resolving relative paths in the current document
New Perspectives on HTML and CSS
66
Marking Locations with the id
Attribute
XP
• To jump to a specific location within a document,
you first need to mark that location
• One way to identify elements in an HTML document
is to use the id attribute
• Id names must be unique
• Id names are not case sensitive
New Perspectives on HTML and CSS
67
Linking to Locations within
Documents
New Perspectives on HTML and CSS
XP
68
Linking to an id
XP
• Once you’ve marked an element using the id
attribute, you can create a hypertext link to that
element using the a element
<a href=”#id”>content</a>
New Perspectives on HTML and CSS
69
Creating Links between
Documents
XP
• To create a link to a specific location in another file,
enter the code
<a href="reference#id">content</a>
where reference is a reference to an HTML or XHTML
file and id is the id of an element marked within that
file
New Perspectives on HTML and CSS
70
Creating Links between
Documents
New Perspectives on HTML and CSS
XP
71
Image Maps and External Links
New Perspectives on HTML and CSS
XP
72
Working with Linked Images
and Image Maps
XP
• A standard practice on the Web is to turn the Web
site’s logo into a hypertext link pointing to the home
page
<a href="reference"><img src="file"
alt="text" /></a>
• Thumbnail images are small representations of
larger image files
• HTML also allows you to divide an image into
different zones, or hotspots, each linked to a
different destination
New Perspectives on HTML and CSS
73
Working with Linked Images
and Image Maps
New Perspectives on HTML and CSS
XP
74
Working with Linked Images
and Image Maps
XP
• To define these hotspots, you create an image map
that matches a specified region of the inline image to
a specific destination
• HTML supports two kinds of image maps:
– Client-side image maps
– Server-side image maps
New Perspectives on HTML and CSS
75
Client-Side Image Maps
XP
• A client-side image map is inserted in an image map
defined in the Web page
• The Web browser locally processes the image map
• Because all of the processing is done locally, you can
easily test Web pages
• More responsive than server-side maps
• The browser’s status bar displays the target of each
hotspot
• Older browsers do not support client-side images
New Perspectives on HTML and CSS
76
Server-Side Image Maps
XP
• In a server-side image map, the image map is stored
on the Web server
• Server-side image maps are supported by most
graphical browsers
• Server-side image maps can be slow to operate
• The browser’s status bar does not display the target
of each hotspot
New Perspectives on HTML and CSS
77
Introducing URLs
XP
• To create a link to a resource on the Internet, you
need to know its URL
• A Uniform Resource Locator (URL) specifies the
precise location and type of a resource on the
Internet
• A protocol is a set of rules defining how information
is passed between two resources
New Perspectives on HTML and CSS
78
Introducing URLs
XP
• Your Web browser communicates with Web servers
using the Hypertext Transfer Protocol (HTTP)
• The URLs for all Web pages must start with the http
scheme
• Other Internet resources use different protocols and
have different scheme names
New Perspectives on HTML and CSS
79
Internet Protocols
New Perspectives on HTML and CSS
XP
80
Linking to a Web Site
XP
A sample URL for a Web page
New Perspectives on HTML and CSS
81
Linking to a Web Site
XP
• If a URL includes no path, then it indicates the
topmost folder in the server’s directory tree
• If a URL does not specify a filename, the server
searches for the default home page
• The server name portion of the URL is also called the
domain name
• The top level, called an extension, indicates the
general audience supported by the Web server
<a href="http://www.apogeephoto.com">Apogee
Photo</a>
New Perspectives on HTML and CSS
82
Linking to a Web Site
New Perspectives on HTML and CSS
XP
83
Linking to FTP Servers
XP
• FTP servers are another method of storing and
sharing files on the Internet
• FTP servers transfer information using a
communications protocol called File Transfer
Protocol (FTP)
• An FTP server requires each user to enter a password
and a username to access its files
New Perspectives on HTML and CSS
84
Linking to FTP Servers
New Perspectives on HTML and CSS
XP
85
Linking to a Local File
XP
• On occasion, you may see the URL for a file stored
locally on your computer or local area network
• If you are accessing a file from your own computer,
the server name might be omitted and replaced by
an extra slash (/)
• The file scheme here does not imply any particular
communication protocol; instead the browser
retrieves the document using whatever method is
the local standard for the type of file specified in the
URL
New Perspectives on HTML and CSS
86
Linking to an E-Mail Address
XP
• Many Web sites use e-mail to allow users to
communicate with a site’s owner, sales
representative, or technical support staff
• You can turn an e-mail address into a hypertext link;
when a user clicks the link, the user’s e-mail program
opens and automatically inserts the address into the
“To” field of the new outgoing message
New Perspectives on HTML and CSS
87
Linking to an E-Mail Address
XP
• The mailto protocol also allows you to add
information to the e-mail, including the subject line
and the text of the message
– mailto:address?header1=value1&head
er2=value2& ...
– mailto:ghayward@camshotscom?Subjec
t=Test&Body=
This%20is%20a%20test%20message
• Spaces are replaced with the %20 character code
since URLs cannot contain blank spaces
New Perspectives on HTML and CSS
88
Linking to an E-Mail Address
XP
• If you need to include an e-mail address in your Web
page, you can take a few steps to reduce problems
with spam:
– Replace all e-mail addresses in your page with
inline images of those addresses
– Write a program in a language JavaScript to
scramble any e-mail address in the HTML code
– Replace the characters of the e-mail address with
escape characters (character codes)
New Perspectives on HTML and CSS
89
Linking to an E-Mail Address
New Perspectives on HTML and CSS
XP
90
XP
Working with Hypertext Attributes
• HTML provides several attributes to control the
behavior and appearance of your links
• You can force a document to appear in a secondary
window or tab by adding the target attribute to the
tag <a> tag
• If you want to provide additional information to your
users, you can provide a tooltip to your links
• A tooltip is a descriptive text that appears whenever
a user positions the mouse pointer over a link
New Perspectives on HTML and CSS
91
XP
Working with Hypertext Attributes
New Perspectives on HTML and CSS
92
XP
Working with Hypertext Attributes
New Perspectives on HTML and CSS
93