HTML5

Internet & World Wide Web
How to Program, 5/e
Copyright Pearson, Inc. 2013. All Rights Reserved.
2008 Pearson Education, Inc. All rights reserved.
HTML5 (HyperText Markup Language 5)
markup language that specifies the structure and

content of documents that are displayed in web
browsers
We introduce some basics, then cover more

sophisticated HTML5 techniques such as:
tables, which are particularly useful for structuring

information from databases (i.e., software that
stores structured sets of data)
forms for collecting information from web-page
visitors
internal linking for easier page navigation
meta elements for specifying information about a
document
5
Well create HTML5 documents by typing

HTML5 markup text in a text editor (such as
Notepad, TextEdit, vi, emacs) and saving it
with the .html or .htm filename extension.
Computers called web servers store HTML5
documents.
Clients (such as web browsers running on
your local computer or smartphone) request
specific resources such as HTML5
documents from web servers.
6
Figure 2.1 is an HTML5 document named

main.html, which is stored in the
examples/ch02 folder.
This first example displays the message
Welcome to HTML5! in the browser.
7
Document Type Declaration

The document type declaration
(DOCTYPE) is required in HTML5 documents
so that browsers render the page in
standards mode.
Some browsers operate in quirks mode to
maintain backward compatibility with web
pages that are not up-to-date with the latest
standards.
9
Comments
Insert comments in your HTML5 markup to
improve readability and describe the content
of a document.
The browser ignores comments when your
document is rendered.
Comments start with .
10
html, head and body Elements

HTML5 markup contains text (and images, graphics,
animations, audios and videos) that represents the
content of a document and elements that specify a
documents structure and meaning.
The html element encloses the head section (represented by

the head element) and the body section (represented by the
body element).
The head section contains information about the HTML5
document, such as the character set (UTF-8, the most popular
character-encoding scheme for the web) that the page use
which helps the browser determine how to render the content
and the title.
The head section also can contain special document-formatting
instructions called CSS3 style sheets and client-side programs
called scripts for creating dynamic web pages.
The body section contains the pages content, which the
browser displays when the user visits the web page.
11
Start Tags and End Tags

HTML5 documents delimit most elements with a start tag
and end tag.
A start tag consists of the element name in angle
brackets
For example, <html>
An
end tag consists of the element name preceded by a

forward slash (/) in angle brackets
For example, </html>
There
are several so-called void elements that do not

have end tags.
Many start tags have attributes that provide additional
information about an element, which browsers use to
determine how to process the element.
Each attribute has a name and a value separated by an
equals sign (=).
12
Title Element
The title element is called a nested element,
because its enclosed in the head elements start and
end tags.
The head element is also a nested element, because
its enclosed in the html elements start and end tags.
The title element describes the web page.
Titles usually appear in the title bar at the top of the
browser window, in the browser tab on which the page is
displayed, and also as the text identifying a page when
users add the page to their list of Favorites or Bookmarks,
enabling them to return to their favorite sites.
Search engines use the title for indexing purposes and
when displaying results
14
Paragraph Element (<p>...</p>)

All text placed between the <p> and </p>
tags forms one paragraph.
16
HTML5 documents that are syntactically

correct are guaranteed to render properly
HTML5 documents that contain syntax
errors may not display properly
Validation services (e.g.,
validator.w3.org/#validate-by-upload)
ensure that an HTML5 document is
syntactically correct
17
HTML5 provides six heading elements (h1

through h6) for specifying the relative
importance of information
Heading element h1 is considered the most
significant heading and is rendered in the largest
font.
Each successive heading element (i.e., h2, h3,
etc.) is rendered in a progressively smaller font.
19
A hyperlink references or links to other

resources, such as HTML5 documents and
images.
Web browsers typically underline text
hyperlinks and color them blue by default.
24
The strong element indicates that the content has high

importance. Browsers typically render such text in a bold
font.
Links are created using the a (anchor) element.
Attribute href (hypertext reference) specifies a resources
location, such as
a web page or location within a web page
a file
an e-mail address
When a URL does not indicate a specific document on the

website, the web server returns a default web page. This
page is often called index.html, but most web servers can
be configured to use any file as the default web page for the
site.
If the web server cannot locate a requested document, it
returns an error indication to the web browser (known as a
404 error), and the browser displays a web page containing
an error message.
27
Hyperlinking to an E-Mail Address

Anchors can link to an e-mail address using a
mailto: URL
When a user clicks this type of anchored link, most
browsers launch the default e-mail program (e.g.,
Mozilla Thunderbird, Microsoft Outlook or Apple
Mail) to enable the user to write an e-mail message
to the linked address.
29
The most popular image formats used by

web developers today are PNG (Portable
Network Graphics) and JPEG (Joint
Photographic Experts Group).
Users can create images using specialized
software, such as Adobe Photoshop
Express (www.photoshop.com), G.I.M.P.
(www.gimp.org), Inkscape
(www.inkscape.org) and many more.
Images may also be acquired from various
websites, many of which offer royalty-free
images.
33
The img elements src attribute specifies

an images location
Every img element must have an alt
attribute, which contains text that is
displayed if the client cannot render the
image
The alt attribute makes web pages more

accessible to users with disabilities, especially
vision impairments
Width and height are optional attributes
If omitted, the browser uses the images actual
width and height
Images are measured in pixels
37
alt Attribute
A browser may not be able to render an image.
Every img element in an HTML5 document
must have an alt attribute.
If a browser cannot render an image, the
browser displays the alt attributes value.
The alt attribute is also important for
accessibilityspeech synthesizer software can
speak the alt attributes value so that a visually
impaired user can understand what the browser
is displaying. For this reason, the alt attribute
should describe the images contents.
40
Void Elements
Some HTML5 elements (called void elements)
contain only attributes and do not mark up text
(i.e., text is not placed between a start and an
end tag).
You can terminate void elements (such as the
img element) by using the forward slash
character (/) inside the closing right angle
bracket (>) of the start tag.
For example, lines 1516 of Fig. 2.6 could be
written as follows:
<img src = "jhtp.png" width = "92" height = "120"
alt = "Java How to Program book cover" />
41
Using Images as Hyperlinks

By using images as hyperlinks, you can
create graphical web pages that link to
other resources.
In Fig. 2.7, we create five different image
hyperlinks.
Clicking an image in this example takes the
user to a corresponding web pageone of
the other examples in this chapter.
42
HTML5 provides character entity

references (in the form &code;) for
representing special characters that
cannot be rendered otherwise
The code can be:
Word abbreviations
Numbers
Decimal
Hexadecimal
46
Figure 2.9 demonstrates how to use

special characters in an HTML5 document.
For an extensive list of character entities,
see
www.w3.org/TR/REC-html40/sgml/entities.html
49
A horizontal rule, indicated by the <hr> tag renders

a horizontal line with extra space above and below it in
most browsers.
The horizontal rule element should be considered a
legacy element and you should avoid using it.
CSS can be used to add horizontal rules and other
formatting to documents.
Special characters can also be represented as
numeric character referencesdecimal or
hexadecimal (hex) values representing special
characters.
For example, the & character is represented in decimal and
hexadecimal notation as & and &, respectively.
Hexadecimal numbers are discussed in Appendix E,

Number Systems, which is available online at
www.deitel.com/books/iw3htp5/.
52
Unordered list element ul

creates a list in which each item in the list
begins with a bullet symbol (typically a disc)
Each entry is an li (list item) element. Most web
browsers render these elements with a line
break and a bullet symbol at the beginning of
the line.
53
Nested Lists
Lists may be nested to represent
hierarchical relationships, as in a multi-level
outline.
Figure 2.11 demonstrates nested lists and
ordered lists.
The ordered-list element ol creates a list in
which each item begins with a number.
56
Tables are frequently used to organize data into rows

and columns.
The table element defines an HTML5 table
The summary attribute summarizes the tables
contents and is used by speech devices to make the
table more accessible to users with visual
impairments.
The caption element specifies a tables title.
Its good practice to include a general description of a
tables information in the table elements summary
attributeone of the many HTML5 features that make
web pages more accessible to users with disabilities.
Speech devices use this attribute to make the table more
accessible to users with visual impairments.
61
A table can be split into three distinct

sections:
Head (thead element)
Table titles
Column headers
Body (tbody element)

Primary table data
Table Foot (tfoot element)

Calculation results
Footnotes
Above body section in the code, but displays at the
bottom in the page
66
tr Element
Defines individual table rows
Element th
Defines a header cell
Td Element
Contains table data elements
67
Using rowspan and colspan with Tables

Figure 2.13 introduces two new attributes that
allow you to build more complex tables.
You can merge data cells with the rowspan and
colspan attributes
The values of these attributes specify the number of

rows or columns occupied by the cell.
Can be placed inside any data cell or table header cell.
The
br element is render as a line break in most

browsersany markup or text following a br
element is rendered on the next line.
Like the img element, br is an example of a void
element.
Like the hr element, br is considered a legacy
formatting element that you should avoid usingin
general, formatting should be specified using CSS.
68
HTML5 provides forms for collecting

information from users.
Figure 2.14 is a simple form that sends
data to the web server for processing.
73
method Attribute of the form Element

A form is defined by a form element
Attribute method specifies how the forms data is
sent to the web server.
Using method = "post" appends form data to
the browser request, which contains the protocol
(HTTP) and the requested resources URL.
The other possible value, method = "get",
appends the form data directly to the end of the
URL of the script, where its visible in the
browsers Address field.
The action attribute of the form element
specifies the script to which the form data will
be sent
77
action Attribute of the form Element

The action attribute of the form element
specifies the script to which the form data will be
sent.
Since we havent introduced server-side
programming yet, we set this attribute to
http://www.deitel.com for now.
input elements that specify data to provide to
the script that processes the form (also called the
form handler).
An inputs type is determined by its type
attribute.
78
Hidden Inputs
Forms can contain visual and nonvisual
components.
Visual components include clickable buttons and
other graphical user interface components with
which users interact.
Nonvisual components, called hidden inputs,
store any data that you specify, such as e-mail
addresses and HTML5 document file names that
act as links.
79
text input Element

The text input inserts a text field into the form,
which allows the user to input data.
The label element provides users with
information about the input elements purpose
The size attribute specifies the number of
characters visible in the text field.
Optional attribute maxlength limits the number
of characters input into a text field.
80
submit and reset input Elements
The submit input element is a button.
When the submit button is pressed, the forms data is

sent to the location specified in the forms action
attribute.
The value attribute sets the text displayed on

the button.
The reset input element allows a user to reset
all form elements to their default values.
81
Additional Form Elements

Figure 2.15 contains a form that solicits user
feedback about a website.
The textarea element inserts a multiline text
area into the form.
The number of rows is specified with the rows
attribute, and the number of columns (i.e.,
characters per line) with the cols attribute.
Default text can be specified in other input
types, such as text fields, by using the value
attribute.
82
The password input inserts a password box

into a form.
Allows users to enter sensitive information, such
as credit card numbers and passwords, by
masking the information input with another
character, usually asterisks.
The actual value input is sent to the web server,
not the asterisks that mask the input.
89
The checkbox input element enables users to

select and option.
When the checkbox is selected, a check mark appears

in the checkbox . Otherwise, the checkbox is empty
checkboxes can be used individually and in groups.
checkboxes that are part of the same group have the
same name
radio buttons are similar to checkboxes,

except that only one radio button in a group can
be selected at any time.
All radio buttons in a group have the same name
attribute but different value attributes.
The select input provides a drop-down list of

items.
The name attribute identifies the drop-down list.

The option element adds items to the drop-down list.
90
The a tag can be used to link to another

section of the same document by
specifying the elements id as the links
href.
To link internally to an element with its id
attribute set, use the syntax #id.
93
One way that search engines catalog pages

is by reading the meta elements contents.
The name attribute identifies the type of meta
element
The content attribute
Of a keywords meta element: provides search
engines with a list of words that describe a page,
which are compared with words in search requests
Of a description meta element: provides a threeto four-line description of a site in sentence form,
used by search engines to catalog your site. This
text is sometimes displayed as part of the search
result
99

HTML5

Uploaded by

Copyright:

Available Formats

HTML5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5

Uploaded by

Copyright:

Available Formats

Internet & World Wide Web

How to Program, 5/e

Copyright Pearson, Inc. 2013. All Rights Reserved.

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

HTML5 (HyperText Markup Language 5)

markup language that specifies the structure and

We introduce some basics, then cover more

tables, which are particularly useful for structuring

Well create HTML5 documents by typing

Figure 2.1 is an HTML5 document named

2008 Pearson Education, Inc. All rights reserved.

Document Type Declaration

html, head and body Elements

The html element encloses the head section (represented by

Start Tags and End Tags

end tag consists of the element name preceded by a

are several so-called void elements that do not

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

Paragraph Element (<p>...</p>)

HTML5 documents that are syntactically

2008 Pearson Education, Inc. All rights reserved.

HTML5 provides six heading elements (h1

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

A hyperlink references or links to other

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

The strong element indicates that the content has high

When a URL does not indicate a specific document on the

2008 Pearson Education, Inc. All rights reserved.

Hyperlinking to an E-Mail Address

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

The most popular image formats used by

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

The img elements src attribute specifies

The alt attribute makes web pages more

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

Using Images as Hyperlinks

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

HTML5 provides character entity

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

Figure 2.9 demonstrates how to use

2008 Pearson Education, Inc. All rights reserved.

2008 Pearson Education, Inc. All rights reserved.

A horizontal rule, indicated by the <hr> tag renders

Hexadecimal numbers are discussed in Appendix E,

Unordered list element ul