Tutorial 1

Getting Started with HTML5

HTML and CSS

6TH EDITION

Objectives

XP

Explore the history of the Internet, the Web,

and HTML
Compare the different versions of HTML
Study the syntax of HTML tags and attributes
Define a Web page head, body, and title
Work with the HTML5 structural elements

New Perspectives on HTML and CSS, 6th Edition

Objectives

XP

Mark page headings, paragraphs, block quotes, and

addresses
Create unordered and ordered lists
Apply an external style sheet to a Web page
Run a JavaScript program
Mark text-level elements including strong and
emphasized text
Insert inline images and line breaks
Insert special characters from extended character
sets
New Perspectives on HTML and CSS, 6th Edition

The Structure of an HTML5

Document

New Perspectives on HTML and CSS, 6th Edition

XP

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

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

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

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

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 users
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

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

10

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

11

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

12

The History of HTML

XP

Older features of HTML are often deprecated,

or phased out, by the W3C That does not
mean you cant continue to use themyou
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
SGMLs complexity and overhead

New Perspectives on HTML and CSS, 6th Edition

13

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 and CSS, 6th Edition

14

The History of HTML

XP

XHTML 2.0 began development, but work was

halted in 2009
HTML5 was developed as the next HTML
specification, and the de facto standard for the
next generation of HTML

New Perspectives on HTML and CSS, 6th Edition

15

The History of HTML

New Perspectives on HTML and CSS, 6th Edition

XP

16

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

17

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

18

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

19

Marking Elements with Tags

XP

A two-sided tags 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

20

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

21

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

22

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

23

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

24

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

25

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

26

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

27

Defining the Page Title

New Perspectives on HTML and CSS, 6th Edition

XP

28

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

29

Adding Comments

New Perspectives on HTML and CSS, 6th Edition

XP

30

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

31

Displaying an HTML File

New Perspectives on HTML and CSS, 6th Edition

XP

32

Defining the Structure

of the Page Body

New Perspectives on HTML and CSS, 6th Edition

XP

33

Defining the Structure

of the Page Body

New Perspectives on HTML and CSS, 6th Edition

XP

34

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

35

Marking a Section
with the div Element

New Perspectives on HTML and CSS, 6th Edition

XP

36

Page Content Elements

New Perspectives on HTML and CSS, 6th Edition

XP

37

Working with Grouping Elements XP

New Perspectives on HTML and CSS, 6th Edition

38

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

39

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

40

Adding Headings

New Perspectives on HTML and CSS, 6th Edition

XP

41

Marking Paragraph Elements

New Perspectives on HTML and CSS, 6th Edition

XP

42

Marking a Block Quote

XP

The syntax for making an extended quote is

<blockquote>content</blockquote>

New Perspectives on HTML and CSS, 6th Edition

43

Marking an Address

XP

<address>content</address>

New Perspectives on HTML and CSS, 6th Edition

44

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

45

Description Lists

XP

The description list contains a list of terms,

each followed by the terms 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

46

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

47

Linking to a JavaScript File

New Perspectives on HTML and CSS, 6th Edition

XP

48

Marking Text-Level Elements

New Perspectives on HTML and CSS, 6th Edition

XP

49

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

50

Marking a Line Break

New Perspectives on HTML and CSS, 6th Edition

XP

51

Inserting an Inline Image

New Perspectives on HTML and CSS, 6th Edition

XP

52

Figures and Figure Captions

XP

In books and magazines, figures and figure captions

are often placed within boxes that stand aside from
the main content of an article
HTML5 introduced this type of object to Web page
markup with the figure and figcaption elements
<figure>
content
<figcaption>caption</figcaption>
</figure>

New Perspectives on HTML and CSS, 6th Edition

53

Working with Character Sets

and Special Characters

XP

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 and CSS, 6th Edition

54

Working with Character Sets

and Special Characters

XP

Character encoding associates each symbol

from a character set with a numeric value
called the numeric character reference
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 and CSS, 6th Edition

55

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

56

Working with Character Sets

and Special Characters

New Perspectives on HTML and CSS, 6th Edition

XP

57

Specifying a Character Set

New Perspectives on HTML and CSS, 6th Edition

XP

58