Module – 1: Web Fundamentals

• Internet
• WWW
• Web Browsers and Web Servers
• URLs
• MIME
• HTTP
• Security
• The Web Programmers Toolbo

Introduction to HTML5
• Introduction to HTML5 tags,
• Basic syntax and structure,
• text markups,
• images,
• lists,
• tables,
• progress,
• Media tags-audio and video,
• forms,
• span and div tags.

Prepared by:
[Link] L N
Assistant Professor,
Dept. of CSE (MCA), VTU-PG Studies, Mysuru Region

Text Book:
Robert [Link] ,”Programming the World Wide Web”, 4th Edition, Pearson education,
2012.

1
A BRIEF INTRODUCTION ABOUT THE INTERNET
Origins:
 1960s

o U.S. Department of Defence (DoD) became interested in developing a new large-scale

computer network
o The purposes of this network were communications, program sharing, and remote
computer access for researchers working on defence-related contracts.
o The DoD’s Advanced Research Projects Agency (ARPA) funded the construction of the first
such network. Hence it was named as ARPAnet.
o The primary early use of ARPAnet was simple text-based communications through e-mail.

 late 1970s and early 1980s

o BITNET, which is an acronym for Because It’s Time NETwork, began at the City University
of New York. It was built initially to provide electronic mail and file transfers.
o CSNET is an acronym for Computer Science NETwork. Its initial purpose was to provide
electronic mail.
 1990s

o NSFnet which was created in 1986 replaced ARPAnet by 1990.

o It was sponsored by the National Science Foundation (NSF).

o By 1992 NSFnet, connected more than 1 million computers around the world.
o In 1995, a small part of NSFnet returned to being a research network. The rest became
known as the Internet.

What the Internet is:

• The Internet is a huge collection of computers connected in a communications network.

• These computers are of every imaginable size, configuration, and manufacturer. In fact, some of the

devices connected to the Internet—such as plotters and printers—are not computers at all.
• The innovation that allows all of these diverse devices to communicate with each other is a single, low-
level protocol: the Transmission Control Protocol/Internet Protocol (TCP/IP).
• TCP/IP became the standard for computer network connections in 1982.
• It can be used directly to allow a program on one computer to communicate with a program on another
computer via the Internet.
• In most cases, however, a higher-level protocol runs on top of TCP/IP.
• Nevertheless, it’s important to know that TCP/IP provides the low-level interface that allows most
computers (and other devices) connected to the Internet to appear exactly the same.
• Rather than connecting every computer on the Internet directly to every other computer on the Internet,
normally the individual computers in an organization are connected to each other in a local network.
• One node on this local network is physically connected to the Internet. So, the Internet is actually a

2
 network of networks, rather than a network of computers.

• Obviously, all devices connected to the Internet must be uniquely identifiable.

Internet Protocols (IP) Addresses

 For people, Internet nodes are identified by names; for computers, they are identified by numeric
addresses.

 The Internet Protocol (IP) address of a machine connected to the Internet is a unique 32-bit
number.

 IP addresses usually are written (and thought of) as four 8-bit numbers, separated by periods.

 The four parts are separately used by Internet-routing computers to decide where a message must
go next to get to its destination.

 Organizations are assigned blocks of IPs, which they in turn assign to their machines that need
Internet access—which now include most computers.

 For example, a small organization may be assigned 256 IP addresses, such as [Link] to
[Link].

 Very large organizations, such as the Department of Defense, may be assigned 16 million IP
addresses, which include IP addresses with one particular first 8-bit number, such as [Link] to
[Link].
 Although people nearly always type domain names into their browsers, the IP works just as well.

 For example, the IP for United Airlines ([Link]) is [Link]. So, if a browser is
pointed at [Link] it will be connected to the United Airlines Web site.

 In late 1998, a new IP standard, IPv6, was approved, although it still is not widely used. The most
significant change was to expand the address size from 32 bits to 128 bits.
Domain names

 Because people have difficulty dealing with and remembering numbers, machines on the Internet

also have textual names.

 These names begin with the name of the host machine, followed by progressively larger enclosing
collections of machines, called domains.

 There may be two, three, or more domain names.

 The first domain name, which appears immediately to the right of the host name, is the domain of

which the host is a part.

 The second domain name gives the domain of which the first domain is a part.

3
  The last domain name identifies the type of organization in which the host resides, which is the

largest domain in the site’s name.

 For organizations in the United States, edu is the extension for educational institutions, com

specifies a company, gov is used for the U.S. government, and org is used for many other kinds of

organizations.

 Consider this sample address: [Link]

 Here, movies is the hostname and comedy is movies’s local domain, which is a part of marxbros’s
domain, which is a part of the com domain.

 The hostname and all of the domain names are together called a fully qualified domain name.

The steps for conversion from DNS to IP:

 The DNS has to be converted to IP address before destination is reached.

 This conversion is needed because computer understands only numbers.

 The conversion is done with the help of name server.

 As soon as domain name is provided, it will be sent across the internet to contact name servers.

 This name server is responsible for converting domain name to IP

 If one of the name servers is not able to convert DNS to IP, it contacts other name server.

 This process continues until IP address is generated.

 Once the IP address is generated, the host can be accessed.

 Figure 1.1 shows how fully qualified domain names requested by a browser are translated into IPs
before they are routed to the appropriate Web server.

Domain Name
Internet

Domain Name

Client System
Name IP IP Web
Internet
Server Server

Figure 1.1 Domain name conversion

4
The World-Wide Web
1.2.1 Origins
 Tim Berners Lee and his group proposed a new protocol for the Internet whose intention was to
allow scientists around the world to use the Internet to exchange documents describing their
work.
 The proposed new system was designed to allow a user anywhere on the Internet to search for
and retrieve documents from the databases on any number of different document-serving
computers.
 The system used hypertext, which is text with embedded links to text in other documents to allow
non-sequential browsing of textual material.
 The units of web are referred as pages, documents and resources.

 Web is merely a vast collection of documents, some of which are connected by links.

 These documents can be accessed by web browsers and are provided by web servers.

Web or Internet?
 It is important to understand that the Internet and the Web are not the same thing.
 The Internet is a collection of computers and other devices connected by equipment that allows
them to communicate with each other.
 The Web is a collection of software and protocols that has been installed on most, if not all, of the
computers on the Internet.
 Some of these computers run Web servers, which provide documents, but most run Web clients,
or browsers, which request documents from servers and display them to users.
 The Internet was quite useful before the Web was developed, and it is still useful without it.
 However, most users of the Internet now use it through the Web.
Web Browsers
 When two computers communicate over some network, in many cases one acts as a client and the
other as a server.
 The client initiates the communication, which is often a request for information stored on the
server, which then sends that information back to the client.
 The Web, as well as many other systems, operates in this client-server configuration.
 Documents provided by servers on the Web are requested by browsers, which are programs
running on client machines.

 They are called browsers because they allow the user to browse the resources available on servers.

 Mosaic was the first browser with a graphical user interface.

 A browser is a client on the Web because it initiates the communication with a server, which
waits for a request from the client before doing anything.

5
  In the simplest case, a browser requests a static document from a server.

 The server locates the document among its servable documents and sends it to the browser, which
displays it for the user.
 Sometimes a browser directly requests the execution of a program stored on the server. The
output of the program is then returned to the browser.
 Examples: Internet Explorer, Mozilla Firefox, Netscape Navigator, Google Chrome, Opera etc.,

Web Servers

Web servers are programs that provide documents to requesting browsers. Example: Apache

Web Server Operation:

 All the communications between a web client and a web server use the HTTP

 When a web server begins execution, it informs the OS under which it is running & it runs as a
background process
 A web client or browser, opens a network connection to a web server, sends information requests
and possibly data to the server, receives information from the server and closes the connection.
 The primary task of web server is to monitor a communication port on host machine, accept HTTP
commands through that port and perform the operations specified by the commands.
 When the URL is received, it is translated into either a filename or a program name.

General Server Characteristics:

 The file structure of a web server has two separate directories

 The root of one of these is called document root which stores web documents

 The root of the other directory is called the server root which stores server and its support
software’s

 The files stored directly in the document root are those available to clients through top level URLs

 The secondary areas from which documents can be served are called virtual document trees.

 Many servers can support more than one site on a computer, potentially reducing the cost of each
site and making their maintenance more convenient. Such secondary hosts are called virtual
hosts.
 Some servers can serve documents that are in the document root of other machines on the web; in
this case they are called as proxy servers
Apache

 Apache is the most widely used Web server.

 The primary reasons are as follows: Apache is an excellent server because it is both fast and

6
 reliable.

 Furthermore, it is open-source software, which means that it is free and is managed by a large
team of volunteers, a process that efficiently and effectively maintains the system.
 Finally, it is one of the best available servers for Unix-based systems, which are the most popular
for Web servers.
 Apache is capable of providing a long list of services beyond the basic process of serving
documents to clients.
 When Apache begins execution, it reads its configuration information from a file and sets its
parameters to operate accordingly.
IIS

 Microsoft IIS server is supplied as part of Windows—and because it is a reasonably good server—
most Windows-based Web servers use IIS.
 With IIS, server behaviour is modified by changes made through a window-based management
program, named the IIS snap-in, which controls both IIS and ftp.
 This program allows the site manager to set parameters for the server.

 Under Windows XP and Vista, the IIS snap-in is accessed by going to Control Panel,
Administrative Tools, and IIS Admin.

Uniform Resource Locators

 Uniform Resource Locators (URLs) are used to identify different kinds of resources on Internet.
 If the web browser wants some document from web server, just giving domain name is not
sufficient because domain name can only be used for locating the server.
 It does not have information about which document client needs. Therefore, URL should be
provided.
 The general format of URL is: scheme: object-address
 The scheme is often a communications protocol.
 Common schemes include http, ftp, gopher, telnet, file, mailto, and news.
 Different schemes use object addresses that have different forms.
 Our interest here is in the HTTP protocol, which supports the Web.
 This protocol is used to request and send eXtensible Hypertext Markup Language (XHTML)
documents.
 In the case of HTTP, the form of the object address of a URL is as follows: //fully-qualified-
domain-name/path-to-document
 Another scheme of interest to us is file.
 The file protocol means that the document resides on the machine running the browser.
 This approach is useful for testing documents to be made available on the Web without making
them visible to any other browser.

7
  When file is the protocol, the fully qualified domain name is omitted, making the form of such
URLs as follows:
[Link]
 The host name is the name of the server computer that stores the document.
 Messages to a host machine must be directed to the appropriate process running on the host for
handling.
 Such processes are identified by their associated port numbers.
 The default port number of Web server processes is 80.
 URLs can never have embedded spaces.
 Also, there is a collection of special characters, including semicolons, colons, and ampersands (&),
that cannot appear in a URL.

URL Paths
 The path to the document for the HTTP protocol is similar to a path to a file or directory in the file
system of an operating system and is given by a sequence of directory names and a file name, all
separated by whatever separator character the operating system uses.
 For UNIX servers, the path is specified with forward slashes; for Windows servers, it is specified
with backward slashes.
 Most browsers allow the user to specify the separators incorrectly—for example, using forward
slashes in a path to a document file on a Windows server, as in the following:
[Link]
 The path in a URL can differ from a path to a file because a URL need not include all directories
on the path.
 A path that includes all directories along the way is called a complete path.
 In most cases, the path to the document is relative to some base path that is specified in the
configuration files of the server.
 Such paths are called partial paths.
 For example, if the server’s configuration specifies that the root directory for files it can serve is
files/f99, the previous URL is specified as follows:
[Link]
 If the specified document is a directory rather than a single document, the directory’s name is
followed immediately by a slash, as in the following:
[Link]
 Sometimes a directory is specified (with the trailing slash) but its name is not given, as in the
following example:
 [Link]

Multipurpose Internet Mail Extensions

 A browser needs some way of determining the format of a document it receives from a Web

8
 server.
 Without knowing the form of the document, the browser would be unable to render it, because
different document formats require different rendering tools.
 The forms of these documents are specified with Multipurpose Internet Mail Extensions (MIME).

Type Specifications
 MIME was developed to specify the format of different kinds of documents to be sent via Internet
mail.
 These documents could contain various kinds of text, video data, or sound data.
 Because the Web has needs similar to those of Internet mail, MIME was adopted as the way to
specify document types transmitted over the Web.
 A Web server attaches a MIME format specification to the beginning of the document that it is
about to provide to a browser.
 If the content is text, for example, the MIME code tells the browser that it is text and also indicates
the particular kind of text it is.
 If the content is sound, the MIME code tells the browser that it is sound and then gives the
particular representation of sound so that the browser can choose a program to which it has
access to produce the transmitted sound.
 MIME specifications have the following form:
 type/subtype
 The most common MIME types are text, image, and video.
 The most common text subtypes are plain and html.
 Some common image subtypes are gif and jpeg. Some common video subtypes are mpeg and
quicktime.
 A list of MIME specifications is stored in the configuration files of every Web server.
 However, if the type is video or audio, it cannot render the document
 It has to take the help of other software like media player, win amp etc.,
 These software’s are called as helper applications or plugins
 These non-textual information are known as HYPER MEDIA
 Experimental document types are used when user wants to create a customized information &
make it available in the internet
 The format of experimental document type is: type/x-subtype
 Example: database/x-xbase , video/x-msvideo
 Along with creating customized information, the user should also create helper applications.
 This helper application will be used for rendering the document by browser.
 The list of MIME specifications is stored in configuration file of web server.

9
The Hyper Text Transfer Protocol
 All Web communications transactions use the same protocol: the Hypertext Transfer Protocol
(HTTP).
 The current version of HTTP is 1.1, formally defined as RFC 2616, which was approved in June
1999.
 HTTP consists of two phases: the request and the response.
 Each HTTP communication (request or response) between a browser and a Web server consists of
two parts: a header and a body.
 The header contains information about the communication; the body contains the data of the
communication if there is any.

The Request Phase

The general form of an HTTP request is as follows:
1. HTTP method Domain part of the URL HTTP version
2. Header fields
3. Blank line
4. Message body
The following is an example of the first line of an HTTP request: GET /[Link] HTTP/1.1

Table 1.1 HTTP request methods

 There are four categories of header fields:

1. General: For general information, such as the date
2. Request: Included in request headers
3. Response: For response headers
4. Entity: Used in both request and response headers
 One common request field is the Accept field, which specifies a preference of the browser for the
MIME type of the requested document.
 More than one Accept field can be specified if the browser is willing to accept documents in more
than one format.
 For example; we might have any of the following:
Accept: text/plain
Accept: text/html
Accept: image/gif

10
  A wildcard character, the asterisk (*), can be used to specify that part of a MIME type can be
anything.
 For example, if any kind of text is acceptable, the Accept field could be as follows:

Accept: text/*
 The Host: host name request field gives the name of the host. The Host field is required for HTTP
1.1.
 The If-Modified-Since: date request field specifies that the requested file should be sent only if it has
been modified since the given date.
 If the request has a body, the length of that body must be given with a Content-length field.
 The header of a request must be followed by a blank line, which is used to separate the header from
the body of the request.
The Response Phase:

The general form of an HTTP response is as follows:

1. Status line
2. Response header fields
3. Blank line
4. Response body
 The status line includes the HTTP version used, a three-digit status code for the response, and a
short textual explanation of the status code.
 For example, most responses begin with the following: HTTP/1.1 200 OK

The status codes begin with 1, 2, 3, 4, or 5. The general meanings of the five categories specified by these
first digits are shown in Table 1.2.

Table 1.2 First digits of HTTP status codes

 One of the more common status codes is one users never want to see: 404 Not Found, which means
the requested file could not be found. Of course, 200 OK is what users want to see, because it
means that the request was handled without error.
 The 500 code means that the server has encountered a problem and was not able to fulfill the
request.
 After the status line, the server sends a response header, which can contain several lines of

11
 information about the response, each in the form of a field.
 The only essential field of the header is Content-type.

- An example of a complete response header:

HTTP/1.1 200 OK
Date: Sat, 25 July 2009 20:15:11 GMT
Server: Apache /2.2.3 (CentOS)
Last-modified: Tues, 18 May 2004 16:38:38 GMT
Etag: "1b48098-16a-3dab592dc9f80"
Accept-ranges: bytes
Content-length: 364
Connection: close
Content-type: text/html, charset=UTF-8

- Both request headers and response headers must be followed by a blank line

Security
 Security is one of the major concerns in the Internet.
 There are many kinds of security problems with the Internet and the Web
 One fundamental problem is getting data between a browser and a server without it being
intercepted or corrupted in the process.
 The server system can be accessed easily with basic hardware support, internet connection & web
browser.
 The client can retrieve very important information from the server.
 Similarly, the server system can introduce virus on the client system.
 These viruses can destroy the hardware and software in client.
 While programming the web, following requirements should be considered:
 Privacy: it means message should be readable only to communicating parties and not to
intruder.

 Integrity: it means message should not be modified during transmission.

 Authentication: it means communicating parties must be able to know each other’s identity

 Non-repudiation: it means that it should be possible to prove that message was sent and
received properly
 The basic tool to support privacy and integrity is encryption.
 Data to be transmitted is converted into a different form, or encrypted, such that someone (or some
computer) who is not supposed to access the data cannot decrypt it.
 So, if data is intercepted while en route between Internet nodes, the interceptor cannot use the data

12
 because he or she cannot decrypt it. Both encryption and decryption are done with a key and a
process (applying the key to the data).
 In 1976 by Whitfield Diffie and Martin Hellman of Stanford University, who developed public-key
encryption, a process in which
 a public key and a private key are used, respectively, to encrypt and decrypt messages. A
communicator—say, Joe—has an inversely related pair of keys, one public and one private.
 The public key can be distributed to all organizations that might send Joe messages.
 All of them can use the public key to encrypt messages to Joe, who can decrypt the messages with
his matching private key.
 The most widely used public-key algorithm is named RSA, developed in 1977 by three MIT
professors—Ron Rivest, Adi Shamir, and Leonard Adleman—the first letters of whose last names
were used to name the algorithm.
 Most large companies now use RSA for e-commerce.
 Another, completely different security problem for the Web is the intentional and malicious
destruction of data on computers attached to the Internet.
 There is now a continuous stream of new and increasingly devious denial-of service (DoS) attacks,
viruses, and worms being discovered
 DoS attacks can be created simply by flooding a Web server with requests, overwhelming its ability
to operate effectively.
 Viruses are programs that often arrive in a system in attachments to e-mail messages or attached to
free downloaded programs. Then they attach to other programs. When executed, they replicate and
can overwrite memory and attached memory devices, destroying programs and data alike.
 Worms damage memory, like viruses, but spread on their own, rather than being attached to other
files. Perhaps the most famous worm so far has been the Blaster worm, spawned in 2003.
 Protection against viruses and worms is provided by antivirus software,

The Web Programmer’s Toolbox

 Web programmers use several languages to create the documents that servers can provide to
browsers.
 The most basic of these is XHTML, the standard mark-up language for describing how Web
documents should be presented by browsers. Tools that can be used without specific knowledge of
XHTML are available to create XHTML documents.
 A plug-in is a program that can be integrated with a word processor to make it possible to use the
word processor to create XHTML. A filter converts a document written in some other format to
XHTML.

 XML is a meta-mark-up language that provides a standard way to define new mark-up
languages.

13
 JavaScript is a client-side scripting language that can be embedded in XHTML to describe simple
computations. JavaScript code is interpreted by the browser on the client machine; it provides
access to the elements of an XHTML document, as well as the ability to change those elements
dynamically.
 Flash is a framework for building animation into XHTML documents. A browser must have a
Flash player plug-in to be able to display the movies created with the Flash framework.
 Ajax is an approach to building Web applications in which partial document requests are handled
asynchronously. Ajax can significantly increase the speed of user interactions, so it is most useful
for building systems that have frequent interactions.
 PHP is the server-side equivalent of JavaScript. It is an interpreted language whose code is
embedded in XHTML documents. PHP is used primarily for form processing and database access
from browsers.
 Servlets are server-side Java programs that are used for form processing, database access, or
building dynamic documents. JSP documents, which are translated into servlets, are an alternative
approach to building these applications. JSF is a development framework for specifying forms and
their processing in JSP documents.
 [Link] is a Web development framework. The code used in [Link] documents, which is
executed on the server, can be written in any .NET programming language.
 Ruby is a relatively recent object-oriented scripting language that is introduced here primarily
because of its use in Rails, a Web applications framework.
 Rails provides a significant part of the code required to build Web applications that access
databases, allowing the developer to spend his or her time on the specifics of the application
without the drudgery of dealing with all of the housekeeping details.

14
 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

3
 2008 Pearson Education, Inc. All rights reserved.
 We’ll 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.

4
 2008 Pearson Education, Inc. All rights reserved.
 Figure 2.1 is an HTML5 document named
[Link].
 This first example displays the message
Welcome to HTML5! in the browser.

5
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
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.

7
 2008 Pearson Education, Inc. All rights reserved.
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 <!-- and end with -->.

8
 2008 Pearson Education, Inc. All rights reserved.
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 document’s
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 page’s content, which the browser
displays when the user visits the web page.

9
 2008 Pearson Education, Inc. All rights reserved.
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 (=).

10
 2008 Pearson Education, Inc. All rights reserved.
Title Element
 The title element is called a nested element,
because it’s enclosed in the head element’s start and
end tags.
 The head element is also a nested element, because
it’s enclosed in the html element’s 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

11
 2008 Pearson Education, Inc. All rights reserved.
Paragraph Element (<p>...</p>)
 All text placed between the <p> and </p>
tags forms one paragraph.

12
 2008 Pearson Education, Inc. All rights reserved.
 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.,
[Link]/#validate-by-upload)
ensure that an HTML5 document is
syntactically correct

13
 2008 Pearson Education, Inc. All rights reserved.
 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.

14
 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
resources, such as HTML5 documents and
images.
 Web browsers typically underline text
hyperlinks and color them blue by default.

17
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 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 resource’s
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 [Link], 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.

20
 2008 Pearson Education, Inc. All rights reserved.
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.

21
 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.
 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
([Link]), G.I.M.P.
([Link]), Inkscape
([Link]) and many more.
 Images may also be acquired from various
websites, many of which offer royalty-free
images.

25
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 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
 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 image’s actual width
and height
 Images are measured in pixels

28
 2008 Pearson Education, Inc. All rights reserved.
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 attribute’s value.
 The alt attribute is also important for
accessibility—speech synthesizer software can
speak the alt attribute’s value so that a visually
impaired user can understand what the browser
is displaying. For this reason, the alt attribute
should describe the image’s contents.

29
 2008 Pearson Education, Inc. All rights reserved.
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 page—one of
the other examples in this chapter.

30
 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.
 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
 A horizontal rule, indicated by the <hr> tag
renders a horizontal line with extra space
above and below it in most browsers.

34
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 Figure 2.9 demonstrates how to use special
characters in an HTML5 document.
 For an extensive list of character entities,
see
[Link]/TR/REC-html40/sgml/[Link]

37
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 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.

40
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
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.

43
 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.
 2008 Pearson Education, Inc. All rights reserved.
 Tables are frequently used to organize data into rows
and columns.
 The table element defines an HTML5 table
 The summary attribute summarizes the table’s contents
and is used by speech devices to make the table more
accessible to users with visual impairments.
 The caption element specifies a table’s title.
 It’s good practice to include a general description of a
table’s information in the table element’s summary
attribute—one 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.

48
 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.
 2008 Pearson Education, Inc. All rights reserved.
 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

53
 2008 Pearson Education, Inc. All rights reserved.
 tr Element
 Defines individual table rows
 Element th
 Defines a header cell
 Td Element
 Contains table data elements

54
 2008 Pearson Education, Inc. All rights reserved.
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
browsers—any 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 using—in
general, formatting should be specified using CSS.

55
 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.
 2008 Pearson Education, Inc. All rights reserved.
 HTML5 provides forms for collecting
information from users.
 Figure 2.14 is a simple form that sends data
to the web server for processing.

60
 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.
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.
 The action attribute of the form element
specifies the script to which the form data will be
sent

64
 2008 Pearson Education, Inc. All rights reserved.
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 haven’t introduced server-side
programming yet, we set this attribute to
[Link] for now.
 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.

65
 2008 Pearson Education, Inc. All rights reserved.
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.

66
 2008 Pearson Education, Inc. All rights reserved.
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.

67
 2008 Pearson Education, Inc. All rights reserved.
 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.

68
 2008 Pearson Education, Inc. All rights reserved.
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.

69
 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.
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 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.

76
 2008 Pearson Education, Inc. All rights reserved.
 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.

77
 2008 Pearson Education, Inc. All rights reserved.
 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.

78
 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.
 2008 Pearson Education, Inc. All rights reserved.
 2008 Pearson Education, Inc. All rights reserved.
 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
 meta elements are not visible to users. They must be
placed inside the head section of your HTML documents;
otherwise they will not be read by search engines.

84
 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.