Page 1

1UNIT -1
1
INTERNET AND WORLD WIDE WEB
Unit Structure :
1.0 Objective
1.1 Introduction to internet and its applications.
1.1.1Email
1.1.2Telnet
1.1.3FTP
1.1.4E–commerce
1.1.5Video conferencing
1.1.6E 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.1Internet explorer,
1.7.2Netscape navigator,
1.7.3opera,
1.7.4fire fox,
1.7.5chrome,
1.7.6Mozilla,
1.8 Search Engine
1.9 Web server
1.9.1Apache
1.9.2IIS
1.9.3Proxy Server
1.10 HTTP protocol.
1.11 Summery
1.12 Unit End exercise
1.0OBJECTIVE:
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.munotes.in

Page 2

2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.1INTRODUCTION 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 Protoco l 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.1E 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 dig ital 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 t he
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.munotes.in

Page 3

3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 usin g 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 dom ain.
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 li ke this:
fname.lname@provider.domain
1.1.2Telnet
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 adhocprotocol.
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 protoc ol, which is based upon reliable
connection oriented communication transport and basic use of telnet is
to make a connection to the TCP protocol.munotes.in

Page 4

4Data transferred over telnet is vulnerable as telnet does not use any
encryption technique to mask or protec t 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.3FTP
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 p erform 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
andserver.
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 ca n take place in following three modes
oStream mode : data is sent in a continuous stream where FTP does
not do any formatting.
oBlock mode: FTP breaks the data into several blocks (block
header, byte count, and data field) and then passes it on to TCP.
oCompr essed 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.munotes.in

Page 5

5Hence the data like usernames, passwords can be read by anyone w ho
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 ‘ano nymous’ 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.4ECommerce
Electronic commerce c an be defined as use of electronic
communications, particularly via the internet, to facilitate the
purchase/ saleofgoods andservices. E-commerce includes all forms
of electronic trading including electronic data interchange (EDI),
electronic banking, e lectronic 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 ele ctronic 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 transa ctions.
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 transa ctions 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 o f 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.munotes.in

Page 6

6In an example, if a customer buys a product, say a pen, tha t 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.
Other formofB2Ctransactionsarebusinesstoindividual,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 poste d 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.5Video 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 simultane ously.
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: us ually loudspeakers associated with the display
device or telephone
Data transfer: analog or digital telephone network, LAN or Internetmunotes.in

Page 7

7There are basically two types of videoconferencing systems.
Dedicated systems: all required components (i.e. software a nd
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 compu ting 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 g enerating
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 tim e is another
major technical requirement for the communication channel for
interactive videoconferencing.
1.1.6Ebusiness
E business is conduct of business over the internet, which includes
buying and selling of goods and even services.
In other words it is ap plication of information and communication
technologies in support of all activities in business.
Applications of E business are divided into following categories –munotes.in

Page 8

8oInternal business systems --
oCustomer Relationship Management(CRM)
oEnterprise Resource Planning(ERP)
oHuman resource management system(HRMS)
oEnterprise Communication and collaboration
oContent management
oE-mails
oVoicemails
oWeb conferencing
oElectronic commerce
oB2B (business to business)
oB2C (business to customer)
oB2E busine ss-to-employee
oB2Gbusiness -to-government
oG2Bgovernment -to-business
oG2G (government -to-government)
oG2C (government -to-citizen)
oC2C (consumer -to-consumer)
oC2B(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 mode ls are –
oE-shops
oE-commerce
oE-procurement
oE-malls
oE-auctions
oVirtual 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 tas k. 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 signatur e is another way to confirm the ownership
of a document.munotes.in

Page 9

91.2INTERNET SERVICE PROVIDER
An Internet service provider (ISP) is a company that provides access to the
Internet, hosts data, ordoes both. ISPisalsoknown asIAP(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 u sed–
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 whi ch 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 m ail, 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 tr affic through
peering points, orinternetex change points. These points help save onemunotes.in

Page 10

10more 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. The se are called as
freenets. These are normally run on no profit basis.
1.3DOMAIN 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
intern et or a private network. The main purpose ofthis 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 po ssible 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 dom ain
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 o f 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 up date 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 querymunotes.in

Page 11

11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 –
oA network host is configured with an initial cache (so called hints ) of
the known addresses of the root name servers. Such a hint fil eis
updated periodically by an administrator from a reliable source.
oA query to one of the root servers to find the server authoritative for
the top -level domain.
oA query to the obtained TLD server for the address of a DNS server
authoritative for the s econd -level domain.
oRepetition 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.4INTERNET ADDRESS
Internet address follows the TCP/IP suite hence, it is also known as the
IPaddress.
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 add ress 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. Howe ver, 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 worldw ide 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)munotes.in

Page 12

12IPV4 address is a 32 bit number, which uses the decimal doted
notation consisti ng 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 reserve d 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 kn own 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 a dynamic IP address
1.5WORLD WIDE WEB AND ITS EVOLUTION
The World Wide Web, abbreviated as WWW or W3and 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 Wo rld-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 "Hype rtext
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.munotes.in

Page 13

13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 pag es,
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
Identifie r (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 th e
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.6URL
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 as http://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 -slashmunotes.in

Page 14

14Every URL c onsists of some of the following:
oThe 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.
oDomain Name depending upon scheme(alternatively, IP address).
The domain name or IP address gives the destination location for
theURL.
oAn optional port number; if omitted, the default for the scheme is
used
oPath of the resource to be fetched or the progra m 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
oA query string for scripts Th e 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.
oOptional fragment identifier that specifies a part or a position
withi n 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 li nks 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.7BROWSERS
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 i n 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.munotes.in

Page 15

15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 ma ke 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 inte rface elements in common:
Back and forward buttons to goback to the previous resource and forward
again.
oA history list, showing resources previously visited in a list
(typically, the list is not visible all the time and has to be
summoned)
oA refresh or reload button to reload the current resource.
oA stop button to cancel loading the resource. In some browsers, the
stop button is merged with the reload button.
oA home button to return to the user's homepage
oAn address bar to input the Uniform Resource Iden tifier (URI) of
the desired resource and display it.
oA search bar to input terms into a search engine
oA 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 usag e 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.1INTERNET 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 Micro soft
Windows line of operating systems starting in1995.munotes.in

Page 16

16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 oper ating
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.2NETSCAPE 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 ,w i t h
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 generi c name for matters related to the
open source successor to Netscape Communicator.
1.7.3OPERA
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 rec eiving 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 -inmunotes.in

Page 17

17phishing 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.4MOZILLA 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 sha re 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.5CHROME
Chrome, the web browser by Google, is rapidly becoming popular due
to following features -
oSPEED: 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.
oSIMPLICITY: 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.
oSECURITY: 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 latestmunotes.in

Page 18

18security updates, and more. Learn more about Chrome's security
features.
Chrome is the first bro wser to incorporate machine translation in the
browser itself, without requiring additional plugins orextensions.
1.8SEARCH 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 o ther 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 g enerate 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.9WEB SERVER
1.9.1APACHE
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, O S/2, etcmunotes.in

Page 19

19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 e verything 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 balanc ing
Session tracking
URL rewriting
Geolocation based on IP address and many more
1.9.2IIS
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 requ ests 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 in ternet.
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 appli cations 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 Pow erShell
One of the key feature of IIS is application pool.munotes.in

Page 20

201.9.3PROXY 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 fr om browsing inappropriate or distracting sites
1.10HTTP 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 ser ver.
The following diagram shows a very basic architecture of a web
application and depicts where HTTP :
munotes.in

Page 21

21The 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.11EXERCISE
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 o fe m a i l
address?
5.Are following email addresses valid?
a.124sir@idol.com
b.11myname@yahoo.org
c.Seema_Sathye@ server.co.in
d.Piyush_mishra@myservices.net.in
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.munotes.in

Page 22

2220.Define E business.
21.List a few applications of Ebusiness.
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 ofISP in business or home
connections
a.A dial up connection with speed1Mbp s
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
munotes.in

Page 23

232
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 d eveloper 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 Te chnology Working Group
(WHATWG).munotes.in

Page 24

24HTML5 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

,

Page 25

25Video 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

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.

It defines a header for a section.

It defines the main content of a document.

It defines a section in the document.

Page 26

26Syntax

An example of HTML document with doctype declaration.






This is the content of the document.

tag :
The HTML

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
andcomplete from other content shown on the page. It is used on News
story, blog post, article, Social post, comment etc.
Syntax

...

The example below shows the

tag .

Introduction to HTML5

. HTML5 is enriched with advance features which make it easy and
interactive for developer and users..

HTML5

Tag:
The

element represents the header of a document or a section. A
header should contain title and heading i nformation about the related
content.
Syntax

...

The example below shows the

tag .

Sports

Cricket sport is World's no.1 sport all over the world

HTML Main Tag:
HTML

tag is used to represent the main content of the
tag.
The

tag is written within 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 t he
document.munotes.in

Page 27

27Syntax

...

The example below shows the

tag .

Introduction to HTML5

. HTML5 is enriched with advance features which make it easy and
interactive for developer and users..

HTML5

Tag
The

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

...

The example below shows the

tag .

Introduction to HTML5

. HTML5 is enriched with advance features which make it easy and
interactive for developer and users..

HTML5

Page 28

28Ordered 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

tag and the list items start with
1. tag.
   
   
   
   1. Sachin
   
   
   2. Kapil
   
   
   3. Rahul
   
   
   4. Rohit< /li>
      
   
   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
   
   tag and list items start with the
   • tag.
     
     
     
     • Sachin
     
     
     • Kapil
     
     
     • Rahul
     
     
     • Rohit
     
     
     
     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:
     

     tag defines the start of the list.
     

     tag defines a term.
     

     tag defines the term definition (description).
     

     
     

     HTML5

     
     

     HTML5 is the latest and most enhanced version of HTML.

     
     

     
     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 propert y, you will change the color of the text.
     The bac kground -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 o pening tag of the section:munotes.in

Page 29

29HTML 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

The example below shows the attribute.

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

The example below shows the < background > attribute.

This background is yellow

This background is filled up with HTML image.

2.6 CREATING HYPERLINKS AND ANCHORS:
HTML links are hyperlinks. You can click on a link and jump to
another document. The HTML tag defines a hyperlink. To make a
hyperlink in an HTML page, use the and tags, which are the tags
used to define the links.
Syntax
Hyperlink Text
The example below shows the < a > tag.
Next Page
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,munotes.in

Page 30

30location, 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 tag. With the help of this link will be open in next page.
Syntax
Hyperlink Text
The example below shows the < a > tag.
Home Page
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 shee ts(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

tag.
Another method of achieving this is combining the tag
And style=“x” attribute.
Here is an inline style example :
Example of Inline Style Sheets:

Using inline style sheets -or
is that inlinestyles?

Embedded style sheets:
This method allows for the control of individual pages.
The rule s specified here can beusedfor the current document.munotes.in

Page 31

31It uses the . The STYLE
element requires the TYPE attribute to tell the browser which style
language is being used.

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,

A save the file using the .cssextension
import a CSS file:

@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{munotes.in

Page 32

32text-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-decorat ion: 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.munotes.in

Page 33

33margin : 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 st yle attribute:

This is some text in a paragraph.

Style paragraphs with CSS:

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 Aud io, 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 an d 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.munotes.in

Page 34

344)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
backg round?
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?

munotes.in

Page 35

35UNIT -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 colle ction of related web pages, including multimedia
content, typically identified with a common domain name, and
published on at least one web server.munotes.in

Page 36

36Types 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 t op
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 ba sic 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 th e 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 organiz ation, navigation, and labeling
system.
3.3 CREATING TEXT BASED NAVIGATION BAR
At e x t -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.munotes.in

Page 37

37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:

---

Home 
Tips and Tricks 
Problem -Solving 
Products 
About Our Store 
Contact Us

---

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:









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:munotes.in

Page 39

39Keep the size of each button small (150 pixels wide at the most).
Make each button the same siz e 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:

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 u sed to serve a single link or destination whereas in a mappedmunotes.in

Page 40

40image, different coordinates of the image can serve different links or
destinations.
Elements required in Mapping an Image :
There are three basic html elem ents 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.
height="492" alt="World Map" usemap="#worldmap">
2)Creating amap foroverlaying theimage:

Mapping an Image

Click on the different continents of the map to know about
them.

height="492" alt="World Map" usemap="#worldmap">

Page 41

41href="https://en.wikipedia.org/wiki/Europe">
href="https://en.wikipedia.org/wiki/Australia_(continent)">
href="https://en .wikipedia.org/wiki/Antarctica">



Output:
3.6 REDIRECTING TO ANOTHER URL
To redirect from an HTML page to another page you can use
the 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 att ribute.
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 rend er 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.munotes.in

Page 42

42Syntax:
content="5; url = https://old.mu.ac.in/distance -open -learning/" />

IDOL Mumbai University

If your browser supports Refresh,
You’ll be r edirected to IDOL Mumbai
Homepage, in 5 seconds.

Output:
Supported Browsers: The browsers supported by HTML Redirect are
listed below:
Google Chrome
Internet Explorer
Firefox
Safari
Opera
3.7 SUMMARY
Thehtml

Page 43

433.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 b ar.
4.Explain image mapping concept in details with examples.
5.Explain how to redirect from one url to another url.

munotes.in

Page 44

444
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.0OBJECTIVES
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. HTML5 offers 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

,

Page 45

45List of new semantic tags:
The semantic tags added in HTML5 are:




Page 46

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

This is a section heading

Hello world! Hello world! Hello world!

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:5p x;
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;
}munotes.in

Page 51

51section
{
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:
munotes.in

Page 52

524.5 POSITIONING AND FORMATING DIVISIONS
If you insert an additional

Page 53

534.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