Scribd
Upload
19 views69 pages

Lec2 - IS333 - HTML5

Multi-tier Architecture

Uploaded by

RozNuseer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views69 pages

Lec2 - IS333 - HTML5

Multi-tier Architecture

Uploaded by

RozNuseer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 69

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

&amp;

apostrophe

&apos;

>

greater-than

&gt;

<

less-than

&lt;

quote

&quot;

10/1/16

Information Systems Department

Special Characters
35
35

Other Common Character Entities

Symbol

Description

Non-breaking
space

Character entity
reference
&nbsp;

copyright

&copy;

em dash

&mdash;

en dash

&ndash;

fraction 1/4

&frac14;

fraction 1/2

&frac12;

fraction 3/4

&frac34;

horizontal ellipsis

&hellip;

10/1/16

Information Systems Department

Special Characters
36
36

Other Common Character Entities

Symbol

Description

Character entity
reference

registered
trademark

&reg;

trademark

&trade;

section

&sect;

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

You might also like