UNIT - 1

1
INTERNET AND WORLD WIDE WEB
Unit Structure :

1.0 Objective
1.1 Introduction to internet and its applications.
1.1.1 Email
1.1.2 Telnet
1.1.3 FTP
1.1.4 E–commerce
1.1.5 Video conferencing
1.1.6 E business.
1.2 Internet service providers
1.3 Domain name servers
1.4 Internet address
1.5 World wide web and its evolution
1.6 URL
1.7 Browsers
1.7.1 Internet explorer,
1.7.2 Netscape navigator,
1.7.3 opera,
1.7.4 fire fox,
1.7.5 chrome,
1.7.6 Mozilla,
1.8 Search Engine
1.9 Web server
1.9.1 Apache
1.9.2 IIS
1.9.3 Proxy Server
1.10 HTTP protocol.
1.11 Summery
1.12 Unit End exercise

1.0 OBJECTIVE:

After reading through this chapter, you will be able to –

 Understand concept of Internet and World Wide Web, their
applications.
 List the services provided by Internet Service providers with examples.
 Define domain name server and list various domains.
 Understand the concept of Internet address.
 Understand the function of a URL and web browsers.
1
 Use different web browsers.
 Use the search engines to search for required information over the
internet.
 Understand the need and use of a web server and proxy server.

1.1 INTRODUCTION TO INTERNET AND ITS

APPLICATIONS

Internet is ---
 A computer network consisting of a worldwide network of computers
that use the TCP/IP network protocols to facilitate data transmission
and exchange.
 The Internet is a global system of interconnected computer networks
that use the standard Internet Protocol Suite (TCP/IP) to serve billions
of users worldwide.
 The term Internet actually refers to the combined collection of
academic, commercial, and government networks connected over
international telecommunication backbones and routed using IP
addressing.

The internet has gained popularity rapidly as it is used for various

purposes. Few of the main applications of internet are listed below –

Applications of Internet ---

1.1.1 E mail (Electronic mail)

 Electronic mail (also known as email or e-mail) is one of the most
commonly used services on the Internet, allowing people to send
messages to one or more recipients.
 Email was invented by Ray Tomlinson in1972.
 Electronic mail is a method of exchanging digital messages from an
author to one or more recipients.
 Modern email operates across the Internet or other computer networks.
Today's email systems are based on a store-and-forward model.
 Email servers accept, forward, deliver and store messages. Neither the
users nor their computers are required to be online simultaneously;
they need connect only briefly, typically to an email server, for as long
as it takes to send or receive messages.
 An email message consists of three components, the message
envelope, the message header, and the message body.
 Header contains information about who sent the message, the
recipient(s) and the route.
 Header also usually contains descriptive information, such as a subject
header field and a message submission date/timestamp.

2
 Email message body contains text (7bit ASCII) as well as multimedia
messages. These processes are declared in Multipurpose Internet Mail
Extensions (MIME). MIME is set of RFCs (Request for Comment)
 Network based emails are exchanged over the internet using the SMTP
(Simple Mail Transfer protocol).
 In the process of transporting email messages between systems, SMTP
communicates delivery parameters using a message envelope separate
from the message (header and body)itself.
 Email addresses (both for senders and recipients) are two strings
separated by the character "@" (the "at sign"): such as user@domain
 The right-hand part describes the domain name involved, and the left-
hand part refers to the user who belongs to that domain.
 An email address can be up to 255 characters long and can include the
following characters:
 Lowercase letters from a toz;
 Digits
 The characters ".","_" and "-" (full stop, underscore, and hyphen)

In practice, an email address often looks something like this:

[email protected]

1.1.2 Telnet

 Telnet is a network protocol used in any network (internet or LAN) for

bidirectional text oriented communication.
 telnet standard was defined in 1973, before which it was considered
as a dhocprotocol.
 Original purpose of the telnet protocol was to login to the remote
computers on the network.
 Telnet protocol uses ‘virtual terminal’ to connect to the remote hosts.
 Virtual terminal is a application service that allows host in a multi
terminal network to communicate with other hosts irrespective of
terminal type or characteristics.
 Telnet uses the TCP protocol for transmission of 8 byte data.
 Most network equipment and operating systems with a TCP/IP stack
support a Telnet service for remote configuration (including systems
based on Windows NT)
 The term telnet may also refer to the software that implements the
client part of the protocol.
 telnet is a client server protocol, which is based upon reliable
connection oriented communication transport and basic use of telnet is
to make a connection to the TCP protocol.

3
 Data transferred over telnet is vulnerable as telnet does not use any
encryption technique to mask or protect the data.
 Most implementations of Telnet have no authentication that would
ensure communication is carried out between the two desired hosts and
not intercepted in the middle.
 Commonly used Telnet daemons have several vulnerabilities
discovered over the years.
 Extensions to the Telnet protocol provide Transport Layer Security
(TLS) security and Simple Authentication and Security Layer (SASL)
authentication that address the above issues.
 Few applications of telnet include the ‘putty’ TCP client which can
access a linux server using windows operating system, Absolute telnet
(windows client) and RUMBA (terminal emulator).
1.1.3 FTP
 File transfer protocol is a simple and standard network protocols that
transfers a file from one host to the other over a TCP network.
 Based on client server architecture.
 Utilizes separate control and data connection for client and server to
transmit and receive file(s) over the network.
 It is an application protocol that uses the internet’s TCP/IP suite.
 Mainly used to transfer the web pages or related data from the source
or creator to a host that acts as a server to make the page or file
available to other hosts (uploading) or downloading programs and
other files from server to a host.
 FTP protocol can perform over a active or passive connection.
 When a connection is made from the client to server, it is called as
control connection and it remains open for duration of session. This
connection is responsible for establishing connectivity between client
and server.
 Other connection opened by client (passive) or server (active) is called
data connection and is used to transfer the data.
 As separate ports are used by client and server for these connections,
FTP becomes an put of band protocol.
 Data transfer can take place in following three modes
o Stream mode : data is sent in a continuous stream where FTP does
not do any formatting.
o Block mode: FTP breaks the data into several blocks (block
header, byte count, and data field) and then passes it on to TCP.
o Compressed mode: Data is compressed using a single algorithm.
 FTP is a old protocol and is basically low in security aspect. Data
transferred over FTP is not encrypted and is in clear text format.
4
 Hence the data like usernames, passwords can be read by anyone who
can capture the FTPed package. Newer versions of the protocol,
however, apply secure shell protocol (SSH) and avoid all the problems
faced by FTP.
 Following are few types of FTP protocol with additional features
 Anonymous FTP : Users login using an ‘anonymous’ account to
protect their confidential data.
 Remote FTP: FTP commands executed on a remote FTP server
 FTP with web browser and firewall support.
 Secure FTP (SFTP,FTPS)

1.1.4 ECommerce

 Electronic commerce can be defined as use of electronic

communications, particularly via the internet, to facilitate the
purchase/ sale of goods and services. E-commerce includes all forms
of electronic trading including electronic data interchange (EDI),
electronic banking, electronic mail and other online services.
 E transactions are of two categories. – virtual products like policies
and actual retail products.
 Most of e transactions of actual products involve physical
transportation of goods which are purchased over the electronic media.
 Online retailing has gained a name of Etailing.
 Electronic commerce is generally considered to be the sales aspect of
e-business. It also consists of the exchange of data to facilitate the
financing and payment aspects of the business transactions.
 Originally, electronic commerce was identified as the facilitation of
commercial transactions electronically, using technology such as
Electronic Data Interchange (EDI) and Electronic Funds Transfer
(EFT).
 Other forms of e commerce were established with the growth and use
of credit cards, and air line reservation system going online.
 Electronic commerce of the modern era (post 1990) includes
technologies like enterprise resource planning (ERP), data
warehousing and data mining.
 The electronic transactions between two businesses like dealer and
wholesaler or wholesaler and retailer come in the B2B (business to
business) E commerce category.
 Other popular E commerce categories would be business to consumer
(B2C) and business to government(B2G)
 Volume of B2B transaction is much higher as compared to the volume
of B2C transactions. Reason for this is, many transactions at B2B level
lead to finished good and this leads to just one B2C transaction.
5
 In an example, if a customer buys a product, say a pen, that would be a
B2C transaction. But the transaction leading this one, including
purchase of plastic, ink, refill, moulds etc would be B2B transaction.
Also the sale of the pen to the retailer by the manufacturing company,
like cello, is B2Btransaction.
 OtherformofB2Ctransactionsarebusinesstoindividual,where the record
of an individual’s transaction is maintained.
 C2C is consumer to consumer, or citizen to citizen E commerce. Here
customers can perform transaction via a third party. Like a product can
be posted on amazon.com and will be sold to another consumer
through Amazon.
 C2B E commerce model is reverse of traditional business to consumer
approach. This can be explained by a internet blog or a social
networking site where author can have a link in his blog article to
online sale of a product (promoting the business). This has become
possible due to advancements in technology and reduced costs of
technology.
 Unique attribute of e commerce is negotiation facility and its
immediate results. Also, in E commerce transactions, integration of
transactions is automated.
1.1.5 Video Conferencing
 Video conferencing or video teleconference is a set of
telecommunication technologies which allow one or more locations
to transmit and receive video and audio signals simultaneously.
 This is known as visual collaboration.
 Simple analog video conferencing is achieved by two closed circuit
television systems connected with coaxial cables or radio waves.
 This type of communication was established from1968.
 Modern video conferencing is IP based and through more efficient
video compression technologies, allowing desktop or PC based video
conferencing.
 Video telephony is now popular due to free internet services.
 Core technology used for this is compression of audio and video
signals. Hardware and software used for this task is called as codec
(coder/ decoder). Compression rate achieved is almost 1:500. The
resultant stream of binary data is sent in packet form through digital
networks.
 The components required for a videoconferencing system include:
 Video input : video camera or webcam
 Video output: computer monitor , television or projector
 Audio input: microphones, CD/DVD player, cassette player, or
any other source of Pre Amp audio outlet.
 Audio output: usually loudspeakers associated with the display
device or telephone
 Data transfer: analog or digital telephone network, LAN or Internet
6
 There are basically two types of videoconferencing systems.
 Dedicated systems: all required components (i.e. software and
hardware based codec, control computer and video camera,
electrical interfaces) packed in a single console application. They
include large group, small group, portable and non portable video
conferencing systems.
 Desktop Systems: add ons to normal computing systems
transforming these systems to videoconferencing devices.
 There are following layers in the videoconferencing technology–
 User interface
 Conference control
 Control or signal plane
 Media plane.
 Videoconferencing has following modes
 Voice activated switch
 Continuous presense
 Problems faced by videoconferencing
 Echo: echo is defined as reflected source wave interference with
new wave created by the source. i.e. signal coming out from the
source interferes with newly coming source and generating
unwanted input signal. This may result into remote party receiving
their own sounds again. This can be avoided by using an
algorithm called as AEC (Acoustic Echo cancellation).
 Eye contact : in videoconferencing, due to time delays and
parallax, communicators have a feel of the other party avoiding
eye contact and can result into issues in professional
communication. This can be avoided by using special stereo
reconstruction technique.
 Signal latency: The information transport of digital signals in many
steps needs time. In a telecommunicated conversation, an
increased latency larger than about 150-300ms becomes noticeable
and is soon observed as unnatural and distracting. Therefore, next
to a stable large bandwidth, a small total round-trip time is another
major technical requirement for the communication channel for
interactive videoconferencing.

1.1.6 E business
 E business is conduct of business over the internet, which includes
buying and selling of goods and even services.
 In other words it is application of information and communication
technologies in support of all activities in business.
 Applications of E business are divided into following categories–

7
 o Internal business systems--
o Customer Relationship Management(CRM)
o Enterprise Resource Planning(ERP)
o Human resource management system(HRMS)
o Enterprise Communication and collaboration
o Content management
o E- mails
o Voicemails
o Web conferencing
o Electronic commerce
o B2B (business to business)
o B2C (business to customer)
o B2E business-to-employee
o B2Gbusiness-to-government
o G2Bgovernment-to-business
o G2G (government-to-government)
o G2C (government-to-citizen)
o C2C (consumer-to-consumer)
o C2B(consumer-to-business)
 A business model is defined as the organization of product, service and
information flows, and the source of revenues and benefits for
suppliers and customers. The concept of e-business model is the same
but used in the online presence.
 Few e business models are–
o E-shops
o E-commerce
o E-procurement
o E-malls
o E-auctions
o Virtual Communities
 E business has more security risks as compared to a regular business,
as E business has many more users at a time. Keeping the large
information confidential is a difficult task. Also, data integrity,
authenticity and storage of data are some challenges faced by
Ebusiness.
 Some methods to provide security are physical security as well as
encryption in data storage, transmission, antivirus software and
firewalls. Digital signature is another way to confirm the ownership
of a document.

8
1.2 INTERNET SERVICE PROVIDER

 An Internet service provider (ISP) is a company that provides access to the

Internet, hosts data, or does both. ISP is also known as IAP (internet access
provider) Access ISPs connect customers to the Internet using copper,
wireless or fibre connections. Hosting ISPs lease server space for
smaller businesses and host other people servers (colocation). Transit
ISPs provide large tubes for connecting hosting ISPs to access ISPs.

 As internet gained popularity, it was essential to provide internet

access to many people or many hosts. Due to the increasing demand to
access internet, commercial ISP came into existence in1990.
Technologies used –

For users and small business applications -

 Dial up connection
 DSL (digital subscriber line)
 Broadband wireless connection
 Cable modem
 Fibre optical connection

For medium to large businesses or for other ISPs,

 DSL
 Ethernet
 Metro Ethernet
 Gigabyte Ethernet
 Frame relay
 Satellite Ethernet

 ISP connections–
ISPs which provide connections through phone lines like dial ups,
do not seek any information about the caller’s (user of the internet)
physical location or address. So, caller from any location which is in reach
of the ISP, can use the services provided.

Other way of getting connected through ISP is using cable or any

other lines. Here, fixed registration of the user at the ISP side is essential.

 Services provided –
ISP host usually provide e mail, FTP and web hosting services.
Other services can be like virtual machines, clouds or entire physical
servers where clients can run their own softwares.

ISPs often take services from their upstream ISPs. i.e. they work in
hierarchy. The ISPs are divided into three categories –

 Peering : ISPs taking services from upstream and getting connected

to each other to exchange data and to control network traffic through
peering points, orinternetex change points. These points help save one
9
more upstream ISP and cut down on the cost. The ISPs which do not need
upstream ISP are called Tier 1 ISP.

 Virtual ISP (VISP) : this is an ISP which purchases services from

other ISP and gives them to the end user, without any set up of its own.

 Free ISP: these are ISPs which provide services free of cost to the users
and display advertisements till the users are connected. These are called as
freenets. These are normally run on no profit basis.

1.3 DOMAIN NAME SERVERS

 Domain Name System is–

DNS is part of a domain name system. It is hierarchical naming
system built on a distributed database for resource connected to the
internet or a private network. The main purpose of this system is to
translate domain names meaningful to humans into names or rather
numeric streams which help the corresponding network devices to identify
the resource or domain. Domain name system makes it possible to give or
allot names to domains or group of networks irrespective of their physical
locations.

 Domain Name Server is–

 Domain name system assigns domain name servers for allotting names
and mapping these names to IP addresses. In other words domain
name servers are nodes of the domain name system which acts like a
client server system. Each domain has at least one authoritative DNS
server that publishes information about that domain and the name
servers of any domains subordinate to it. The top of the hierarchy is
served by the root name servers, the servers to query when looking up
(resolving) a TLD (Top level domain). Authoritative DNS can either
be a master or a slave. Master DNS keeps record of all zone records.
Slave DNS uses a automatic update mechanism to maintain copies of
records of its master. Every top level domain requires a primary DNS
and at least one secondary DNS. Every DNS query must start with
recursive queries at the root zone, for authoritative DNS.
 To improve efficiency, reduce DNS traffic across the Internet, and
increase performance in end-user applications, the Domain Name
System supports DNS cache servers which store DNS query results for
a period of time determined in the configuration (time-to-live) of the
domain name record in question.
 The client-side of the DNS is called a DNS resolver. It is responsible
for initiating and sequencing the queries that ultimately lead to a full
resolution (translation) of the resource sought, e.g., translation of a
domain name into an IP address.
 A DNS query may be either a non-recursive query or a recursive query

10
 The resolver, or another DNS server acting recursively on behalf of the
resolver, egotiates use of recursive service using bits in the query
headers.
 Resolving usually entails iterating through several name servers to find
the needed information. However, some resolvers function
simplistically and can communicate only with a single name server.
These simple resolvers (called "stub resolvers") rely on a recursive
name server to perform the work of finding information for them.
 Operation of DNS–
 Domain name resolvers determine the appropriate domain name
servers responsible for the domain name in question by a sequence of
queries starting with the right-most (top-level) domain label.
 DNS recorsor consults three name servers to resolve one address. The
process is as follows–
o A network host is configured with an initial cache (so called hints) of
the known addresses of the root name servers. Such a hint file is
updated periodically by an administrator from a reliable source.
o A query to one of the root servers to find the server authoritative for
the top-level domain.
o A query to the obtained TLD server for the address of a DNS server
authoritative for the second-level domain.
o Repetition of the previous step to process each domain name label in
sequence, until the final step which returns the IP address of the host
sought.

1.4 INTERNET ADDRESS

 Internet address follows the TCP/IP suite hence, it is also known as the
IP address.
 Internet address has a job of identifying a node on the network. In
other words, it is a numeric lable attached to every system (computer
or any other device). The basic function of IP address are two–
 Identification of computer or node or device and location addressing.
 The designers of the Internet Protocol defined an IP address as a 32-bit
number[1] and this system, known as Internet Protocol Version 4
(IPv4), is still in use today. However, due to the enormous growth of
the Internet and the predicted depletion of available addresses, a new
addressing system (IPv6), using 128 bits for the address, was
developed in 1995,[3] standardized as RFC 2460 in 1998,[4] and is
being deployed worldwide since themid-2000s.
 IP addresses are binary numbers, but they are usually stored in text
files and displayed in human-readable notations, such as 172.16.254.1
(forIPv4)

11
 IPV4 address is a 32 bit number, which uses the decimal doted
notation consisting of 4 decimal numbers each ranging from 0 to 255
separated by dots. Network administration divides the IP address into
two parts. – the most significant 8 bits are called network address
portion the remaining bits are known as rest bits or host bits or
identifiers and they are used for host numbering in anetwork.
 Although IPV4 provides 4.3 billion addresses, they are exhausted due
to high demand and as a result, insufficient addresses available with
IANA (Internet assigned numbers authority). The primary address
pool of IANA is expected to get exhausted by mid 2011. To
permanently address the problem, new version of IP i.e. IPV6 was
brought forward, this version moved the size of IP address from 32 bit
to 128 bits.
 Both IPV4 as well as IPV6 have reserved addresses for private or
internal networks. This is termed as private addressing.
 Both IPV4 and IPV6 have sub netting effect. That mean, IP networks
can be divided into smaller groups or subnets. IP addresses two
constituents that is network address and host identifier or interface
identifier are used for this purpose.
 Internet Protocol addresses are assigned to a host either anew at the
time of booting, or permanently by fixed configuration of its hardware
or software. Persistent configuration is also known as using a static IP
address. In contrast, in situations when the computer's IP address is
assigned newly each time, this is known as using adynamic IP address

1.5 WORLD WIDE WEB AND ITS EVOLUTION

 The World Wide Web, abbreviated as WWW or W3 and commonly

known as the Web, is a system of interlinked hypertext documents
accessed via the Internet.
 With a web browser, one can view web pages that may contain text,
images, videos, and other multimedia and navigate between them via
hyperlinks.
 The World-Wide Web was developed to be a pool of human
knowledge, and human culture, which would allow collaborators in
remote sites to share their ideas and all aspects of a common project.

Evolution of WWW
 In March 1989, Tim Berners-Lee wrote a proposal that referenced
ENQUIRE, a database and software project he had built in 1980, and
described a more elaborate information management system.
 on November 12, 1990, with help from Robert Cailliau, Tim
Berners- Lee published a more formal proposal to build a "Hypertext
project" called "World Wide Web" (one word, also "W3") as a
"web" of "hypertext documents" to be viewed by "browsers" using a
client– server architecture.
12
 This proposal estimated that a read-only web would be developed
within three months and that it would take six months to achieve
"the creation of new links and new material by readers, to achieve
universal authorshipl" as well as "the automatic notification of a
reader when new material of interest to him/her has become
available."
 A NeXT Computer was used by Berners-Lee as the world's first web
server and also to write the first web browser, World Wide Web, in
1990.
 Tools needed were a working Web the first web browser (which was
a web editor as well); the first web server; and the first web pages,
which described the project itself.
 On August 6, 1991, Tim Berners-Lee posted a short summary of the
World Wide Web project on the alt. hypertext newsgroup.
 This date also marked the debut of the Web as a publicly available
service on the Internet. The first photo on the web was uploaded by
Berners-Lee in 1992, an image of the CERN house band Les
Horribles Cernettes.
 The first server outside Europe was set up at SLAC to host the
SPIRES-HEP database in 91 –92.
 The concept of hypertext originated with older projects from the
1960s, such as the Hypertext Editing System (HES) at Brown
University by Ted Nelson and Douglas Engelbart.
 Tim Berners Lee introduced the concept of the Universal Document
Identifier (UDI), later known as Uniform Resource Locator (URL)
and Uniform Resource Identifier (URI); the publishing language
Hyper Text Markup Language (HTML); and the Hypertext Transfer
Protocol(HTTP).
 In 1993, a graphical browser was developed by a team at the
National Center for Supercomputing Applications at the University
of Illinois at Urbana-Champaign (NCSA-UIUC), led by Marc
Andreessen. This was the first web browserever.

1.6 URL

 Uniform Resource Locator (URL) is a Uniform Resource Identifier

(URI) that specifies where an identified resource is available and the
mechanism for retrieving it.
 An example of the use of URLs is the addresses of web pages on the
World Wide Web, such ashttp://www.example.com/.
 The format is based on Unix file path syntax, where forward slashes
are used to separate directory or folder and file or resource names.
 Conventions already existed where server names could be prepended
to complete file paths, preceded by adouble-slash

13
 Every URL consists of some of the following:
o The scheme name (commonly called protocol), followed by a
colon. The scheme name defines the namespace, purpose, and the
syntax of the remaining part of the URL.
o Domain Name depending upon scheme(alternatively, IP address).
The domain name or IP address gives the destination location for
the URL.
o An optional port number; if omitted, the default for the scheme is
used
o Path of the resource to be fetched or the program to be run. The
path is used to specify and perhaps find the resource requested. It
may be case-sensitive for non window based servers. Eg:
http://www.mudlle.ac.in/news.html
o A query string for scripts The query string contains data to be
passed to software running on the server. It may contain
name/value pairs separated by ampersands, for example ? first_
name= John & last_name=Doe.
o Optional fragment identifier that specifies a part or a position
within the overall resource or document. When used with HTTP, it
usually specifies a section or location within the page, and the
browser may scroll to display that part of the page.
 When resources contain references to other resources, they can use
relative links to define the location of the second resource.
 relative URLs are dependent on the original URL containing a
hierarchical structure against which the relative link is based.
 the ftp, http, and file URL schemes are examples of some that can be
considered hierarchical, with the components of the hierarchy being
separated by"/"
 A URL is a URI that, "in addition to identifying a resource, provides a
means of locating the resource by describing its primary access
mechanism.

1.7 BROWSERS

 A web browser or Internet browser is a software application for

retrieving, presenting, and traversing information resources on the
World Wide Web.
 Web browsers can also be used to access information provided by
Web servers in private networks or files in file systems. Some
browsers can also be used to save information resources to file
systems.
 Primary function of a browser is to identify the URI and brings the
information resource to user.

14
 This process begins when user inputs the URI in the browser. Prefix of
the URI describes how to interpret the URI. Most URIs have resource
retrieved over Hyper text Transfer Protocol. Some web browsers also
support prefixes like FTP.
 Once this is done, the HTML script is passed to the browser’s layout
engine. To make the script interactive java script support is needed.
With this, browser can interpret text, images, video and interactive
scripts.
 All major browsers allow users to access multiple information
resources at the same time in different windows or in tabs. Major
browsers include pop up blockers to prevent windows to open without
users consent.
 Most major web browsers have these user interface elements in common:
Back and forward buttons to go back to the previous resource and forward
again.
o A history list, showing resources previously visited in a list
(typically, the list is not visible all the time and has to be
summoned)
o A refresh or reload button to reload the current resource.
o A stop button to cancel loading the resource. In some browsers, the
stop button is merged with the reload button.
o A home button to return to the user's homepage
o An address bar to input the Uniform Resource Identifier (URI) of
the desired resource and display it.
o A search bar to input terms into a search engine
o A status bar to display progress in loading the resource and also the
URI of links when the cursor hovers over them, and page zooming
capability.
 The usage share of web browsers is as shown below. (Source: Median
values)
 Internet Explorer(43.55%)
 Mozilla Firefox (29.0%; Usage by version number)
 Google Chrome (13.89%)
 Safari(6.18%)
 Opera(2.74%)
 Mobile browsers (4.45%)
 Some special web browsers are listed below–

1.7.1 INTERNET EXPLORER

 Windows Internet Explorer (formerly Microsoft Internet Explorer,

commonly abbreviated IE or MSIE) is a series of graphical web
browsers developed by Microsoft and included as part of the Microsoft
Windows line of operating systems starting in1995.
15
 It was first released as part of the add-on package Plus! for Windows
95 that year. Later versions were available as free downloads, or in
service packs. It was part of later versions of windows operating
systems.
 The latest stable release is Internet Explorer 9, which is available as a
free update for Windows 7, Windows Vista, Windows Server 2008
and Windows Server 2008R2.
 Internet Explorer uses a componentized architecture built on the Component
Object Model (COM) technology. It consists of several major components,
each of which is contained in a separate Dynamic- link library (DLL)
and exposes a set of COM programming interfaces hosted by the
Internet Explorer main executable, ‘iexplore.exe’
 Internet Explorer uses a zone-based security framework that groups
sites based on certain conditions, including whether it is an Internet- or
intranet-based site as well as a user-editable white list. Security
restrictions are applied per zone; all the sites in a zone are subject to
the restrictions.

1.7.2 NETSCAPE NAVIGATOR

 Netscape Navigator is a proprietary web browser that was popular in

the 1990s. It was the most popular web browser till 2002, after which
competitor browsers have taken over the market of Netscape.
 Netscape Navigator was based on the Mosaic web browser.
 Netscape announced in its first press release (October 13, 1994) that it
would make Navigator available without charge to all non-
commercial users, and Beta versions of version 1.0 and 1.1 were
indeed freely downloadable in November 1994 and March 1995, with
the full version 1.0 available in December1994.
 The first few releases of the product were made available in
"commercial" and "evaluation" versions.
 During development, the Netscape browser was known by the code
name Mozilla. Mozilla is now a generic name for matters related to the
open source successor to Netscape Communicator.

1.7.3 OPERA
 Opera is a web browser and Internet suite developed by Opera
Software. The browser handles common Internet-related tasks such as
displaying web sites, sending and receiving e-mail messages,
managing contacts, chatting on IRC, downloading files via Bit Torrent,
and reading webfeeds.
 Opera is offered free of charge for personal computers and mobile
phones. This is the most popular mobile phone browser and is not
packages in desktop operating system.
 Features include tabbed browsing, page zooming, mouse gestures, and
an integrated download manager. Its security features include built-in
16
 phishing and malware protection, strong encryption when browsing
secure websites, and the ability to easily delete private data such as
HTTP cookies.
 Opera runs on a variety of personal computer operating systems,
including Microsoft Windows, Mac OS X, Linux, and FreeBSD
 Opera includes built-in tabbed browsing, ad blocking, fraud protection,
a download manager and Bit Torrent client, a search bar, and a web
feed aggregator. Opera also comes with an e-mail client called Opera
Mail and an IRC chat client builtin.
 Opera has several security features visible to the end user. One is the
option to delete private data, such as HTTP cookies, the browsing
history, and the cache, with the click of a button. This lets users erase
personal data after browsing from a shared computer.
 Opera Mobile is an edition of Opera designed for smart phones and
personal digital assistants(PDAs)

1.7.4 MOZILLA FIREFOX

 Mozilla Firefox is a free and open source web browser descended from
the Mozilla Application Suite and managed by Mozilla Corporation.
As of February 2011[update], Firefox is the second most widely used
browser with approximately 30% of worldwide usage share of web
browsers.
 To display web pages, Firefox uses the Gecko layout engine, which
implements most current web standards.
 The latest Firefox features[15] include tabbed browsing, spell
checking, incremental find, live book marking, a download manager,
private browsing, location-aware browsing (also known as
"geolocation") based exclusively on a Google service.
 Firefox runs on various operating systems including Microsoft
Windows, Linux, Mac OS X, FreeBSD, and many other platforms.

1.7.5 CHROME
 Chrome, the web browser by Google, is rapidly becoming popular due
to following features-
o SPEED: Chrome is designed to be fast in every possible way: It's
quick in staring up from the desktop, loading web pages and
running complex web applications.
o SIMPLICITY: Chrome's browser window is streamlined, clean
and simple. Chrome also includes features that are designed for
efficiency and ease of use. For example, you can search and
navigate from the same box, and arrange tabs however you wish.
o SECURITY: Chrome is designed to keep you safer and more
secure on the web with built-in malware and phishing protection,
auto updates to make sure the browser is up-to-date with the latest
17
 security updates, and more. Learn more about Chrome's security
features.
 Chrome is the first browser to incorporate machine translation in the
browser itself, without requiring additional plugins orextensions.

1.8 SEARCH ENGINE

 A web search engine is designed to search for information on the

World Wide Web and FTP servers. The search results are generally
presented in a list of results and are often called hits. The information
may consist of web pages, images, information and other types of files.
Some search engines also mine data available in databases or open
directories.
 The very first tool used for searching on the Internet was Archie.
 The first web robot, the Perl-based World Wide Web Wanderer was
built and used by it to generate an index called 'Wandex'. The purpose
of the Wanderer was to measure the size of the World Wide Web.
 Around 2000, Google's search engine rose to prominence. The
company achieved better results for many searches with an innovation
called Page Rank. This iterative algorithm ranks web pages based on
the number and Page Rank of other web sites and pages that link there,
on the premise that good or desirable pages are linked to more than
others.
 Web search engines work by storing information about many web
pages, which they retrieve from the html itself. These pages are
retrieved by a Web crawler (sometimes also known as a spider) — an
automated Web browser which follows every link on the site.
 This information is then analyzed and indexed The contents of each
page are then analyzed to determine how it should be indexed . The
purpose of an index is to allow information to be found as quickly as
possible.

1.9 WEB SERVER

1.9.1 APACHE
 Apache HTTP Server is a free and open-source web server that
delivers web content through the internet. It is commonly referred to as
Apache and after development; it quickly became the most popular
HTTP client on the web.
 The word, Apache, has been taken from the name of the Native
American tribe ‘Apache’, famous for its skills in warfare and strategy
making.
 Apache is the most widely used Web Server application in Unix-like
operating systems but can be used on almost all platforms such as
Windows, OS X, OS/2, etc
18
 It is a modular, process-based web server application that creates a
new thread with each simultaneous connection. It supports a number
of features; many of them are compiled as separate modules and
extend its core functionality, and can provide everything from server
side programming language support to authentication mechanism.

Features of Apache:
 Handling of static files
 Loadable dynamic modules
 Auto-indexing
 Compatible with IPv6
 Supports HTTP/2
 FTP connections
 Bandwidth throttling
 Load balancing
 Session tracking
 URL rewriting
 Geolocation based on IP address and many more

1.9.2 IIS

 Internet Information Services (IIS) is a flexible, general-purpose web

server from Microsoft that runs on Windows systems to serve
requested HTML pages or files. IIS works through a variety of
standard languages and protocols
 An IIS web server accepts requests from remote client computers and
returns the appropriate response. This basic functionality allows web
servers to share and deliver information across local area networks
(LAN), such as corporate intranets, and wide area networks (WAN),
such as the internet.
 A web server can deliver information to users in several forms, such as
static webpages coded in HTML; through file exchanges as downloads
and uploads; and text documents, image files and more.
 Features of IIS:
 IIS is used to host ASP.NET web applications and static websites
 It can also be used as an FTP server, host WCF services, and be
extended to host web applications. built on other platforms such as
PHP
 An invaluable feature is remote management. IIS can also be
managed via the CLI or using Power Shell
 One of the key feature of IIS is application pool.

19
1.9.3 PROXY SERVER
 A proxy server provides a gateway between users and the internet. It is
a server, referred to as an “intermediary” because it goes between end-
users and the web pages they visit online.
 Proxies provide a valuable layer of security for your computer. They
can be set up as web filters or firewalls, protecting your computer from
internet threats like malware.
 Benefits of proxy server:
 Enhanced security
 Private browsing, watching, listening and shopping
 Access to location– specific content
 Prevent employees from browsing inappropriate or distracting sites

1.10 HTTP PROTOCOL

 HTTP stands for Hyper Text Transfer Protocol.

 It is a protocol used to access the data on the World Wide Web
(www).
 The HTTP protocol can be used to transfer the data in the form of
plain text, hypertext, audio, video, and so on.
 This protocol is known as Hyper Text Transfer Protocol because of its
efficiency that allows us to use in a hypertext environment where there
are rapid jumps from one document to another document.
 The HTTP protocol is a request/response protocol based on the
client/server based architecture where web browsers, robots and search
engines, etc. act like HTTP clients and the Web server acts as a server.
The following diagram shows a very basic architecture of a web
application and depicts where HTTP :

20
 The HTTP protocol is a request/response protocol based on the
client/server based architecture where web browsers, robots and search
engines, etc. act like HTTP clients, and the Web server acts as a server.
Basic Features:
 HTTP is connectionless protocol
 HTTP is media independent
 HTTP is stateless

1.11 EXERCISE

1. Define the internet. What protocol suit does it follow?

2. What is email? How is it sent and received?
3. Describe the three components of email.
4. What is meant by email address? What are the required parts of email
address?
5. Are following email addresses valid?
a. [email protected]
b. 11 [email protected]
c. Seema_Sathye@ server.co.in
d. [email protected]
6. What is telnet used for?
7. What is virtual terminal? What is it used for?
8. Name applications of telnet.
9. Why is FTP protocol used?
10. Explain different connections that can be used by FTP.
11. What are drawbacks of telnet and FTP?
12. Define E commerce. What are the advantages of ecommerce?
13. Give one example of B2B, B2C and C2C ecommerce.
14. Identify following E commerce category–
a. Sale of online admission form for a college.
b. Submission of the above form.
c. Online resale of a second handcar.
d. Purchase of raw material by an automobile company.
15. What is visual collaboration?
16. What is codec how does it function?
17. What are different types of video conferencing system?
18. List the components of video conferencing system.
19. Discuss the problems faced by video conferencing system.
21
20. Define E business.
21. List a few applications of E business.
22. What is a E business model? Give three examples of E business
model.
23. What are risks for E business? What are the solutions available for
these risks?
24. What is ISP? Explain the role of ISP in an internet connection.
25. Classify following technologies of ISP in business or home
connections
a. A dial up connection with speed1Mbps
b. A connection to a LAN using leased cable lines
c. Hosting of personal webpage
d. Use of wi-fi for a laptop.
26. What are different services provided by ISP?
27. Explain what is peering? What is its advantage?
28. What is VISP? Give one example to explain its use.
29. Discuss the concept of free net and its importance.
30. What are domain name servers? What is their function?
31. What is internet address? How is it assigned?
32. Write a note on evolution of www
33. What is a web browser? List and compare different available web
browsers



22
 2
HTML5

Unit Structure :

2.0 Objectives
2.1 Introduction
2.2 Why HTML5?
2.3 Formatting text by using tags
2.4 Formatting text by lists
2.5 Formatting of backgrounds
2.6 Creating hyperlinks and anchors
2.7 Style sheets
2.8 CSS formatting text using style sheets
2.9 Formatting paragraphs using style sheets.
2.10 Summary
2.11 References
2.12 Exercise

2.0 OBJECTIVES:

This chapter would make you understand the following concepts:

After going through this unit, you will be able to:
 To understandthebasicconceptofHTML5
 To learn and implements the Elements, Attributes of HTML5
 To understand the fundamentals of CSS & CSS3
 To learn and implements the Elements, Attributes of HTML5

2.1 INTRODUCTION

HTML5 is the latest and most enhanced version of HTML.

HTML5 is enriched with advance features which make it easy and
interactive for developer and users. It has some brand new features which
will make HTML much easier. HTML5 is not a programming language,
but rather a mark up language.

HTML5 is cooperation between the World Wide Web Consortium

(W3C) and the Web Hypertext Application Technology Working Group
(WHATWG).

23
 HTML5 is a standard for structuring and presenting content on the
World Wide Web.

HTML5 introduces a number of new elements and attributes that

helps in building a modern website.

Features of HTML5
It allows you to play a video and audio file. You can embed audio or video
on your web pages without resorting to third-party plugins.

It allows you to draw on a canvas which supports a two-dimensional

drawing surface that you can program with JavaScript..

It facilitates you to design better forms and build web applications that
work offline.

It provides you advance features for that you would normally have to write
JavaScript to do.

New Semantic Elements: These are like <header>, <footer>, and

<section>.

HTML5 provides bidirectional communication technology for web

applications which is next-generation technology.

2.2 WHY HTML5?

A major focus of HTML5 was to give developers more flexibility,

which in turn would lead to more engaging user experiences. There are
various benefits of HTML5 and here’s why it is the future.

There is a new set of tags that works in enhancing your HTML

code, helping make it increasingly meaningful.

Cross-Browser Compatibility
HTML5 is easy to implement and it works with CSS3. Today all
browsers support HTML5 tags and even IE6 understands the markup
<!doctype html> and will render the pages correctly.

Bring improvements in usability and user experience

HTML5 has several technical enhancements and improved features
for web And with HTML5 code, web developer can easily design better
applications and dynamic websites which result in better user experience
and usability.

Offline Browsing
HTML5 also offers offline browsing, which means that visitors can
load certain elements on a web page without an active internet connection.
With HTML5 offline caching we can still load core elements of the
websites and you can view them offline.
24
Video and Audio Support
With HTML5 technology, we no longer need to rely upon third-
party plugins in order to render audio and videos. You can forget about
Flash Player and other third-party media players and plugins. You can
make your videos and audio easily accessible with the new HTML5
<video> and <audio> tags.

2.3 FORMATTING TEXT BY USING TAGS

These HTML 5 tags (elements) provide a better document

structure.HTML5 Formatting is a method of text formatting for a better
appearance and look.

HTML5 allows us to format text without using the CSS.

This list shows all HTML 5 tags in alphabetical order with description.
Tag Description

<!DOCTYPE> This tag is used to inform the browser about the

version of HTML used in the document.

<article> This element is used to define an independent piece of

content in a document, that may be a blog, a magazine
or a newspaper article.

<header> It defines a header for a section.

<main> It defines the main content of a document.

<section> It defines a section in the document.

<figcaption> It is used to define a caption for a <figure> element.

<figure> It defines a self-contained content like photos,

diagrams etc.

<footer> It defines a footer for a section.

<!DOCTYPE> tag:
HTML <!DOCTYPE> tag is used to inform the browser about the
version of HTML used in the document. It is called as the document type
declaration (DTD).

<!DOCTYPE> is not a tag/element, it just an instruction to the browser

about the document type.
It is a null element which does not contain the closing tag, and
must not include any content within it.
25
Syntax
<!DOCTYPE html>
An example of HTML document with doctype declaration.
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
</head>
<body>
This is the content of the document.
</body>
</html>

<article> tag :
The HTML <article> tag defines an independent self-contained
content in a document, page, application or a site.

The article tag content makes sense on its own. It is independent

and complete from other content shown on the page. It is used on News
story, blog post, article, Social post, comment etc.

Syntax
<article> ... </article>
The example below shows the <article>tag .
<article>
<h1>Introduction to HTML5</h1>
<p>. HTML5 is enriched with advance features which make it easy and
interactive for developer and users..</p>
</article>

HTML5 <header> Tag:

The <header> element represents the header of a document or a section. A
header should contain title and heading information about the related
content.

Syntax
<header> ... </header>
The example below shows the <header>tag .
<header>
<h2>Sports</h2>
<p>Cricket sport is World's no.1 sport all over the world</p>
</header>

HTML Main Tag:

HTML <main> tag is used to represent the main content of the <body>
tag.
The <main> tag is written within <body> tag. It is used to accurately
describe the primary content of a page.
The content of the main tag is directly related to the central topic of the
document.
26
Syntax
<main> ... </main>

The example below shows the <main>tag .

<main>
<h1>Introduction to HTML5</h1>
<p>. HTML5 is enriched with advance features which make it easy and
interactive for developer and users..</p>
</main>

HTML5 <section> Tag

The<section> tag is used to define sections in a document. When you put
your content on a web page, it may contains many chapters, headers,
footers, or other sections on a web page.

Syntax
<section> ... </section>
The example below shows the <section>tag .
<section>
<h1>Introduction to HTML5</h1>
<p>. HTML5 is enriched with advance features which make it easy and
interactive for developer and users..</p>
</section>

HTML5 <figcaption> Tag

The <figcaption> element is used to provide a caption to an image.
It is an optional tag and can appear before or after the content within the
<figure> tag.

Syntax
<figcaption> ... </figcaption>
The example below shows the <section>tag .
<figure>
<imgsrc="discovery.jpg" alt="Space Shuttle">
<figcaption>NASA - Space Shuttle Discovery</figcaption>
</figure>

2.4 FORMATTING TEXT BY LISTS

HTML lists allow web developers to group a set of related items in

lists.HTML Lists are used to specify lists of information. All lists may
contain one or more list elements. There are three different types of
HTML lists:

 Ordered List or Numbered List (ol)

 Unordered List or Bulleted List (ul)
 Description List or Definition List (dl)

27
Ordered List or Numbered List:
In the ordered HTML lists, all the list items are marked with
numbers by default. It is known as numbered list also. The ordered list
starts with <ol> tag and the list items start with <li> tag.
<ol>
<li>Sachin</li>
<li>Kapil</li>
<li>Rahul</li>
<li>Rohit</li>
</ol>

Unordered List or Bulleted List:

In HTML Unordered list, all the list items are marked with bullets.
It is also known as bulleted list also. The Unordered list starts with <ul>
tag and list items start with the <li> tag.
<ul>
<li>Sachin</li>
<li>Kapil</li>
<li>Rahul</li>
<li>Rohit</li>
</ul>

Description List or Definition List:

HTML Description list is also a list style which is supported by
HTML and XHTML. It is also known as definition list where entries are
listed like a dictionary.
The HTML definition list contains following three tags:
<dl> tag defines the start of the list.
<dt> tag defines a term.
<dd> tag defines the term definition (description).
<dl>
<dt>HTML5</dt>
<dd>HTML5 is the latest and most enhanced version of HTML.</dd>
</dl>

2.5 FORMATTING OF BACKGROUNDS

There are a couple of properties you can use to define color –

HTML background-color and HTML color. As the name suggests, the first
one is used to change the color of the background. By using the simple
color property, you will change the color of the text.

The background-color property provides a color for the

background of the text, but not for the whole document. If you wish to
change the HTML color for the whole page, you should use the bgcolor
attribute in the opening tag of the <body> section:

28
 HTML provides you following two good ways to decorate your
webpage background.
 HTML Background with Colors
 HTML Background with Images

Html Background with Colors:

The bgcolor attribute is used to control the background of an HTML
element, specifically page body and table backgrounds.

Syntax
<tagnamebgcolor = "color_value"...>
The example below shows the <bgcolor>attribute.
<table bgcolor = "yellow" width = "100%">
<tr>
<td>

This background is yellow

</td>
</tr>
</table>

Html Background with Images:

The background attribute can also be used to control the background of an
HTML element, specifically page body and table backgrounds.

Syntax
<tagname background = "Image_url"...>
The example below shows the < background > attribute.
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>

This background is filled up with HTML image.

</td></tr>
</table>

2.6 CREATING HYPERLINKS AND ANCHORS:

HTML links are hyperlinks. You can click on a link and jump to
another document. The HTML <a> tag defines a hyperlink. To make a
hyperlink in an HTML page, use the <a> and </a> tags, which are the tags
used to define the links.

Syntax
<a href = "...........">Hyperlink Text </a>
The example below shows the < a > tag.
<a href="Next.html">Next Page</a>

The HTML anchor tag defines a hyperlink that links one page to
another page. It can create hyperlink to other web page as well as files,

29
location, or any URL. The href attribute is used to define the address of
the file to be linked.

If we want to open that link to another page then we can use target
attribute of <a> tag. With the help of this link will be open in next page.
Syntax
<a href = "...........">Hyperlink Text </a>
The example below shows the < a > tag.
<a href="First.html">Home Page</a>

2.7 STYLE SHEETS

Cascading Style Sheets (CSS) is a style sheet language used for

describing the look and formatting of a document written in a mark-
uplanguage.
CSS describes how HTML elements are to be displayed on screen.
CSS is a formatting language used to provide more customized
web pages and make it easier to make multiple pages use the same style.
CSS is a web development technology that stands behind the look-
and-feel of every web page.
How to use cascaded style sheets(CSS) with HTML?
There are three primary way to use style sheets
 Inline style sheets
 Embedded style sheets
 Linked style sheets

Inline style sheets:

This approach develop existing HTML, tags within a standard HTML
documents & adds a specific style to the information controlled by that
tag.

In this method the indentation of a single paragraph using the

style=“X” attribute within the <p>tag.
Another method of achieving this is combining the <span>tag
And style=“x” attribute.
Here is an inline style example : <spanstyle=“font: 15ptArial”>
Example of Inline Style Sheets:
<P style="font-size: x-large; color: #ff9900"> Using inline style sheets -or
is that inlinestyles?
</p>

Embedded style sheets:

This method allows for the control of individual pages.
The rules specified here can be used for the current document.
30
It uses the <style> tags along with its companion tag</style>. The STYLE
element requires the TYPE attribute to tell the browser which style
language is being used.
<style>p { font-family: Arial, Helvetica, Times New Roman, sans-serif ;}
</style>

External or Linked style sheets:

An external style sheet is separate files where you can declare all the
styles that you want to use on your website.
You then link to the external style sheet from all your HTML pages.
This means you only need to set the styles for each element once.
You can update style of your website,
<style>
p { font-family: Arial, Times new roman, sans-serif ;}
</style>
A save the file using the .cssextension
import a CSS file:
<link rel="stylesheet" href="external_sheet.css"type="text/css">
@import"external_sheet.css ";
@importurl("external_sheet.css");

2.8 FORMATTING TEXT WITH CSS

CSS provides several properties that allows you to define various

text styles such as color, alignment, spacing, decoration, transformation
very easily and effectively.

The commonly used text properties are: text-align, text-decoration,

text-transform, text-indent, line-height, letter-spacing, word-spacing.

Text Color
The color of the text is defined by the CSS color property.
body {
color: #434343;
}

Text Alignment:
The text-align property is used to set the horizontal alignment of
the text.Text can be aligned in four ways: to the left, right, centre or
justified.
h1 {
text-align: center;
}
p{
31
text-align: justify;
}

Text Decoration:
The text-decoration property is used to set or remove decorations
from text. This property accepts one of the following values: underline,
overline, line-through, and none.
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}

Text Transformation:
The text-transform property is used to set the cases for a text.Using
this property you can change an element's text content into uppercase or
lowercase letters.
h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}
h3 {
text-transform: lowercase;
}
Text Indentation:
The text-indent property is used to set the indentation of the first
line of text within a block of text. The size of the indentation can be
specified using percentage (%), length values in pixels, ems.
p{
text-indent: 100px;
}

2.9 FORMATTING PARAGRAPHS USING STYLE

SHEETS:

Formatting is used to set options for paragraphs such as alignment,

indentation, and spacing.

indent: It can be set left and right only. Creates space that represents the
distance between the edge of the frame and content.
32
margin: It can be set top, bottom, left and right. Creates space that
represents the distance between the indent and the border.
border: It can be set top, bottom, left and right. A visual effect that
represents the distance between the margin and padding.
padding: It can be set top, bottom, left and right. Represents the distance
between the border and content.
Single line css using style attribute:
<p style="text-align:right">This is some text in a paragraph.</p>
Style paragraphs with CSS:
<style>
p{
color: navy;
text-indent: 30px;
text-transform: uppercase;
}
</style>

2.10 SUMMARY

 HTML5 chapter covers the key web components driving the future of
the Web. Harness the power of HTML5 to create web apps and
solutions that deliver state-of-the-art media content and interactivity
with new Audio, Video, and Canvas elements.
 HTML5 technologies are essential knowledge for today's web
developers and designers. New APIs such as Local Storage,
Geolocation, Web Workers, and more expand the Web as a platform,
allowing for desktop-like applications that work uniformly across
platforms

2.11 REFERENCES

 HTML5 Unleashed by Simon Sarris

 HTML and CSS for Beginners with HTML5 by Mark Lass off
 HTML5 Beginner to Professional Step by Step Training Guide by
Rajesh kumar.

2.11 EXERCISE

1) What do you understand by HTML tags? How many tags are required
to create a web page in HTML5?
2) Explain the various formatting tags in HTML5.
3) Explain the various new tags introduced by HTML5 in Media
Elements.

33
4) What is the correct usage of the following HTML5 semantic elements?
5) How many ways can a CSS be integrated as a web page?
6) What benefits and demerits do External Style Sheets have?
7) What are the limitations of CSS?
8) Explain what are the components of a CSS Style?
9) What do you mean by CSS selector?
10) Which property is used for controlling the image position in the
background?
11) What is the main difference between class selectors and id selectors?
12) Which property of a table is used to the appearance of the adjacent
borders?
13) How many formats you can display a CSS colour?
14) What do you mean by animation in CSS?
15) What are pseudo elements?



34
 UNIT - 2

3
NAVIGATION
Unit Structure
3.0 Objectives
3.1 Introduction
3.2 Planning site organization
3.3 Creating text based navigation bar
3.4 Creating graphics based navigation bar
3.5 Creating image map
3.6 Redirecting to another URL
3.7 Summary
3.8 Bibliography
3.9 Unit End Exercise

3.0 OBJECTIVES

● The objective of the chapter is as follow

● To get familiar with various Navigation bar
● To understand the creation of image map
● To understand the redirection to another URL

3.1 INTRODUCTION

● The provision of navigation aids in hypertext documents is very

important.
● When reading a book, people start at a particular page and read the
subsequent pages in order.
● Navigation aids prevent users from losing their place. Perusing a
catalogue might not be as linear an activity, but the page numbers,
table of contents and the index provide the means to navigate
backwards and forwards, and to jump to arbitrary pages.

3.2 PLANNING SITE ORGANIZATION

 A website is a collection of related web pages, including multimedia

content, typically identified with a common domain name, and
published on at least one web server.

35
Types of web navigation
 The use of website navigation tools allow for a website's visitors to
experience the site with the most efficiency and the least
incompetence.
 A website navigation system is analogous to a road map which enables
webpage visitors to explore and discover different areas and
information contained within the website.
 There are many different types of website navigation: Hierarchical
website navigation the structure of the website navigation is built from
general to specific.
 This provides a clear, simple path to all the web pages from anywhere
on the website.
 Global website navigation Global website navigation shows the top
level sections/pages of the website.
 It is available on each page and lists the main content sections/pages of
the website.

What is the “Look and Feel” of a Website?

 In its most basic terms, the “look and feel” of a website is how the site
looks to the user and how it feels when he or she is interacting with it.
 The “look” is defined by the many components of your website.

Site map:
 A site map (or sitemap) is a list of pages of a web site accessible to
crawlers or users.
 It can be either a document in any form used as a planning tool for
Web design, or a Web page that lists the pages on a website, typically
organized in hierarchical fashion.
 Sitemaps make relationships between pages and other content
components. It shows shape of information space in overview.
Sitemaps can demonstrate organization, navigation, and labeling
system.

3.3 CREATING TEXT BASED NAVIGATION BAR

 A text-based navigation bar is the simplest and easiest, and it is also

very user-friendly.
 On simple Web pages, text-based navigation bars are usually placed at
the top of the page, in a single horizontal line.
 Some Web designers also place a copy at the bottom of each page too,
so the visitor does not have to scroll back up to the top of a page to
access the links.

36
 A navigation bar is a user interface element within a webpage that
contains links to other sections of the website.
 We can use the navigation bar to visit other sections of the website.

Create A Top Navigation Bar:

Example:
<html>
<head>
<title> Navigation Bar </title>
</head>
<body>
<hr />
<a href="index.htm">Home</a>&nbsp;
<a href="tips.htm">Tips and Tricks</a>&nbsp;
<a href="problems.htm">Problem-Solving</a>&nbsp;
<a href="products.htm">Products</a>&nbsp;
<a href="about.htm">About Our Store</a>&nbsp;
<a href="contact.htm">Contact Us</a></p>
<hr />
</body>
</html>

Output:

Create A Bottom Navigation Bar:

To create bottom text navigation bar we just set the style class property
position: fixed;
bottom: 0;
width: 100%;
Example:
<html>
<head>
<title> Bottom Navigation Bar </title>
<style>
.navbar
{
position: fixed;
bottom: 0;
width: 100%;
}
37
</style>
</head>
<body>
<nav>
<div class="navbar">
<hr />
<a href="index.htm">Home</a>&nbsp;
<a href="tips.htm">Tips and Tricks</a>&nbsp;
<a href="problems.htm">Problem-Solving</a>&nbsp;
<a href="products.htm">Products</a>&nbsp;
<a href="about.htm">About Our Store</a>&nbsp;
<a href="contact.htm">Contact Us</a></p>
<hr />
</div>
</nav>
</body>
</html>

Output:

3.4 CREATING GRAPHICS BASED NAVIGATION BAR

 Text hyperlinks are clear and unambiguous, but not all that attractive.
 We might prefer to create a navigation bar that uses buttons or other
graphics instead of text links.
 We can create the graphics yourself in a graphics-editing program.
Follow these guidelines:

38
  Keep the size of each button small (150 pixels wide at the most).
 Make each button the same size and shape. They should vary only
in the text on them.
 Save each button as a separate file in GIF or JPG format.
 There are thousands of sites with free graphical buttons you can
download.
 Make several copies of a button you like, and then use a text tool in a
graphics-editing program to place different text on each copy.

Example:
<html>
<head>
<title> Navigation Bar </title>
</head>
<body>
<nav>
<hr>
<p style="margin:0px">
<a href="index.htm"><imgsrc="images/btn_home.gif"
style="border: none"></a>
<a href="tips.htm"><imgsrc="images/btn_store.gif"
style="border:none"></a>
<a href="problems.htm"><imgsrc="images/btn_contactus.gif"
style="border: none"></a>
<a href="products.htm"><imgsrc="images/btn_support.gif" style=
"border: none"></a>
<hr>
</nav>
</body>
</html>
Output:

3.5 CREATING IMAGE MAP

What is image mapping:

 In image mapping an image is specified with certain set of
coordinates inside the image which act as hyperlink areas to different
destinations.
 It is different from an image link since in image linking, an image
can be used to serve a single link or destination whereas in a mapped
39
 image, different coordinates of the image can serve different links or
destinations.

Elements required in Mapping an Image :

There are three basic html elements which are required for
creating a mapped image.
1. Map: It is used to create a map of the image with clickable areas.
2. Image: It is used for the image source on which mapping is done.
3. Area: It is used within the map for defining clickable areas.

Steps to create a mapped image:

1) Determining Image size:
 Determining the size of the image is very important because if the
size of the image is changed then the area coordinates will also
require updation.
<imgsrc="world-map-151576_960_720.png"width="960"
height="492" alt="World Map" usemap="#worldmap">

2) Creating a map for overlaying the image:

<map name="worldmap">

3) Determine the coordinates of the areas that you want to map:

It can be done in three shapes which are rectangle, circle and polygon.
Coordinates can be found easily by using MS-Paint.
<area shape="rect" coords="184, 36, 272, 158" alt="north america"

Example:
<! DOCTYPE html>
<html>
<h3>Mapping an Image
<body>
<p>Click on the different continents of the map to know about
them.</p>
<imgsrc="world-map-151576_960_720.png" width="960"
height="492" alt="World Map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="184, 36, 272, 158" alt="north america"
href="https://en.wikipedia.org/wiki/North_America">
<area shape="rect" coords="282, 215, 354, 367" alt="south america"
href="https://en.wikipedia.org/wiki/South_America">
<area shape="rect" coords="506, 151, 570, 333" alt="africa"
href="https://en.wikipedia.org/wiki/Africa">
<area shape="rect" coords="618, 42, 791, 162" alt="asia"
href="https://en.wikipedia.org/wiki/Asia">
40
 <area shape="rect" coords="509, 44, 593, 110" alt="europe"
href="https://en.wikipedia.org/wiki/Europe">
<area shape="rect" coords="786, 288, 862, 341" alt="australia"
href="https://en.wikipedia.org/wiki/Australia_(continent)">
<area shape="rect" coords="249, 463, 760, 488" alt="antartica"
href="https://en.wikipedia.org/wiki/Antarctica">
</map>
</body>
</html>
Output:

3.6 REDIRECTING TO ANOTHER URL

 To redirect from an HTML page to another page you can use

the <meta> tag.
 It is the client-side redirection; the browsers request the server to
provide another page.
 Also, use the http-equiv attribute to provide an HTTP header for the
value of the content attribute.
 The value in the content attribute is the number of seconds, you want
the page to redirect after.
 For immediate loading, you can set it to 0. Some browsers don’t
correctly render the refresh tag.
 There the user may see a message before the next page loading.
 Some old browsers don’t correctly refresh when you add such quick
links. In that case, you should add an anchor link to let the user
follow to next page.

41
Syntax:
<meta http-equiv = "refresh" content = " time ;url = l
Example:
<! DOCTYPE html>
<html>
<head>
<title>HTML Redirect</title>
<meta http-equiv="refresh"
content="5; url = https://old.mu.ac.in/distance-open-learning/" />
</head>

<body>
<h1 style="text-align: center; color: green ;">
IDOL Mumbai University
</h1>

<p style="text-align: center;">

If your browser supports Refresh,
You’ll be redirected to IDOL Mumbai
Homepage, in 5 seconds.
</p>
</body>
</html>

Output:

Supported Browsers: The browsers supported by HTML Redirect are

listed below:
 Google Chrome
 Internet Explorer
 Firefox
 Safari
 Opera

3.7 SUMMARY

 The html <nav> element represents a section of a page whose purpose

is to provide navigation links, either within the current document or to
other documents.
 Common examples of navigation sections are menus, tables of
contents, and indexes.

42
3.8 BIBLIOGRAPHY

1.https://learning.oreilly.com/library/view/microsoft-html5-
step/9780735656543/ch10s03.html
2.https://www.geeksforgeeks.org/html-mapping-image/
3.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

3.9 UNIT END EXERCISE

1. Explain how to create text based top navigation bar in details.

2. Create text based bottom navigation bar of four link.
3. Write a short note on graphical based navigation bar.
4. Explain image mapping concept in details with examples.
5. Explain how to redirect from one url to another url.



43
 4
LAYOUTS
Unit Structure :
4.0 Objectives
4.1 Introduction
4.2 HTML5 Semantic Tags
4.3 Creating Divisions
4.4 Creating HTML5 Semantic Layout
4.5 Positioning and Formatting Divisions
4.6 Summary
4.7 Bibliography
4.8 Unit End Exercise

4.0 OBJECTIVES

 Understand tags and the new HTML semantic tags in breaking a page
into sections.
 Learn to place the division in a specified location within your page.
 Create a division-based layout to your web page
 Create a HTML5 Semantic layout to your web page

4.1 INTRODUCTION

A web page being rendered in the browser consists of many things

- logo, informative text, pictures, hyperlinks, navigational structure and
more. HTML5offers a set of mark-up elements that allow you to create a
structured layout for web pages. These elements are often termed as
Semantic Mark-up because they convey their meaning and purpose clearly
to the developer and to the browser.

4.2 HTML5 SEMANTIC TAGS

Semantic HTML tags are those that clearly describe their meaning
in a human- and machine-readable way.

Tags such as <header>, <footer> and <article> are all considered

semantic because they accurately describe the purpose of the tags and the
type of content that is inside them.

44
List of new semantic tags:
The semantic tags added in HTML5 are:

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>

<article>: It contains independent content which doesn’t require any other

context.

Example: Blog Post, Newspaper Article etc.

<!DOCTYPE html>
<html>
<head>
<title>Article Tag</title>
<style>
h1 {
Color: #006400;
font-size:50px;
Text-align: left;
}
p{
font-size:25px;
text-align: left;
margin-top: -40px;
}
</style>
</head>
<body>
<article>
<h1>IDOL </h1>
<p>A Distance and Open Learning School for students</p>
</article>
</body>
</html>

Output:

45
 In this way we can use other semantic tags for accomplishment of
our purpose.

<aside>: It is used to place content in a sidebar i.e. aside the existing

content. It is related to surrounding content.

<details> and <summary>: “details” defines additional details that the

user can hide or view. “summary” defines a visible heading for a “details”
element.

<figure> and <figcaption>: These are used to add an image in a web

page with small description.

<header>: As the name suggests, it is for the header of a section

introductory of a page. There can be multiple headers on a page.

<footer>: Footer located at the bottom of any article or document, they

can contain contact details, copyright information etc. There can be
multiple footers on a page.

<main>: It defines the main content of the document. The content inside
main tag should be unique.

<section>: A page can be split into sections like Introduction, Contact

Information, Details etc and each of these sections can be in a different
section tag.

<nav>: It is used to define a set of navigation links in the form of

navigation bar or nav menu.

<mark>: It is used to highlight the text.

4.3 CREATING DIVISIONS

HTML provides you a lot of ways to layout your page better. Web
designers today are geared towards a more appealing way of separating
content into sections which is called the division-based layout.

What is <div> tag?

 The <div>tag is used to establish separate divisions or areas of your
page.
 The <div>tag is used to group block-elements to format them with
CSS.
 The div tag is known as Division tag.
 The div tag make divisions of content in the web page like (text,
images, header, footer, navigation bar, etc).
 The div tag has both open(<div>) and closing (</div>) tag

46
 It is mandatory to close the tag.
 Most websites have put their content in multiple columns, multiple
columns can be created by using <div> tags.
Advantages of the Division-based Layout:
 You can place layout styles externally, and then make the style changes
to many pages at once simply by modifying the style sheet.
 It reduces the number of lines of code needed to produce a page.
The id attribute:
 The id attribute can be used with any tag element. When used along
with the <div>tag, it will identify and define an area of your page.
 As a unique identifier, the id’s value should only be used once on your
page.
 Start the id value with a letter followed by any of these: letters, number
digits (1- 9), dashes (-) and underscore (_). Don’t use space or special
characters.
 The value is case-sensitive.
<div id=” title”>is different from <div id=” Title”>

Example: Creating Divisions in Web Page

<!DOCTYPE html>
<html>
<head>
<title>Web Page Divisions</title>
</head>
<body>
<div id="masterhead">
<p>Master head </p>
</div>
<div id="top-navigation">
<p>Top navigation </p>
</div>
<div id="web-contentbody">
<p>Web Content body </p>
</div>
<div id="bottom-navigation">
<p>Bottom Navigation </p>
</div>
<div id="copyright-section">
<p>Copyright Section </p>
</div>
</body>
</html>

47
Output:

The output does not show a layout. You can clearly see how your
page is divided into different sections.

4.4 CREATING HTML5 SEMANTIC LAYOUT

A web page being rendered in the browser consists of many things
- logo, informative text, pictures, hyperlinks, navigational structure and
more.

HTML5offers a set of markup tags that allow you to create a

structured layout for web pages.

These tags are often termed as Semantic Markup because they

convey their meaning and purpose clearly to the developer and to the
browser.
HTML5 includes a set of markup tags have meaningful names so
that just by looking at these elements you get a clear idea about their
content. These semantic tags of HTML5 we already discussed, now we
focusing how to make layout by using it.

The following figure shows a sample page layout designed using

these elements: This figure shows a typical arrangement of various
elements. Note that their exact location on a page is purely dependent on
the layout. For example, the <aside> element can be placed on the left-
hand side of the <section> or even above or below it.

48
 Figure 4.1 Semantic tags layout

Example: Complete Semantic layout of web page

<!DOCTYPE html>
<html>
<head>
<title> HTML5 Semantic Layout</title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>This is page heading</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<article>
<h1>This is article heading</h1>
<p>
Hi! I am in article section

</p>
</article>
<aside>
<figure>
<imgsrc="Images/laptop.jpeg" height="100px" width="60px" />
<figcaption>Figure caption goes here</figcaption>
49
</figure>
<p>
I aside tag
</p>
</aside>
<section>
<h1>This is a section heading</h1>
<p>
Hello world! Hello world! Hello world!

</p>
</section>
<footer>
<hr />
Copyright (C) 2021. All rights reserved.
</footer>
</body>
</html>

Creating CSS for above Example Web Page:

The example web page that you created in the preceding section has
stylesheet.css linked with it.
article
{
padding:5px;
border: dotted 3px #ff006e;
margin-top:5px;
}

header
{
padding:0px;
text-align: center;
}

aside
{
margin-top:5px;
background-color: #f0eaea;
padding:5px;
text-align: center;
font-style: italic;
border: double 3px #b200ff;
}

50
section
{
padding:5px;
border: dashed 3px #0026ff;
margin-top:5px;
}

footer
{
padding:5px;
text-align: center;
font-weight: bold;
}

nav
{
text-align: center;
}
ul li
{
display: inline;
padding-left:5px;
padding-right:5px;
text-align: left;
font-size:16px;
font-weight: bold;
}

Output:

51
4.5 POSITIONING AND FORMATING DIVISIONS
If you insert an additional <aside>division to your web page
layout, and place your division beside another either to the right or left,
you can easily use the float style rule.

Positioning Style –
If you want to place a division on a specific spot of your page, you
can use the position style rule.

There are Three possible values for a position style rule:

1. Static - position: static; is not positioned in any special way; it is always

positioned according to the normal flow of the page.

2. Absolute value– position: absolute;

This value specifies a fixed position with the respect to its parent
element or tag. Usually, the tag as the parent element.

3. Relative value – position: relative,

This value is compensated from the element’s natural position.
Other elements on the page are not affected, even if the new position cause
overlap.

4. Fixed value - position: fixed;

This value specifies a fixed position within the browser window
that doesn’t change even when the display is scrolled up or down.

Position Style:
You must use each of these values in combination with top, right,
bottom, and /or left style rule that specifies the location to which the
position style rules refers.

Example: To position a section at exactly 100px from the top of the page
and 200px from the left side, the syntax should be:
<section style= “top:100px; left:200px; position: absolute”>

Horizontal Lines
Horizontal Lines can be useful as a visual divider between sections of text
in a web page.
You can add a horizontal line after your header then add another
horizontal line before your footer.
This will clearly show your division in your web page.
You can simply add the horizontal line <hr> (horizontal rule) tag where
you want the line to appear.

52
4.6 SUMMARY
This chapter covered semantic mark-up elements of HTML5 that
can be used in the proper layout of the web pages. Unlike the <div>
element, the semantic elements are intended to be used for a specific
purpose. The elements we covered in this article include <header>, <nav>,
<footer>, <section>, <article> and <aside>.as well as we covered the div
tags with positioning.

4.7 BIBLIOGRAPHY
1. https://www.freecodecamp.org/news/semantic-html5-elements/
2. https://www.geeksforgeeks.org/html5-semantics/
3.https://www.slideshare.net/grayzon21/html5-create-divisions-in-a-web

4.8 UNIT END QUESTIONS

1. Create the structure of from pre-designed websites using HTML5
semantic elements.
2. ExplainHTML5 Semantic Tags in details.
3. Explain positioning in divisions with examples.
4. What is division tags and explain how to use it?
5. Explain difference between <div> tag and semantic tag in details with
examples.



53
 5
TABLES
Unit Structure
5.0 Objectives
5.1 Introduction
5.2 Creating simple table
5.3 Specifying the size of the table
5.4 Specifying the width of the column
5.5 Merging table cells
5.6 Using tables for page layout
5.7 Applying table borders
5.8 Applying background and foreground fills
5.9 Changing cell padding
5.10 Spacing and alignment
5.11 Summary
5.12 Bibliography
5.13 Unit End Exercise

5.0 OBJECTIVES

 To create basic tables

 Understand some arguments with table Height, width, border, Cell text
alignment.
 To gain basic familiarity with HTML tables.
 Understand how to apply background and foreground to tables.

5.1 INTRODUCTION

You may want to consider using HTML tables in your website. In

addition to creating HTML tables to present data in rows and columns,
you can also create HTML tables to organize information on your web
page.

The process of creating an HTML table is similar to the process

that you used to create your web page and any elements that you may have
already included in your page, such as links or frames. Coding HTML
tables into your web page is fairly easy since you need only understand a
few basic table codes.

54
5.2 CREATING SIMPLE TABLES

The basic structure of an HTML table consists of the following tags:

Table tags: <table></table>
Row tags: <tr></tr>
Cell tags: <td></td>
 Constructing an HTML table consists of describing the table between
the beginning table tag, <table>, and the ending table tag, </table>.
 Between these tags, you then construct each row and each cell in the
row.
 To do this, you would first start the row with the beginning row tag,
<tr>, and then build the row by creating each cell with the beginning
cell tag, <td>, adding the data for that cell, and then closing the cell
with the ending cell tag, </td>.
 When you finish all of the cells for a row, you would then close the
row with the ending row tag, </tr>.
 Then, for each new row, you would repeat the process of beginning the
row, building each cell in the row, and closing the row.

Example:
The following table is an example of a basic table with two rows and two
columns of data.

Html code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td>Department</td>
<td>Subject</td>
</tr>
<tr>
<td>IDOL</td>
<td>Web Programming</td>
</tr>

</table>
</body>
</html>

55
Output:

5.3 SPECIFYING THE SIZE OF THE TABLE

 The width attribute specifies the width of a table. The width can be set
either as an absolute value in pixels, or as in percentage (%).
 If the width attribute is not set, it will take up the space of longest
single word in each cell.
 Table width in pixels:<table width=100>
 Table width in percentage (%): <table width=100%>
Example:
Html code:
<html>
<body >
<table width=100>
<tr>
<td>
Table width is 100 pixels
</td>
</tr>
</table>
<br>
<table width=100%>
<tr>
<td>
Table width is 100 %
</td>
</tr>
</table>
</body>
</html>

Output:

 The above HTML code display two tables, one is 100-pixel width and
another one is 100% width.
56
 First table is only 100-pixel width in any changes in browser window
state, while other table will always stretch the full width of the
window.

5.4 SPECIFYING THE WIDTH OF THE COLUMN

 We use the <col> element to specify the width of column.

 This element is to be placed in the <table> tag
 we use the style attribute to define the width of the columns.
 The <col> element is a self-closing element and we need one for every
columns of table.

Example:
Html code
<html>
<head>
</head>
<body>
<table border="1" width="100%">
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
<tr>
<th>Fruits</th>
<th>Vitamin A</th>
<th>Vitamin C</th>
</tr>
<tr>
<th>Apples</th>
<td>98 ui</td>
<td>8.4 mg</td>
</tr>
<tr>
<th>Oranges</th>
<td>295 ui</td>
<td>69.7 mg</td>
</tr>
</table>
</body>
</html
Output:

57
5.5MERGING TABLE CELLS

 We can merge two or more table cells in a column by using

the colspan attribute in a <td> HTML tag (table data).
 To merge two or more row cells, use the rowspan attribute.

Colspan:
 The colspan attribute defines the number of columns a cell should span
(or merge) horizontally.
 That is, we merge two or more Cells in a row into a single Cell.
<td colspan=2 >
The above code will merge two Cells as one Cell horizontally.

HTML code:
<html>
<body >
<table border=1 >
<tr>
<td colspan=2 >Merge</td>
</tr>
<tr>
<td>Third Cell</td>
<td>Forth Cell </td>
</tr>
</table>
</body>
</html>

 Colspan (Column Span) merged Cells horizontally that is from left to

right.
 The default value of Colspan is 1.

Rowspan:
 The rowspan attribute specifies the number of rows a cell should span
vertically.
58
 That is, we merge two or more Cells in the same column as a single
Cell vertically.
<td rowspan=2 >

The above code will merge two Cells as one Cell vertically.

HTML code:
<html>
<body >
<table border=1 >
<tr>
<td>First Cell</td>
<td rowspan=2 >Merged</td>
</tr>
<tr>
<td valign=middle>Third Cell </td>
</tr>
</table>
</body>
</html>
Rowspan merged Cells vertically, that is from top to bottom.

5.6 USING TABLES FOR PAGE LAYOUT

 HTML tables are most often used to define the layout of an entire Web
page.
 If we want to design a page that displays text in newspaper style
columns, or separates the page into distinct sections, we’ll find tables
an essential and useful tool.

Figure 5.1 table layout

59
5.7 APPLYING TABLE BORDERS

 By default, tables that you create do not have visible borders (a line
around the table that visually defines the table).
 Borders can help to make your table stand out more and adds visual
interest.
 After creating an HTML table, you should add a border to it,

Add Table Borders Using HTML5

<table border=6px>
<tr>
<td>Red</td>
<td>Black</td>
<td>Blue</td>
</tr>
<tr>
<td>Green</td>
<td>Gold</td>
<td>Silver</td>
</tr>
</table>

Output:

5.8 APPLYING BACKGROUND AND FOREGROUND

FILLS

 Each table, row, and cell is its own distinct area, and each can have its
own background.
 For example, you might want to apply a different color background to
a heading row to make it stand out, or change the color of every other
line in a listing to help visitors track a line across the table.
 Table elements support the bgcolor attribute.
 To specify a background color for all of the cells in a table, all of the
cells in a row, or for individual cells, by adding the bgcolor attribute to
either the <table>, <tr>, <td>, or <th> tags as follows:
<table bgcolor= “color”>
<tr bgcolor= “color”>
<td bgcolor= “color”>
<th bgcolor= “color”>
 color is either a color name or hexadecimal color value

60
Specifying Table, Row, and Cell Colors:
Html code
<html>
<table border="5" bgcolor="white">
<caption><b>State and Capital City</b></caption>
<tr bgcolor="yellow">
<th > State</th>
<th> City</th>
</tr>
<tr >
<td bgcolor="lightblue" > Maharashtra</td>
<td> Mumbai</td>
</tr>
<tr >
<td > Karnataka</td>
<td bgcolor="lightgreen"> Bangalore</td>
</tr>
</table
</html>
Output:

The bordercolor Attribute:

 By default, table borders are displayed in two shades of gray that
create a three-dimensional effect.
 The syntax for the bordercolor attribute is:
<table bordercolor= “color”>
color is an HTML color name or hexadecimal color value

Applying a Table Background:

 Add a background image to your tables using the background
attribute.
 A background can be applied to the entire table or to a cell.
<table background=” parch.jpg”>

Applying a Table foreground:

 Foreground means we can apply text font color by using style attribute
<table style="color: blue;”>
<trstyle="color: green;”>
<tdstyle="color: red;”>

61
Example:
<html>
<table border="7" bordercolor="lightblue" background="parch.jpg" >
<caption><b>State and Capital City</b></caption>
<tr style="color: blue;">
<th > State</th>
<th> City</th>
</tr>
<tr >
<td > Maharashtra</td>
<td> Mumbai</td>
</tr>
<tr >
<td > Karnataka</td>
<td style="color: red;"> Bangalore</td>
</tr>
</table
</html>
Output:

5.9CHANGING CELL PADDING

 To control the space between the table text and the cell borders, add
the cellpadding attribute to the table tag.
 The syntax for this attribute is:
<table cellpadding=“value”>
– value is the distance from the table text to the cell border,
as measured in pixels
– the default cell padding value is 1 pixel
 Cell padding refers to the space within the cells.

Figure 5.2 Cell padding values

62
5.10 PACING AND ALIGNMENT

 The cellspacing attribute controls the amount of space inserted

between table cells.
 The syntax for specifying the cell space is:
<table cellspacing= “value”>
– value is the width of the interior borders in pixels
– the default cell spacing is 2 pixels
– Cell spacing refers to the space between the cells.

Figure 5.3 Cell spacing values

Example of Cell Padding, pacing and alignment:

<html>
<table border="5" bgcolor="white"cellspacing="4" cellpadding="3"
align="center">
<caption><b>State and Capital City</b></caption>
<tr bgcolor="yellow">
<th > State</th>
<th> City</th>
</tr>
<tr >
<td bgcolor="lightblue" > Maharashtra</td>
<td>Mumbai</td>
</tr>
<tr >
<td > Karnataka</td>
<td bgcolor="lightgreen"> Bangalore</td>
</tr>
</table>
</html>
Output:

63
5.11 SUMMARY

 Use the HTML <table> element to define a table.

 Use the HTML <tr> element to define a table row.
 Use the HTML <td> element to define a table data.
 Use the HTML <th> element to define a table heading.
 Use the HTML <caption> element to define a table caption.
 Use the CSS border property to define a border.
 Use HTML <table width> to define size of table
 Use HTML <table cellpadding>,<table cellspacing> to define space
within cell and between cell.

5.12 BIBLIOGRAPHY

1.https://its.temple.edu/creating-tables-html
2.http://www.corelangs.com/html/tables/width-height.html
3.https://htmlreference.io/tables/
4.http://www.corelangs.com/html/tables/colspan-rowspan.html
5.https://www.teachucomp.com/add-table-borders-using-
html5/#:~:text=To%20assign%20a%20border%2C%20insert,and%20not
%20the%20individual%20cells.

5.13 UNIT END QUESTIONS

1. What is the use of rowspan and colspan attribute?

2. What is the importance of table tag in web
3. What are the attributes that can be used in table tag
4. Explain cell padding and cell spacing in details with example.
5. Explain background and foreground attributes of table with examples.




64
 6
FORMS AND MEDIA
Unit Structure
6.0 Objectives
6.1 Introduction
6.2 Creating basic form
6.3 Using check boxes and option buttons
6.4 Creating lists
6.5 Additional input types in HTML5
6.6 Audio and Video in HTML5
6.7 HTML multimedia basics
6.8 Embedding video clips
6.9 Incorporating audio on web page
6.11 Summary
6.12 Bibliography
6.13 Unit End Exercise

6.0 OBJECTIVES

1. To gain familiarity with what web forms are, what they are used for,
how to think about designing them, and the basic HTML elements
we'll need for simple cases.
2. To understand the newer input type values available to create native
form controls, and how to implement them using HTML.
3. To learn how to embed video and audio content into a webpage, and
add captions/subtitles to video.

6.1 INTRODUCTION

The first article in our series provides you with your very first
experience of creating a web form, including designing a simple form,
implementing it using the right HTML form controls and other HTML
elements, adding some very simple styling via CSS, and describing how
data is sent to a server. We'll expand on each of these subtopics in more
detail later on in the module.

65
6.2 CREATING BASIC FORMS

What are web forms?

 Web forms are one of the main points of interaction between a user
and a web site or application.
 Forms allow users to enter data, which is generally sent to a web server
for processing and storage.
 A web form's HTML is made up of one or more form controls, plus
some additional elements to help structure the overall form — they are
often referred to as HTML forms.
 The controls can be single or multi-line text fields, dropdown boxes,
buttons, checkboxes, or radio buttons, and are mostly created using
the <input> element.

Designing your form:

 Before starting to code, it's always better to step back and take the time
to think about your form.
 Designing a quick mockup will help you to define the right set of data
you want to ask your user to enter.
 We’ll build a simple contact form. Let's make a rough sketch.

 Our form will contain three text fields and one button.
 We are asking the user for their name, their e-mail and the message
they want to send.
 Hitting the button will send their data to a web server.

Implementing our form HTML:

 Creating the HTML for our form. We will use the following HTML
elements: <form>, <label>, <input>, <textarea>, and <button>.

66
 All forms start with a <form> element, like this:
<form action="/my-handling-form-page" method="post">
</form>
 This element formally defines a form.
 The action attribute defines the location (URL) where the form's
collected data should be sent when it is submitted.
 The method attribute defines which HTTP method to send the data with
(usually get or post).
 The data entry portion contains three text fields, each with a
corresponding <label>:
 The input field for the name is a single-line text field.
 The input field for the e-mail is an input of type email: a single-line text
field that accepts only e-mail addresses.
 The input field for the message is a <textarea>; a multiline text field.

Example: creating basic form

<form action="/my-handling-form-page" method="post" align="center">

<label for="name">Name :< /label>

<input type="text" id="name" name="user_name"><br><br>

<label for="mail">E-mail :< /label>

<input type="email" id="mail" name="user_email"><br><br>

<label for="msg">Message :< /label>

<textarea id="msg" name="user_message"></textarea><br><br>

<button type="submit">Send Message</button>

</form>

Output:

67
6.3 USING CHECK BOXES AND OPTION BUTTONS

<input type="checkbox">:
 The <input type="checkbox"> defines a checkbox.
 The checkbox is shown as a square box that is ticked (checked) when
activated.
 Checkboxes are used to let a user select one or more options of a
limited number of choices.

Example:
<html>
<head>
<title> Input type = "checkbox" </title></head>
<body>
<h2> input type="checkbox" </h2>
<p>Choose your Ice-cream flavours :</p>
<div>
<input type="checkbox" id="Vanilla" name="Vanilla"checked>
<label for="Vanilla">Vanilla</label>
</div>
<div>
<input type="checkbox" id="horns" name="Strawberry">
<label for="Strawberry">Strawberry</label>
</div>
</body>
</html>

Output:

Option Buttons:
 Option buttons are sometimes called Radio Buttons, and they force the
user into choosing only one item in a list, such as a Male/Female
option, or selecting a payment method.
 The Option button HTML look like this:
<INPUT TYPE="Radio" Name="Gender" Value="Male">

68
 Male
<INPUT TYPE="Radio" Name="Gender"
Value="Female">Female
 After typing the INPUT tag, the word TYPE comes next. For Option
Buttons, the type is "Radio".
 The NAME is definitely needed here, and note that the NAME for
both in our code above is "Gender".
 We use the same name for each group of option buttons we are adding
to your form.
 So if you wanted payment option buttons, the code might be this:
<INPUT TYPE="Radio" Name="payment" Value="CC">
Credit Card
<INPUT TYPE="Radio" Name="payment" Value="DC">
Debit Card
<INPUT TYPE="Radio" Name="payment" Value="PP">
PayPal
 This time, each radio button has the name "payment".
 The reason you keep the same name for each group of option buttons
is simply to distinguish one group of option buttons from another.
 The VALUE attribute is quite useful.
 When the user submits the form to us using the Submit button, these
VALUES are going to be returned.
 If we just got Radio1 and Radio2, you won't know (or won't
remember, more likely) which option the user has selected.
 Manipulating values with scripts is also a lot easier if the Value is the
same as the text the user sees.
 If you want to have a default option button selected, use the word
"Checked":
<INPUT TYPE="Radio" Name="payment" Value="CC">
Credit Card
<INPUT TYPE="Radio" Name="payment" Value="DC">
Debit Card
<INPUT TYPE="Radio" Name="payment"
Value="PP" Checked>PayPal
 Attaching a label to each button is very useful for your visitors.
 When the label is clicked it will select the option button it is named
for:
Example:
<html>
<head>
<title> Input type = "Option" </title></head>
<body>
<h2> input type="Option" </h2>
69
<p>Choose your Payment option :</p>
<div>
<LABEL FOR="R1">Credit Card</LABEL>
<INPUT TYPE="Radio" Name="payment" ID="R1"
Value="Credit Card">
</div>
<div>
<LABEL FOR="R2">Debit Card</LABEL>
<INPUT TYPE="Radio" Name="payment" ID="R2" Value="Debit
Card">
</div
<div>
<LABEL FOR="R3">PayPal</LABEL>
<INPUT TYPE="Radio" Name="payment" ID="R3" Value="PayPal"
Checked>
</div>
</body>
</html>

Output:

6.4 CREATING LIST

HTML offers three ways for specifying lists of information.

All lists must contain one or more list elements.

The types of lists in HTML are :

 ul: An unordered list. This will list items using plain bullets.
 ol: An ordered list. This will use different schemes of numbers to
list your items.
 dl: A definition list. This arranges your items in the same way as
they are arranged in a dictionary.
70
The Unordered HTML List:
 An unordered list starts with the “ul” tag.
 Each list item starts with the “li” tag.
 The list items are marked with bullets i.e small black circles by
default.

Example:
<!DOCTYPE html>
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>

Output:

The HTML Ordered List:

 An ordered list starts with the “ol” tag.
 Each list item starts with the “li” tag.
 The list items are marked with numbers by default.

Example:
<! DOCTYPE html>
<html>
<body>
<h2>Grocery List</h2>
<ol>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>

</body>
</html>

71
Output:

The HTML Description List:

 A description list is a list of terms, with a description of each term.
 The <dl> tag defines the description list, the <dt> tag defines the
term name, and the <dd> tag describes each term.

Example:
<! DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>
</html>
Output:

6.5 ADDITIONAL INPUT TYPES IN HTML5

We now look at the functionality of newer form controls which

were added in HTML5 to allow collection of specific types of data.

E-mail address field:

<input type=”email” id= “email”name=”email”>
 This type of field is set using the value email for the type attribute:

72
 When this type is used, the user is required to type a valid email
address into the field.
 Any other content causes the browser to display an error when the
form is submitted. You can see this in action in the below screenshot.

Search field:
 Search fields are intended to be used to create search boxes on pages
and apps.
 This type of field is set by using the value search for
the type attribute:
<input type=”search” id= “search” name=” search”>
 The main difference between a text field and a search field is how the
browser styles its appearance.
 Often, search fields are rendered with rounded corners; they also
sometimes display an "Ⓧ", which clears the field of any value when
clicked.
 The below screenshots show a non-empty search field in Firefox 71,
Safari 13, and Chrome 79 on macOS, and Edge 18 and Chrome 79 on
Windows 10.
 Note that the clear icon only appears if the field has a value, and,
apart from Safari, it is only displayed when the field is focused.

73
Phone number field
A special field for filling in phone numbers can be created
using tel as the value of the type attribute:
< input type=”tel”id= “tel”name=” tel”>
 When accessed via a touch device with a dynamic keyboard, most
devices will display a numeric keypad when type="tel" is
encountered, meaning this type is useful whenever a numeric keypad
is useful, and doesn't just have to be used for telephone numbers.

URL field
A special type of field for entering URLs can be created using the
value url for the type attribute:
< input type=”url” id= “url”name=” url”>
 It adds special validation constraints to the field.
 The browser will report an error if no protocol (such as http:) is
entered, or if the URL is otherwise malformed.

Numeric field:
 Controls for entering numbers can be created with
an <input> type of number.
 This control looks like a text field but allows only floating-point
numbers, and usually provides buttons in the form of a spinner to
increase and decrease the value of the control.
 Let's look at some examples. The first one below creates a number
control whose value is restricted to any value between 1 and 10, and
whose increase and decrease buttons change its value by 2.
< input type=”number” id= “number”name=” number” min= “1”
max= “10” step= “2” >
 The number input type makes sense when the range of valid values is
limited, for example a person's age or height.

Date and time pickers:

 Gathering date and time values has traditionally been a nightmare for
web developers.
 HTML date controls are available to handle this specific kind of data,
providing calendar widgets and making the data uniform.
 A date and time control is created using the <input> element and an
appropriate value for the type attribute, depending on whether you
wish to collect dates, times, or both.
 Here's a live example that falls back to <select> elements in non-
supporting browsers:

74
 <input type="datetime-local"> creates a widget to display and pick a
date with time with no specific time zone information.
< input type= “datetime-local” id= “datetime”name=” datetime”>

6.6 AUDIO AND VIDEO IN HTML5

 We are comfortable with adding simple input types to a webpage,

now we start adding video and audio players to your HTML
documents!
 In this topic we'll look at doing just that with
the <video> and <audio> elements;

The <video> element:

The <video> element allows you to embed a video very easily.

<video controls
<source src= “sample.mp4” type= “video /mp3>
<p> your browser doesn’t support HTML5 video. Here is a <a
href= “sample.mp4”> link to the video</a> instead.<p>

</video>

The features of note are:

src
In the same way as for the <img> element, the src (source) attribute
contains a path to the video you want to embed.

controls
Users must be able to control video and audio playback (it's
especially critical for people who have epilepsy.) You must either use
the controls attribute to include the browser's own control interface

The paragraph inside the <video> tags

This is called fallback content — this will be displayed if the browser
accessing the page doesn't support the <video> element, allowing us
to provide a fallback for older browsers.

The <audio> element:

The <audio> element works just like the <video> element, with a few
small differences as outlined below. A typical example might look like so:
<audio controls
<source src= “Sleep.mp3” type= “audio/mp3>
<p>your browser doesn’t support HTML5 audio. Here is a <a
href= “Sleep.mp3”> link to the audio </a>instead. <p>
</audio>

75
 This takes up less space than a video player, as there is no visual
component — you just need to display controls to play the audio. Other
differences from HTML video are as follows:
 The <audio> element doesn't support the width/height attributes —
again, there is no visual component, so there is nothing to assign a
width or height to.
 It also doesn't support the poster attribute — again, no visual
component

6.7 HTML MULTIMEDIA BASICS

 The term media refers to various means of communicating and

disseminating information, such as text, images, graphics, audio,
video, and animation.
 All these mediums of communication are collectively termed as
multimedia.

What is Multimedia?
 Multimedia comes in many different formats.
 It can be almost anything you can hear or see, like images, music,
sound, videos, records, films, animations, and more.
 Web pages often contain multimedia elements of different types and
formats.
 A combination of video and audio files can also be used in websites to
gain popularity in terms of viewership or provide information and
entertainment to the users.
 HTML helps you to add multimedia files on your website by providing
various multimedia tags.
 These tags include AUDIO, VIDEO, EMBED, and OBJECT.
 The AUDIO tag is used to display the audio file on the Web page,
whereas the VIDEO tag is used to display the video files on the Web
page.
 The EMBED and OBJECT tags display the multimedia files on a Web
page as well as embed the files from other websites.

Browser Support:
 The first web browsers had support for text only, limited to a single
font in a single color.
 Later came browsers with support for color, fonts, images, and
multimedia!

76
Multimedia Formats:
Multimedia elements (like audio or video) are stored in media files.
 The most common way to discover the type of a file, is to look at the
file extension.
 Multimedia files have formats and different extensions like: .wav,
.mp3, .mp4, .mpg, .wmv, and .avi.

6.8 EMBEDDING VIDEO CLIPS

 HTML5 has a native video element that supports three video

formats (MP4, WebM and Ogg), making it much easier to embed
videos in a webpage.
 We can define the external source for the video using a file or a URL.
 In HTML5, we can embed a video in your webpage using a pair
of <video> tags.
 It is also mandatory to define the source for the video.
 we can do it by using a simple src attribute, but it is recommended to
choose the <source> tags for that:

Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
IDOL Video Songs
</h1>
<h3>
How to embed Video in a HTML document?
</h3>
<video controls width= "400" height= "300">
<source src="aapla.mp4" type= "video/mp4">
</video>
</body>

</html>

77
 The HTML5 video player supports three formats, but not all of them
have the same level of browser support.
 This means you can add sources in different formats to ensure the
user can see the video.
 It is always recommended to add HTML5 video controls to your
player.
 Using special buttons in the player window, the user can manually
start and stop the video, skip to specific place using the slider, or
toggle between window and full screen video display.
 To add video controls, include the controls attribute.

Player Dimensions:
 To define the size of your player, you can use the height and width
attributes.
 The video will keep the same aspect ratio.
 In the HTML5 video example above, the values are set to 300 for the
height and 400 for the width.

6.9 INCORPORATING AUDIO ON WEB PAGE

 Since the release of HTML5, audio can be added to webpages using

the <audio> tag.
 Previously audio could be only played on webpages using web
plugins like Flash.
 The <audio> tag is an inline element which is used to embed sound
files into a web page.
 It is a very useful tag if you want to add audios such as songs,
interviews, etc on your webpage.

Syntax:
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
IDOL Audio Songs
</h1>
<h3>
How to embed audio in a HTML document?
</h3>
<audio controls>

78
<source src="Test.mp3" type="audio/mp3">
<source src="Test.ogg" type="audio/ogg">
</audio>
</body>
</html>

Output:

6.10 SUMMARY

 In this chapter we have studied basic input types of html and new
HTML5 input type as well as controls.
 We build the form by using controls and input types.
 We focusing on multimedia to embed video and audio in to web pages.

6.11 BIBLIOGRAPHY

1. https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form
2. https://www.w3schools.com/tags/att_input_type_checkbox.asp
3. https://www.homeandlearn.co.uk/WD/wds8p5.html
4. https://www.tutorialspoint.com/html5/html5_audio_video.htm
5. https://www.bitdegree.org/learn/html5-video-player
6.https://www.geeksforgeeks.org/how-to-embed-audio-element-in-a-html-
document/
7. https://codescracker.com/html/html-multimedia-working.htm

6.12 UNIT END QUESTIONS

1. Explain basic html input types?

2. Create Basic Html forms with four fields?
3. Explain HTML5 input types and controls in details?
4. Write short notes on following:
a. audio tag
b. video tag
5. Explain how to embed video in web page?
6. Explain how to incorporate audio in web page?

79
 Unit -III

7
JAVASCRIPT
Unit Structure :
7.1 Objective
7.2 Introduction
7.2.1 Client side JavaScript
7.2.2 Server side JavaScript
7.2.3 JavaScript objects
7.2.4 JavaScript security
7.3 Operators
7.3.1 Assignment
7.3.2 Arithmetic
7.3.3 Comparison
7.3.4 Modulus
7.3.5 Increament
7.3.6 Decreament
7.3.7 Unary negation
7.3.8 Logical operators
7.3.9 Short circuit evaluation
7.3.10 String operators
7.3.11 Special operators
7.3.12 Conditional operators
7.3.13 Comma operators
7.3.14 Delete
7.3.15 New
7.3.16 This
7.3.17 Void
7.4 Statements
7.4.1 Break
7.4.2 Comment
7.4.3 Continue
7.4.4 Delete
7.4.5 Do while
7.4.6 Export
7.4.7 For
7.4.8 For in
80
 7.4.9 Function
7.4.10 Ifelse
7.4.11 Import
7.4.12 Labelled
7.4.13 Return
7.4.14 Switch
7.4.15 Var
7.4.16 While
7.4.17 With
7.5 Core java script
7.5.1 Array
7.5.2 Boolean
7.5.3 Object
7.5.3.1Date
7.5.3.2 Math
7.5.4 Number
7.5.5 Object
7.5.6 String
7.5.7 reg Exp

7.0 OBJECTIVE

After reading this chapter you will be able to –

 Write small javascrips with operators and functions.
 Use of variables, data types, control statements.
 Identify client and server side scripts
 Use javascript objects and their inbuilt properties.

7.1INTRODUCTION

 Javascript is object based scripting language based on c++. Scripting

language is a light weight programming language which easy to learn
and understand. It is generally used for small applications.
 Javascript was basically designed to add interactivity in HTML pages
and is directly embedded into HTML.
 Javascript is free to use by anyone.
 Javascript is interpreted language ie is not precompiled before
execution. As javascript is interpreted, it is platform independent.
 Java is a full fledged complex programming language developed by
sun micro system. Javascript is developed by netscape
communications and is no sub language of java.

81
 Javascript is originally a scripting language developed by European
Computer Manufacturer’s association (ECMA)
 Javascript that runs at the client side (ie at the client’s browser) is
client side java script (CCJS) and javascript that runs at the server is
serverside java script (SSJS)
 Javascript being object oriented, uses number of built in javascript as
well as objects can be created.
 Every object has properties and methods. Property is value(s)
associated with an object. Methods are actions associated with an
object.
 Example:<scripttype="text/javascript">
document. write("This message is written by JavaScript");
</script>
in above example, ‘document’ is object and write() is a method of
document object.
 Javascript runs in a web browser, and when a script written by a third
party is executed on the browser, there is a risk of running a spyware
or a virusprogram.
 Hence, each time javascript is loaded on the browser implements a
security policy designed to minimise the risk of such unknown code.
 Security policy is set of rules governing what scripts can do under
which circumstances.
 Modern javascript security is based upon Java. Scripts downloaded are
isolated from the operating system and then executed. This is known
as the ‘sandbox’ model. Some scripts are often stored randomly here
and there. And hence, many times obtain more power than expected by
design or by accident.
 Scripts in general are given limited access and more access is only
given with the user consent. Taking a consent for every execution is
not a practical solution.
 Scripts from ‘trusted’ source are many times excluded from this
consent procedure.
 A policy called ‘same origin’ does not block scripts coming from the
same origin as trusted scripts. This same origin check is performed on
all methods of windows object, also on embedded and externally
linked objects.

82
7.3 JAVASCRIPT OPERATORS

Operator Name Description Example Result Note

= Assignment Assigns y = 5; y =5 Primitive data
value to a x = y = 5; x=5 types get
variable. y=5 and direct values
where as
functions are
pointers to the
variables.
+= Plus equal to x += y x =10 Same as
operator equal
-= Minus to x -= y x=0 to. That is,
equal x+=y means
*= Multiply x *= y x = 25 that x=x+y
equal to and soon.
/= Divide to x /= y x =1
equal
%= Modulo x %= y x=0
equal to
Arithmetic
+ Addition Adds values x = y + 2; x=7
- Subtraction Subtracts x = y – 2; x=3
second from
first value
* Multiplication Multiplies x = y * 2; x=10
two values
/ Division Divides x = y / 2; x=2.5
% Modulus Divides x = y % 2; x=1
gives
remainder
and the
++ Increment Increments x = ++y; x=6
value by 1

-- Decrement Decrements x = --y; x=4

value by 1
Logical
&& And Logically (x<10 y>1) TRUE As value of x
ands && as of now is 4
and that of y
is 5
|| Or Logically (x==5 TRUE As value of x
Ors y==5) <> 5 but that
|| of y =5

83
! Not Negation !(x==y) TRUE As x and y are
not equal.
String
+ Concatenation Connects If x = “5” x+y=“55”
two strings. and y= “5”
then

Conditional
? Variable If a = 0, a =8, If condition is
=(condition)? b=7 b =7 satisfied, first
value1:value2 a=(b= value is
=10)?5:8 assigned, else
the second
value is
assigned.
Short circuit evaluation
&& Sand Short circuit If x = 0; x = 66 If p is not null,
and p = 66 then assign
x=p && value of p to x.
p.getvalue()

|| SOr Short circuit If x=0, x=5 If there is a

or default=5 default, assign
x=default|| default; else
10 assign the given
value.
, Comma x=4, y= 5; x=4 y=5 Executes all
expressions
from left to
right.
Delete Used in Delete Object Deletes the
functions <object> undefined properties from
objects and
array elements
from arrays
making
themundefined.
This Can be used in following
contexts – this.window
 Asglobal
 Function context return this;
Simplecall return
As object method this.value
Prototype chain
 As aconstructor
 As getter orsetter.

84
New Creates new var x= new x becomes new instance of
instance of Fn() function Fn and gets all its
the object properties and methods.
Void Evaluates Void expr Undefined
expression .
and
return
s undefined

Javascript Operators Examples 1.

Output

85
7.4 JAVASCRIPT STATEMENTS

 JavaScript is a sequence of statements to be executed by the browser.

Browser executes the statements in the same order as they are
written.
 JavaScript is case sensitive with all syntax, variable and function
names.
 The semicolon at the end of line is optional (according to the
JavaScript standard), and the browser is supposed to interpret the
end of the line as the end of the statement. However, semicolon at
the end of line is good programming practice. Also, it enables us to
write multiple statements on the same line.
 JavaScript statements can be grouped together in blocks. Blocks start
with a left curly bracket {, and end with a right curly bracket }. The
purpose of a block is to make the sequence of statements execute
together.
 A block is normally used to group the statements in a function or
condition.
 A general example of block is–

86
JavaScript Comments

 JavaScript comments can be used to make the code more readable.

 Comments can be added to explain the Java Script.
 Comments can be added at end of a line.
 Single line comments start with//.
 Multi line comments start with /* and end with*/.
 The comment is used to prevent the execution of a single code line or a
code block. This can be suitable for debugging
 Following example demonstrates use of comments in java script code.

Javascript Variables (Var statement)

 Variables are "containers" for storing information. This information
can be values or expressions.
 A variable can have a short name, like x, or a more descriptive name,
like My Name.
87
 Rules for JavaScript variable names:
o Variable names are case sensitive (y and Y are two different
variables)
o Variable names must begin with a letter or the underscore character
 Creating variables in JavaScript is most often referred to as "declaring"
variables.
 You declare JavaScript variables with the var keyword like varx;
 After the declaration shown above, the variables are empty (they have
no values yet). However, you can also assign values to the variables
when you declare them like var x = 10; After the execution of this
statement, the variable x will hold the value10
 A variable declared within a JavaScript function becomes LOCAL
and can only be accessed within that function. (the variable has
localscope).
 You can have local variables with the same name in different
functions, because local variables are only recognized by the function
in which they are declared.
 Local variables are destroyed when you exit the function.
 Variables declared outside a function become GLOBAL, and all
scripts and functions on the web page can access it.
 Global variables are destroyed when you close thepage.
 If you declare a variable, without using "var", the variable always
becomes GLOBAL.
 If you assign values to variables that have not yet been declared, the
variables will automatically be declared as global variables.
 All javascript operators can be used with variables
 Example –

88
Conditional statements
 Conditional statements are used to perform different actions based on
different conditions.
 In JavaScript we have the following conditional statements:
 If statement - This statement is used to execute some code only if a
specified condition is true.
 Syntax:
if (condition)
{
code to be execute difconditionis
true
}
 If...elsestatement-This statement is used to execute some code if the
condition is true and another code if the condition is false
 Syntax:
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
 If...else if ............... else statement - This statement is used to select
one of many blocks of code to be executed
 Syntax:
if (condition1)
{
code to be executed if condition1 is true
}
89
 else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 istrue
}

Example

Output

 switch statement -This statement is another way to select one of many

blocks of code to be executed.
 Syntax-
switch(n)
{

90
case 1:
execute code block 1 break;
case 2:
execute code block 2 break;
default:
code to be executed if n is different from case 1 and 2
}

Example:

Output

91
Loop statements
 Loops execute a block of code a specified number of times, or while a
specified condition is true.
 Often when you write code, you want the same block of code to run
over and over again in a row. Instead of adding several almost equal
lines in a script we can use loops to perform a task like this.
 In JavaScript, there are two different kind of loops:
o for - loops through a block of code a specified number of times. It can
be used only when it is known in advance, how many times we have to
run the loop.
o while - loops through a block of code while a specified condition is
true.
 For Loop Syntax:
for (variable=startvalue;variable<=endvalue;variabl
e=variable+increment)
{
code to be executed
}

 Example:
Javascript given below will print 5 numbers. Each time, value of
the variable is incremented by 1.

92
 While loop syntax
while(var<=end value)
{
code to be executed
}
 While loop can be used with any comparison operator.
 Do While loop is a variation to the while loop. In this case block will
be executed at least once, as the statements are executed before the
condition is tested. Syntax for do while is as follows–
do
{
code to be executed
}
while (var<=endvalue);
 Consider the example where number is printed after incrementing
itby1.This is performed while the number is less than orequalto
5. Script and the outputs with while and do while loop are as given below
<html>
<body>
<script type="text/javascript">var i=6;
do
{
document.write("The number is " + i); document.write("<br />");
i++;
}
while (i<=5);

</script>
</body>
</html>

93
 Changes in script with just while loop and corresponding output--
while (i<=5)
{
document.write("The number is " + i); document.write("<br />");
i++;
}
document.write(“value of i is printed outside the loop”);
document.write(“<br>\” + i);

Break and Continue statement in javascript

 The break statement will break the loop and continue executing the
code that follows after the loop (if any).
 The continue statement will break the current loop and continue with
the next value.

94
Function
 Function is a segment of program that performs a given task.
 A function contains code that will be executed by an event or by a call
to the function.
 You may call a function from anywhere within a page (or even from
other pages if the function is embedded in an external JavaScript file).
 Functions can be defined both in the <head> and in the <body> section
of a document.
 However, to assure that a function is read/loaded by the browser
before it is called, it should be put functions in the<head>section.
 Syntax of the function is as follows–
function name(var1,var2,...,varX)
{
some code
}
 Function always includes parenthesis after the name of function‘()’
95
 Function calls are case sensitive as javascript is case sensitive.
 The return statement is used to specify the value that is returned from
the function.
So, functions that are going to return a value must use the return
statement.
 If a variable is declared using "var", within a function, the variable can
only be accessed within that function.
 The variable is destroyed once function call is over. These variables
are called local variables. Local variables can have the same name in
different functions, because each is recognized only by the function in
which it is declared.
 If a variable is declared outside a function, all the functions on your
page can access it.
 The lifetime of these variables starts when they are declared, and ends
when the page is closed.
 Following is an example of function. Function products computes and
returns product of variables a and b.
 Basic advantage of using a function is reusability. Same task can be
performed again and again simply by calling the function which
performs the task.

Example:

96
7.5 COREJAVASCRIPT

Data Types are classified as primitive data types and composite

data types. Composite Data types -
 Numbers - are values that can be processed and calculated. The
numbers can be either positive or negative. Javascript integer can
have three base values – 10 (decimal), 8(octal) or 16(hexadecimal).
Number can be integer or floating point number.

 Strings - are a series of letters and numbers enclosed in single or

double quotation marks. Strings are used for text to be displayed or
values to be passed along.
 Some characters that you may want in a string may not exist on the
keyboard, or may be special characters that can't appear as themselves
in a string.
 In order to put these characters in a string, you need to use an escape
sequence to represent the character. An escape sequence is a character
or numeric value representing a character that is preceded by a
backslash ( \ ) to indicate that it is a special character.

Some escaped characters are as follows:

\b Backspace.
\t Tab. Tabs behave erratically on the Web and are best avoided,
but sometimes you need them.
\n New line (\u0000a). Inserts a line break at the point specified.
It is a combination of the carriage return (\r) and the form feed(\f).
\" Double quote.
\' Single quote, or an apostrophe, such as incan\'t.
\\ The backslash, since by itself it is a command.
 Boolean (true/false) - lets you evaluate whether a condition meets or
does not meet specified criteria.
 Null - is an empty value. null is not the same as 0 -- 0 is a real,
calculable number, whereas null is the absence of any value. An empty
string is distinct from null value.
97
 NAN – Some javascript functions return a special value called not a
number.

Primitive Data Types –

Object –
 An object is a collection of named values, called the properties of that
object. Functions associated with an object are referred to as the
methods of that object.
 Properties and methods of objects are referred to with a dot(.) notation
that starts with the name of the object and ends with the name of the
property. For instance image. src.
 Normally in objects there are only two nodes, the object and the
property, but sometimes the properties can have properties of their
own, creating an object tree.
 For instance,document.form1.namefield.
 Objects in JavaScript can be treated as associative arrays. This means
that image.src and image['src'] are equivalent.
 JavaScript has many predefined objects, such as a Date object and a
Math object. These are used much as function libraries are used in a
language like C.
 They contain a collection of useful methods that are predefined and
ready for use in any JavaScript code you may write.
Date Object –
 The Date object is used to work with dates andtimes.
 Date objects are created with newDate().
 There are four ways of instantiating adate:
var d = new Date();
var d = new Date(milliseconds); var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds,
milliseconds);
 Some javascript predefined methods are–
 getDate() Returns the day of the month (from1-31)
 getDay() Returns the day of the week (from0-6)
 getFullYear() Returns the year (fourdigits)
 getHours() Returns the hour (from0-23)
 getMilliseconds() Returns the milliseconds (from0-999)
 getMinutes() Returns the minutes (from0-59)
 getMonth() Returns the month (from0-11)
 getSeconds() Returns the seconds (from0-59)
 getTime() Returns the number of milliseconds since midnight Jan
1,1970
 getTimezoneOffset() Returns the time difference between GMT and
local time, inminutes
98
 getYear() Deprecated. Usethe
 getFullYear() methodinstead
 parse() Parses a date string and returns the number of milliseconds
since midnight of January 1,1970
 setDate() Sets the day of the month (from1-31)
 setHours() Sets the hour (from0-23)
 setMilliseconds() Sets the milliseconds (from0-999)
 setMinutes() Set the minutes (from0-59)
 setMonth() Sets the month (from0-11)
 setSeconds() Sets the seconds (from0-59)
 setTime() Sets a date and time by adding or subtracting a specified
number of milliseconds to/from midnight January 1, 1970
 toString() Converts a Date object to astring
 toTimeString() Converts the time portion of a Date object to astring
 toUTCString() Converts a Date object to a string, according to
universaltime
 valueOf() Returns the primitive value of a Dateobject

Math object –
 The Math object allows you to perform mathematical tasks.
 The Math object includes several mathematical constants and methods.
 round() – rounds the number to nearest integer value.
 random() - returns a random number between 0 and1.
 max() - returns the number with the highest value of two specified
numbers.
 min() - returns the number with the lowest value of two specified
numbers.

Array –
 An Array is an ordered collection of data values.
 In JavaScript, an array is just an object that has an index to refer to its
contents. In other words, the fields in the array are numbered, and you
can refer to the number position of the field.
 The array index is included in square brackets immediately after the
array name. In JavaScript, the array index starts with zero, so the first
element in an array would be array Name[0], and the third would be
array Name[2].
 JavaScript does not have multi-dimensional arrays, but you can nest
them, which is to say, an array element can contain another array.
 You access them listing the array numbers starting for the outmost
array and working inward. Therefore, the third element (position 2) of
or inside the ninth element (position 8) would bearrayName[8][2].

99
7.6 SUMMARY

 JavaScript is light weighted programming language used for small

applications.
 Javascrit is object based programming language made inC++.
 Javascript can be executed either on client side browser or on server
side browser.
 Javascripts can be downloaded and run and carry a threat of virus
attack. Security of javascript depends upon the security of java
language. The process of executing the javascript code after isolating it
from the operating system is called ‘sandbox’ model.
 Different types of javascript operators help perform various arithmetic,
logical, string and other types of functions.
 Browser sequentially executes javascript statements of various types
such as conditional and loop
 statements. Some of loop statements are while, do while, switch
statement etc.
 Number, Boolean, string are few data types used in JavaScript.

7.7 EXERCISE

1. Define javascript. How is itused?

2. Explain the difference between client side and server side JavaScript.
3. Explain how virus threat from javascript is avoided?
4. write a javascript to find greatest of three given numbers
5. write a javascript to print the month if numeric value for the month is
given (eg January for 1 and so on)
6. Write a javascript to print all prime numbers from 1 to 100 in reverse
order.
7. Write a javascipt to print reverse of a number.
8. Explain what is an object in javascript. Describe the date and math
object with at least two properties each.
9. explain the difference between String”” and null value
10. Discuss what is a function? Does it always return a value? Give
example of at least one function.
11. What is an array? How is it used in JavaScript?
12. Explain how a date value can be converted into a string value and vice
versa.



100
 8
DOCUMENT AND ITS ASSOCIATED
OBJECTS &
EVENT AND EVENT HANDLERS
Unit Structure :

8.0 Objective
8.1 Document and associated objects
8.1.1 Document
8.1.2 Link
8.1.3 Area
8.1.4 Anchor
8.1.5 Image
8.1.6 Applet
8.1.7 Layer
8.2 Events and Event Handlers
8.2.1 General information about events
8.2.2 Defining event handlers
8.3 Event
8.3.1 on Abort
8.3.2 on Blur
8.3.3 on Change
8.3.4 on Click
8.3.5 on DblClick
8.3.6 on Drag Drop
8.3.7 on Error
8.3.8 on Focus
8.3.9 on Key Down
8.3.10 on Key Press
8.3.11 on Key Up
8.3.12 on Load
8.3.13 on Mouse Down
8.3.14 on Mouse Move
8.3.15 on Mouse Out
8.3.16 on Mouse Over
8.3.17 on Mouse Up
8.3.18 on Move
8.3.19 on Reset
101
 8.3.20 on Resize
8.3.21 on Select
8.3.22 on Submit
8.3.23 on Unload

8.1 OBJECTIVE

After reading this chapter you will be able to -

 Understand the use of document object and other objects associated
with the document object.
 Understand and use the properties and methods and to use common
properties and methods.
 Understand and use objects such as area, anchor, link etc. and
properties and methods associated with these objects.
 Write java scripts using the above properties and methods.
 Understand the concept of event and event handlers.
 Understand the use of each event associated with the document object.

8.1 DOCUMENT AND ASSOCIATEDOBJECTS

8.1.1 Document
 Each HTML document loaded into a browser window becomes a
Document object.
 The Document object provides access to all HTML elements in a
page, from within a script.
 The Document object is also part of the Window object, and can be
accessed through the ‘window. Document’ property.
 Document object is part of document object model.
 This model has a fixed hierarchy, where topmost object in the
hierarchy is Browser itself.
 After browser window object and inside window, as shown below,
comes the document object.
 Relation of document object to the window object can be depicted in
the fig given below –

102
|-> Document
|-> Anchor
|-> Link
|-> Images
|->Tags
|->Form

|-> Text-box
|-> Text Area
|-> Radio Button
|-> Check Box
|->Select
|->Button

Fig 8.1 Document Object Fig 8.2 Hierarchy in

and Window object Document Object

 Document object has following properties and methods

Properties –
 cookie Returns all name/value pairs of cookies in the document
 document Mode Returns the mode used by the browser to render the
document
 domain Returns the domain name of the server that loaded the
document
 last Modified Returns the date and time the document was last
modified
 ready State Returns the (loading) status of the document
 referrer Returns the URL of the document that loaded the current
document
 title Sets or returns the title of the document
 URL Returns the full URL of the document
Methods –
 close() Closes the output stream previously opened with document.
open()
 get Element ById() Accesses the first element with the specifiedid
 get Elements By Name() Accesses all elements with a specified name
 get Elements By Tag Name() Accesses all elements with a specified
tagname
 open() Opens an output stream to collect the output from document.
write() or document. writeln()
 write() Writes HTML expressions or JavaScript code to a document
 writeln() Same as write(), but adds a new line character after each
statement Yes
103
 Following examples demonstrates use of some properties and methods
of document object.

Fig 8.3 Script and output Demonstrating write method and title
property of Document object.

104
Fig 8.4 Script Demonstrating the Document. open() method to open a
text stream

Fig 8.5 Output of the script Before and After Clicking the ‘New
Document’ button.

105
8.1.2 Link
 The Link object represents an HTML link element.
 The link element must be placed inside the head section of an HTML
document, and it specifies a link to an external resource.
 In other words, link tag defines how a click on object can redirect or
take the browser window to a new location specified by the address
specified.
 A common use of the <link> tag is to link to external style sheets.
 Some of the properties of javascript link objects are as given below—
charset: -Sets or returns the character encoding of a linked document
href: -Sets or returns the URL of a linked document
hreflang:- Sets or returns the language code of the linked document
media: - Sets or returns the media type for the link element
type: - Sets or returns the content type of the linked document
 In addition to above properties, link object supports all standard
properties like id, length, chartypeetc.

106
Fig 8.6 Script and Outputs Demonstrating length property of link

8.1.3 Area
 The Area object represents an area inside an HTML image-map (an
image-map is an image with clickable areas).
 For each <area> tag in an HTML document, an Area object is created.
 In addition to standard properties and methods, javascript area object
supports following properties –
alt: Sets or returns the value of the alt attribute of an area
cords: Sets or returns the value of the coords attribute of an area
hash: Sets or returns the anchor part of the href attribute value
host: Sets or returns the hostname: port part of the href attribute value
hostname: Sets or returns the hostname part of the href attribute value
href: Sets or returns the value of the href attribute of an area
noHref: Sets or returns the value of the no href attribute of an area
pathname: Sets or returns the pathname part of the href attribute value
port: Sets or returns the port part of the href attribute value
protocol: Sets or returns the protocol part of the href attribute value
search: Sets or returns the query string part of the href attribute value
shape: Sets or returns the value of the shape attribute of an area
target: Sets or returns the value of the target attribute of an area

107
 Following example shows an image map and returns the shape of an
area marked in the image map.

Fig 8.7 Script and output Demonstrating Area object.

8.1.4 Anchor
 The Anchor object represents an HTML hyperlink.
 For each <a> tag in an HTML document, an Anchor object is created.
 An anchor allows you to create a link to another document (with the
href attribute), or to a different point in the same document (with the
name attribute).
 You can access an anchor by using get Element ById(), or by
searching through the anchors[] array of the Document object.
 In addition to standard properties and methods, javascript anchor
object supports following properties–

108
charset Sets or returns the value of the charset attribute of a link href Sets
or returns the value of the href attribute of a link hre flang Sets or returns
the value of the hre flang attribute of a link name Sets or returns the value
of the name attribute of alink

rel Sets or returns the value of the rel attribute of a link

rev Sets or returns the value of the rev attribute of a link target Sets or
returns the value of the target attribute of a link type Sets or returns the
value of the type attribute of alink

 Following example shows anchor tag used in a webpage.

Fig 8.8 Script For demonstrating anchor object

109
align : Sets or returns the value of the align attribute of an image
alt : Sets or returns the value of the alt attribute of an image
border : Sets or returns the value of the border attribute of an
image
complete :Returns whether or not the browser is finished loading an
image
height : Sets or returns the value of the height attribute of an image
hspace : Sets or returns the value of the hspace attribute of an image
longDesc :Sets or returns the value of the longdesc attribute of an image
lowsrc : Sets or returns a URL to a low-resolution version of an image
name : Sets or returns the name of an image
src : Sets or returns the value of the src attribute of an image
useMap : Sets or returns the value of the use map attribute of an image
vspace : Sets or returns the value of the vspace attribute of an image
width : Sets or returns the value of the width attribute of an image

110
 Fig 8.9 Before and after using the anchor link.

 After the anchor is used URL of browser changed to

‘file:///c:/AnchorDemo.html#C6’, as c6 is used as an anchor.

8.1.5 Image
 The Image object represents an embedded image.
 For each <img> tag in an HTML document, an Image object is
created.
 Notice that images are not technically inserted into an HTML page,
images are linked to HTML pages. The <img> tag creates a holding
space for the referenced image.
 Image object, in addition to the standard properties and methods,
supports following properties and events.

 Image ObjectEvents

on abort Loading of an image is interrupted

on error An error occurs when loading an image
on load An image is finished loading

 Following is the example of some properties of image object and

javascript functions used to change these properties.
 Function changesize changes the height and width of the image object
and function add Border adds border to the image.
 Similarly, we can also change the image by using the srcattribute of
imagetag.

111
 Alt attribute gives the text to be displayed, if the image can not be
displayed.
 Also, a lower version of image to speed up loading, can be shown
using a lowsrc option attribute.

Example:

Fig 8.10 source code for demonstrating some image properties and
attributes.

Fig 8.11 Before click of the command button objects

112
Fig 8.12 After click of the command buttons, border added and a
increased sized image.

8.1.6 Applet
 Applet tag was used in earlier version of HTML (HTML4) to embed
anjavaappletina browser. It is not supported in HTML
5.0 and is replaced by the object tag.
 The <object> tag defines an embedded object within an HTML
document. It is used to embed multimedia (like audio, video, Java
applets, ActiveX, PDF, and Flash) in your webpages.
 You can also use the <object> tag to embed another webpage into your
HTML document.
 You can use the <param> tag to pass parameters to plugins that have
been embedded using the <object>tag.
 An object element must appear inside the body element. The text
between the <object> and </object> is an alternate text, for browsers
that do not support this tag.
 At least one of the "data" and "type" attributes MUST be defined
where data specifies a URL that refers to the object's data and type
Specifies the MIME type of data specified in the data attribute.
(Multipurpose Internet Mail Extensions (MIME) is an Internet

113
 standard that extends the format of email to support Text in
character sets other than ASCII, Non-text attachments, Message bodies
with multiple parts, Header information in non-ASCII character sets.

8.2 EVENTS AND EVENTHANDLERS

8.2.1 General information about events

 Events are actions that can be detected by JavaScript.
 Every element on a web page has certain events which can trigger a
Java Script.
 For example, we can use the on Click event of a button element to
indicate that a function will run when a user clicks on the button.
 Examples of events:
o A mouse click
o A web page or an image loading
o Mousing over a hot spot on the webpage
o Selecting an input field in an HTML form
o Submitting an HTML form
o A keystroke
 Events are normally used in combination with functions, and the
function will not be executed before the event occurs!

8.2.2 Defining event handlers

 They are JavaScript code that are not added inside the <script> tags,
but rather, inside the html tags, that execute JavaScript when
something happens, such as pressing a button, moving your mouse
over a link, submitting a formetc.
 The basic syntax of these event handlersis:
name_of_handler="JavaScript code here"
 For example:

 When events are associated with functions, the functions are written in
the head section within the <script> tag and are called from the event
handlers.

Example :
<html>
<body>
<h1 onclick="this.innerHTML='Welcome to
EventHandlers'">Click on this text</h1>
</body>
</html>
114
 This code will generate following output–

Fig 8.12 Event Handler and after event is called.

8.3 EVENT

Following is the list of events used by various javascript objects

and when are these events triggered.

Attribute The event occurs when...

onabort Page is not finished loading
onblur An element loses focus
onchange The content of a field changes
onclick Mouse clicks an object
ondblclick Mouse double-clicks an object
ondragdrop A user drops an object
onerror An error occurs when loading a document or
an image
onfocus An element gets focus
onkeydown A keyboard key is pressed
onkeypress A keyboard key is pressed or held down
onkeyup A keyboard key is released
onload A page or image is finished loading
onmousedown A mouse button is pressed
onmousemove The mouse is moved
onmouseout The mouse is moved off an element
115
onmouseover The mouse is moved over an element
onmouseup A mouse button is released
onmove The position of top left corner of an object is
moved.
onresize A window or frame is resized
onreset Reset button on the form is clicked.
onselect Text is selected
onsubmit Validate all form fields before submitting it.
onunload The user exits the page

 Following is an example which shows onmouseover event to give

different messages for different parts of animagemap.

Fig 8.13 Script to demonstrate on mouse over event and its event
handler

116
 Fig 8.14 Newly Loaded page

Fig 8.15 cursor on the sun.

Fig 8.16 Cursor pointing to mercury

117
 Fig 8.17 Cursor pointing venus.

8.4 EXERCISES

1. Define document object. What are the objects associated with

document.
2. which are the different methods associated with document object.
3. write a javascript to write a message “Welcome to the Document
object” using the write method of document object.
4. list the objects associated with form object.
5. Explain what is link object? What is the use of link object? State any
two properties of this object.
6. List various properties of Area tag. What is the use of shape property
of area object? Explain how is it used with an example.
7. What is anchor? How is it used in a document object?
8. Define an event. What is event handler? Explain how event handler is
used.
9. Explain how a function can be used as event handler?
10. Write a java script with at least three functions to demonstrate use of
on mouse move and on mouse over event.
11. Write a javascript to display a message “welcome to scripting” when a
button labled “hello” is clicked. Display a message “Thank you for
using scripting” when the same button is double clicked.
12. Write a javascript code to display a text “Image can not be displayed
in current browser setting” if a image used in script can not be
disaplyed.


118