HTML5 and CSS3
7th Edition
Tutorial 1
Getting Started with HTML5
Objectives XP
• Explore the history of the web
• Create the structure of an HTML document
• Insert HTML elements and attributes
• Insert metadata into a document
• Define a page title
New Perspectives on HTML5 and CSS3, 7th Edition 2
Objectives (continued 1) XP
• Mark page structures with sectioning elements
• Organize page content with grouping elements
• Mark content with text-level elements
• Insert inline images
• Insert symbols based on character codes
New Perspectives on HTML5 and CSS3, 7th Edition 3
Objectives (continued 2) XP
• Mark content using lists
• Create a navigation list
• Link to files within a website with hypertext
links
• Link to e-mail addresses and telephone
numbers
New Perspectives on HTML5 and CSS3, 7th Edition 4
The Structure of an HTML5
XP
Document
New Perspectives on HTML5 and CSS3, 7th Edition 5
Exploring the World Wide Web XP
• A network is a structure in which information
and services are shared among devices
• A host or a node can be any device that is
capable of sending and/or receiving data
electronically
• A server is a host that provides information or
a service to other devices on the network
New Perspectives on HTML5 and CSS3, 7th Edition 6
Exploring the World Wide Web
XP
(continued 1)
• A computer or other device that receives a
service is called a client
• In a client-server network, clients access
information provided by one or more users
• Local area network - A network confined to a
small geographic area, such as within a
building or department
New Perspectives on HTML5 and CSS3, 7th Edition 7
The client/server model XP
Image source: http://mybrowserupdates.com/web-browser-web-server-and-web-client/
New Perspectives on HTML5 and CSS3, 7th Edition 8
Exploring the World Wide Web
XP
(continued 2)
• 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
New Perspectives on HTML5 and CSS3, 7th Edition 9
Exploring the World Wide Web
XP
(continued 3)
• 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 HTML5 and CSS3, 7th Edition 10
Web Pages and Web Servers XP
• Each document on the web is referred to as a
web page
• Web pages are stored on web servers
• Documents on the web are accessed through a
software program called a web browser
New Perspectives on HTML5 and CSS3, 7th Edition 11
Introducing HTML XP
• A Web page is a text file written in HTML
(Hypertext Markup Language)
• A markup language describes the content and
structure of a document by identifying, or
tagging, different document elements
New Perspectives on HTML5 and CSS3, 7th Edition 12
The History of HTML XP
• In the early years of HTML, browser
developers were free to define and modify the
language as no rules or syntax were defined
• The World Wide Web Consortium, or the
W3C, created a set of standards or
specifications for all browser manufacturers to
follow
New Perspectives on HTML5 and CSS3, 7th Edition 13
The History of HTML (continued 1)XP
• 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 HTML5 and CSS3, 7th Edition 14
The History of HTML (continued 2)XP
• XHTML (Extensible Hypertext Markup
Language) is a different version of HTML
enforced with a stricter set of standards
• HTML5 was developed as the de facto
standard for the next generation of HTML
• Older features of HTML are often deprecated,
or phased out; you may need to use them if
you are supporting older browsers
New Perspectives on HTML5 and CSS3, 7th Edition 15
The History of HTML (continued 3)XP
New Perspectives on HTML5 and CSS3, 7th Edition 16
Essential elements of web XP
This early web incorporated the following essential
elements that are still the core features of the web today:
• A Uniform Resource Locator (URL) to uniquely identify a
resource on the WWW.
• The Hypertext Transfer Protocol (HTTP) to describe how
requests and responses operate.
• A software program (later called web server software) that can
respond to HTTP requests
• Hypertext Markup Language (HTML) to publish documents
• A program (later called a browser) that can make HTTP request
to URLs and that can display the HTML it receives.
New Perspectives on HTML5 and CSS3, 7th Edition 17
Tools for Working with HTML XP
• Basic text editor such as Windows Notepad
• Other HTML editors such as Notepad++,
UltraEdit, CoffeeCup, BBEdit, and ConTEXT
New Perspectives on HTML5 and CSS3, 7th Edition 18
Tools for Working with HTML
XP
(continued)
• IDE (Integrated Development Environment) -
A software package that provides
comprehensive coverage of all phases of the
development process from writing HTML code
to creating scripts for programs running on
web servers
• Validators are programs that test code to
ensure that it contains no syntax errors
New Perspectives on HTML5 and CSS3, 7th Edition 19
Exploring an HTML File XP
New Perspectives on HTML5 and CSS3, 7th Edition 20
The Document Type Declaration XP
• The first line in an HTML file is the document
type declaration, or doctype, that indicates
the type of markup language used in the
document
<!DOCTYPE html>
New Perspectives on HTML5 and CSS3, 7th Edition 21
Introducing Element Tags XP
• Element tag is the fundamental building block
in every HTML document that marks an
element in the document
• A starting tag (<element>) indicates the
beginning of an element, while an ending tag
(</element>) indicates the ending
• The general syntax of a two-sided element tag
is
<element>content</element>
New Perspectives on HTML5 and CSS3, 7th Edition 22
Introducing Element Tags
XP
(continued)
• The following code marks a paragraph element
<p>Welcome to Curbside Thai.</p>
• Empty elements are elements that are either
nontextual (images) or contain directives to
the browser about how the page should be
treated
– For example, <br /> is used to indicate the
presence of a line break in the text
New Perspectives on HTML5 and CSS3, 7th Edition 23
The Element Hierarchy XP
<!DOCTYPE html>
<html>
<head>
head content
</head>
<body>
body content
</body>
</html>
New Perspectives on HTML5 and CSS3, 7th Edition 24
The Element Hierarchy (continued)
XP
• An HTML document is divided into two main
sections: the head and the body
• The head element marks information about
the document
• The body element marks the content that will
appear in the web page
• The body element is always placed after the
head element
New Perspectives on HTML5 and CSS3, 7th Edition 25
Introducing Element Attributes XP
• Element attributes provide additional
information to the browser about the purpose of
the element
• The general syntax of an element attribute is
<element attr1=”value1”
attr2=”value2” ...>
content</element>
where attr1, attr2, etc. are the names of attributes
associated with the element and value1, value2,
etc., are the attribute values
New Perspectives on HTML5 and CSS3, 7th Edition 26
Handling White Space XP
• HTML file documents are composed of text
characters and white space
• A white-space character is any empty or blank
character such as a space, tabs, or a line break
• You can use white space to make your file
easier to read by separating one code block
from another
New Perspectives on HTML5 and CSS3, 7th Edition 27
Viewing HTML File in a Browser XP
New Perspectives on HTML5 and CSS3, 7th Edition 28
Viewing HTML File in a Browser
XP
(continued)
• HTML describes a document’s content and
structure, but not its appearance
• The actual appearance of the document is
determined by style sheets
New Perspectives on HTML5 and CSS3, 7th Edition 29
Creating the Document Head XP
• The document head contains metadata
• Metadata is the content that describes or
provides information about how the
document should be processed by the browser
New Perspectives on HTML5 and CSS3, 7th Edition 30
Creating the Document Head XP
(continued)
New Perspectives on HTML5 and CSS3, 7th Edition 31
Setting the Page Title XP
New Perspectives on HTML5 and CSS3, 7th Edition 32
Adding Metadata to the Document
XP
• Meta element is used for general lists of
metadata values.
The meta element structure is
<meta attributes />
• Character encoding is the process by which a
computer converts text into a sequence of
bytes and vice versa when it stores the text
and when the text is read.
New Perspectives on HTML5 and CSS3, 7th Edition 33
Adding Metadata to the Document
XP
(continued)
New Perspectives on HTML5 and CSS3, 7th Edition 34
Adding Comments to Your
XP
Document
• A comment is descriptive text that is added to
the HTML file but does not appear in the
browser window
<!-- comment -->
• Comments can be spread across several lines
• It is a good practice to always include a
comment in the document head
New Perspectives on HTML5 and CSS3, 7th Edition 35
Adding Comments to your
XP
Document (continued)
New Perspectives on HTML5 and CSS3, 7th Edition 36
Writing the Page Body XP
• HTML marks the major topical areas of a
page using sectioning elements also referred
to as semantic elements.
New Perspectives on HTML5 and CSS3, 7th Edition 37
Comparing Sections in HTML4 and
XP
HTML5
New Perspectives on HTML5 and CSS3, 7th Edition 38
Using Grouping Elements XP
New Perspectives on HTML5 and CSS3, 7th Edition 39
Using Text-Level Elements XP
New Perspectives on HTML5 and CSS3, 7th Edition 40
Linking an HTML Document to a
XP
Style Sheet
• A style sheet is a set of rules specifying how page
elements are displayed; it is written in the
Cascading Style Sheet (CSS) language
• To link an HTML document to an external style
sheet file, add the following element:
<link href=”file” rel=”stylesheet” />
New Perspectives on HTML5 and CSS3, 7th Edition 41
Working with Character Sets
XP
and Special Characters
• Character set is a collection of characters and
symbols rendered by the browser
• Character encoding associates each character
from a character set that can be stored and
read by a computer program
• Character entity reference is also used to
insert a special symbol using the syntax
&char;
where char is the character’s entity reference
New Perspectives on HTML5 and CSS3, 7th Edition 42
Working with Inline Images XP
• To support embedded content, content
imported from another resource, HTML
provides embedded elements
• Inline images are images that are placed like
text-level elements in line with the
surrounding content
• To embed an inline image into the document,
use
<img src=“file” alt=“text” />
New Perspectives on HTML5 and CSS3, 7th Edition 43
Working with Lists XP
• List is a type of grouping element
• Ordered lists are used for items that follow
some defined sequential order, such as items
arranged alphabetically or numerically
• Unordered lists are used for lists in which the
items have no sequential order
• Description lists contain a list of terms and
matching descriptions
• Navigation lists are unordered lists of
hypertext links placed within the nav element
New Perspectives on HTML5 and CSS3, 7th Edition 44
Working with Hypertext Links XP
• Hypertext is created by enclosing content within
a set of opening and closing <a> tags like:
<a href=“url”>content</a>
where url is Uniform Resource Locator (URL)
• Inline images can also be turned into links by
enclosing the image within opening and closing
<a> tags
<a href=“ct_start.html”><img
src=“ct_logo2.png” /></a>
New Perspectives on HTML5 and CSS3, 7th Edition 45
Linking to the Internet and Other
XP
Resources
• The type of resource that a hypertext link
points to is indicated by the link’s URL
scheme: location
where scheme indicates the resource type
and location provides the resource
• Protocol is a set of rules defining how
information is passed between two devices
New Perspectives on HTML5 and CSS3, 7th Edition 46
Linking to the Internet and Other
XP
Resources (continued)
New Perspectives on HTML5 and CSS3, 7th Edition 47
Linking to a Web Resource XP
• Links to Web resources have a general
structure like:
http://server/path/filename#id
where server is the name of the web server
hosting the resource, path is the path to the
file on that server, filename is the name of
the file, and if necessary, id is the name of an
id within a file
New Perspectives on HTML5 and CSS3, 7th Edition 48
Linking to an E-Mail Address XP
• E-mail address can be turned into a hypertext
link using the URL:
mailto : address
New Perspectives on HTML5 and CSS3, 7th Edition 49
Linking to a Phone Number XP
• Many developers include links to phone
numbers for their company’s customer service
or help line
• The URL for a phone link is
tel : phone
New Perspectives on HTML5 and CSS3, 7th Edition 50
