Internet
Internet is defined as an Information super Highway, to access information over the web.
However, It can be defined in many ways as follows:
 Internet is a world-wide global system of interconnected computer networks.
 Internet uses the standard Internet Protocol (TCP/IP).
 Every computer in internet is identified by a unique IP address.
 IP Address is a unique set of numbers (such as 110.22.33.114) which identifies a
computer location.
 A special computer DNS (Domain Name Server) is used to give name to the IP
Address so that user can locate a computer by a name.
 Internet is accessible to every user all over the world.
Internet History
The rapid development of Internet started at the early 1960, paralleled with the developments
of the computers. Those scientists and researcher started to realize a great vision, a future that
everyone will be able to communicate by using their computers. J.C.R. Licklider of MIT, first
proposed a global network of computers in 1962 and followed by Leonard Kleinrock from
MIT, who published the first paper on packet switching theory.
ARPANET, which is the former of Internet, was a project launched by Military Department
of USA. It was brought online at Oct 29, 1969 by Charley Kline at UCLA, when he
attempted to perform a remote login from UCLA to SRI. In order to get attentions from
public, they made the first public demonstration of ARPANET at an international conference
at October 1972.
The initial ARPANET was a single, closed network. In order to communicate with an
ARPANET, one had to be attached to another ARPANET IMP (interface message processor).
Hence, the disadvantages of single network were realized and lead the development of openarchitecture network and also different protocols of internetworking, which enable multiple
networks can be joined together. E-mail was adapted for ARPANET by Ray Tomlinson of
BBN in 1972. The telnet protocol, enabling logging on to a remote computer, was published
as a Request for Comments (RFC) in 1972. RFC's are a means of sharing developmental
work throughout community. The FTP protocol, enabling file transfers between Internet sites,
was published as an RFC in 1973, and from then on RFC's were available electronically to
anyone who had use of the FTP protocol.
Before the TCP/IP protocol was introduced by BoB Kahn, the networking protocols used for
the ARPANET was NCP, Network Control Protocols. NCP did not have the ability to address
networks further downstream than a destination IMP on ARPANET. By 1980, the Internet
had reached a certain level of maturity and started to exposed to public usage more and more
1
often. At the same time, French launched the Minitel project to bring data networking into
everyone’s home by gave away a free terminal to each household requested.
At the 1990s, the Internet predecessor, ARPANET finally came to an end, and replaced by
the NSFNET which serve as a backbone connecting regional networks in USA. However, the
most significant changes of Internet at 1990s was the World Wide Web(WWW) application
which truly brought Internet to our daily life. Various technologies such as VoIP, HTML,
web browsers with graphical user interfaces, P2P file sharing, instant messaging which is
very familiar to us nowadays.
Introduction to Internet
The Internet is a worldwide system of interconnected computer networks. The computers and
computer
networks
exchange
information
using
TCP/IP
(Transmission
Control
Protocol/Internet Protocol) to communicate with each other. The computers are connected via
the telecommunications networks, and the Internet can be used for e-mailing, transferring
files and accessing information on the World Wide Web.
The World Wide Web is a system of Internet servers that use HTTP (Hypertext Transfer
Protocol) to transfer documents formatted in HTML (Hypertext Mark-up Language). These
are viewed by using software for web browsers such as Netscape, Safari, Google Chrome and
Internet Explorer. Hypertext enables a document to be connected to other documents on the
web through hyperlinks. It is possible to move from one document to another by using
hyperlinked text found within web pages.
Nowadays, there are several ways that enable us to access the Internet. Technology is keep
improving, method to access the Internet also increase. People can now access Internet
services by using their cell phone, laptop and various gadgets. The numbers of Internet
service providers are also keep increasing. For example in Malaysia, there are many Internet
service providers such as TM Net, Maxis , Digi, Celcom, Umobile, etc.
Communication is becoming much easier than before due to the appearance of Internet. One
of the conveniences is that messages, in the forms of email, can be sent at any corner of the
world within fractions of seconds. Besides that, email also facilitated mass communication
which means that one sender reaches many receivers. Some of the services made available
due to Internet include video conferencing, live telecast, music, news, e-commerce, etc.
2
Internet usage and benefit
It is globalization and modernization nowadays, Internet become more and more useful and
come into everyday life. From the early days of computers to now, communication between
people to people has been the technology’s most frequent used. People using the Internet to
sent or received email. Using email leads people to spend more time online, encourages their
use of the Internet for information, entertainment. All this can save time and money because
it is consider efficiency enough and always is cheaper. As new Internet communication
services arise such as those instant messaging, chat rooms, online games, auctions (eBay),
and my groups, they become instantly popular.
Information searching is the second basic Internet function. Many use the Internet to search
and download some of the free, useful computer software that provided by the developers on
computers worldwide. The only major problem would be finding what you need among the
storehouses of data found in databases and libraries. It is therefore necessary to explain the
two major methods of accessing computers and locating files without the information
retrieval function would not be possible. There are also educational resources on the Internet.
They are in various forms such as journals and databases on different types of knowledge.
For example, people can access online journals, or learning languages. There are also special
homepages on special topics or subjects of interest. These sites are very helpful to those who
are doing academic research or even teachers. This will go a long way to improve their
knowledge to make them more competitive and knowledgeable. There are now even virtual
libraries and full degree programs, all available online.
In fact, it is undeniable a trend of commerce on the Internet. The communication facilities
have now rapidly become integrated as core business tools such as Internet market, banking,
and advertisement and so on. Thus most of the business functions are communicative in
nature. Users or consumer need not to waste their time on queue up waiting their transaction
and service. Internet makes communication with customers and other business partner even
to some respondent if related to some online survey.
The Internet Protocols –
FTP:(File transfer protocol) - One of the most oldest and probably the most popular protocol
to be used to move files on the Internet. –
TCP/IP :( Transmission Control Protocol and Internet Protocol) –
The low-level communications protocol that holds the Internet together. –
It provides means to allows two software on difference machines on the Internet find each
other, rendezvous, and transfer data.
3
- It provides the essential service of making sure that each piece of data is transferred in the
correct sequence and without error. –
SMTP: (the e-mail message protocol) - A protocol to allow two users to communicate
through e-mail messages over the Internet. –
NNTP: (Net News Transfer Protocol) - A protocol, which can be used to access or transfer
Usenet news over the Internet. –
Telnet: - The traditional teletype-style communications protocol for communicating with
text-based information services.
Evolution - The concept of Internet was originated in 1969 and has undergone several
technological & Infrastructural changes as discussed below:
• The origin of Internet devised from the concept ofAdvanced Research Project Agency
Network (ARPANET).
• ARPANET was developed by United States Department of Defense.
• Basic purpose of ARPANET was to provide communication among the various bodies
of government.
• Initially, there were only four nodes, formally called Hosts.
• In 1972, the ARPANET spread over the globe with 23 nodes located at different
countries and thus became known as Internet.
• By the time, with invention of new technologies such as TCP/IP protocols, DNS,
WWW, browsers, scripting languages etc., Internet provided a medium to publish and
access information over the web.
Advantages
Internet covers almost every aspect of life, one can think of. Here, we will discuss some of
the advantages of Internet:
• Internet allows us to communicate with the people sitting at remote locations. There are
various apps available on the wed that uses Internet as a medium for communication. One can
find various social networking sites such as:






Facebook
Twitter
Yahoo
Google+
Flickr
Orkut
• One can surf for any kind of information over the internet. Information regarding various
topics such as Technology, Health & Science, Social Studies, Geographical Information,
Information Technology, Products etc can be surfed with help of a search engine.
4
•
Apart from communication and source of information, internet also serves a medium
for entertainment. Following are the various modes for entertainment over internet.

Online Television


Online Games
Songs

Videos

Social Networking Apps

Internet allows us to use many services like:

Internet Banking


Matrimonial Services
Online Shopping

Online Ticket Booking

Online Bill Payment

Data Sharing

E-mail
•
Internet provides concept of electronic commerce, that allows the business deals to be
conducted on electronic systems
Disadvantages
However, Internet has proved to be a powerful source of information in almost every field,
yet there exists many disadvantages discussed below:
•
There are always chances to lose personal information such as name, address, credit
card number. Therefore, one should be very careful while sharing such information. One
should use credit cards only through authenticated sites.
•
Another disadvantage is the Spamming. Spamming corresponds to the unwanted e-
mails in bulk. These e-mails serve no purpose and lead to obstruction of entire system.
•
Virus can easily be spread to the computers connected to internet. Such virus attacks
may cause your system to crash or your important data may get deleted.
•
Also a biggest threat on internet is pornography. There are many pornographic sites
that can be found, letting your children to use internet which indirectly affects the children
healthy mental life.
•
There are various websites that do not provide the authenticated information. This
leads to misconception among many people.
5
IINNTTEERRNNEETT SSEERRVVIICCEESS
Internet Services allows us to access huge amount of information such as text, graphics,
sound and software over the internet. Following diagram shows the four different categories
of Internet Services.
Communication Services
There are various Communication Services available that offer exchange of information with
individuals or groups. The following table gives a brief introduction to these services:
1 Electronic Mail
Used to send electronic message over the internet.
2 Telnet
Used to log on to a remote computer that is attached to internet.
3 Newsgroup
Offers a forum for people to discuss topics of common interests.
4 Internet Relay Chat IRC
Allows the people from all over the world to communicate in real time.
5 Mailing Lists
Used to organize group of internet users to share common information through e-mail.
6 Internet Telephony VoIP
Allows the internet users to talk across internet to any PC equipped to receive the call.
7 Instant Messaging
Offers real time chat between individuals and group of people. Eg. Yahoo messenger,
MSN messenger.
Information Retrieval Services
There exist several Information retrieval services offering easy access to information present
on the internet. The following table gives a brief introduction to these services:
1 File Transfer Protocol FTP
Enable the users to transfer files.
2 Archie
It’s updated database of public FTP sites and their content. It helps to search a file by its
name.
3 Gopher
Used to search, retrieve, and display documents on remote sites.
4 Very Easy Rodent Oriented Netwide Index to Computer Achieved VERONICA
VERONICA is gopher based resource. It allows access to the information resource stored
6
on gopher’s servers.
Web Services
Web services allow exchange of information between applications on the web. Using web
services, applications can easily interact with each other.
The web services are offered using concept of Utility Computing.
World Wide Web WWW
WWW is also known as W3. It offers a way to access documents spread over the several
servers over the internet. These documents may contain texts, graphics, audio, video,
hyperlinks. The hyperlinks allow the users to navigate between the documents.
Video Conferencing
Video conferencing or Video teleconferencing is a method of communicating by two-way
video and audio transmission with help of telecommunication technologies.
Modes of Video Conferencing
Point-to-Point
This mode of conferencing connects two locations only.
Multi-point
This mode of conferencing connects more than two locations through Multi-point Control
Unit
MCU.
7
The World Wide Web: History







March, 1989, Tim Berners-Lee of Geneva s European Particle Physics Laboratory
(CERN) circulated a proposal to develop a hypertext system for global information
sharing in High Energy Physics community.
The World Wide Web project began to take shape at the beginning of 1991.
October 1991, the gateway for WAIS search (a crucial development for the Web s
future as search as well as a browsing tool),
Before the end of 1991, CERN announced the Web to the High Energy Physics
community in general.
Essentially, 1992 was a developmental year.
In March of 1993, WWW traffic clocked in at 0.1 percent of total Internet backbone
traffic.
In July of 1994, CERN began to turn over the Web project to a new group called the
W3 organization, a joint venture between CERN and MIT to develop the Web further.
The World Wide Web: HTTP
HTTP stands for HyperText Transfer Protocol. –
It is a simple data transfer protocol that binds the Web together.
 It supports the communications between a web client (browser) and its web server.
 It consists of a set of messages and replies for both servers and browsers.
 It treats documents, files, menus, and graphics as objects.
8


It relies on the Universal resource identifier (URI), enclosed in the universal resource
locator (URL), to identify files.
It uses the Internet s TCP/IP network protocol
The World Wide Web: URL - Uniform Resource Locators (URL)
the addresses of Web resources.
Usually, an URL leads to a file, but that s not always the case.
A URL can point you to a single record in a database, the front-end of an Internet program, or
a result of a query.
The World Wide Web: Protocols
- Hypertext Transfer Protocol (HTTP)
HTTP is the original Web Communication protocol which supports the connectionless
communications between a Web server and its clients above TCP layer.
- Secure Sockets Layer (SSL)
Developed by: Netscape Communications Corp.,
It is the most widely used security protocol on the Internet.
Where does it fit in? between TCP and the application. It provides security services
for any stream of data.
Features: Encrypting the communications, digital certificates.
- Secure HTTP (S-HTTP)
Developed by: Enterprise Integration Technologies (EIT). Not widely used.
Where does it fit in? at the application layer rather than the transport layer
Features: Clients and servers can specify authentication and
privacy capabilities independently of one another.
The World Wide Web: Applications
Distributing and Sharing Scientific Data:
Share scientific information ( data, papers, databases)
among scientists around the world
E-Commerce:
Electronic marketing and advertising, online shopping
(order/purchase, payment), online trading, online customer services.
Online Education and Training:
On-line courses, training program and information, distance learning
9
Organization and Public Service:
Distributing public service information for organizations and government offices.
Online Publishing:
Online books, magazines and journals, newspapers, Video, CD .
Online Banking and Trading:
Support online bank transactions for banks and stockbrokerages
What is the HTTP?
The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed,
collaborative, and hypermedia information systems. HTTP is the foundation of data
communication for the World Wide Web. Hypertext is structured text that uses logical links
(hyperlinks) between nodes containing text.
What is the main purpose of HTTP?
Purpose. The Hypertext Transfer Protocol (HTTP) is an application-level protocol for
distributed, collaborative, hypermedia information systems. HTTP has been in use by the
World-Wide Web global information initiative.
Why we have to use HTTP?
HTTPS is used to protect transmitted data from eavesdropping. It is the default protocol for
conducting financial transactions on the web, and can protect a website's users from
censorship by a government or an ISP. HTTPS uses port 443 to transfer its information.
What is HTTP protocol and how does it work?
The application protocol that makes the web work is Hypertext Transfer Protocol
orHTTP. Do not confuse this with the Hypertext Markup Language (HTML). HTML is the
language used to write web pages. HTTP is the protocol that web browsers and web servers
use to communicate with each other over the Internet.
Protocols are often described in an industry or international standard. The TCP/IP
Internet protocols, a common example, consist of: Transmission Control Protocol(TCP),
which uses a set of rules to exchange messages with other Internet points at the information
packet level.
What is the difference http and https?
Instead of HyperText Transfer Protocol (HTTP), this website uses HyperText Transfer
Protocol Secure (HTTPS). Using HTTPS, the computers agree on a "code" between them,
and then they scramble the messages using that "code" so that no one in between can read
them. This keeps your information safe from hackers.
URL
Definition:
URL is an acronym for Uniform Resource Locator and is a reference (an address) to a
resource on the Internet.
10
Overview of a URL
Below is additional information about each of the sections of the http URL for this page.
http://
The "http" stands for HyperText Transfer Protocol and is what enables the browser to know
what protocol it is going to use to access the information specified in thedomain. After the
http is the colon ( : ) and two forward slashes ( // ) that separate the protocol from the
remainder of the URL.
What characters are not allowed in a URL?
Most people realize that a space is not allowed in a URL. However, it is also important to
realize, as documented in RFC 1738, the URL string can only contain alphanumeric
characters and the !$-_+*'(), characters. Any other characters that are needed in the URL
must be encoded.
list of various URL prefixes:

http – a webpage, website directory, or other file available over HTTP

ftp – a file or directory of files available to download from an FTP server

news – a discussion located within a specific newsgroup

telnet – a Unix-based computer system that supports remote client connections

gopher – a document or menu located on a gopher server

wais - a document or search results from a WAIS database

mailto - an email address (often used to redirect browsers to an email client)

file - a file located on a local storage device (though not technically a URL because
it does not refer to an Internet-based location)
11
WEEBB SSEERRVVEER
Overview
Web server is a computer where the web content is stored. Basically web server is used to
host the web sites but there exists other web servers also such as gaming, storage, FTP, email
etc.
Web Server Working
Web server respond to the client request in either of the following two ways:
 Sending the file to the client associated with the requested URL.
 Generating response by invoking a script and communicating with database
Key Points
When client sends request for a web page, the web server search for the requested page if
requested page is found then it will send it to client with an HTTP response. If the requested
web page is not found, web server will the send an HTTP response:Error 404 Not found.
If client has requested for some other resources then the web server will contact to the
application server and data store to construct the HTTP response.
Architecture
Web Server Architecture follows the following two approaches:
1. Concurrent Approach
2. Single-Process-Event-Driven Approach.
Concurrent Approach
Concurrent approach allows the web server to handle multiple client requests at the same
time. It
can be achieved by following methods:
 Multi-process
 Multi-threaded
 Hybrid method.
12
Multi-processing
In this a single process parentprocess initiates several single-threaded child processes and
distribute incoming requests to these child processes. Each of the child processes are
responsible for handling single request.
It is the responsibility of parent process to monitor the load and decide if processes should be
killed or forked.
Multi-threaded
Unlike Multi-process, it creates multiple single-threaded process.
Hybrid
It is combination of above two approaches. In this approach multiple process are created and
each process initiates multiple threads. Each of the threads handles one connection. Using
multiple threads in single process results in less load on system resources.
Examples
Following table describes the most leading web servers available today:
1 Apache HTTP Server
This is the most popular web server in the world developed by the Apache Software
Foundation. Apache web server is an open source software and can be installed on almost all
operating systems including Linux, UNIX, Windows, FreeBSD, Mac OS X and more. About
60% of the web server machines run the Apache Web Server.
2. Internet Information Services IIS
The Internet Information Server IIS is a high performance Web Server from Microsoft. This
web
server
runs
on
Windows
NT/2000
and
2003
platforms
andmaybeonupcomingnewWindowsversionalso. IIS comes bundled with Windows NT/2000
and
2003; Because IIS is tightly integrated with the operating system so it is relatively easy to
administer it.
3. Lighttpd
The lighttpd, pronounced lighty is also a free web server that is distributed with the FreeBSD
operating system. This open source web server is fast, secure and consumes much less CPU
power. Lighttpd can also run on Windows, Mac OS X, Linux and Solaris operating systems.
4. Sun Java System Web Server
This web server from Sun Microsystems is suited for medium and large web sites. Though
the server is free it is not open source. It however, runs on Windows, Linux and UNIX
platforms. The Sun Java System web server supports various languages, scripts and
technologies required for Web 2.0 such as JSP, Java Servlets, PHP, Perl, Python, and Ruby
on Rails, ASP and Coldfusion etc.
5. Jigsaw Server
Jigsaw W3C′sServer comes from the World Wide Web Consortium. It is open source and free
and can run on various platforms like Linux, UNIX, Windows, and Mac OS X Free BSD etc.
Jigsaw has been written in Java and can run CGI scripts and PHP programs.
13
PPRROXXYY SSEERRVVEER
Overview
Proxy server is an intermediary server between client and the internet. Proxy servers offers
the Following basic functionalities:
 Firewall and network data filtering.
 Network connection sharing
 Data caching
Purpose of Proxy Servers
Following are the reasons to use proxy servers:
 Monitoring and Filtering
 Improving performance
 Translation
 Accessing services anonymously
 Security
Monitoring and Filtering
Proxy servers allow us to do several kind of filtering such as:
 Content Filtering
 Filtering encrypted data
 Bypass filters
 Logging and eavesdropping
Improving performance
 It fasten the service by process of retrieving content from the cache which was saved
when
 Previous request was made by the client.
Translation
 It helps to customize the source site for local users by excluding source content or
substituting
 Source content with original local content. In this the traffic from the global users is
routed to the
 Source website through Translation proxy.
Accessing services anonymously
 In this the destination server receives the request from the anonymzing proxy server
and thus
 Does not receive information about the end user.
Security
Since the proxy server hides the identity of the user hence it protects from spam and the
hacker attacks.
14
Type of Proxies
Following table briefly describes the type of proxies:
1.Forward Proxies
In this the client requests its internal network server to forward to the internet.
2.Open Proxies
Open Proxies helps the clients to conceal their IP address while browsing the web.
3.Reverse Proxies
In this the requests are forwarded to one or more proxy servers and the response from the
proxy
server is retrieved as if it came directly from the original Server.
15
Architecture
The proxy server architecture is divided into several modules as shown in the following
diagram:
16
Proxy user interface
This module controls and manages the user interface and provides an easy to use graphical
interface, window and a menu to the end user. This menu offers the following functionalities:
 Start proxy
 Stop proxy
 Exit
 Blocking URL
 Blocking client
 Manage log
 Manage cache
 Modify configuration
Proxy server listener
 It is the port where new request from the client browser is listened. This module also
performs
 blocking of clients from the list given by the user.
Connection Manager
 It contains the main functionality of the proxy server. It performs the following
functions:
 It contains the main functionality of the proxy server. It performs the following
functions:
 Read request from header of the client.
 Parse the URL and determine whether the URL is blocked or not.
 Generate connection to the web server.
 Read the reply from the web server.
 If no copy of page is found in the cache then download the page from web server else
will
 check its last modified date from the reply header and accordingly will read from the
cache
 or server from the web.
 Then it will also check whether caching is allowed or not and accordingly will cache
the page.
Cache Manager
 This module is responsible for storing, deleting, clearing and searching of web pages
in the cache.
Log Manager
 This module is responsible for viewing, clearing and updating the logs.
Configuration
 This module helps to create configuration settings which in turn let other modules to
perform
 Desired configurations such as caching.
17
WEEBB PPAAGEESS
Web Page
web page is a document available on world wide web. Web Pages are stored on web server
and can be viewed using a web browser.
A web page can cotain huge information including text, graphics, audio, video and hyper
links.
Static Web page
Static web pages are also known as flat or stationary web page. They are loaded on the
client’s browser as exactly they are stored on the web server. Such web pages contain only
static information. User can only read the information but can’t do any modification or
interact with the information. Static web pages are created using only HTML. Static web
pages are only used when the information is no more required to be modified.
Dynamic Web page
Dynamic web page shows different information at different point of time. It is possible to
change a portaion of a web page without loading the entire web page. It has been made
possible using Ajax technology.
Server-side dynamic web page
It is created by using server-side scripting. There are server-side scripting parameters that
determine how to assemble a new web page which also include setting up of more client-side
processing.
Client-side dynamic web page
It is processed using client side scripting such as JavaScript. And then passed in to Document
Object Model DOM.
Scripting Laguages
Scripting languages are like programming languages that allow us to write programs in form
of
script. These scripts are interpreted not compiled and executed line by line.
Client-side Scripting
Client-side scripting refers to the programs that are executed on client-side. Client-side
scripts
contains the instruction for the browser to be executed in response to certain user’s action.
18
Following table describes commonly used Client-Side scripting languages:
1. JavaScript
It is a prototype based scripting language. It inherits its naming conventions from java. All
java script files are stored in file having .js extension.
2. ActionScriptIt is an object oriented programming language used for the development of
websites and software targeting Adobe flash player.
3. Dart
It is an open source web programming language developed by Google. It relies on source-tosource compiler to JavaScript.
4. VBScript
It is an open source web programming language developed by Microsoft. It is superset of
JavaScript and adds optional static typing class-based object oriented programming.
Server-side Scripting
Sever-side scripting acts as an interface for the client and also limit the user access the
resources on web server. It can also collects the user’s characteristics in order to customize
response.
19
Following table describes commonly used Server-Side scripting languages:
1. ASP: Active Server Pages ASPis server-side script engine to create dynamic web pages. It
supports Component Object Model COM which enables ASP web sites to access
functionality of libraries such as DLL.
2. ActiveVFP: It is similar to PHP and also used for creating dynamic web pages. It uses
native Visual Foxpro language and database.
3. ASP.net: It is used to develop dynamic websites, web applications, and web services.
4. Java: Java Server Pages are used for creating dynamic web applications. The Java code is
compiled into byte code and run by Java Virtual Machine JVM.
5. Python: It supports multiple programming paradigms such as object-oriented, and
functional
programming. It can also be used as non-scripting language using third party tools such as
Py2exe or Pyinstaller.
6. WebDNA: It is also a server-side scripting language with an embedded database system.
WEBSITES UURRLL RREEGIISSTTRRAATTIIONN
A domain name becomes your Business Address so care should be taken to select a domain
name. Your domain name should be easy to remember and easy to type.
Domain Extensions
20
The final letter at end of internet address is known as top level domain names. They are
called top level because they are read from right to left, and the part after the dot is the
highest in a hierarchy.
following table shows the Generic Top-Level Domain names:
Domain Meaning
.com
Commercial Busness
.edu
Education
.gov
U.S. government agency
.int
International Entity
.mil
U.S. military
.net
Networking organization
.org
Non profit organization
Registering Domain Name
Registering a Domain Name is very simple. You can take following step to get your desired
domain
name registered:
Think of a name that justifies your business need. To find out the available names you can
enter a name at commercial domain name registrar such as GoDaddy.
If the domain name entered by you is available, then select that particular domain name.
Now it will ask you for other additional services such as Email inbox, hosting etc. that host
also provides. You may choose what’s best for you.
Now they will ask you for your personal information which is stored in WHOIS database.
It will then ask for payment information. Pay for the purchase you have made. Make sure you
enter the correct payment information.
Once you are done with all above steps, you are ready to use their tools to upload your stuff
to your site.
21
WEEBBSSIITTEE DEEVVEELLOPPMEENNTT
Web development
Web development refers to building website and deploying on the web. Web development
requires use of scripting languages both at the server end as well as at client end.
Web Development Process
Web development process includes all the steps that are good to take to build an attractive,
effective and responsive website. These steps are shown in the following diagram:
22
Web development tools
Web development tools help the developer to test and debug the web sites. Now a day the
web development tool comes with the web browsers as add-ons. All web browsers have built
in tools for this purpose. These tools allow the web developer to use HTML, CSS and
JavaScript etc. These are accessed by hovering over an item on a web page and selecting the
“Inspect Element” from the context menu.
Features: Following are the common features that every web development tool exhibits:
23
HTML and the DOM
HTML and DOM viewer allows you to see the DOM as it was rendered. It also allows to
make changes to HTML and DOM and see the changes reflected in the page after the change
is made.
Web Page Assests, Resources, and Network Information
Web development tools also helps to inspect the resources that are loaded and available on
the
web page.
Profiling and Auditing
Profiling refers to get information about the performance of a web page or web application
and
Auditing provides developers suggestions, after analyzing a page, for optimizations to
decrease page load time and increase responsiveness.
Skills Required
For being a successful web developer, one should possess the following skills:
 Understanding of client and server side scripting.
 Creating, editing and modifying templates for a CMS or web development
framework.
 Testing cross browser inconsistencies.
 Conducting observational user testing.
 Testing for compliance to specified standards such as accessibility standards in the
client
region.
 Programming interaction with javaScript, PHP, and Jquery etc.
24
Static vs Dynamic website
Static website
Static website is the basic type of website that is easy to create. You don't need the
knowledge of web programming and database design to create a static website. Its web pages
are coded in HTML.
The codes are fixed for each page so the information contained in the page does not change
and it looks like a printed page.
Dynamic website
Dynamic website is a collection of dynamic web pages whose content changes dynamically.
It accesses content from a database or Content Management System (CMS). Therefore, when
you alter or update the content of the database, the content of the website is also altered or
updated.
Dynamic website uses client-side scripting or server-side scripting, or both to generate
dynamic content.
Client side scripting generates content at the client computer on the basis of user input. The
web browser downloads the web page from the server and processes the code within the page
to render information to the user.
In server side scripting, the software runs on the server and processing is completed in the
server then plain pages are sent to the user.
Static vs Dynamic website
Static Website
Dynamic Website
Prebuilt content is same every time the
page is loaded.
Content is generated quickly and changes
regularly.
It uses the HTML code for developing a
website.
It uses the server side languages such
as PHP,SERVLET, JSP, and ASP.NET etc.
for developing a website.
25
It sends exactly the same response for
every request.
It may generate different HTML for each of the
request.
The content is only changed when
someone publishes and updates the file
(sends it to the web server).
The page contains "server-side" code which
allows the server to generate the unique content
when the page is loaded.
Flexibility is the main advantage of
static website.
Content Management System (CMS) is the
main advantage of dynamic website.
Types of Websites
1 E-commerce
An E-commerce website is an online shop where people can order goods and make payments
from the comfort of their own homes. If you have products to sell and would like to enjoy the
benefits of not having to run a traditional bricks-and-mortar shop with things like overheads
to consider, then this is definitely the way forward.
2 Blogs and Personal
Personal websites have been a favourite for families and people who wish to document the
big occasions of their lives such as weddings, new babies or their travels. These days, the
modern alternative; blogging has become an extremely popular. Blogs are usually updated
frequently and older posts can be viewed through archives.
3 Informational
Information websites are particularly helpful. People no longer have to visit libraries and take
out books for basic information. Any question that comes into someone’s mind nowadays is
often swiftly followed up with a quick search on Google to find their answer. A great deal
can be learned online and many people are now researching and self-teaching with online
tutorials, hacks and tips from such websites.
4 Online Community
Community forums are a great way to get in touch and share ideas with people with the same
interests or from similar backgrounds through the Internet. This interactive feature can be the
main focus of the website, or just a part of it so that visitors can discuss what the site is about.
5 Photo Sharing
Websites such as Pixabay.com allow people to upload and download photos for free. You can
get paid with advertising on a photo-sharing website or by selling good quality high
resolution images that people will want to purchase, perhaps for commercial purposes.
6 Resume
Much better than just listing your skills on paper, an interactive online resume showcases
who you are, not just your qualifications, giving you much more control over your first
impressions with prospective employers.
7 Portfolio
Ideal for showcasing your work, everyone from landscape photographers to fashion models
have an online portfolio these days to show off their talent to potential employers.
26
8 Catalogue and Brochure
If you have a product or a service that does not require payment online, then an online
catalogue or brochure will enable you to display what you have on offer and attract potential
clients. Spreading the word about a business used to be limited to television, print or radio,
however a website gives a much wider reach. Online brochures are a great idea for dental
surgeries, hair salons, holiday destinations and manufacturers.
9 Business Directory
Instead of flicking through the pages of a massive phone directory to find services and
businesses, in this day and age we use online directory websites. They can be dedicated to a
specific location, topic or industry. Directory websites serve as useful lists of resources.
10 Bio
Authors and writers have their own websites which include their biography, a catalogue of
their works with reviews and comments, as well as links to their social media, blog and
places their publications are being sold online. This is especially useful in the world of
publishing and establishment of a fan base.
 HTML Fundamentals
Brief History of HTML
In the late 1980's, A physicist, Tim Berners-Lee who was a contractor at CERN,
proposed a system for CERN researchers. In 1989, he wrote a memo proposing an
internet based hypertext system.
Tim Berners-Lee is known as father of HTML. The first available description of
HTML was a document called "HTML Tags" proposed by Tim in late 1991.
o
o
o
o
o
The major points of HTML are given below:
HTML stands for Hyper Text Markup Language.
HTML is used to create web pages.
HTML is widely used language on the web.
We can create static website by HTML only.
What is HTML
HTML is an acronym which stands for Hyper Text Markup Language. Let's see what
is Hyper Text and what is Markup Language?
o
Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it,
is a hypertext. Every time when you click on a word which brings you to a new
webpage, you have clicked on a hypertext.
o Markup language: A markup language is a programming language that is used make
text more interactive and dynamic. It can turn a text into images, tables, links etc.
o An HTML document is made of many HTML tags and each HTML tag contains
different content.
Let's see a simple example of HTML.
1. <!DOCTYPE>
2. <html>
3. <body>
27
4.
5.
6.
7.



<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Description of HTML Example
DOCTYPE: It defines the document type.
html : Text between html tag describes the web document.
body : Text between body tag describes the body content of the page that is visible to
the end user.
h1 : Text between h1 tag describes the heading of the webpage.
p : Text between p tag describes the paragraph of the webpage.
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make effective presentation with HTML because it has a lot
of formatting tags.
3) It is a markup language so it provides a flexible way to design web pages along
with the text.
4) It facilitates programmers to add link on the web pages (by html anchor tag) , so it
enhances the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like
Windows, Linux and Macintosh etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web
pages which makes it more attractive and interactive.
Basic Components of HTML
HTML
<HTML>
.........
.........
.........
</HTML>
These elements indicate that the enclosed text is an HTML document.
Comments
<HTML>
<!-Comments
.........
.........
.........
</HTML>
Comments can be placed between <!-- and -->.
HEAD
<HTML>
<!--
.........
-->
-->
28
<HEAD>
Header
material
</HEAD>
.........
.........
.........
</HTML>
The HEAD element is a container for information about the document. It is not
displayed as part of the document by a WWW browser. It can for example contain
a TITLE.

TITLE
<HTML>
<!-.........
-->
<HEAD>
<TITLE>
Title
of
document
</TITLE>
</HEAD>
.........
.........
.........
</HTML>
The contents of the TITLE element is displayed apart from the text, often in the menu
bar. The title is also the name of a bookmark that a user may place, so it is important
to give informative titles.

BODY
<HTML>
<!-.........
-->
<HEAD>
<TITLE>
.........
</TITLE>
</HEAD>
<BODY>
.........
.........
.........
</BODY>
</HTML>
Along with HEAD goes the BODY. This element contains all the text and other
material that is to be displayed.
29
HTML Tags
HTML tags contain three main parts: opening tag, content and closing tag. But some
HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom
and left to right. HTML tags are used to create HTML documents and render their
properties. Each HTML tags have different properties.
Syntax
<tag> content </tag>
HTML Tag Examples :
Note: HTML Tags are always written in lowercase letters. The basic HTML tags are
given below:
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the
webpage.
HTML Meta Tags
DOCTYPE, title, link, meta and style
HTML Text Tags
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>,
<pre>, <samp>, <var> and <br>
HTML Link Tags
<a> and <base>
HTML Image and Object Tags
<img>, <area>, <map>, <param> and <object>
HTML List Tags
<ul>, <ol>, <li>, <dl>, <dt> and <dd>
HTML Table Tags
table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption
HTML Form Tags
form, input, textarea, select, option, optgroup, button, label, fieldset and legend
30
1.
1.
1.
1.
1.
1.
1.
HTML Scripting Tags
script and noscript
HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. There are
many formatting tags in HTML. These tags are used to make text bold, italicized, or
underlined. There are almost 12 options available that how text appears in HTML and
XHTML.
Here, we are going to learn 12 HTML formatting tags.
1) Bold Text
If you write anything within <b>............</b> element, is shown in bold letters.
See this example:
<p> <b>Write Your First Paragraph in bold text.</b></p>
2) Italic Text
If you write anything within <i>............</i> element, is shown in italic letters.
See this example:
<p> <i>Write Your First Paragraph in italic text.</i></p>
3) HTML Marked formatting
If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.
See this example:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.
See this example:
<p> <u>Write Your First Paragraph in underlined text.</u></p>
Strike Text
Anything written within <strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.
See this example:
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Monospaced Font
If you want that each letter has the same width then you should write the content
within <tt>.............</tt> element.
Note: We know that most of the fonts are known as variable-width fonts because
different letters have different width. (for example: 'w' is wider than 'i'). Monospaced
Font provides similar space among every letter.
See this example:
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
Superscript Text
If you put the content within ^{..............} element, is shown in superscript ;
means it is displayed half a character's height above the other characters.
See this example:
<p>Hello ^{Write Your First Paragraph in superscript.}</p>
31
1.
1.
1.
1.
1.
Subscript Text
If you put the content within _{..............} element, is shown in subscript ;
means it is displayed half a character's height below the other characters.
See this example:
<p>Hello _{Write Your First Paragraph in subscript.}</p>
Deleted Text
Anything that puts within <del>..........</del> is displayed as deleted text.
See this example:
<p>Hello <del>Delete your first paragraph.</del></p>
Inserted Text
Anything that puts within <ins>..........</ins> is displayed as inserted text.
See this example:
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p
>
Larger Text
If you want to put your font size larger than the rest of the text then put the content
within <big>.........</big>. It increase one font size larger than the previous one.
See this example:
<p>Hello <big>Write the paragraph in larger font.</big></p>
Smaller Text
If you want to put your font size smaller than the rest of the text then put the content
within <small>.........</small>tag. It reduces one font size than the previous one.
See this example:
<p>Hello <small>Write the paragraph in smaller font.</small></p>
HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you
want to display on the webpage. When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold format and size of the text
depends on the number of heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags.
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most
important heading and h6 is used for least important.
See this example:
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
HTML Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's
take a simple example to see how it work. It is a notable point that a browser itself
add an empty line before and after a paragraph.
32
See this example:
1. <p>This is first paragraph.</p>
2. <p>This is second paragraph.</p>
3. <p>This is third paragraph.</p>
HTML Ordered List | HTML Numbered List
HTML Ordered List or Numbered List displays elements in numbered format. The
HTML ol tag is used for ordered list. There can be different types of numbered list:
o Numeric Number (1, 2, 3)
o Capital Roman Number (I II III)
o Small Romal Number (i ii iii)
o Capital Alphabet (A B C)
o Small Alphabet (a b c)
To represent different ordered lists, there are 5 types of attributes in <ol> tag.
Type
Description
Type "1"
This is the default type. In this type, the list items are numbered with
numbers.
Type "I"
In this type, the list items are numbered with upper case roman
numbers.
Type "i"
In this type, the list items are numbered with lower case roman
numbers.
Type
"A"
In this type, the list items are numbered with upper case letters.
Type "a"
In this type, the list items are numbered with lower case letters.
HTML Ordered List Example
Let's see the example of HTML ordered list that displays 4 topics in numbered list.
Here we are not defining type="1" because it is the default type.
<ol>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
33
1.
2.
3.
4.
I.
II.
III.
IV.
i.
ii.
iii.
iv.
A.
B.
C.
D.
HTML
Java
JavaScript
SQL
ol type="I"
Let's see the example to display list in roman number uppercase.
<ol type="I">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
HTML
Java
JavaScript
SQL
ol type="i"
Let's see the example to display list in roman number lowercase.
<ol type="i">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
HTML
Java
JavaScript
SQL
ol type="A"
Let's see the example to display list in alphabet uppercase.
<ol type="A">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
HTML
Java
JavaScript
SQL
34
ol type="a"
Let's see the example to display list in alphabet lowercase.
<ol type="a">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
a.
b.
c.
d.
o
o
o
o
Output:
HTML
Java
JavaScript
SQL
HTML Unordered List | HTML Bulleted List
HTML Unordered List or Bulleted List displays elements in bulleted format. The
HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:
disc
circle
square
none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
Type
Description
Type "disc"
This is the default style. In this style, the list items are marked with
bullets.
Type "circle"
In this style, the list items are marked with circles.
Type
"square"
In this style, the list items are marked with squares.
Type "none"
In this style, the list items are not marked .
HTML Unordered List Example
<ul>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
35
o
o
o
o
Output:
HTML
Java
JavaScript
SQL
ul type="circle"
<ul type="circle">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
o
o
o
o
Output:
HTML
Java
JavaScript
SQL
ul type="square"
<ul type="square">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
o
o
o
o
Output:
HTML
Java
JavaScript
SQL
ul type="none"
<ul type="none">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
o
Output:
HTML
36
o
o
o
Java
JavaScript
SQL
HTML - Fonts
Fonts play a very important role in making a website more user friendly and
increasing content readability. Font face and color depends entirely on the computer
and browser that is being used to view your page but you can use HTML <font> tag
to add style, size, and color to the text on your website. You can use a <basefont> tag
to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and faceto customize your
fonts. To change any of the font attributes at any time within your webpage, simply
use the <font> tag. The text that follows will remain changed until you close with the
</font> tag. You can change one or all of the font attributes within one <font> tag.
Note −The font and basefont tags are deprecated and it is supposed to be removed in
a future version of HTML. So they should not be used rather, it's suggested to use
CSS styles to manipulate your fonts. But still for learning purpose, this chapter will
explain font and basefont tags in detail.
Set Font Size
You can set content font size using size attribute. The range of accepted values is
from 1(smallest) to 7(largest). The default size of a font is 3.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>
Relative Font Size
You can specify how many sizes larger or how many sizes smaller than the preset font
size should be. You can specify it like <font size = "+n"> or <font size = "−n">
Example
37
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>
Setting Font Face
You can set font face using face attribute but be aware that if the user viewing the
page doesn't have the font installed, they will not be able to see it. Instead user will
see the default font face applicable to the user's computer.
Example
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>
Specify alternate font faces
A visitor will only be able to see your font if they have that font installed on their
computer. So, it is possible to specify two or more font face alternatives by listing the
font face names, separated by a comma.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">
38
When your page is loaded, their browser will display the first font face available. If
none of the given fonts are installed, then it will display the default font face Times
New Roman.
Note − Check a complete list of HTML Standard Fonts.
Setting Font Color
You can set any font color you like using color attribute. You can specify the color
that you want by either the color name or hexadecimal code for that color.
Note − You can check a complete list of HTML Color Name with Codes.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>
The <basefont> Element
The <basefont> element is supposed to set a default font size, color, and typeface for
any parts of the document that are not otherwise contained within a <font> tag. You
can use the <font> elements to override the <basefont> settings.
The <basefont> tag also takes color, size and face attributes and it will support
relative font setting by giving size a value of +1 for a size larger or −2 for two sizes
smaller.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the &lt;basefont&gt; Element</h2>
39
<p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>
<p><font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font>
</p>
</body>
</html>
Marquee HTML
The Marquee HTML tag is a non-standard HTML element which is used to scroll a
image or text horizontally or vertically.
In simple words, you can say that it scrolls the image or text up, down, left or right
automatically.
Marquee tag was first introduced in early versions of Microsoft's Internet Explorer. It
is compared with Netscape's blink element.
Marquee HTML Example
<marquee>This is an example of html marquee </marquee>
HTML Marquee Attributes
Marquee's element contains several attributes that are used to control and adjust the
appearance of the marquee.
Attribute
Description
behavior
It facilitates user to set the behavior of the marquee to one of the
three different types: scroll, slide and alternate.
direction
defines direction for scrolling content. It may be left, right, up and
down.
width
defines width of marquee in pixels or %.
height
defines height of marquee in pixels or %.
40
hspace
defines horizontal space in pixels around the marquee.
vspace
defines vertical space in pixels around the marquee.
scrolldelay
defines scroll delay in seconds.
scrollamount
defines scroll amount in number.
loop
defines loop for marquee content in number.
bgcolor
defines background color. It is now deprecated.
HTML Scroll Marquee
It is a by default property. It is used to scroll the text from right to left, and restarts at
the right side of the marquee when it is reached to the end of left side. After the
completion of loop text disappears.
<marquee width="100%" behavior="scroll" bgcolor="pink">
This is an example of a scroll marquee...
</marquee>
HTML Slide Marquee
In slide marquee, all the contents to be scrolled will slide the entire length of marquee
but stops at the end to display the content permanently.
<marquee width="100%" behavior="slide" bgcolor="pink">
This is an example of a slide marquee...
</marquee>
HTML Alternate Marquee
It scrolls the text from right to left and goes back left to right.
<marquee width="100%" behavior="alternate" bgcolor="pink">
This is an example of a alternate marquee...
</marquee>
Direction in HTML marquee
This is used to change the direction of scrolling text. Let's take an example of
marquee scrolling to the right. The direction can be left, right, up and down.
<marquee width="100%" direction="right">
This is an example of a right direction marquee...
</marquee>
Nested marquee example
<marquee width="400px" height="100px" behavior="alternate" style="border:2px so
lid red">
41
<marquee behavior="alternate">
Nested marquee...
</marquee>
</marquee>
Disadvantages HTML marquee
1) Marquee may be distracting because human eyes are attracted towards movement
and marquee text constantly.
2) Since Marquee text moves, so it is more difficult to click static text, depending on
the scrolling speed.
3) It is a non-standard HTML element.
4) It draws user's attention needlessly and makes the text harder to read.
Images
HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty
tag that contains attributes only, closing tags are not used in HTML image element.
Let's see an example of HTML image.
<h2>HTML Image Example</h2>
<img src="good_morning.jpg" alt="Good Morning Friends"/>
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML
image tag are given below.
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The
value of the alt attribute describe the image in words. The alt attribute is considered
good for SEO prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is
not recommended now. You should apply CSS in place of width attribute.
4) height
It specifies the height of the image. The HTML height attribute also supports iframe,
image and object elements. It is not recommended now. You should apply CSS in
place of height attribute.
Insert Image
You can insert any image in your web page by using <img> tag. Following is the
simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes
and it has no closing tag.
Example
42
To try following example, let's keep our HTML file test.htm and image file test.png in
the same directory −
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
You can use PNG, JPEG or GIF image file based on your comfort but make sure you
specify correct image file name in srcattribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an
image, if the image cannot be displayed.
Set Image Location
Usually we keep all the images in a separate directory. So let's keep HTML file
test.htm in our home directory and create a subdirectory images inside the home
directory where we will keep our image test.png.
Example
Assuming our image location is "image/test.png", try the following example −
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
Set Image Width/Height
You can set image width and height based on your requirement
using width and height attributes. You can specify width and height of the image in
terms of either pixels or percentage of its actual size.
Example
<!DOCTYPE html>
<html>
<head>
43
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height =
"100"/>
</body>
</html>
Set Image Border
By default, image will have a border around it, you can specify border thickness in
terms of pixels using border attribute. A thickness of 0 means, no border around the
picture.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>
Set Image Alignment
By default, image will align at the left side of the page, but you can use align attribute
to set it in the center or right.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align =
"right"/>
</body>
</html>
HTML - Backgrounds
By default, your webpage background is white in color. You may not like it, but no
worries. HTML provides you following two good ways to decorate your webpage
background.
44


Html Background with Colors
Html Background with Images
Now let's see both the approaches one by one using appropriate examples.
Html Background with Colors
The bgcolor attribute is used to control the background of an HTML element,
specifically page body and table backgrounds. Following is the syntax to use bgcolor
attribute with any HTML tag.
<tagname bgcolor = "color_value"...>
This color_value can be given in any of the following formats −
<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >
Example
Here are the examples to set background of an HTML tag −
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
45
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>
This will produce the following result −
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. You can specify an image to
set background of your HTML page or table. Following is the syntax to use
background attribute with any HTML tag.
Note − The background attribute is deprecated and it is recommended to use Style
Sheet for background setting.
<tagname background = "Image URL"...>
The most frequently used image formats are JPEG, GIF and PNG images.
Example
Here are the examples to set background images of a table.
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>
This will produce the following result −
Patterned & Transparent Backgrounds
You might have seen many pattern or transparent backgrounds on various websites.
This simply can be achieved by using patterned image or transparent image in the
background.
It is suggested that while creating patterns or transparent GIF or PNG images, use the
smallest dimensions possible even as small as 1x1 to avoid slow loading.
Example
Here are the examples to set background pattern of a table −
<!DOCTYPE html>
46
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>








<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
</body>
</html>
HTML - Colors
Colors are very important to give a good look and feel to your website. You can
specify colors on page level using <body> tag or you can set colors for individual tags
using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors −
bgcolor − sets a color for the background of the page.
text − sets a color for the body text.
alink − sets a color for active links or selected links.
link − sets a color for linked text.
vlink − sets a color for visited links − that is, for linked text that you have already
clicked on.
HTML Color Coding Methods
There are following three different methods to set colors in your web page −
Color names − You can specify color names directly like green, blue or red.
Hex codes − A six-digit code representing the amount of red, green, and blue that
makes up the color.
Color decimal or percentage values − This value is specified using the rgb( )
property.
Now we will see these coloring schemes one by one.
47
HTML Colors - Color Names
You can specify direct a color name to set text or background color. W3C has listed
16 basic color names that will validate with an HTML validator but there are over 200
different color names supported by major browsers.
Note − Check a complete list of HTML Color Name.
W3C Standard 16 Colors
Here is the list of W3C Standard 16 Colors names and it is recommended to use them.
Black
Gray
Silver
White
Yellow
Lime
Aqua
Fuchsia
Red
Green
Blue
Purple
Maroon
Olive
Navy
Teal
Example
Here are the examples to set background of an HTML tag by color name −
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black
background.</font>
</td>
</tr>
</table>
</body>
</html>
HTML Colors - Hex Codes
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent
a red value, the next two are a green value(GG), and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop,
Paintshop Pro or MS Paint.
Each hexadecimal code will be preceded by a pound or hash sign #. Following is a list
of few colors using hexadecimal notation.
48
Color
Color HEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
Example
Here are the examples to set background of an HTML tag by color code in
hexadecimal −
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black
background.</font>
</td>
</tr>
</table>
49
</body>
</html>
HTML Colors - RGB Values
This color value is specified using the rgb( ) property. This property takes three
values, one each for red, green, and blue. The value can be an integer between 0 and
255 or a percentage.
Note − All the browsers does not support rgb() property of color so it is
recommended not to use it.
Following is a list to show few colors using RGB values.
Color
Color RGB
rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,0)
rgb(0,255,255)
rgb(255,0,255)
rgb(192,192,192)
rgb(255,255,255)
Example
Here are the examples to set background of an HTML tag by color code using rgb()
values −
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
50
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black
background.</font>
</td>
</tr>
</table>
</body>
</html>
Browser Safe Colors
Here is the list of 216 colors which are supposed to be safest and computer
independent colors. These colors very from hexa code 000000 to FFFFFF and they
will be supported by all the computers having 256 color palette.
0000
00
0000
33
0000
66
0000
99
0000
CC
0000
FF
0033
00
0033
33
0033
66
0033
99
0033
CC
0033
FF
0066
00
0066
33
0066
66
0066
99
0066
CC
0066
FF
0099
00
0099
33
0099
66
0099
99
0099
CC
0099
FF
00CC
00
00CC
33
00CC
66
00CC
99
00CC
CC
00CC
FF
00FF
00
00FF
33
00FF
66
00FF
99
00FF
CC
00FF
FF
3300
00
3300
33
3300
66
3300
99
3300
CC
3300
FF
51
3333
00
3333
33
3333
66
3333
99
3333
CC
3333
FF
3366
00
3366
33
3366
66
3366
99
3366
CC
3366
FF
3399
00
3399
33
3399
66
3399
99
3399
CC
3399
FF
33CC
00
33CC
33
33CC
66
33CC
99
33CC
CC
33CC
FF
33FF
00
33FF
33
33FF
66
33FF
99
33FF
CC
33FF
FF
6600
00
6600
33
6600
66
6600
99
6600
CC
6600
FF
6633
00
6633
33
6633
66
6633
99
6633
CC
6633
FF
6666
00
6666
33
6666
66
6666
99
6666
CC
6666
FF
6699
00
6699
33
6699
66
6699
99
6699
CC
6699
FF
66CC
00
66CC
33
66CC
66
66CC
99
66CC
CC
66CC
FF
66FF
00
66FF
33
66FF
66
66FF
99
66FF
CC
66FF
FF
9900
00
9900
33
9900
66
9900
99
9900
CC
9900
FF
9933
9933
9933
9933
9933
9933
52
00
33
66
99
CC
FF
9966
00
9966
33
9966
66
9966
99
9966
CC
9966
FF
9999
00
9999
33
9999
66
9999
99
9999
CC
9999
FF
99CC
00
99CC
33
99CC
66
99CC
99
99CC
CC
99CC
FF
99FF
00
99FF
33
99FF
66
99FF
99
99FF
CC
99FF
FF
CC00
00
CC00
33
CC00
66
CC00
99
CC00
CC
CC00
FF
CC33
00
CC33
33
CC33
66
CC33
99
CC33
CC
CC33
FF
CC66
00
CC66
33
CC66
66
CC66
99
CC66
CC
CC66
FF
CC99
00
CC99
33
CC99
66
CC99
99
CC99
CC
CC99
FF
CCC
C00
CCC
C33
CCC
C66
CCC
C99
CCC
CCC
CCC
CFF
CCF
F00
CCF
F33
CCF
F66
CCF
F99
CCFF
CC
CCFF
FF
FF00
00
FF00
33
FF00
66
FF00
99
FF00
CC
FF00
FF
FF33
00
FF33
33
FF33
66
FF33
99
FF33
CC
FF33
FF
53
FF66
00
FF66
33
FF66
66
FF66
99
FF66
CC
FF66
FF
FF99
00
FF99
33
FF99
66
FF99
99
FF99
CC
FF99
FF
FFC
C00
FFC
C33
FFC
C66
FFC
C99
FFCC
CC
FFCC
FF
FFFF
00
FFFF
33
FFFF
66
FFFF
99
FFFF
CC
FFFF
FF
HTML Dialog Tag
HTML <dialog> tag is used to create a new popup dialog on a web page. This tag
represents a dialog box or other interactive component like window.
The <dialog> element uses a boolean attribute called open that activate element and facilitate
user to interact with it.
<html>
<body>
<div>
<dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px
dotted black;">
<p><q>I am so clever that sometimes I don't understand a single word of what I am saying.
</q> - <cite>Oscar Wilde</cite></p>
<button id="hide">Close</button>
</dialog>
<button id="show">Show Dialog</button>
</div>
<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('myFirstDialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
54
dialog.close();
};
})();
</script>
</body>
</html>
HTML Progress Tag
HTML <progress> tag is used to display the progress of a task. It provides an easy way for
web developers to create progress bar on the website. It is mostly used to show the progress
of a file uploading on the web page.
Attributes of HTML Progress Tag
HTML <progress> tag supports the global and event attributes as well as 2 specific attributes.
Tag
Description
value
It defines that how much work the task has been completed.
max
It defines that how much work the task requires in total.
<html>
<body>
Downloading progress:
<progress value="43" max="100"></progress>
</body>
</html>
<html>
<body>
<script>
vargvalue=1;
functionabc(){
varprogressExample = document.getElementById ('progress-javascript-example');
setInterval (function ()
{
if(gvalue<100){
gvalue++;
progressExample.value =gvalue;
}
55
abc();
}, 1000);
}
</script>
<progress id="progress-javascript-example" min="1" max="100"></progress>
<br/><br/>
<button onclick="abc()">click me</button>
</body>
</html>
HTML SVG
The HTML SVG is an acronym which stands for Scalable Vector Graphics.
HTML SVG is a modularized language which is used to describe graphics in XML. It
describe two-dimensional vector and mixed vector/raster graphics in XML. It is a W3C
recommendation. SVG images and their behaviors are defined in XML text files. So as XML
files, you can create and edit an SVG image with text editor, but generally drawing programs
like inkspace are preferred to create it.
SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y
coordinate system etc.
The <svg> element specifies the root of a SVG fragment. You can animate every element and
every attribute in SVG files.
<html>
<body>
<svg width="200" height="100">
<rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" />
</svg>
</body>
</html>





HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was clicked (this is
default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame
This example will open the linked document in a new browser window/tab:
HTML Links - Image as Link
It is common to use images as links:
56
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial"style="width:42px;height:42px;border:0;">
</a>
HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
<a href="#C4">Jump to Chapter 4</a>
Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>
External Paths
External pages can be referenced with a full URL or with a path relative to the current
web page.
This example uses a full URL to link to a web page:
Example
<a href="https://www.mywebls.com/html/default.asp">HTML tutorial</a>
This example links to a page located in the html folder on the current web site:
Example
<a href="/html/default.asp">HTML tutorial</a>
This example links to a page located in the same folder as the current page:
Example
<a href="default.asp">HTML tutorial</a>






ABSOLUTE VS. RELATIVE PATHS/LINKS
Relative Paths
index.html
/graphics/image.png
/help/articles/how-do-i-set-up-a-webpage.html
Absolute Paths
http://www.mysite.com
http://www.mysite.com/graphics/image.png
http://www.mysite.com/help/articles/how-do-i-set-up-a-webpage.html
The first difference you'll notice between the two different types of links is that
absolute
paths always include
the
domain
name
of
the
website,
including http://www., whereas relative links only point to a file or a file path. When
a user clicks a relative link, the browser takes them to that location on the current site.
57
For that reason, you can only use relative links when linking to pages or files within
your site, and you must use absolute links if you're linking to a location on another
website.
So, when a user clicks a relative link, how does their browser know where to take
them? Well, it looks for the location of the file relative to the page where the link
appears. (That's where the name comes from!) Let's get back to our first example:
<a href="linkhere.html">Click Me</a>
This link points to a filename, with no path provided. This means
that linkhere.html is located in the same folder as the page where this link appears. If
both files were located in the root directory of the Website http://www.website.com,
the
actual
website
address
the
user
would
be
taken
to
is http://www.website.com/linkhere.html. If both files were located in a subfolder of
the
root
directory
called files,
the
user
would
be
taken
to http://www.website.com/files/linkhere.html.
How about another example? Let's say we our http://www.website.com domain had a
subfolder called pictures. Inside the pictures folder is a file called pictures.html. The
full path to this page would be:
"http://www.website.com/pictures/pictures.html"
Still with us? Good. Let's say in this pictures.html file, we have a link:
<a href="morepictures.html">More Pictures</a>
If someone clicked that, where do you think it would take them? If you
said http://www.website.com/pictures/morepictures.html, you'd be right! You
probably know why it would take them there: because both files are saved in
the pictures subfolder.
Now, what if we wanted to use a relative link to show a page in another folder? If you
want to link to a file in a subfolder of the current folder, provide the file path to that
file, like so:
<a href="/pictures/tahiti-vacation/tahiti.html">Read about my Tahiti vacation.</a>
In this example, you're telling the browser to look in the current folder (pictures) for
a subfolder (tahiti-vacation) that contains the file you want the user taken to
(tahiti.html). You can link to as many subfolders as you need using this method.
What if you want to link to a file in a folder above the current folder? You have to tell
the browser to move up one folder in your relative link by putting two periods and a
slash (../) in front of the filename or path:
<a href="../about.html>Learn more about my Website.</a>
When the browser sees ../ in front of the filename, it looks in the folder above the
current folder. You can use this as many times as you need to. You can also tell the
browser to look in a subfolder of the directory above the current one. Using the same
example website from above, let's say we wanted to create a link that would take the
user to a page called stories.htmllocated in another folder called stories. This folder
is located in the root directory, one folder up from the current folder, pictures. Here's
how a relative link to this file would look:
<a href="../stories/stories.html">Read Stories</a>
58
Now, let's talk about absolute paths. Like we mentioned earlier, absolute paths
provide the complete website address where you want the user to go. An absolute link
would look like this:
<a href="http://www.coffeecup.com">Click here to visit CoffeeCup Software.</a>
You must use absolute paths when linking to another Website, but you can also use
absolute paths within your own website. This practice is generally frowned upon,
though. Relative links make it easy to do things like change your domain name
without having to go through all your HTML pages, hunting down links and changing
the names. As an added bonus, they force you to keep your site structure neat and
organized, which is always a good idea.
HTML - Email Links
It is not difficult to put an HTML email link on your webpage but it can cause
unnecessary spamming problem for your email account. There are people, who can
run programs to harvest these types of emails and later use them for spamming in
various ways.
You can have another option to facilitate people to send you emails. One option could
be to use HTML forms to collect user data and then use PHP or CGI script to send an
email.
A simple example, check our Contact Us Form. We take user feedback using this
form and then we are using one CGI program which is collecting this information and
sending us email to the one given email ID.
HTML Email Tag
HTML <a> tag provides you option to specify an email address to send an email.
While using <a> tag as an email tag, you will use mailto: email address along
with href attribute. Following is the syntax of using mailto instead of using http.
<a href = "mailto: abc@example.com">Send Email</a>
This code will generate the following link which you can use to send email.
Send Email
Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook
Express etc. ) installed on your user's computer. There is another risk to use this
option to send email because if user do not have email client installed on their
computer then it would not be possible to send email.
Default Settings
You can specify a default email subject and email body along with your email
address. Following is the example to use default subject and body.
<a href = "mailto:abc@example.com?subject = Feedback&body = Message">
Send Feedback
</a>
This code will generate the following link which you can use to send email.
59
HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.
HTML tables are used to manage the layout of the page e.g. header section,
navigation bar, body content, footer section etc. But it is recommended to use div tag
over table to manage the layout of the page .
HTML Table Tags
Tag
Description
<table>
It defines a table.
<tr>
It defines a row in a table.
<th>
It defines a header cell in a table.
<td>
It defines a cell in a table.
<caption>
It defines the table caption.
<colgroup>
It specifies a group of one or more columns in a table for formatting.
<col>
It is used with <colgroup> element to specify column properties for
each column.
<tbody>
It is used to group the body content in a table.
<thead>
It is used to group the header content in a table.
<tfooter>
It is used to group the footer content in a table.
HTML Table Example
Let's see the example of HTML table tag. It output is shown above.
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
60
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
Output:
First_Name
Last_Name
Marks
Sonoo
Jaiswal
60
James
William
80
Swati
Sironi
82
Chetna
Singh
72
HTML Table with Border
There are two ways to specify border for HTML tables.
1. By border attribute of table in HTML
2. By border property in CSS
1) HTML Border attribute
You can use border attribute of table tag in HTML to specify border. But it is not
recommended now.
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
Output:
First_Name
Last_Name
Marks
Sonoo
Jaiswal
60
James
William
80
Swati
Sironi
82
Chetna
Singh
72
rows Attribute
The rows attribute specifies the visible height of a text area, in lines.
Applies to
61
The rows attribute can be used on the following element:
Element
Attribute
<textarea>
rows
Example
A text area with a specified height and width:
<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all
web
development
technologies.
</textarea>

HTML Form
An HTML form is a section of a document which contains controls such as text
fields, password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for
processing.
Why use HTML Form
HTML forms are required if you want to collect some data from of the site visitor.
For example: If a user want to purchase some items on internet, he/she must fill the
form such as shipping address and credit/debit card details so that item can be sent to
the given address.
HTML Form Syntax
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
HTML Form Tags
Let's see the list of HTML 5 form tags.
Tag
Description
<form>
It defines an HTML form to enter inputs by the used side.
<input>
It defines an input control.
<textarea>
It defines a multi-line input control.
62







<label>
It defines a label for an input element.
<fieldset>
It groups the related element in a form.
<legend>
It defines a caption for a <fieldset> element.
<select>
It defines a drop-down list.
<optgroup>
It defines a group of related options in a drop-down list.
<option>
It defines an option in a drop-down list.
<button>
It defines a clickable button.
HTML - Frames
HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in the
browser window is known as a frameset. The window is divided into frames in a
similar way the tables are organized: into rows and columns.
Advantages of Frames
There are instances in which framed Web sites are truly a great approach.
Static navigation can be visible all the time, thus providing navigational convenience
Company logos, messages, or other information can be kept in one frame that is
constantly
visible,
if
desired.
Some design issues can be resolved by using frames..
Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames
in your webpages −
Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.
Sometimes your page will be displayed differently on different computers due to
different screen resolution.
The browser's back button might not work as the user hopes.
There are still few browsers that do not support frame technology.
Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames. The rows attribute of
<frameset> tag defines horizontal frames and cols attribute defines vertical frames.
Each frame is indicated by <frame> tag and it defines which HTML document shall
open into the frame.
63
Example
Following is the example to create three horizontal frames −
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Example
Let's put the above example as follows, here we replaced rows attribute by cols and
changed their width. This will create all the three frames vertically −
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
The <frameset> Tag Attributes
Following are important attributes of the <frameset> tag −
Sr.No
Attribute & Description
1
cols
Specifies how many columns are contained in the frameset and the size
of each column. You can specify the width of each column in one of the
four ways −
Absolute values in pixels. For example, to create three vertical frames,
64
use cols = "100, 500, 100".
A percentage of the browser window. For example, to create three
vertical frames, use cols = "10%, 80%, 10%".
Using a wildcard symbol. For example, to create three vertical frames,
use cols = "10%, *, 10%". In this case wildcard takes remainder of the
window.
As relative widths of the browser window. For example, to create three
vertical frames, use cols = "3*, 2*, 1*". This is an alternative to
percentages. You can use relative widths of the browser window. Here
the window is divided into sixths: the first column takes up half of the
window, the second takes one third, and the third takes one sixth.
2
rows
This attribute works just like the cols attribute and takes the same
values, but it is used to specify the rows in the frameset. For example, to
create two horizontal frames, use rows = "10%, 90%". You can specify
the height of each row in the same way as explained above for columns.
3
border
This attribute specifies the width of the border of each frame in pixels.
For example, border = "5". A value of zero means no border.
4
frameborder
This attribute specifies whether a three-dimensional border should be
displayed between frames. This attribute takes value either 1 (yes) or 0
(no). For example frameborder = "0" specifies no border.
5
framespacing
This attribute specifies the amount of space between frames in a
frameset. This can take any integer value. For example framespacing =
"10" means there should be 10 pixels spacing between each frames.
The <frame> Tag Attributes
Following are the important attributes of <frame> tag −
Sr.No
Attribute & Description
1
src
This attribute is used to give the file name that should be loaded in the
frame. Its value can be any URL. For example, src =
"/html/top_frame.htm" will load an HTML file available in html
65
directory.
2
name
This attribute allows you to give a name to a frame. It is used to indicate
which frame a document should be loaded into. This is especially
important when you want to create links in one frame that load pages
into an another frame, in which case the second frame needs a name to
identify itself as the target of the link.
3
frameborder
This attribute specifies whether or not the borders of that frame are
shown; it overrides the value given in the frameborder attribute on the
<frameset> tag if one is given, and this can take values either 1 (yes) or
0 (no).
4
marginwidth
This attribute allows you to specify the width of the space between the
left and right of the frame's borders and the frame's content. The value is
given in pixels. For example marginwidth = "10".
5
marginheight
This attribute allows you to specify the height of the space between the
top and bottom of the frame's borders and its contents. The value is
given in pixels. For example marginheight = "10".
6
noresize
By default, you can resize any frame by clicking and dragging on the
borders of a frame. The noresize attribute prevents a user from being
able to resize the frame. For example noresize = "noresize".
7
scrolling
This attribute controls the appearance of the scrollbars that appear on
the frame. This takes values either "yes", "no" or "auto". For example
scrolling = "no" means it should not have scroll bars.
8
longdesc
This attribute allows you to provide a link to another page containing a
long description of the contents of the frame. For example longdesc =
"framedescription.htm"
66
Browser Support for Frames
If a user is using any old browser or any browser, which does not support frames then
<noframes> element should be displayed to the user.
So you must place a <body> element inside the <noframes> element because the
<frameset> element is supposed to replace the <body> element, but if a browser does
not understand <frameset> element then it should understand what is inside the
<body> element which is contained in a <noframes> element.
You can put some nice message for your user having old browsers. For
example, Sorry!! your browser does not support frames. as shown in the above
example.
Frame's name and target attributes
One of the most popular uses of frames is to place navigation bars in one frame and
then load main pages into a separate frame.
Let's see following example where a test.htm file has following code −
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Here, we have created two columns to fill with two frames. The first frame is 200
pixels wide and will contain the navigation menu bar implemented by menu.htm file.
The second column fills in remaining space and will contain the main part of the page
and it is implemented by main.htm file. For all the three links available in menu bar,
we have mentioned target frame as main_page, so whenever you click any of the
links in menu bar, available link will open in main page.
Following is the content of menu.htm file
<!DOCTYPE html>
<html>
<body bgcolor = "#4a7d49">
<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />
<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
67
<br />
<br />
<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
</body>
</html>
Following is the content of main.htm file −
<!DOCTYPE html>
<html>
<body bgcolor = "#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>
TML TextField Control
The type="text" attribute of input tag creates textfield control also known as single
line textfield control. The name attribute is optional, but it is required for the server
side component such as JSP, ASP, PHP etc.
<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>
Label Tag in Form
It is considered better to have label in form. As it makes the code parser/browser/user
friendly.
If you click on the label tag, it will focus on the text control. To do so, you need to
have for attribute in label tag that must be same as id attribute of input tag.
<form>
<label for="firstname">First Name: </label>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>
HTML Password Field Control
The password is not visible to the user in password field control.
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct email address. You
must use @ and . in this field.
68
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
1. </form>
Radio Button Control
The radio button is used to select one from multiple options. It is used in gender, quiz
questions etc.
If you use one name for all the radio buttons, only one radio button can be selected at
a time.
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <
br/>
</form>
Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>
HTML Form Example
Let's see a simple example of creating HTML form.
<form action="#">
<table>
<tr>
<td class="tdLabel"><label for="register_name" class="label">Enter name:</label
></td>
<td><input type="text" name="name" value="" id="register_name" style="width:
160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_password" class="label">Enter passwor
d:</label></td>
<td><input type="password" name="password" id="register_password" style="wi
dth:160px"/></td>
69
</tr>
<tr>
<td class="tdLabel"><label for="register_email" class="label">Enter Email:</labe
l></td>
<td
><input type="email" name="email" value="" id="register_email" style="width:160p
x"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</l
abel></td>
<td>
<input type="radio" name="gender" id="register_gendermale" value="male"/>
<label for="register_gendermale">male</label>
<input type="radio" name="gender" id="register_genderfemale" value="female"/>
<label for="register_genderfemale">female</label>
</td>
</tr>
<tr>
<td class="tdLabel"><label for="register_country" class="label">Select Country:<
/label></td>
<td><select name="country" id="register_country" style="width:160px">
<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><div align="right"><input type="submit" id="register_0" value="r
egister"/>
</div></td>
</tr>
</table>
</form>
Input Type Submit
<input type="submit"> defines a button for submitting form data to a formhandler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
70
<form action="/action_page.php">
First
<input type="text" name="firstname" value="Mickey"><br>
Last
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
name:<br>
name:<br>
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their
default values:
Example
<form action="/action_page.php">
First
name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last
name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
This is how the HTML code above will be displayed in a browser:
First
name:
Mickey
Last
name:
Mouse
Submit
Reset
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I
have
a
car
</form>
I
have
a
bike
I have a carBottom of Form
Input Type Button
<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')"value="Click Me!">
71
HTML Datalist Tag
The HTML <datalist> tag is is used to provide an auto complete feature on form
element. It provides a list of predefined options to the users to select data.
The datalist tag is introduced in HTML5.
The <datalist> tag should be used with an <input< element that contains a "list"
attribute. The value of "list" attribute is linked with the datalist id.
HTML datalist tag example
Let's see the simple example of HTML5 datalist tag. If you press A, it will show a list
of cricketers starting with A letter.
<label>
Enter your favorite cricket player: Press any character<br />
<input type="text" id="favCktPlayer" list="CktPlayers">
<datalist id="CktPlayers">
<option value="Sachin Tendulkar">
<option value="Brian Lara">
<option value="Jacques Kallis">
<option value="Ricky Ponting">
<option value="Rahul Dravid">
<option value="Shane Warne">
<option value="Rohit Sharma">
<option value="Donald Bradman">
<option value="Saurav Ganguly ">
<option value="AB diVilliers">
<option value="Mahendra Singh Dhoni">
<option value="Adam Gilchrist">
</datalist>
</label>
72