Ilovepdf Merged PDF

Internet & World Wide Web
How to Program, 5/e
1
 The Internet is a global network of computers spanning
the globe. It is also called the World Wide Web.
 An Internet Browser is a software program that enables

you to view Web pages on your computer. Browsers
connect computers to the Internet, and allow people to
“surf the Web.”
 Google Chrome is one of the browsers most commonly

used. There are other browsers available as well,
Internet Explorer, Mozilla Firefox and others.
2
 In the late 1960s, ARPA (the Advanced Research
Projects Agency) rolled out blueprints for networking the
main computer systems of about a dozen ARPA-funded
universities and research institutions.
 They were to be connected with communications lines
operating at a then-stunning 56 Kbps (i.e., 56,000 bits
per second)—this at a time when most people (of the
few who could) were connecting over telephone lines to
computers at a rate of 110 bits per second.
3
 ARPA accomplished this with the development of IP—the
Internet Protocol, truly creating a network of networks, the
current architecture of the Internet.
 The combined set of protocols is now commonly called TCP/IP.
 Each computer on the Internet has a unique IP address.
 The current IP standard, Internet Protocol version 4 (IPv4), has
been in use since 1984 and will soon run out of possible
addresses.
 IPv6 is starting to be deployed. It features enhanced security and
a new addressing scheme, hugely expanding the number of IP
addresses available so that we will not run out of IP addresses in
the foreseeable future.
4
TCP/IP
 The protocol (i.e., set of rules) for communicating over the
ARPANET became known as TCP—the Transmission Control
Protocol.
 TCP ensured that messages were properly routed from sender to
receiver and that they arrived intact.
5
Explosive Growth
 Initially, Internet use was limited to universities and
research institutions; then the military began using
it intensively.
 Eventually, the government decided to allow
access to the Internet for commercial purposes.
 Bandwidth (i.e., the information-carrying capacity)
on the Internet’s is increasing rapidly as costs
dramatically decline.
6
World Wide Web, HTML, HTTP
 The World Wide Web allows computer users to execute
web-based applications and to locate and view
multimedia-based documents.
 Berners-Lee called his invention the HyperText Markup
Language (HTML).
 He also wrote communication protocols to form the
backbone of his new information system, which he called
the World Wide Web.
7
 In particular, he wrote the Hypertext Transfer Protocol
(HTTP)—a communications protocol used to send
information over the web.
 The URL (Uniform Resource Locator) specifies the
address (i.e., location) of the web page displayed in the
browser window.
 Each web page on the Internet is associated with a
unique URL.
 URLs usually begin with http://.
8
HTTPS
 URLs of websites that handle private information, such as
credit card numbers, often begin with https://, the
abbreviation for Hypertext Transfer Protocol Secure
(HTTPS).
 HTTPS is the standard for transferring encrypted data on
the web.
 It combines HTTP with the Secure Sockets Layer (SSL)
and the more recent Transport Layer Security (TLS)
cryptographic schemes for securing communications and
identification information over the web.
9
 Let’s examine the components of the URL
 http://www.deitel.com/books/downloads.html
 The text http:// indicates that the HyperText Transfer

Protocol (HTTP) should be used to obtain the resource.
 Next in the URL is the server’s fully qualified hostname
(for example, www.deitel.com)—the name of the web-
server computer on which the resource resides.
 This computer is referred to as the host, because it
houses and maintains resources.
10
 The hostname www.deitel.com is translated into an IP
(Internet Protocol) address—a numerical value that
uniquely identifies the server on the Internet.
 An Internet Domain Name System (DNS) server
maintains a database of hostnames and their
corresponding IP addresses and performs the translations
automatically.
11
 Endings of web pages tells us a bit about the page.
Some common endings to web addresses are:
 com (commercial)
 edu (educational institution)
 gov (government)
 net (network)
 org (organization)
 You might also see addresses that add a country code

as the last part of the address such as:
 ca (Canada)
 uk (United Kingdom)
 fr (France)
 us (United States of America)
 au (Australia)
12
 Client-side programming technologies are used to
build web pages and applications that are run on the
client (i.e., in the browser on the user’s device).
 Server-side programming —the applications that
respond to requests from client-side web browsers,
such as searching the Internet, checking your bank-
account balance, ordering a book from Amazon,
bidding on an eBay auction and ordering concert
tickets.
13
 Client-side scripting with JavaScript can be used to validate
user input, to interact with the browser, to enhance web
pages, and to add client/server communication between a
browser and a web server.
 Client-side scripting does have limitations, such as browser
dependency; the browser or scripting host must support the
scripting language and capabilities.
 Programmers have more flexibility with server-side scripts,
which often generate custom responses for clients.
 Server-side scripting languages have a wider range of
programmatic capabilities than their client-side equivalents.
14
15
16
 In October 1994, Tim Berners-Lee founded an organization—the World
Wide Web Consortium (W3C)—devoted to developing nonproprietary,
interoperable technologies for the World Wide Web.
 One of the W3C’s primary goals is to make the web universally
accessible— regardless of disability, language or culture.
 The W3C is also a standards organization.
 Web technologies standardized by the W3C are called
Recommendations.
 Current and forthcoming W3C Recommendations include the
HyperText Markup Language 5 (HTML5), Cascading Style Sheets 3
(CSS3) and the Extensible Markup Language (XML).
17
Web 1.0 versus Web 2.0
 Web 1.0 (the state of the web through the 1990s and early
2000s) was focused on a relatively small number of companies
and advertisers producing content for users to access (some
people called it the “brochure web”).
 Web 2.0 involves the users—not only do they often create
content, but they help organize it, share it, remix it, critique it,
update it, etc.
 One way to look at Web 1.0 is as a lecture, a small number of
professors informing a large audience of students. In
comparison, Web 2.0 is a conversation, with everyone having the
opportunity to speak and share views.
18
HTML5
 HTML (HyperText Markup Language) is a special type of
computer language called a markup language designed
to specify the content and structure of web pages (also
called documents) in a portable manner.
 A “stricter” version of HTML called XHTML (Extensible
HyperText Markup Language), which is based on XML
(eXtensible Markup Language), is still used frequently
today.
19
Cascading Style Sheets (CSS)
 Although HTML5 provides some capabilities for
controlling a document’s presentation, it’s better not to
mix presentation with content.
 Cascading Style Sheets (CSS) are used to specify the
presentation, or styling, of elements on a web page (e.g.,
fonts, spacing, sizes, colors, positioning).
 CSS was designed to style portable web pages
independently of their content and structure.
20
JavaScript
 JavaScript helps you build dynamic web pages (i.e.,
pages that can be modified “on the fly” in response to
events, such as user input, time changes and more) and
computer applications.
 It enables you to do the client-side programming of web
applications.
21
 Programmers write instructions in various programming
languages, some directly understandable by computers and
others requiring intermediate translation steps.
 Any computer can directly understand only its own machine
language, defined by its hardware design.
 Programming in machine language—the numbers that
computers could directly understand—was simply too slow
and tedious for most programmers.
 These abbreviations formed the basis of assembly
languages.
 Translator programs called assemblers were developed to
convert assembly-language programs to machine language.
22
 To speed the programming process even further, high-level
languages were developed in which single statements could
be written to accomplish substantial tasks.
 High-level languages allow you to write instructions that look
almost like everyday English and contain commonly used
mathematical expressions.
 Translator programs called compilers convert high-level
language programs into machine language.
 Interpreter programs were developed to execute high-level
language programs directly, although more slowly than
compiled programs.
23
24
 HTML is the lingua franca for publishing hypertext on the
World Wide Web
 Define tags <html><body> <head>….etc
 Allow to embed other scripting languages to manipulate
design layout, text and graphics
 Platform independent
 For more info: http://www.w3.org/MarkUp/
25
 Compact object-based scripting language
 Code be embedded into HTML file
 HTML tag
<script language=“javascript”>CODE</script>
 Also be in a separate file FILENAME.js

 HTML tag
<SCRIPT LANGUAGE="JavaScript"
SRC=“FILENAME.js"></SCRIPT>
26
 PHP- HTML-embedded scripting language
 Syntax looks like C, JAVA, and PERL
 File extension: FILENAME.php
 Main Objective:
 Generate Dynamic content
 User Interface
 Server side loadable module

 Server side execution
 More info: http://www.php.net
27
 Database driven backend infrastructure
 Content is independent from design
 Common Gateway Interface (CGI) is a web technology
and protocol that defines a way for a web server (HTTP
server) to interact with external applications, e.g. PHP
 CGI and PHP are widely used.
28
 Popular database for web systems:
 MYSQL, MSQL, Cold Fusion, MS-ACCESS, ORACLE
 MySQL provide the flexibility of data storage.
 SCS database driven sites USE MYSQL
 Example of SCS database driven sites.
29
30
How to Program, 5/e
1
 HTML5 (HyperText Markup Language 5)
§ markup language that specifies the structure and content of
documents that are displayed in web browsers
 Create HTML5 documents using text editor such as

(Notepad, TextEdit, vim, emacs).
 saving it with the .html or .htm filename extension.
2
3
 The <!DOCTYPE> declaration must be the very
first thing in your HTML document, before the
<html> tag.
 The <!DOCTYPE> declaration is not an HTML
tag; it is an instruction to the web browser about
what version of HTML the page is written in.
 In HTML 4.01, the <!DOCTYPE> declaration
refers to a DTD.
 HTML5 does not require a reference to a DTD.
4
 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 .
5
 The <html> element is the root element of an
HTML page.
 The <head> element contains meta information
about the document.
 The <title> element specifies a title for the
document.
 The <body> element contains the visible page
content.
 The <h1> element defines a large heading.
 The <p> element defines a paragraph.
6
 HTML tags are element names surrounded by
angle brackets:
<tagname>content goes here...</tagname>
 HTML tags normally come in pairs like <p> and
</p>
 The first tag in a pair is the start tag, the second
tag is the end tag.
 The end tag is written like the start tag, but with
a forward slash (/) inserted before the tag name
7
 The title element is called a nested element,
because it’s enclosed in the head element’s start
and end tags.
 The title element describes the web page.
 Search engines use the title for indexing purposes
and when displaying results
8
 HTML5 provides six heading elements (h1 to 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 next heading element (i.e., h2, h3, etc.) is
shown in a progressively smaller font.
9
10
 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.
 Links are created using the a (anchor) element.
 Attribute href (hypertext reference) specifies a
resource’s location, such as:
§ a web page or location within a web page
§ a file
§ an e-mail address
11
12
§ Anchors tag <a> can link to an e-mail address using
<a mailto: URL >
13
 The most popular image formats used by web
developers today are PNG (Portable Network
Graphics) and JPEG (Joint Photographic Experts
Group).
 The img element’s src attribute specifies an
image’s location.
 Every img element must have an alt attribute,
which contains text that is displayed if the client
cannot render the image.
14
15
 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 15–16 of Fig. 2.6 could be
written as follows:
<img src = "jhtp.png" width = "92" height = "120"
alt = "Java How to Program book cover" />
16
 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 page—one of the other
examples in this chapter.
17
18
19
 Some of certain characters or symbols may be
difficult to embed directly into an HTML5 document.
 Some keyboards do not provide these symbols
(such as ©).
 Also, some the markup may cause syntax errors (as
with <).
 HTML5 provides character entity references (in
the form &code;) for representing special
characters
 A horizontal rule, indicated by the <hr> tag renders
a horizontal line with extra space above and below it
in most browsers.
20
21
22
23
 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.
24
25
26
27
28
29
30
q Tables are used to organize data into rows and
columns.
q The table element defines an HTML5 table.
q The border attribute with the value "1" specifies

that the browser should place borders around the
table and the table’s cells.
q The caption element specifies a table’s title.
31
 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
32
 tr Element
§ Defines individual table rows
§ Element th
 Defines a header cell
 td Element
§ Contains table data elements
33
34
35
36
37
Using rowspan and colspan with Tables
 You can merge data cells with the rowspan and
colspan attributes
 The br element is render as a line break in most
browsers.
 Like the hr element, br is considered an old
formatting element that you should avoid using—
in general, formatting should be specified using
CSS.
38
39
40
41
42
 HTML5 provides forms for collecting information
from users.
 Figure 2.14 is a simple form that sends data to
the web server for processing.
43
44
45
46
method Attribute of the form Element
 A form is defined by a form element
§ Attribute method specifies how the form’s 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 resource’s URL.
§ The other possible value, method = "get", appends
the form data directly to the end of the URL of the script,
where it’s visible in the browser’s Address field.
47
action Attribute of the form Element
§ The action attribute of the form element specifies
the script to which the form data will be sent.
§ input elements that specify data to provide to the
script that processes the form (also called the form
handler).
§ An input’s type is determined by its type attribute.
48
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.
49
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 element’s 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.
50
submit and reset input Elements
 The submit input element is a button.
§ When the submit button is pressed, the form’s data is sent to
the location specified in the form’s 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.
51
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.
52
53
54
55
56
57
58
 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.
59
 The checkbox input element enables users to select
and option.
 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.
60
 The a tag can be used to link to another section of
the same document by specifying the element’s
id as the link’s href.
 To link internally to an element with its id attribute
set, use the syntax #id.
61
62
63
64
65
66
 One way that search engines catalog pages is by
reading the meta element’s 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 three- to
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
67
68
69
70
71
How to Program, 5/e
Copyright © Pearson, Inc. 2013. All Rights Reserved.

Copyright © Pearson, Inc. 2013. All
Rights Reserved.
Rights Reserved.
Rights Reserved.
 Figure 3.1 demonstrates HTML5’s new form
input types.
 These are not yet universally supported by all
browsers.

Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
 The color input type enables the user to enter a
color.
 In the past, most browsers render the color
input type as a text field in which the user can
enter a hexadecamal code or a color name.
 Now, when you click a color input, browsers
will likely display a color picker similar to the
Microsoft Windows color dialog shown in Fig. 3.2.

Rights Reserved.
Rights Reserved.
autofocus Attribute
 The autofocus attribute—an optional attribute
that can be used in only one input element on a
form—automatically gives the focus to the input
element, allowing the user to begin typing in that
element immediately.

Rights Reserved.
 Figure 3.3 shows autofocus on the color
element—the first input element in our
form—as rendered in Chrome. You do not
need to include autofocus in your forms.

Rights Reserved.
Figure 3.3

Rights Reserved.
 Figure 3.5 lists each of
the new HTML5 input
types and provides
examples of the proper
formats required for each
type of data to be valid.

Rights Reserved.
 The date input type enables the user to enter a
date in the form yyyy-mm-dd.
 Firefox and Internet Explorer display a text field in
which a user can enter a date such as 2012-01-27.
 Chrome and Safari display a spinner control—a text
field with an up-down arrow () on the right side—
allowing the user to select a date by clicking the up
or down arrow.
 The start date is the current date.
 Opera displays a calendar from which you can
choose a date.
 In the future, when the user clicks a date input,
browsers are likely to display a date control similar
to the Microsoft Windows one shown in Fig. 3.6.

Rights Reserved.
Rights Reserved.
 The datetime input type enables the user to
enter a date (year, month, day), time (hour,
minute, second, fraction of a second) and the
time zone set to UTC (Coordinated Universal
Time or Universal Time, Coordinated).
 Currently, most of the browsers render
datetime as a text field; Chrome renders an
up-down control and Opera renders a date
and time control.

Rights Reserved.
 The datetime-local input type enables the
user to enter the date and time in a single
control.
 The data is entered as year, month, day,
hour, minute, second and fraction of a
second.
 Internet Explorer, Firefox and Safari all
display a text field.
 Opera displays a date and time control.

Rights Reserved.
 The email input type enables the user to enter an e-mail
address or a list of e-mail addresses separated by commas (if
the multiple attribute is specified).
 Currently, all of the browsers display a text field.
 If the user enters an invalid e-mail address (i.e., the text
entered is not in the proper format) and clicks the Submit
button, a callout asking the user to enter an e-mail address is
rendered pointing to the input element (Fig. 3.7).
 HTML5 does not check whether an e-mail address entered by
the user actually exists—rather it just validates that the e-
mail address is in the proper format.

Rights Reserved.
Rights Reserved.
Validation
 The new HTML 5 input types are self validating
on the client side,
 Eliminating the need to add complicated
JavaScript code to your web pages to validate
user input,
 Reducing the amount of invalid data submitted
and consequently reducing Internet traffic
between the server and the client to correct
invalid input.
 The server should still validate all user input.

Rights Reserved.
Validation
 When a user enters data into a form then

submits the form the browser immediately
checks the self-validating elements to
ensure that the data is correct (Fig. 3.4).

Rights Reserved.
 If you want to bypass validation, you can add the
formnovalidate attribute to input type submit :
<input type = "submit" value = "Submit"
formnovalidate />

Rights Reserved.
placeholder Attribute
 The placeholder attribute allows you to place
temporary text in a text field.
 Generally, placeholder text is light gray and
provides an example of the text and/or text
format the user should enter (Fig. 3.8).
 When the focus is placed in the text field (i.e.,
the cursor is in the text field), the
placeholder text disappears—it’s not
“submitted” when the user clicks the Submit
button (unless the user types the same text).
Rights Reserved.
Rights Reserved.
 HTML5 supports placeholder text for only six
input types—text, search, url, tel, email and
password.
required Attribute
 The required attribute forces the user to enter a
value before submitting the form.
 You can add required to any of the input types.
 In this example, the user must enter an e-mail
address and a telephone number to submit the
form (Fig. 3.9).

Rights Reserved.
Rights Reserved.
 The month input type enables the user to
enter a year and month in the format yyyy-
mm, such as 2012-01.
 If the user enters the data in an improper
format (e.g., January 2012) and submits the
form, a callout stating that an invalid value
was entered appears.

Rights Reserved.
 The number input type enables the user to enter a numerical
value—mobile browsers typically display a numeric keypad for
this input type.
 Internet Explorer, Firefox and Safari display a text field in
which the user can enter a number. Chrome and Opera render
a spinner control for adjusting the number.
 The min attribute sets the minimum valid number.
 The max attribute sets the maximum valid number.
 The step attribute determines the increment in which the
numbers increase.
 The value attribute sets the initial value displayed in the
form (Fig. 3.10).
 The spinner control includes only the valid numbers.
 If the user attempts to enter an invalid value by typing in the
text field, a callout pointing to the number input element will
instruct the user to enter a valid value.

Rights Reserved.
Rights Reserved.
Rights Reserved.
 The range input type appears as a slider control
in Chrome, Safari and Opera (Fig. 3.12).
 You can set the minimum and maximum and
specify a value.
 The range input type is inherently self-
validating when it is rendered by the browser as a
slider control, because the user is unable to
move the slider outside the bounds of the
minimum or maximum value.

Rights Reserved.
Rights Reserved.
 The search input type provides a search field
for entering a query.
 This input element is functionally equivalent
to an input of type text.
 When the user begins to type in the search
field, Chrome and Safari display an X that can
be clicked to clear the field (Fig. 3.13).


Rights Reserved.
Rights Reserved.
 The tel input type enables the user to enter a telephone
number—mobile browsers typically display a keypad specific to
entering phone numbers for this input type.
 At the time of this writing, the tel input type is rendered as a
text field in all of the browsers.
 HTML5 does not self validate the tel input type.
 To ensure that the user enters a phone number in a proper
format, we’ve added a pattern attribute that uses a regular
expression to determine whether the number is in the format:
 (555) 555-5555
 When the user enters a phone number in the wrong format, a
callout appears requesting the proper format, pointing to the
tel input element (Fig. 3.14).


Rights Reserved.
Rights Reserved.
 The time input type enables the user to enter an
hour, minute, seconds and fraction of second
(Fig. 3.15).
 The HTML5 specification indicates that a time must
have two digits representing the hour, followed by a
colon (:) and two digits representing the minute.
 Optionally, you can also include a colon followed by
two digits representing the seconds and a period
followed by one or more digits representing a
fraction of a second (shown as ff in our sample text
to the right of the time input element in Fig. 3.15.


Rights Reserved.
Rights Reserved.
 The url input type enables the user to enter a
URL.
 The element is rendered as a text field, and the
proper format is http://www.deitel.com.
 If the user enters an improperly formatted URL
(e.g., www.deitel.com or www.deitelcom), the
URL will not validate (Fig. 3.16).
 HTML5 does not check whether the URL entered
is valid; rather it validates that the URL entered is
in the proper format.

Rights Reserved.
Rights Reserved.
 The week input type enables the user to select a
year and week number in the format yyyy-Wnn,
where nn is 01–53—for example, 2012-W01
represents the first week of 2012. Internet
Explorer, Firefox and Safari render a text field.
 Chrome renders an up-down control.
 Opera renders week control with a down arrow
that, when clicked, brings up a calendar for the
current month with the corresponding week
numbers listed down the left side.

Rights Reserved.
 Figure 3.17 shows how to use the new
autocomplete attribute and datalist
element.

Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
 The autocomplete attribute can be used on
input types to automatically fill in the user’s
information based on previous input—such as
name, address or e-mail.
 You can enable autocomplete for an entire form
or just for specific elements.
 For example, an online order form might set
automcomplete = "on" for the name and
address inputs and set autocomplete = "off"
for the credit card and password inputs for
security purposes.

Rights Reserved.
Rights Reserved.
 The datalist element provides input options for a text input
element.
 At the time of this writing, datalist support varies by browser.
 In this example, we use a datalist element to obtain the user’s
birth month.
 Using Opera, when the user clicks in the text field, a drop-down
list of the months of the year appears. If the user types "M" in
the text field, the list on months is narrowed to March and May.
 When using Firefox, the drop-down list of months appears only
after the user begins typing in the text field. If the user types
"M", all months containing the letter "M" or "m" appear in the
drop-down list—March, May, September, November and
December.

Rights Reserved.
 HTML5 introduces several new page-
structure elements (Fig. 3.18) that
meaningfully identify areas of the page as
headers, footers, articles, navigation areas,
asides, figures and more.

Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
Rights Reserved.
 The header element creates a header for this
page that contains both text and graphics.
 The header element can be used multiple times
on a page and can include HTML headings (<h1>
through <h6>), navigation, images and logos and
more.

Rights Reserved.
 The nav element groups navigation links.
 In this example, we used the heading Recent
Publications and created a ul element with
seven li elements that link to the
corresponding web pages for each book.

Rights Reserved.
 The figure element describes a figure (such
as an image, chart or table) in the document
so that it could be moved to the side of the
page or to another page.
 The figcaption element provides a caption for
the image in the figure element.

Rights Reserved.
 The article element describes standalone
content that could potentially be used or
distributed elsewhere, such as a news article,
forum post or blog entry.
 You can nest article elements. For
example, you might have reader comments
about a magazine nested as an article
within the magazine article.

Rights Reserved.
 The summary element displays a right-
pointing arrow next to a summary or caption
when the document is rendered in a browser
(Fig. 3.19).
 When clicked, the arrow points downward and
reveals the content in the details element.

Rights Reserved.
Rights Reserved.
Rights Reserved.
 The section element describes a section of a
document, usually with a heading for each
section—these elements can be nested.
 In this example, we broke the document into
three sections—the first is Recent
Publications.
 The section element may also be nested in
an article.

Rights Reserved.
 The aside element describes content that’s
related to the surrounding content (such as
an article) but is somewhat separate from
the flow of the text.
 For example, an aside in a news story might
include some background history.

Rights Reserved.
 The meter element renders a visual
representation of a measure within a range
(Fig. 3.20).
 In this example, we show the results of a recent
web survey we did.
 The min attribute is "0" and a max attribute is
"54" —indicating the total number of responses
to our survey.
 The value attribute is "14", representing the
total number of people who responded “yes” to
our survey question.

Rights Reserved.
Rights Reserved.
 The footer element describes a footer—
content that usually appears at the bottom of
the content or section element.
 In this example, we use the footer to
describe the copyright notice and contact
information.

Rights Reserved.
 The mark element highlights the text that’s
enclosed in the element.
 The wbr element indicates the appropriate
place to break a word when the text wraps to
multiple lines.
 You might use wbr to prevent a word from
breaking in an awkward place.

Rights Reserved.

Ilovepdf Merged PDF

Uploaded by

Copyright:

Available Formats

You might also like

Ilovepdf Merged PDF

Uploaded by

Document Information

Original Title

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

Ilovepdf Merged PDF

Uploaded by

Copyright:

Available Formats

Internet & World Wide Web

How to Program, 5/e

 An Internet Browser is a software program that enables

 Google Chrome is one of the browsers most commonly

 The text http:// indicates that the HyperText Transfer

 You might also see addresses that add a country code

 Also be in a separate file FILENAME.js

 Server side loadable module

 Create HTML5 documents using text editor such as

q The table element defines an HTML5 table.

q The border attribute with the value "1" specifies

q The caption element specifies a table’s title.

Copyright © Pearson, Inc. 2013. All Rights Reserved.

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

 When a user enters data into a form then

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

Copyright © Pearson, Inc. 2013. All

You might also like