1
IS333: MULTI-TIER
APPLICATION DEVELOPMENT
Information
Systems
Department
Lecture 2: HTML5
Objectives
2
2
Understand important components of HTML5
documents.
Use HTML5 to create web pages.
Add images to web pages.
Create and use hyperlinks to help user
navigate web pages.
Mark up lists of information.
Create tables with rows and columns of data.
Create and use forms to get user input.
10/1/16
Information Systems Department
Introduction
3
3
HTML: Hyper Text Markup Language
HTML5
is a markup language that
specifies the structure and content of
documents that are displayed in web
browsers.
HTML5 markup contains text, images,
graphics, animations, audios and videos
that represents the content of a
document and also contains elements
that specify a documents structure and
10/1/16
Information Systems Department
meaning.
Creating HTML5 Document
4
4
HTML5 document is created by typing
HTML5 markup text in a text editor
(Notepad, TextEdit, vi, emacs) and
saving it with the .html or .htm
filename extension.
Normally, HTML5 documents are stored
in a web server. Clients (such as web
browsers running on your local computer
or smartphone) request specific
resources (HTML5 documents from web
10/1/16
Information Systems Department
servers).
First HTML5 Document
5
5
main.html
10/1/16
Information Systems Department
Document Type Declaration
6
6
The document type declaration
(DOCTYPE) in line 1 is required in
HTML5 documents so that browsers
render the page in standard mode,
according to the HTML and CSS
specifications.
You have to include the DOCTYPE in each
HTML5 document you create.
10/1/16
Information Systems Department
Blank Lines
7
7
Blank line (line 2) is included to make
the document easier to read.
The browser ignores the blank line.
10/1/16
Information Systems Department
Comments
8
8
Line 3 is HTML5 comments.
HTML5 comments start with <!-- and
end with -->.
It is used to improve readability and
describe the content of a document.
The browser ignores comments (they will
not be displayed).
10/1/16
Information Systems Department
html Element
9
9
html element starts in line 4 and ends in
line 14.
The html element encloses the head
section (represented by the head
element) and the body section
(represented by the body element).
10/1/16
Information Systems Department
head Element
10
10
head element starts in line 5 and ends in line
8.
The head section contains information about
the HTML5 document:
10/1/16
The character set (UTF-8, the most popular
character-encoding scheme for the web) that is
used in line 6 - which helps the browser
determine how to render the content
Title (line 7)
CSS3
Javascript
Information Systems Department
body Element
11
11
The body element (lines 10-12) contains
the pages content, which the browser
displays when the user visits the web
page.
10/1/16
Information Systems Department
Start Tags and End Tags
12
12
HTML5 documents delimit most
elements with a start tag and an end
tag.
A start tag consists of the element
name in angle brackets. E.g: <html>
in line 4.
An end tag consists of the element
name preceded by a forward slash (/)
in angle brackets. E.g: </html> in line
14.
10/1/16
Information Systems Department
title Element
13
13
Line 7 specifies a title element.
This is called a nested element, because its
enclosed in the head elements start and end tags.
Is head element also a nested element?
The title element describes the web page:
Title usually appear in the title bar at the top of the
browser window.
Title is used as the text identifying a page when
users add the page to their list of Favorites or
Bookmarks.
Search engines use the title for indexing purposes
and when displaying results.
10/1/16
Information Systems Department
Paragraph Element
14
14
The paragraph element denoted with
<p> and </p> in line 11 help define the
structure of a document.
All the text placed between the <p> and
</p> tags forms one paragraph.
When a browser renders a paragraph, it
places extra space above and below
the paragraph text.
10/1/16
Information Systems Department
Headings
15
15
Some text in an HTML5 document
may be more important than
other text.
HTML5 provides six heading
elements (h1 through h6) for
specifying the relative
importance of information.
Heading element h1 (line 11) is
considered the most significant
one and is typically rendered in a
larger font than the other five
(lines 12-16).
Each successive heading element
(h2, h3, until h6) is typically
rendered in a progressively
smaller font.
10/1/16
heading.ht
ml
Information Systems Department
Headings (cont.)
16
16
10/1/16
Information Systems Department
Linking
17
17
One of the most important HTML5 features is the
hyperlink, which references (or links to) other resources:
a web page
a file
an e-mail address
Links are created using the a (anchor) element with href
(hypertext reference) attribute which specifies the
resources location.
Any displayed element can act as a hyperlink.
Web browsers typically underline text hyperlinks and
color their text blue by default so that users can
distinguish hyperlinks from plain text.
10/1/16
Information Systems Department
Linking to other web pages
18
18
Line 12
introduces the
strong
element,
which indicate
that its content
has high
importance.
Browsers
typically render
such text in a
bold font.
10/1/16
links.html
Information Systems Department
Linking to other web pages
19
19
The browser changes the color of any
text link once you have clicked the link
(purple by default).
10/1/16
Information Systems Department
Linking to a File
20
20
navigation.
html
10/1/16
Information Systems Department
Linking to an E-Mail Address
21
21
Anchors can link to e-mail address using
a mailto: URL.
When the user clicks this type of
anchored link, most browsers launch the
users 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 e-mail
address.
10/1/16
Information Systems Department
Linking to an E-Mail Address
22
22
contact.ht
ml
10/1/16
Information Systems Department
Linking to an E-Mail Address
23
23
10/1/16
Information Systems Department
24
24
Hyperlinking to an E-Mail
Address
10/1/16
Information Systems Department
Images
25
25
picture.ht
ml
10/1/16
Information Systems Department
Images
26
26
The img element is used to include an
image in the document (lines 13-16).
The image files location is specified with
the src (source) attribute.
This image is located in the same
directory as the HTML5 document, so
only the images file name is required.
This is known as relative path the
image is stored relative to the location of
the document.
10/1/16
Information Systems Department
Images
27
27
Optional attributes width and height
specify the images dimensions.
If these attributes are omitted, the
browser uses the images actual width
and height.
Images are measured in pixels (picture
elements), which represent dots of color
on the screen.
10/1/16
Information Systems Department
Images: alt Attribute
28
28
A browser may not be able to render an
image for several reasons. It may not
support images as if the case with textonly browsers or the client may have
disabled image viewing to reduce
download time.
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
10/1/16
Information Systems Department
value.
Images: The Output
29
29
10/1/16
Information Systems Department
Using Images as Hyperlinks
30
30
By using images as hyperlinks, you can
create graphical web pages that link to
other resources.
nav.html
10/1/16
Information Systems Department
Using Images as Hyperlinks
31
31
Lines 13-16 create an image hyperlink by
nesting an img element in an anchor element.
The img elements src attribute value
specifies that this image (main.png) resides in
a directory named button.
The button directory and the HTML5
document are in the same directory.
Clicking an image hyperlink takes a user to the
web page specified by the surrounding anchor
elements href attribute.
10/1/16
Information Systems Department
Using Images as Hyperlinks
32
32
10/1/16
Information Systems Department
Special Characters
33
33
When marking up text, certain
characters or symbol may be difficult to
embed directly into an HTML5 document.
Some keyboards do not provide these
symbols (such as ), or their presence
in the markup may cause syntax errors
(as with <).
10/1/16
Information Systems Department
Special Characters
34
34
HTML5 Character Entities
Symbol
Description
Character entity
reference
&
ampersand
&
apostrophe
'
>
greater-than
>
<
less-than
<
quote
"
10/1/16
Information Systems Department
Special Characters
35
35
Other Common Character Entities
Symbol
Description
Non-breaking
space
Character entity
reference
copyright
©
em dash
—
en dash
–
fraction 1/4
¼
fraction 1/2
½
fraction 3/4
¾
horizontal ellipsis
…
10/1/16
Information Systems Department
Special Characters
36
36
Other Common Character Entities
Symbol
Description
Character entity
reference
registered
trademark
®
trademark
™
section
§
10/1/16
Information Systems Department
Lists
37
37
Lists are used in a web page to organize
content that similar in nature.
Two types of list:
10/1/16
Unordered list (ul)
Ordered list (ol)
Information Systems Department
Unordered List (ul)
38
38
A simple bullet-style list that does not
order its items by letter or number.
Creates a list in which each item begins
with a bullet symbol (typically a disc).
Each entry in an unordered list is an li
(list item) element.
Most web browsers render each li
element on a new line with a bullet
symbol indented from the beginning of
the line.
10/1/16
Information Systems Department
Ordered List (ol)
39
39
Create a list in which each item begins
with a number.
Items in an ordered list are enumerated
1., 2., 3., and so on.
10/1/16
Information Systems Department
Nested List
40
40
Lists may be nested to represent
hierarchical relationships, as in a
multilevel outline.
list.html
10/1/16
Information Systems Department
Nested List
41
41
list.html
10/1/16
Information Systems Department
Nested List
42
42
10/1/16
Information Systems Department
Tables
43
43
table1.ht
ml
10/1/16
Information Systems Department
Tables
44
44
table1.ht
ml
10/1/16
Information Systems Department
Tables
45
45
Tables are frequently used to organize data into
rows and columns.
Tables are defined with the table element
(lines 12-56). Line 12 specifies the table
elements start tag. The border attribute with
the value 1 specifies that the browser should
place borders around the table and the tables
cells.
The caption element (lines 15-16) specifies a
tables title. Text in this element is typically
rendered above the table.
10/1/16
Information Systems Department
Tables
46
46
A table has three distinct sections head,
body, and foot.
The head section (or header cell) is defined with
a thead element (lines 20-25), which contains
header information such as column names.
Each tr element (lines 21-24) defines an
individual table row.
The columns in the thead section are defined
with th element. Most browsers center text
formatted by th ( table header column)
elements and display them in bold.
10/1/16
Information Systems Department
Tables
47
47
The body section, or table body, contains
the tables primary data.
The table body (lines 38-55) is defined in
a tbody element.
In the table body, each tr element
specifies one row.
Data cells contain individual pieces of
data and are defined with td (table data)
elements in each row.
10/1/16
Information Systems Department
Tables
48
48
The tfoot section (lines 29-34) is defined
with a tfoot (table foot) element.
The text placed in the footer commonly
includes calculation results and
footnotes.
10/1/16
Information Systems Department
Tables
49
49
10/1/16
Information Systems Department
Forms
50
50
HTML5 provides a mechanism, called a
form, for collecting data from user.
The form is defined in lines 19-43 by a
form element.
method attribute (line 19) specifies how
the forms data is sent to the web server.
The action attribute (line 19) specifies
the URL of a script on the web server
that will be invoked to process the forms
data.
10/1/16
Information Systems Department
Forms
51
51
Lines 22-23 define input elements that
specify data to provide to the script that
process the form (also called the (form
handler).
An inputs type is determined by its type
attribute (text, submit, reset, hidden,
password, radio, checkbox).
The form.html document uses a text
input, a submit input, a reset input, and
three hidden input.
10/1/16
Information Systems Department
Forms
52
52
form.html
10/1/16
Information Systems Department
Forms
53
53
form.html
10/1/16
Information Systems Department
Forms: Hidden Input
54
54
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 (lines 2227), which allows you to send form data that is not input
by a user.
The other two input attributes are name, which identifies
the input element, and value, which provides the value
that will be sent (or posted) to the web server.
The server uses the name attribute to get the
corresponding value from the form.
10/1/16
Information Systems Department
Forms: Text Input
55
55
The text input in lines 31-32 inserts a text field in
the form.
Users can type data in text fields.
The label element (lines 30-33) provides users with
information about the input elements purpose.
The input elements size attribute specifies the
number of characters visible in the text field.
Optional attribute maxlength limits the number of
characters input into the text field in this example,
the user is not permitted to type more than 30
characters.
10/1/16
Information Systems Department
Forms: Submit Input
56
56
Two input elements in lines 40-41 create
two buttons.
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.
10/1/16
Information Systems Department
Forms: Reset Input
57
57
The reset input element allows a user to
reset all form elements to their default
values.
The value attribute of the reset input
element sets the text displayed on the
button (the default value is Reset if you
omit the value attribute).
10/1/16
Information Systems Department
Forms
58
58
10/1/16
Information Systems Department
Additional Form Elements
59
59
form2.htm
l
10/1/16
Information Systems Department
Additional Form Elements
60
60
form2.htm
l
10/1/16
Information Systems Department
Additional Form Elements
61
61
form2.htm
l
10/1/16
Information Systems Department
Additional Form Elements
62
62
form2.htm
l
10/1/16
Information Systems Department
Textarea Element
63
63
The textarea element (lines 39-40)
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., character per line) with the
cols attribute.
To display default text in the textarea,
place the text between the <textarea>
and </textarea> tags.
10/1/16
Information Systems Department
Password Input Element
64
64
The password input in line 48 inserts a
password box with the specified size
(maximum number of displayed
characters).
A password box allows users to enter
sensitive information , such as credit
card number and passwords, by masking
the information input with asterisks (*).
The actual value input is sent to the web
server, not the masking characters.
10/1/16
Information Systems Department
Checkbox Input Element
65
65
Lines 55-69 introduce the checkbox input
element.
Checkboxes enable users to select a option.
When a user selects a checkbox, a check mark
appears in the checkbox. Otherwise, the checkbox
remains empty.
Each checkbox input creates a new checkbox.
Checkboxes can be used individually or in groups.
Checkboxes that belong to a group are assigned
the same name (in this example, thingliked).
10/1/16
Information Systems Department
Radio Input Element
66
66
The radio button (lines 79-93) specified with
type radio.
Radio buttons are similar to checkboxes,
except that only one radio button in a group
of radio buttons may be selected at any time.
The radio buttons in a group all have the
same name attributes and are distinguished
by their different value attributes.
The attribute checked (line 81) indicates
which radio button, if any, is selected initially.
10/1/16
Information Systems Department
Select Element
67
67
The select element (lines 101-114) provides a
drop-down list from which the user can select an
item.
The name attribute identifies the drop-down list.
The option elements (lines 102-113) add items
to the drop-down list.
The option elements selected attribute specifies
which item initially is displayed as the selected
item in the select element.
If no option element is marked as selected, the
browser selects the first option by default.
10/1/16
Information Systems Department
68
68
10/1/16
Information Systems Department
Reference
69
69
Internet and World Wide Web How To
Program , Deitel, Deitel & Deitel, 5th
Edition (Chapter 2)
10/1/16
Information Systems Department
