WT Unit I

Module 1
World Wide Web (WWW): World Wide Web and its evolution, uniform resource locator (URL),
browsers – internet explorer, Netscape navigator, opera, Firefox, chrome, Mozilla. search engine,
web saver – apache, IIS, proxy server, HTTP protocol.
Introduction to HTML: Elements of HTML Document, HTML Elements and HTML Attributes,
Headings, Paragraph, Division, Formating: b, i, small, sup, sub, Spacing: Pre, Br, Formatting
Text
Phrases: span, strong, tt, Image element, Anchors, Lists: Ordered and Unordered and
Definition,Tables, Frames, Forms: Form Elements, ID attributes, Class Attributes of HTML
Elements, Meta Tag, Audio, Video, Canvas, Main, Section, Article, Header, Footer, Aside, Nav,
Figure Tags, HTML Events: Window Events, Form Element Events, Keyboard Events, Mouse
Events.
INTRODUCTION
• Web technology is a technology that acts as an interface between web client and web server. It
includes markup languages, programming interfaces, online presentation tools, Java applets,
video editing tools and soon.
• The commonly used clientside scripting languages are HTML, JavaScript, CSS, XML and soon.
• The commonly used server side technologies are ASP,JSP ,Java Servlets,P HP and soon.
WORLD WIDE WEB

WORLD WIDE WEB AND ITS EVOLUTION
Definition :World Wide Web (WWW) is collections of software and corresponding protocols used to access
the resources over the network
• The world wide web is an information system in which various documents containing information are
interlinked together. User can access this information or write the informationvia computers. This
information is typically stored on the web pages and through web browsers we can access these
webpages.
• The web pages may contain the information in the form of text, audio, video, images and graphics. We
can navigate between the webpages using hyperlinks.
• The concept of WWW was introduced by Sir Tim Berners-Lee the contractor at the European
Organization for Nuclear Research (CERN), Switzerland in 1980.He built a personal database of
people and software models and used hypertext so that each newpage of information was linked to an
existing page.
Internet and WWW
• The term internet and WWW is often used interchangeably, but these are two different terms.
• The internet is collection of computers and other devices (such as printers, scanners etc.) connected
together whereas World Wide Web (WWW) is collection of software and corresponding protocols used
to access the resources over the network.
• The world wide web contains huge amount of documents, images and other resources which can be
accessed using the hyperlinks.
The Evolution of the World Wide Web
Web 1.0 – Read Only Web : Web 1.0 was the first web generation that is a new revolution in the world
of the Internet because it has changed the way the industry and the media work. Basically, the website
that was built in the first generation is generally developed to someone who want to accessing information
and it has a slightly interactive nature where visitors can only read because there is no process to input
data.
Web 2.0 – Read and Write Web : Web 2.0 was the second stage of the World Wide Web. This generation
was also known as the “The Social web” because in this generation the users not only able to read the
websites but they also can connect with other users. Now, most of the people started to collaborated on
ideas, they could share information and create information that was available to the whole world.
Growth of IoT or Internet of Things

In web 2.0, the focus was on connection and interaction between people but Web 3.0 focuses is mainly on
connecting people with devices using the internet, that’s why we call it “Internet of Things”.
IoT means the interconnection between all of the devices and the internet so that they can send and
receive data. It is most important developments in the field of internet and will finally lead from Web 3.0
to Web 4.0. Now we can see several mobile apps based on IoT which connect many homes or office devices
that interact with each other through the internet.
Web 3.0 – The Semantic Web : Web 3.0 is a technologies that give a new way that for helping the
computer to organize and draw conclusions from the data online. By definition, basically the Semantic Web
has the same goal because the Semantic Web has Web content that can not only be expressed in natural
language understood by humans, but also in forms that can be understood, interpreted and used by
software agents. Through this Semantic Web, various software will be able to search, share and integrate
information in an easier or more precise way Web 3.0 is a realization of the development of artificial
intelligence systems (artificial intelligence) to create global data that can be understood by the system, so
the system can reinterpret these data to visitors properly.
Web 4.0 – The Symbiotic Web :Web 4.0 is also known as symbiotic web. The dream behind of the
symbiotic web is interaction between humans and machines in symbiosis. It will be possible to build more
powerful interfaces such as mind controlled interfaces using web 4.0. In simple words, machines would be
clever on reading the contents of the web.
Web 4.0 will be the read-write-execution-concurrency web. Web 4.0 (The webOS) will be like a middleware
in which will functioning like an operating system. The webOS will be parallel to the human brain and
implies a massive web of highly intelligent interactions. Although there is no exact idea about web 4.0 and
its technologies, but it is obvious that the web is moving toward using artificial intelligence to become as
an intelligent web.
UNIFORM RESOURCE LOCATOR
Introduction:
The World Wide Web, which is also known as web, is one of the popular services of the Internet.
The WWW provides the millions of information on various topics. There are millions of web sites on the
web, which provide information. Each web site is identified by the Internet Address or Uniform Resource
Locator (URL).
Definition:URL : A URL (Uniform Resource Locator) is a specific type of URI (Universal Resource
Identifier). A URL normally locates an existing resource on the Internet. A URL is used when a web client
makes a request to a server for a resource.
URI is defined as any character string that identifies a resource. A URL is defined as those
URIs that identify a resource by its location or by the means used to access it, rather than by a name or
other attribute of the resource.
A newer form of resource identifier, the IRI (Internationalized Resource Identifier), permits
the use of characters and formats that are suitable for national languages other than English. An IRI can
be used in place of a URI or URL when the applications involved with the request and response support
IRIs
A URL for HTTP (or HTTPS) is normally made up of three or four components:
1. A scheme. The scheme identifies the protocol to be used to access the resource on the Internet.
It can be HTTP (without SSL) or HTTPS (with SSL).
2. A host. The host name identifies the host that holds the resource. For example, www.example.com.
A server provides services in the name of the host, but hosts and servers do not have a one-to-one
mapping. Refer to Host names.
Host names can also be followed by a port number. Refer to Port numbers. Well-
known port numbers for a service are normally omitted from the URL. Most servers use the well-known
port numbers for HTTP and HTTPS , so most HTTP URLs omit the port number.
3. A path. The path identifies the specific resource in the host that the web client wants to access.
For example, /software/htp/cics/index.html.
4. A query string. If a query string is used, it follows the path component, and provides a string of
information that the resource can use for some purpose (for example, as parameters for a search
or as data to be processed). The query string is usually a string of name and value pairs; for
example, term=bluebird. Name and value pairs are separated from each other by an ampersand
(&); for example, term=bluebird&source=browser-search.
The scheme and host components of a URL are not defined as case-sensitive, but the path and query string
are case-sensitive. Typically, the whole URL is specified in lowercase.
The components of the URL are combined and delimited as follows:
scheme://host:port/path?query
• The scheme is followed by a colon and two forward slashes.

• If a port number is specified, that number follows the host name, separated by a colon.
• The path name begins with a single forward slash.
• If a query string is specified, it is preceded by a question mark.
Figure 1. Every HTTP URL conforms to the syntax of a generic URI. A generic URI is of the form:
scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]
Here is an example of an HTTP URL:
http://www.example.com/software/index.html
With a port number specified, the URL is:
http://www.example.com:1030/software/index.html
A URL can be followed by a fragment identifier. The separator used between the URL and the fragment
identifier is the # character. A fragment identifier is used to point a web browser to a reference or function
in the item that it has just retrieved.
For example, if the URL identifies an HTML page, a fragment identifier can be used to indicate a subsection
within the page, using the ID of the subsection. In this case, the web browser typically displays the page
to the user so that the subsection is visible. The action taken by the web browser for a fragment identifier
differs depending on the media type of the item and the defined meaning of the fragment identifier for
that media type.
Other protocols, such as File Transfer Protocol (FTP) or Gopher, also use URLs. The URLs
used by these protocols might have a different syntax to the one used for HTTP .
Absolute and RelativeURL
• The absolute URL is a URL which directly point to a file. It exactly specifies exact location of a file
or directory on the internet. Each absolute URL is unique. For example -
http://www.vtubooks.com/home.aspx
• The relative URL points to the file or a directory in relation to the present directory. For example
• Consider the absolute address which refers an image mother.jpg
http://www.mywebsite.com/myphotos/mother.jpg
• For the above given absolute address the relative address will be -
../myphotos/mother.jpg
That means from the current URL the directory myphotos will be searched for the image
mother.jpg. The two peroids .. instruct the server to move up one directory which is the root
directory, then enter myphotos directory (/myphotos) and finally point at mother.jpg. Thus using
relative URL writing of long path name can be avoided.
WEB BROWSER
Defintion: A web browser is an interface that helps a computer user gain access to all the content that is
on the Internet and the hard disk of the computer. It can view images, text documents, audio and video
files, games, etc. More than one web browser can also be installed on a single computer. The user can
navigate through files, folders and websites with the help of a browser. When the browser is used for
browsing web pages, the pages may contain certain links, which can be opened in a new browser. Multiple
tabs and windows of the same browser can also be opened. There are four leading web browsers: Explorer,
Firebox, Netscape and Safari but there are many others browsers available .
History of Web Browser :

Today web browsers are easily accessible and can be used on devices like computer, laptops, mobile
phones, etc. but this evolution of making browsers available for easy use took many years.
Given below are some salient points which one must know with regard to the history of web browsers:
• “WorldWideWeb” was the first web browser created by Tim Berners Lee in 1990. This is completely
different from the World Wide Web we use today
• In 1993, the “Mosaic” web browser was released. It had the feature of adding images and an
innovative graphical interface. It was the “the world’s first popular browser”
• After this, in 1994, Marc Andreessen (leader of Mosaic Team) started working on a new web browser,
which was released and was named “Netscape Navigator”
• In 1995, “Internet Explorer” was launched by Microsoft. It soon overtook as the most popular web
browser
• In 2002, “Mozilla Firefox” was introduced which was equally as competent as Internet Explorer
• Apple too launched a web browser in the year 2003 and named it “Safari”. This browser is commonly
used in Apple devices only and not popular with other devices
• Finally, in the year 2008, Google released “Chrome” and within a time span of 3 years it took over all
the other existing browsers and is one of the most commonly used web browsers across the world.
Various functions of web browser are-
• Reformats the URL and send a valid HTTP request.
• When user gives the address of particular web site it is in the form of domain name. The web browser
coverts the DNS to corresponding IP address.
• The web browser establishes a TCP connection with the Web browser while processing
theuser’srequest.
• The web browsers send the HTTP request to the webserver.
• The web server processes the HTTP request sent by the web browser and returns the desiredweb
page to the client machine. The web browser on the client’s machine displays this
webpageinappropriateformat.
Functions of Web Browser
Our dependency on the Internet has massively increased. Stated below are functions of web browsers
and how are they useful:
• The main function is to retrieve information from the World Wide Web and making it available for
users
• Visiting any website can be done using a web browser. When a URL is entered in a browser, the
web server takes us to that website
• To run Java applets and flash content, plugins are available on the web browser
• It makes Internet surfing easy as once we reach a website we can easily check the hyperlinks and
get more and more useful data online
• Browsers user internal cache which gets stored and the user can open the same webpage time and
again without losing extra data
• Multiple webpages can be opened at the same time on a web browser
• Options like back, forward, reload, stop reload, home, etc. are available on these web browsers,
which make using them easy and convenient
Types of Browsers:
1. WorldWideWeb
• The first web browser ever
• Launched in 1990
• It was later named “Nexus” to avoid any confusion with the World Wide Web
• Had the very basic features and less interactive in terms of graphical interface
• Did not have the feature of bookmark
2. Mosaic
• It was launched in 1993
• The second web browser which was launched
• Had a better graphical interface. Images, text and graphics could all be integrated
• It was developed at the National Center for Supercomputing Applications
• The team which was responsible for creating Mosaic was lead by Marc Andreessen
• It was named “the world’s first popular browser
3. Netscape Navigator
• It was released in 1994
• In the 1990s, it was the dominant browser in terms of usage share
• More versions of this browser were launched by Netscape
• It had an advanced licensing scheme and allowed free usage for non-commercial purposes
4. Internet Explorer
• It was launched in 1995 by Microsoft
• By 2003, it has attained almost 95% of usage share and had become the most popular browsers
of all
• Close to 10 versions of Internet Explorer were released by Microsoft and were updated gradually
• It was included in the Microsoft Windows operating system
Internet Explorer is a type of a web browser. There are many features of this browser, which are given
below.
• This Browser have Smart search suggestion.
• Internet Explorer have Enhanced performance.
• Internet Explorer support 33 languages.
• This browser have Reader mood to view any webpage
In 2015, it was replaced with “Microsoft Edge”, as it became the default browser on Windows 10. Here are
some of the features of the Edge interface:
1. Implementation of Cortana
2. Reading view
3. Doodle on a web page
4. Integrated share panel
5. Newsfeed on the startup page
5. Firefox
• It was introduced in 2002 and was developed by Mozilla Foundation
• Firefox overtook the usage share from Internet Explorer and became the dominant browser during
2003-04
• Location-aware browsing was made available with Firefox
• This browser was also made available for mobile phones, tablets, etc.
• Mozilla Firefox offers many advantages over other browsers. For starters, it's much more secure
than other browsers because it does not allow third-party installations.
• It also has a very clean interface that doesn't come with any bloatware or toolbars that you don't
want to use.
Other features include web development tools, pop-up blocking, private browsing, and tabbed
browsing.
Mozilla Firefox is a type of a web browser. This web browser is very popular, there are many features of
this browser, which are given below.
• Search Bar Option
• Private Tab Option
• High security and performance
• Fast page loading
• 75 language support
• Inbuilt download manager
• Backed by a gecko engine
6. Google Chrome
• It was launched in 2008 by Google and helps you get to the web faster with features like speed
browsing, voice search, and autofill
• It is a cross-platform web browser
• Multiple features from old browsers were amalgamated to form better and newer features
• To save computers from malware, Google developed the ad-blocking feature to keep the user data
safe and secure
• Incognito mode is provided where private searching is available where no cookies or history is saved
• Till date, it has the best user interface
.
Google Chrome is a type of a web browser. This web browser is very popular, there are many features of
this browser, which are given below.
• Google chrome has Theme support
• This browser is Extremely fast and secure
• Fast page loading speed.
• Google Chrome supports 50 languages.
• This browser has Incognito mode and a new tabs option.
7. Opera Browser
• Opera is a web browser that was created in the late 1990s.

• The Opera browser is now available for Windows, Mac, Linux, Android, iOS, and even your Kindle!
It’s also one of the most popular browsers in Asia.
• Opera has many built-in features that make it easier to browse the web. One of these features is
Speed Dial which lets you save pages that you visit often so that they are just one click away.
• Another feature is Stash Express which saves every webpage you visit on your Stash so it's never
lost again.
• And finally, there's Opera Turbo which compresses data before loading it onto your phone or
computer.
• There are many other features too like news feeds and download manager which make the browsing
experience more enjoyable and safer than ever before.
SEARCH ENGINES
Search Engine: The purpose of a search engine is to extract requested information from the huge database
of resources available on the internet. Search engines become an important day to day tool for finding the
required information without knowing where exactly it is stored. There are different types of search engines
to get the information you are looking for. Internet usage has been tremendously increased in recent days
with the easy to use search engines like Google, Bing and Yahoo!
Different Types of Search Engines : Search engines are classified into the following three categories based
on how it works.
1. Crawler based search engines

2. Human powered directories
3. Hybrid search engines
4. Other special search engines
1. Crawler Based Search Engines : All crawler based search engines use a crawler or bot or spider for
crawling and indexing new content to the search database. There are four basic steps, every crawler based
search engines follow before displaying any sites in the search results.
• Crawling
• Indexing
• Calculating Relevancy
• Retrieving the Result
1.1. Crawling : Search engines crawl the whole web to fetch the web pages available. A piece of software
called crawler or boot or spider, performs the crawling of the entire web. The crawling frequency depends
on the search engine and it may take few days between crawls. This is the reason sometimes you can see
your old or deleted page content is showing in the search results. The search results will show the new
updated content, once the search engines crawl your site again.
1.2. Indexing :Indexing is next step after crawling which is a process of identifying the words and
expressions that best describe the page. The identified words are referred as keywords and the page is
assigned to the identified keywords. Sometimes when the crawler does not understand the meaning of
your page, your site may rank lower on the search results. Here you need to optimize your pages for
search engine crawlers to make sure the content is easily understandable. Once the crawlers pickup correct
keywords your page will be assigned to those keywords and rank high on search results.
1.3. Calculating Relevancy : Search engine compares the search string in the search request with the
indexed pages from the database. Since it is likely that more than one page contains the search string,
search engine starts calculating the relevancy of each of the pages in its index with the search string.
There are various algorithms to calculate relevancy. Each of these algorithms has different
relative weights for common factors like keyword density, links, or meta tags. That is why different search
engines give different search results pages for the same search string. It is a known fact that all major
search engines periodically change their algorithms. If you want to keep your site at the top, you also need
to adapt your pages to the latest changes. This is one reason to devote permanent efforts to SEO, if you
like to be at the top.
1.4. Retrieving Results : The last step in search engines’ activity is retrieving the results. Basically, it is
simply displaying them in the browser in an order. Search engines sort the endless pages of search results
in the order of most relevant to the least relevant sites.
Examples of Crawler Based Search Engines: Most of the popular search engines are crawler based search
engines and use the above technology to display search results. Example of crawler based search engines:
• Google
• Bing
• Yahoo!
• Baidu
• Yandex
Besides these popular search engines there are many other crawler based search engines available like
DuckDuckGo, AOL and Ask.
2. Human Powered Directories :Human powered directories also referred as open directory system
depends on human based activities for listings. Below is how the indexing in human powered directories
work:
• Site owner submits a short description of the site to the directory along with category it is to
be listed.
• Submitted site is then manually reviewed and added in the appropriate category or rejected
for listing.
• Keywords entered in a search box will be matched with the description of the sites. This means
the changes made to the content of a web pages are not taken into consideration as it is only
the description that matters.
• A good site with good content is more likely to be reviewed for free compared to a site with
poor content.
Yahoo! Directory and DMOZ were perfect examples of human powered directories. Unfortunately,
automated search engines like Google, wiped out all those human powered directory style search
engines out of the web.
3. Hybrid Search Engines: Hybrid Search Engines use both crawler based and manual indexing for listing
the sites in search results. Most of the crawler based search engines like Google basically uses crawlers as
a primary mechanism and human powered directories as secondary mechanism. For example, Google may
take the description of a webpage from human powered directories and show in the search results. As
human powered directories are disappearing, hybrid types are becoming more and more crawler based
search engines.
But still there are manual filtering of search result happens to remove the copied and spammy
sites. When a site is being identified for spammy activities, the website owner needs to take corrective
action and resubmit the site to search engines. The experts do manual review of the submitted site before
including it again in the search results. In this manner though the crawlers control the processes, the
control is manual to monitor and show the search results naturally.
4. Other Types of Search Engines :Besides the above three major types, search engines can be
classified into many other categories depending upon the usage. Below are some of the examples:
• Search engines have different types of bots for exclusively displaying images, videos, news,
products and local listings. For example, Google News page can be used to search only news from
different newspapers.
• Some of the search engines like Dogpile collects meta information of the pages from other search
engines and directories to display in the search results. This type of search engines are called
metasearch engines.
• Semantic search engines like Swoogle provide accurate search results on specific area by
understanding the contextual meaning of the search queries.
Wrapping Up : During earlier days of Internet, human powered search engines were popular and important
source of information. The technological world is moving very fast towards automation and artificial
intelligence. Big technology companies like Google and Microsoft, who own the popular search engines,
are driving this change and getting benefit out of it. None of the human powered search engines could
survive this fast shift. Though people uses special purpose search engines in very small scale, at this point
of time artificial or crawler based search engines acts as a primary source of information with minimal
human intervention.
WEB SERVER
Web Server: Web server is a program which processes the network requests of the users and serves
them with files that create web pages. This exchange takes place using Hypertext Transfer Protocol
(HTTP).
A web server is dedicated software that runs on the server-side. When any user
requests their web browser to run any web page, the webserver places all the data materials
together into an organized web page and forwards them back to the web browser with the help
of the Internet.
Basically, web servers are computers used to store HTTP files which makes a website and
when a client requests a certain website, it delivers the requested website to the client.
This intercommunication of a web server with a web browser is done with the help of a protocol
named HTTP (Hypertext Transfer Protocol). These stored web pages mostly use static content,
containing HTML documents, images, style sheets, text files, etc. However, web servers can serve
static as well as dynamic contents. Web Servers also assists in emailing services and storing files.
Therefore it also uses SMTP (Simple Mail Transfer Protocol) and FTP (File Transfer Protocol) protocols to
support the respective services. Web servers are mainly used in web hosting or hosting the website's data
and running web-based applications.
The hardware of the web servers are connected to the Internet that manages the data exchange facility
within different connected devices. In contrast, the software of web server software is responsible for
controlling how a user accesses delivered files. Typically, web server management is an ideal example of
the client/server model. Therefore, it is compulsory for all computers that host websites (whether
with state or dynamic web page content) to have web server software.
For example, you want to open Facebook on your laptop and enter the URL in the search bar of google.
Now, the laptop will send an HTTP request to view the facebook webpage to another computer known
as the webserver. This computer (webserver) contains all the files (usually in HTTP format) which make
up the website like text, images, gif files, etc. After processing the request, the webserver will send the
requested website-related files to your computer and then you can reach the website.
Different websites can be stored on the same or different web servers but that doesn’t affect the actual
website that you are seeing in your computer. The web server can be any software or hardware but is
usually a software running on a computer. One web server can handle multiple users at any given tim e
which is a necessity otherwise there had to be a web server for each user and considering the current
world population, is nearly close to impossible. A web server is never disconnected from the internet
because if it was, then it won’t be able to receive any requests, and therefore cannot process them.
The term web server can denote server hardware or server software, or in most cases, both hardware
and software might be working together.
1. On the hardware side, a web server is defined as a computer that stores software and another
website raw data, such as HTML files, images, text documents, and JavaScript files. The hardware
of the web servers are connected to the web and supports the data exchange with different devices
connected to the Internet.
2. On the software side, a web server includes server software accessed through website domain
names. It controls how web users access the web files and ensures the supply of website content
to the end-user. The web server contains several components, including an HTTP server.
Static web servers vs. Dynamic web servers
A web server can be used to store, process or deliver either static or dynamic web pages. Let's understands
the definition of static and dynamic web servers with the help of their difference table given below:
S.NO. Static Web Servers Dynamic Web Servers

1 Static web servers refer to the servers, Dynamic web servers refer to the servers
which serve only the static content i.e., where the content of the page can be
the content is fixed and being shown as it updated and altered.
is.
2 A static web server includes a computer A dynamic web server also includes a
and the HTTP (Hyper Text Transfer computer with plenty of other software,
Protocol) software. unlike an application server and database
model.
3 It is called static; the web pages content It is called dynamic because the
won't change unless the user manually application server is used to update the
changes it, and the server will deliver web web pages files at the server-side, and
files as is to the web browser. due to which, it can change on every call
requested by the web browser.
4 Static web servers take less time to load The Dynamic web server can only
the data. produce the data when it is requested
from the database. Therefore, it is time
consuming and more complicated when
compared to static web servers.
Types of Servers
There are many web servers available in the market both free and paid. Some of them are described
below:
1. Apache HTTP server:

Apache HTTP server is one of the most widely used web servers
worldwide. The biggest advantage of using this server is that it
supports almost all operating systems such as Windows, Linux,
Apple Mac OS, Unix, and others. Around 60% of the web server
machines worldwide, run the Apache Web Server.
Apache HTTP Server is open-source. Being open-source means it
is available for free, and can easily be accessed through online
communities. Thus, a lot of online support is available in case of
a problem or an error. This also enables the user to modify the
server as per his requirements. Apache’s latest version is much
more flexible than the previous ones and can handle more requests smoothly.
2. Microsoft Internet Information Services (IIS): IIS (Internet

Information Services) is a high performing web server developed by
Microsoft. It is strongly united with the operating system and is therefore
relatively easier to administer. It is developed by Microsoft, it has a good
customer support system which is easier to access if we encounter any
issue with the server. It has all the features of the Apache HTTP Server
except that it is not an open-source software and therefore its code is
inaccessible which means that we cannot make changes in the code to
suit our needs. It can be easily installed in any Windows device.
PROXY SERVER
Every computer that is connected to the network has an IP (Internet Protocol) address that identifies the
device uniquely. Similarly, the proxy server is a computer on the network that has its own IP address.
But sometimes, we want to access those websites or servers that are restricted and we do not want to
show our identity (IP address). In such a scenario, the proxy server comes into existence. We can achieve
the same by using the proxy server. It provides varying levels of functionality, security, and privacy that
depend on the use case, needs, or policies of the company.
Proxy Server :The proxy server is a computer on the internet that accepts the incoming requests from
the client and forwards those requests to the destination server. It works as a gateway between the end-
user and the internet. It has its own IP address. It separates the client system and web server from the
global network.
In other words, we can say that the proxy server allows us to access any websites with a different IP
address. It plays an intermediary role between users and targeted websites or servers. It collects and
provides information related to user requests. The most important point about a proxy server is that it
does not encrypt traffic.
There are two main purposes of proxy server:

o To keep the system behind it anonymous.
o To speed up access to a resource through caching.
The proxy server accepts the request from the client and produces a response based on the following
conditions:
1. If the requested data or page already exists in the local cache, the proxy server itself provides the
required retrieval to the client.
2. If the requested data or page does not exist in the local cache, the proxy server forwards that
request to the destination server.
3. The proxy servers transfer the replies to the client and also being cached to them.
Therefore, it can be said that the proxy server acts as a client as well as the server.
Types of Proxy Servers
There are many types of proxy servers available. The two most common types of proxy servers
are forward and reverse proxy servers. The other proxy server has its own feature and advantages.
Let's discuss each in detail.
1. Open or Forward Proxy Server: It is the most widely recognized type of intermediary worker
that is gotten to by the customer. An open or forward proxy server refers to those sorts of
intermediaries that get demands from web clients and afterward peruse destinations to gather the
mentioned information. After collecting the data from the sites, it forwards the data to the internet
users directly. It bypasses the firewall made by authorities. The following image shows forward
proxy configuration.
2. Reverse Proxy Server: It is a proxy server that is installed in the neighborhood of multiple other
internal resources. It validated and processes a transaction in such a way that the clients do not
communicate directly. The most popular reverse proxies are Varnish and Squid. The following
image shows the reverse proxy configuration.
3. Split Proxy Server: It is implemented as two programs installed on two different computers.
4. Transparent Proxy: It is a proxy server that does not modify the request or response beyond
what is required for proxy authentication and identification. It works on port 80.
5. Non-Transparent Proxy: It is an intermediary that alters the solicitation reaction to offer some
extra types of assistance to the client. Web demands are straightforwardly shipped off the
intermediary paying little mind to the worker from where they started.
6. Hostile Proxy: It is used to eavesdrop upon the data flow between the client machine and the
web.
7. Intercepting Proxy Server: It combines the proxy server with a gateway. It is commonly used
in businesses to prevent avoidance of acceptable use policy and ease of administration.
8. Forced Proxy Server: It is a combination of Intercepting and non-intercepting policies.
9. Caching Proxy Server: Caching is servicing the request of clients with the help of saved contents
from previous requests, without communicating with the specified server.
10. Web Proxy Server: The proxy that is targeted to the world wide web is known as a web proxy
server.
11. Anonymous Proxy: The server tries to anonymizing the web surfing.
12. Socks Proxy: It is an ITEF (Internet Engineering Task Force) standard. It is just like a proxy system
that supports proxy-aware applications. It does not allow the external network components to
collects the information of the client that had generated the request. It consists of the following
components:
o A dient library for the SOCK.
o A dient program such as FTP, telnet, or internet browser.
o A SOCK server for the specified operating system.
13. High Anonymity Proxy: The proxy server that doesn't contain the proxy server type and the client
IP address in a request header. Clients using the proxy can't be tracked.
14. Rotating Proxy: It assigns a unique IP address to each client who is connected to it. It is ideal for
users who do a lot of continuous web scrapping. It allows us to return the same website again and
again. So, using the rotating proxy requires more attention.
15. SSL Proxy Server: It decrypts the data between the client and the server. It means data is
encrypted in both directions. Since proxy hides its existence from both the client and the server. It
is best suited for organizations that enhance protection against threats. In SSL proxy, the content
encrypted is not cached.
16. Shared Proxy: A shared proxy server is used by more than one user at a time. It provides an IP
address to the client that can be shared with other clients. It also allows users to select the location
from where the user wants to search. It is ideal for users who do not want to spend a lot of money
on a fast connection. Low cost is an advantage of it. The disadvantage of it is that a user can be
get blamed for someone else's mischievous activity. For this reason, the user can be blocked from
the site.
17. Public Proxy: A public proxy is available free of cost. It is perfect for the user for whom cost is a
major concern while security and speed are not. Its speed is usually slow. Using a public proxy puts
the user at high risk because information can be accessed by others on the internet.
18. Residential Proxy: It assigns an IP address to a specific device. All requests made by the client
channeled through that device. It is ideal for the users who want to verify ads that display on their
websites. Using the residential proxy server, we can block unwanted and suspicious ads from
competitors. In comparison to other proxy servers, the residential proxy server is more reliable.
19. Distorting Proxy: It is different from others because it identifies itself as a proxy to a website but
hides its own identity. The actual IP address is changed by providing an incorrect one. It is perfect
for clients who do not want to disclose their location during surfing.
20. Data Center Proxy: It is a special type of proxy that is not affiliated with the ISP. It is provided
by other corporations through a data center. These servers can be found in physical data centers.
It is ideal for clients who want quick responses. It does not provide high-level anonymity. For this
reason, it can put client information at high risk.
21. HTTP Proxy: HTTP proxies are those proxy servers that are used to save cache files of the browsed
websites. It saves time and enhances the speed because cached files reside in the local memory.
If the user again wants to access the same file proxy itself provides the same file without actually
browsing the pages
Web server security Methods
Though there are various security techniques available in the market that a user can implement to have a
safe web server experience, below given are some examples of security practices that can include
processes:
1. A reverse proxy is a proxy server that is accessible to the clients, therefore hiding the internal
server. It acts as an intermediary as wherever any user makes requests to the web server for any
data or file, the proxy server seizes those requests and then communicates with the webserver.
2. Access restriction is a technique that limits the web host's access to infrastructure machines or
using Secure Socket Shell (SSH);
3. Keeping web servers mended and updated, as it benefits to ensure the web server isn't
vulnerable to exposures;
4. Network monitoring is a security practice that ensures that no unauthorized activity is going on
the web server; and
5. Using a firewall and SSL safeguards the web server as firewalls can supervise HTTP request
traffic while a Secure Sockets Layer (SSL) supports securing the data.
HTTP PROTOCOL
• The Hyper Text Transfer Protocol(HTTP) is a request/response protocol.
• It is a communication protocol used to transfer the information on local area network and World
Wide Web(WWW).
• It is the network protocol used to deliver virtually all files and other data (collectively calledresources)
on the World Wide Web, whether they're HTML files, image files, query results, or anything else.
Usually, HTTP takes place through TCP/IP sockets.
• It is also called as a stateless protocol because this protocol is not able to maintain the previous
conversation/information.
The basic feature of HTTP protocol is that it follows the request response model.
The client makes a request for desired web page by giving the URL in the address bar. This request
is submitted to the web server and then web server gives the response to the web browser by
returning the required webpage.
REQUEST AND RESPONSE STRUCTURE

1. HTTPRequestMessageStructure
The basic structure of request message is given by following general form-
<Startline>
<Headerfields>
<BlankLine>
<MessageBody>
<startLine>
The start line consists of three parts which are separated by a single space. These parts are-
i) Requestmethod ii) Request-URI iii)HTTPversion
(i) RequestMethod:Various methods used for making the request are enlisted in the following
table
HTTP Description
method
GET The GET method is used to retrieve information from a specified URI and is assumed
to be a safe, repeatable operation by browsers.
POST The POST method is used to request the server for desired web page and the request
made is accepted as a new subordinate of there source identified.
The POST method is used for operations that have side effects and cannot be safely
repeated. For example, transferring money from one bank account to another has side
effects and should not be repeated without explicit approval bythe user.
HEAD The HEAD method is identical to GET. The only difference is that the server should not
return a message-body in the response. The meta-information contained in the HTTP
headers in response to a HEAD request should be Similar to the information sent in
response to a GET request.
OPTION This method supports for the specified URL. It can be used to check the functionality
of a web server by requesting'*' instead of a specific resource.
PUT This method uploads are presentation of the specified resource.

DELETE Thismethodisusefulindeletingthespecifiedresource.
TRACE When request is made using TRACE method the server echoes back the received request
so that a client can see what intermediate servers are adding or changing in the request.
(i)Request-URI:
• The Uniform Resource Identifier(URI) is a string used to identify the names or resources on the
Internet.
• The URI is a combination of URL and URN.
• The URL stands for Uniform Resource Locator and URN stands for Uniform Resource Name.
• The web address denotes the URL and specific name of the place or a person or item denotes the URN.
For example urn: ISBN978-81-8431-123-2 specifies the address of some book.
• If the URI is written in the form of http: then it is both an URI and URL but there are some other URI
which can also be used as URL. Forexample
URL Intended server
ftp://ftp.mywebsite.com/index.txt File can be located on FTP server
telnet://mywebsite.org Telnet server
mailto:myself@mywebsite.org Mailbox
http://www.mywebsite.com Webserver
(ii) HTTPVersion:The first HTTP version was HTTP/0.9 but the official version of HTTP was
HTTP/1.1
<HeaderField>and<MessageBody>
• The host header filed is associated with the http request.
• The header fields are in the form of fieldname and field value.
• Thus typical structure of http request is given be following example-
Fig.1.3.1HTTPrequestmessagestructure
2. HTTPResponseMessageStructure
The basic structure of response message is given by following general form-
<Statusline>
<Headerfields>
<BlankLine>
<StatusLine> Status line is similar to the start line in the request message. It consists of three fields.
<MessageBody>
HTTPversion Statuscode reasonphrase
The HTTP version denotes the HTTP version such as HTTP/1.1. The status code is a numeric code
indicating the type of response. The reason phrase is in the text string form and presents the
information about the status code.
Forexample-
Following table explains some commonly used status codes.
Status Reasonphra Description

code se
200 OK This is a standard response for successful request.
201 Created It shows that the request is fulfilled and a new resource is being
created.
202 Accepted When the request is accepted for processing but is not processed
yet is denoted by this status code.
301 Moved The URI for requested resource is moved at some another
permanentl location.
y
401 Unauthorized The requested resource is protected by some password and the
user has not provided any password.
403 Forbidden The requested resource is present on the server but the server is
not able to respond it.
404 NotFound The requested resource is not present currently but may be
available in future.
500 Internal It is a generic error message that appears due to software

Server internal failure.
Error
<HeaderFields>
The headerfield in response message is similar to that of request message.

<MessageBody>
The message body consists of response message.Forexample

HTTP/1.1200OK
Date:Sat,30Mar201907:59:01GMT
Server:Apache/2.0.50(Unix)mod_perl/1.99_10Perl/v5.8.4
mod_ssl/2.0.50OpenSSL/0.9.7dDAV/2PHP/4.3.8
Last-Modified:Mon,23Feb200908:32:41GMT
Accept-Ranges:bytes
Content-Length:2010Content-
Type:text/html
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>...</html>
Theresponseheaderfieldsareenlistedinfollowingtable
Headerfield Description
Date It represents the date and time at which the response is generated.
Server The name of the server which is responding
Last- The date and time at which the response is last modified.
Modified
Accept- It specifies the unit which is used by the client to accept the range request.For example
ranges if there is a large document and only a single web page is currently needed then
this specifies the Accept-range.
INTRODUCTION TO HTML
INTRODUCTION
• HTML stands for Hyper Text Markup Language. Hypertext is simply a piece of text that works as a
link.
• Markup Language is language of writing layout information with in documents.
• Basically an HTML document is a plain text file.
• It contains rich text. The rich text means text with tags.
• HTML is not a case sensitive language.
• Any HTML program can be written in simple Notepad or Word Pad text editors. The extension to this
program should be either html or htm.
• This program then can be opened in some web browser and the corresponding webpage can be viewed.
Let us create our first webpage using HTML.
An HTML document has two main parts:
1. head. The head element contains title and meta data of a web document.
2. body. The body element contains the information that you want to display on a web page.
In a web page, the first tag (specifically, <html>) indicates the markup language that is
being used for the document.
The <head> tag contains information about the web page. Lastly, the content appears in the <body> tag.
The following illustration provides a summary.
Tag:
1. HTML tags keywords are surrounding in Opening Tag <html> and Closing Tag</html>.
2. HTML tags is pairs like <body> and </body>. It's container tags.
3. Some HTML tags is not pairs in Opening and Closing like <br />, <hr />. It's empty tags.
4. All tags are write in Lower Alphabetical and empty tags always write in closing Tag type like <br
/>.
HTML FUNDAMENTAL ELEMENTS

Head Element
1. HTML <head> tag is a Container Tag. All Header element contains like general information about
page, meta-information, style sheet URL and document type information.
2. HTML <head> tag inside elements does not display in body part on web browser.
3. HTML <head> tag inside Elements is <!doctype>, <base>, <link>, <meta>, <title>, <style> and
<script>.
Head Elements Usages
1. HTML <!doctype> tag use for define a type of document.

2. HTML <link> tag is use for linked external CSS style sheet, external javascript etc... URL define.
3. HTML <meta> tag use for improve a rankings in search engines means optimize webpage using
proper meta data information.
4. HTML <title> tag define a document title.
5. HTML <style> tag is use for write internal CSS inside current document.
6. HTML <script> tag is use for create a dynamic web pages easy and more flexible in internal and
external write a javascript code.
Head Structure:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles.css">
<title> Example is Head Tag Elements </title>

<script src="javascript.js">
</script>
</head>
<body>

</body>
</html>
Head Elements
Tag Description
<!DOCTYPE> Defines a document type and write before the <html> start tag.
<head> Defines a harder information about the webpage document.
<meta> Defines meta information use to improve a rankings in Search Engines.
<title> Defines a Document Title.
<link> Defines a URL link using External Style Sheet, Javascript etc..
<base> Defines a base is used to specify a base URL to relative webpage URL links.
Body Element
1. HTML body section is a main contain section of web page all contain that will be seen when the user
loads the webpage.
2. HTML body section supported all the contains such as text, hyperlinks, images, Special Character,
lists, tables, frames, forms etc.
3. It's most powerful section and important section to display web page.
Basic Body Section Tags:
Tag Description
<a> Defines the internal link, external link and Subdirectory link.
<br /> Defines the single line break.
<code> Defines the computer code on text base.
<div> Defines the division section in a document.
<form> Defines the HTML form for use in input documents
<frame> Defines the many individual part
<hr /> Defines the horizontal line.
<p> Defines the paragraph in web documents.
<pre> Defines the preformatted text.
<span> Defines a section in a web document.
<table> Defines the table.
<textarea> Defines the multiline text.
Body Tag Structure:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles.css">
<title> Example is Body Section Elements </title>
</head>
<body>

<p> This is Body Section </p>
<a href="../html_tutorial.php">goto HTML Index Page </a>
</body>
</html>
Output :
This is Body Section
goto HTML Index Page
TAGS
HTML tags are like keywords which defines that how web browser will format and display the content. With
the help of tags, a web browser can distinguish between an HTML content and a simple content. 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.
An HTML file must have some essential tags so that web browser can differentiate between a simple text
and HTML text. You can use as many tags you want as per your code requirement.
o All HTML tags must enclosed within <> these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)
Syntax
<tag> content </tag>
ELEMENT
An HTML file is made of elements. These elements are responsible for creating web pages and define
content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag
name> and content inserted between them. Technically, an element is a collection of start tag,
attributes, end tag, content between them.
Syntax:<element_name> content </element_name>
Nested HTML Elements: HTML can be nested, which means an element can contain another element.
Element types:
Void element: All the elements in HTML do not require to have start tag and end tag, some elements
does not have content and end tag such elements are known as Void elements or empty elements. These
elements are also called as unpaired tag.
Some Void elements are <br> (represents a line break) ,<hr>(represents a horizontal line),
etc.
Block-level and Inline HTML elements
For the default display and styling purpose in HTML, all the elements are divided into two categories:
o Block-level element
o Inline element
Block-level element:
o These are the elements, which structure main part of web page, by dividing a page into coherent
blocks.
o A block-level element always start with new line and takes the full width of web page, from left to
right.
o These elements can contain block-level as well as inline elements.
Following are the block-level elements in HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>,
<figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>,
<noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
Inline elements:
o Inline elements are those elements, which differentiate the part of a given text and provide it a
particular function.
o These elements does not start with new line and take width as per requirement.
o The Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>,
<img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>,
<span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
ATTRIBUTE
o HTML attributes are special words which provide additional information about the elements or
attributes are the modifier of the HTML element.
o Each element or tag can have attributes, which defines the behaviour of that element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is recommended by W3C that it should
be written in Lowercase only.
o You can add multiple attributes in one HTML element, but need to give space between two attributes
Syntax
<element attribute_name="value">content</element>
History of HTML
• TimBerners-Lee is the person who defined HTML. In1990, Tim Berners-Lee was working at CERN
(European Organization for Nuclear Research). He included the elements that coulddefine title,
paragraphs, hyperlink, headings, simple lists, address blocks and so on. But in thatversion of HTML
there was no facility for producing tables or fill-in forms and images within adocument.
• In 1994, Tim Berners-Lee launched the World Wide Web Consortium (W3C) for producing
standards for web technologies.W3C also defined the standards for HTML. As an outcome of W3C’s
efforts HTML2.0 adopted web standard within it.
• The W3C released its HTML 4 recommendation in December 1997. The version 4.01 is then introduced
• The meta language used to define the syntax for HTML 4.01 is SGML (Standard
GeneralizedMarkupLanguage).
• In 1998, the W3C introduced the Extensible Markup Language (XML) which is a restricted version of
SGML. Then a new version of HTML came up, which is called XHTML. (eXtensible HyperText Markup
Language). The syntaxes of XHTML are defined using XML, rather thanSGML.
• The HTML 5.0 is the fifth revision of HTML standard of World Wide Consortium(W3C) which is finalized
in October 2014.
HEADING TAG
HTML header tag h is used for specifying heading level text. There are 6 levels of headings (h1 - h6) with
h1 the most important and h6 the least important.
Browsers are supported various headings in different sizes - with h1 being the largest and h6 being the
smallest.
Ex:
<html>
<head>
<title> HTML Attributes Example </title>
</head>
<body>
<h1>Heading h1<h1>
<h1>Heading h2<h1>
<h1>Heading h3<h1>
<h1>Heading h4<h1>
<h1>Heading h5<h1>
<h1>Heading h6<h1>
</body>
</html>
Output :
PARAGRAPH,DIV,PRE
Following are the tags that are used for creating paragraphs
Tag Meaning
<p> This tag should be put at the end of every paragraph.
<pre> This tag is used to preserve the white spaces and lines int he text.
<div> This tag is used to make division of sections in the XHTML document.
Forexample
HTMLDocument[TextFormat.html]
<!DOCTYPEhtml>
<html>
<head>
</head>
<body>
<p>
Once upon a time, there was a king who kept a monkey as a pet.The monkeyserved thekingby all
thepossible ways.
</p>
<div>
It was very hot in those days. So one day, when the king was sleeping, monkey wasfanning
the king. Suddenly monkey noticed a fly on the chest of the king. The monkey tried to swish it
away. But fly would go away for one moment and come back again.
</div>
<div>So monkey decided to teach a lesson to the fly.</div>
<pre>The monkey then looked for something to hit a fly. It then found a stick.
It picked up the stick and tried to be at the fly using stick.
Hmmm at last it found a fly and
With all the force it hit the fly as a result of which the king died
Lesson from the story: Never keep a fool servant!!!
</pre>
</body>
</html>
FORMATTING TAGS:
HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to
format text without using CSS. There are many formatting tags in HTML. These tags are used to make
text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML
and XHTML.
In HTML the formatting tags are divided into two categories:
o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the text.
Following is the list of HTML formatting text.
Element name Description

<b> The HTML <b> element is a physical tag which display text in bold font, without
any logical importance. If you write anything within <b>............</b> element, is
shown in bold letters.
<strong> The HTML <strong> tag is a logical tag, which displays the content in bold font and
informs the browser about its logical importance. If you write anything between
<strong>???????.</strong>, is shown important text.
<i> The HTML <i> element is physical element, which display the enclosed content in
italic font, without any added importance. If you write anything within
<i>............</i> element, is shown in italic letters.
<em> The HTML <em> tag is a logical element, which will display the enclosed content
in italic font, with added semantics importance.
<mark> If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.
<u> If you write anything within <u>.........</u> element, is shown in underlined text.
<tt> This tag is used to appear a text in teletype.
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. (not supported in
HTML5)
<strike> Anything written within <strike>.......................</strike> element is displayed

with strikethrough. It is a thin line which cross the statement. (Not supported in
HTML5)
<sup> If you put the content within <sup>..............</sup> element, is shown in
superscript; means it is displayed half a character's height above the other
characters.
<sub> If you put the content within <sub>..............</sub> element, is shown in
subscript ; means it is displayed half a character's height below the other
characters.
<del> Anything that puts within <del>..........</del> is displayed as deleted text.
<ins> Anything that puts within <ins>..........</ins> is displayed as inserted text.
<big> 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.
<small> 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.
Ex:
<!DOCTYPE>
<html>
<body>
<p><b>Write Your First Paragraph in bold text.</b></p></br>
<strong>This is an important content</strong>, and this is normal content </br>

<i>Write Your First Paragraph in italic text.</i></br>
<em>This is an important content</em>, which displayed in italic font</br>
I want to put a <mark> Mark</mark> on your face</br>
<u>Write Your First Paragraph in underlined text.</u></br>
<strike>Write Your First Paragraph with strikethrough</strike></br>
Hello <tt>Write Your First Paragraph in monospaced font.</tt></br>
Hello <sup>Write Your First Paragraph in superscript.</sup></br>
Hello <sub>Write Your First Paragraph in subscript.</sub></br>
Hello <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></br>
Hello <big>Write the paragraph in larger font.</big></br>
Hello <small>Write the paragraph in smaller font.</small>
</body>
</html>
Output:
Span Tag:
HTML <span> tag is used as a generic container of inline elements. It is used for styling purpose to the
grouped inline elements (using class and id attribute or inline style).
The <span> tag does not have any default meaning or rendering.
The <span> tag can be useful for the following task:
o To change the language of a part of the text.
o To change the color, font, background of a part of text using CSS
o To apply the scripts to the particular part of the text.
Br Tag:
An HTML <br> tag is used for line break and it can be used with paragraph elements.
PHRASE TAG
The HTML phrase tags are special purpose tags, which defines the structural meaning of a block of text or
semantics of text. Following is the list of phrase tags, some of which we have already discussed in HTML
formatting.
o Abbreviation tag :<abbr> -This tag is used to abbreviate a text. To abbreviate a text, write text
between <abbr> and </abbr> tag.
o Acronym tag: <acronym> (not supported in HTML5)
o Marked tag: <mark> - The content written between <mark> and </mark> tag will show as
yellow mark on browser. This tag is used to highlight a particular text.
o Strong tag: <strong> - This tag is used to display the important text of the content. The text
written between <strong> and </strong> will be displayed as important text.
o Emphasized tag :<em> - This tag is used to emphasize the text, and displayed the text in italic
form. The text written between <em> and </em> tag will italicized the text.
o Definition tag: <dfn> - When you use the <dfn> and </dfn> tags, it allow to specify the keyword
of the content. Following is the example to show how to definition element.
o Quoting tag: <blockquote> - The HTML <blockquote> element shows that the enclosed content
is quoted from another source. The Source URL can be given using the cite attribute, and text
representation of source can display using <cite>.....</cite>element.
o Short quote tag :<q> - An HTML <q> ....... </q> element defines a short quotation. If you will
put any content between <q> ....... </q>, then it will enclose the text in double quotes.
o Code tag: <code> - The HTML <code></code> element is used to display the part of computer
code. It will display the content in monospaced font.
o Keyboard tag: <kbd> - In HTML the keyboard tag, <kbd>, indicates that a section of content is
a user input from keyboard.
o Address tag: <address> - An HTML <address> tag defines the contact information about the
author of the content. The content written between <address> and </address> tag, then it will be
displayed in italic font.
Ex:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Hypertext Markup language </h2>
<p>
An <abbr title = "Hypertext Markup language">HTML </abbr>language is used to create web pages.
</br>
This tag will <mark>highlight</mark> the text.</br>
In HTML it is recommended to use <strong>lower-case</strong>, while writing a code </br>
HTML is an <em>easy </em>to learn language </br>
<dfn>HTML </dfn> is a markup language. </br>
<blockquote cite="https://www.keepinspiring.me/famous-quotes/"><blockquote
cite="https://www.keepinspiring.me/famous-quotes/"><p>"The first step toward success is taken when
you refuse to be a captive of the environment in which you first find yourself." </blockquote>
<cite>-Mark Caine</cite><br>
Steve Jobs said: <q>If You Are Working On Something That You Really Care About, You Don?t Have To
Be Pushed. The Vision Pulls You.</q>?</br>
<code>class Simple{ public static void main(String args[]){
System.out.println("Hello Java"); }} </code><br>
Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to restore page on chrome <br>
<address> You can ask your queries by contact us on <a href="">example123@newdomain.com</a>
<br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187.
</address>
</p>
</body>
</html>
Output:
IMAGE TAG
The<img> tag is used to insert image in webpage. It is an empty tag, means it does not have end tag.
The src and alt are important attributes of HTML img tag.
All attributes of HTML image tag are given below.
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 maybe on the same directory or another server.
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.
Syntax:<img src="url" alt="some_text">
Example:<img src="path of the image file" width="200" height="100" alt="image no tdisplayed"

align="left">
Image Attribute:
Attributes Values Description
Vspace "size_px" Specifies the amount of space to the top and bottom of the image.
Hspace "size_px" Specifies the amount of space to the left and right of the image.
Alt “Alternate_ Specifies alternate text for an image when image is not found.
Text"
Src "Image_So Indicate the source file.

urce_URL_
Path"
Border "Size" eg. Specifies the thickness of border.
"0"
Width and "size_px" Specifies width and height of the image.

height
Align "Left" Use to set horizontal alignment of the image. (left, right)
"Right"
Valign “top” Used to set vertical alignment of the image. (top ,bottom)
“bottom”
Ex:
<html>
<body>
<p>HTML Image example with height and width</p>
<imgsrc=”./deer.jpeg” width=100 height=100 border=1 alt=”image not found”>House</img>
</body>
</html>
Output:
We can also link an image with other page or we can use an image as a link. To do this, put <img> tag
inside the <a> tag.
ANCHOR TAG
The HTML Anchor Element (<a>) defines a hyperlink to a location on the same page or any
other page on the Web. It can also be used (in an obsolete way) to create an anchor point—a destination
for hyperlinks within the content of a page, so that links aren't limited to connecting simply to the top of
a page.
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue

• A visited link is underlined and purple
• An active link is underlined and red
Link Attributes
1. The HREF Attribute : To create a link, you have to know the web address of the file you want
to link to, whether it's another web page of your own site, another website, or a link to file such as
a PDF document, sound file, or another type of file.
The href part, is short for hypertext reference. This is the attribute that defines the address of
the file you want to link to.
Syntax: <a href="URL">Linktext</a>
href: Specifies the destination address. Linktext: Link text is visible part.
2. NAME Attribute:The name attribute allows an anchor tag to be used to point to a specific
place on a web page. You might link from the bottom of a long page to the top of the page, or
link from an item in a Table of Contents to the corresponding item where it appears on the page.
The syntax for using the name attribute is like this: <a name="linking text"></a>
3. The target attribute : The target attribute is used to specify the location where linked
document is opened. Every target name starts with underscore(_).
HTML provides 4 basic target options.
Option Description
_top Opens the linked document in new window breaking all the frames.
_blank Opens the linked document in new blank window.
_parent Opens the linked document in the parent frame of the current document.
_self Opens the linked document in the current frame.
LINKTYPES:You can provide the hyperlink in a webpage
1. By clicking on Text.
2. By clicking on Image.
3. By using Mailto
1. By clicking on Text: This type of link uses Text as a hyperlink. It contains Link Attribute, reference
link address and link text. By clicking on that text in a webpage it redirects to referenced link page
file.
Syntax:<a link attribute=”referenced path”>Hyper linked text</a>
2. By clicking on Image: This type of link uses Image as a hyperlink. It contains Link Attribute,
reference link address and image tag. By clicking on that image in a webpage it redirects
toreferencedlinkpagefile.
Syntax:<a linkattribute=”referenced path”><imgsrc=image address attributes></a>
3.HTML Mailto LinkCode:HTML Link also use for create a Mailto link to a send an email to a specific
E-mail address. Href attributes value is set mailto link that followed to an e-mailaddress.
When click on E-Mail link, it will open E-Mail application. E-Mail link is use to send E-Mail/Review with subject,
text message.
Types of Hyperlinks:
1. Html Internal Link :HTML Internal Link is linked within the same web page. This link can be absolute
path or relative path.
HTML internal link name is followed by head sign(#). HTML <a> tag is use for anchor point name, which
is referred to a internal link into a same page.
When click on this anchor link, It's referred link automatically scrolls and display on browser.
<html>
<body>
<a href="#Lession.1">Lession.1</a><br />
<br />
<a name="Lession.1">Introduction of Lession.1</a>
<p>This is sub topic.1</p>
<br />
<br />

<br />
</body>
</html>
output :
2. External Link :External HTML Links is linked to external web page. This link is may be absolute path
or relative link path.
<a> tag is used for anchor name which is referred link to another web page.
External link is great future to drive a webpage one to another and useful for surf many webpage in
website.
<html>
<body>
<a href="../tutorial.php">HTML</a><br />
<br />
<a href="../../css/tutorial.php">CSS</a><br />
<br />
<a href="../../javascript/tutorial.php">Java Script</a><br />
</body>
</html>
Output :
3. HTML Mailto Link Code :HTML Link also use for create a Mailto link to a send a email to a specific E-
mail address. href attributes value is set mailto link that followed to a e-mail address.
When click on E-Mail link, it will open E-Mail application. E-Mail link is use to send E-Mail/Review with
subject, text message.
<html>
<body>
<p><a
href="mailto:jaypatel@way2tutorial.com?cc=jaypatel@way2tutorial.com&bcc=webtuts@way2tutorial.co
m&subject=Feedback&body=Message">Click Here </a> for Feedback </p>
</body>
</html>
output :
Click Here for Feedback

List Tag
A list is a structured paragraph containing a series of items. All lists must contain one or more list
elements.Each item is started with Lists may contain:
• <ul> - An unordered list. This will list items using plain bullets.
• <ol> - An ordered list. This will use different schemes of numbers to list your items.
• <dl> - A definition list. This arranges your items in the same way as they are arranged in a
dictionary.
1. HTML Unordered Lists : An unordered list is a collection of related items that have no special
order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked
with a bullet.
The type Attribute : You can use type attribute for <ul> tag to specify the type of bullet you like.
By default it is a disc. Following are the possible options:
<ul type="square">
<ul type="disc">
<ul type="circle">
Example :
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
output :
2. HTML Ordered Lists : If you are required to put your items in a numbered list instead of
bulleted then HTML ordered list will be used. This list is created by using <ol> tag. The
numbering starts at one and is incremented by one for each successive ordered list element
tagged with <li>.
The type Attribute :You can use type attribute for <ol> tag to specify the type of numbering you
like. By default it is a number. Following are the possible options:
<ol type="1"> - Default-Case Numerals.

<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.
Example
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
output :
The start Attribute :You can use start attribute for <ol> tag to specify the starting point of
numbering you need. Following are the possible options:
<ol type="1" start="4"> - Numerals starts with 4.

<ol type="I" start="4"> - Numerals starts with IV.
<ol type="i" start="4"> - Numerals starts with iv.
<ol type="a" start="4"> - Letters starts with d.
<ol type="A" start="4"> - Letters starts with D.
3. HTML Definition Lists :HTML and XHTML support a list style which is called definition lists where
entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to
present a glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.
• <dl> - Defines the start of the list

• <dt> - A term
• <dd> - Term definition
• </dl> - Defines the end of the list
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
Output :
TABLE TAG
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a
row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> ,<td>,
and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined
by <td> tags.
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.
Table Attributes :
1. cellpadding and cellspacing which you will use to adjust the white space in your table cells. The
cellspacing attribute defines the width of the border, while cellpadding represents the distance
between cell borders and the content within a cell.
2. Colspan and Rowspan :AttributesYou will use colspan attribute if you want to merge two or more
columns into a single column. Similar way you will use rowspan if you want to merge two or more
rows.
3. Tables Backgrounds :You can set table background using one of the following two ways:
• bgcolor attribute - You can set background color for whole table or just for one cell.
• background attribute - You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.
4. Table Height and Width :You can set a table width and height using width and height attributes.
You can specify table width or height in terms of pixels or in terms of percentage of available screen
area.
5. Table Caption :Thecaption tag will serve as a title or explanation for the table and it shows up at the
top of the table. This tag is deprecated in newer version of HTML/XHTML.
6. Table Header, Body, and Footer : Tables can be divided into three portions: a header, a body, and
a foot. The head and foot are rather similar to headers and footers in a word-processed document that
remain the same for every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are:
• <thead> - to create a separate table header.

• <tbody> - to indicate the main body of the table.
• <tfoot> - to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of
data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>
Example :
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<tableborder="1"width="100%">
<thead>
<tr>
<tdcolspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<tdcolspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
OutPut:
FRAMES
Frames are the sections created on the window. Each section can load a separate HTML
document.
The window is divided into frames in a similar way the tables are organized into rows and columns.
Frames provide the facility to display multiple HTML document inside one browser window at atime.
To create frames,w e need<frameset>and<frame>tag.
1. <frameset>tag: Collection of frames is called as frameset.

If you are using frames on a page then use <frameset>tag instead of<body>tag.
The rows attribute of <frameset> tag indicates horizontal frames and cols attribute indicates vertical
frames.
Syntax:<frameset> .............. </frameset>
<frameset>TagAttributes:
Attributes Description
cols It specifies how many columns are to be contained in the frameset and the
size of each column.
(Columns)
Rows It works like the 'cols' attribute and takes the same values, but it is used to
specify the number of rows in the frameset.
Border It specifies the width of the border of each frame in pixels. For example;
border=“5”. A value of zero means no border.
Frame It specifies whether a three-dimensional border should be displayed between

frames. It takes value either 1(Yes)or0(No).For example; frameborder=“0”
specifies no border.
framespacing It specifies the amount of space between frames in a frameset. It can take
any integer value. For example; framespacing=“10” means there should be
10pixels spacing between each frame.
2. <frame>tag: <frame> tag is used to define a frame within a <frameset>tag. A frame should
be used within a<frameset>tag.
Syntax:<framesrc=”frm1.htm”>
<frame>TagAttributes:
Attributes Description
Src It is used to give the filename that should be located in the frame. Its value
can be any URL, for example, src=“/html/abc.html”
Name It allows to give a name to a frame. This attribute is used to indicate that a
document should be loaded into a frame.
frameborder It specifies whether or not the borders of that frame are shown. This attribute
overrides the value given in the frame border attribute on the <frameset> tag
if one is given. This can take values either 1(Yes) or 0(No).
marginwidth It allows to specify the width of the space between the left and right of the
frame's border and the content. The value is given in pixels. For example;
marginwidth=“10”.
marginheight It allows 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”.
Noresize By default, a user can resize any frame by clicking and dragging on the borders
of a frame. It prevents a user from being able to resize the frame. For
example;noresize=“noresize”.
Scrolling It controls the appearance of the scrollbars that appear on the frame. It takes
values either “Yes”, “No” or “Auto”. For example; scrolling=“no” means it
should not have scroll bars.
Longdesc It allows to provide a link to another page which contains along description of
the contents of the frame. Forexample; longdesc=“framedescription.html”
Example:HTMLFrame
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLFramesExample</title>
</head>
<framesetcols="50%,50%">
<framesrc="image.html">
<framesrc="table.html">
</frameset>
</html>
Output:
FORMS
Form is a part of web page. It is used to collect user input through elements like text fields, check box
and radio button, select option, text area, submit buttons and etc.
Forms are commonly used to provide user interaction on websites and in web applications.
For example, login, registering, commenting, and purchasing.
• Labeling Controls: Use the <label> element, and, in specific cases, other mechanisms (e.g. WAI-
ARIA, title attribute etc.), to identify each form control.
• Grouping Controls: Use the <fieldset> and <legend> elements to group and associate related form
controls.
• Form Instructions: Provide instructions to help users understand how to complete the form and
individual form controls.
• Validating Input: Validate input provided by the user and provide options to undo changes and
confirm data entry.
• User Notifications: Notify users about successful task completion, any errors, and provide
instructions to help them to correct mistakes.
• Multi-Page Forms: Divide long forms into multiple smaller forms that constitute a series of logical
steps or stages and inform users about their progress.
• Custom Controls: Use stylized form elements and other progressive enhancement techniques to
provide custom controls.
Form works like a container which consists of controls known as form elements.
The HTML <form> tag is used to create an HTML form.
Syntax:
<form action="Script URL" method="GET/POST">
form elements land layout tags
</form>
Form Attributes:
Attribute Description
Action Specifiestheencoding ofthesubmitteddata.
Enctype Usedto giveanameto thecontrol.
Method Specifythemethod to beusedto uploaddata.
Name Usedtoidentifyandretrievevaluesfromeachformonthe webpage.
Target Indicatesthetargetoftheaddressin theactionattribute.
Input element: The <input> tag specifies an input field where the user can enter data.
<input> elements are used within a <form> element to declare input controls that allow users to input
data. An input field can vary in many ways, depending on the type attribute.
Syntax:<form>……<input type=”….”/>….</form>
Types : The following types of fields can be defined with the TYPE attribute
• TEXT: It creates Single line text entry fields. Use the SIZE attribute to specify the visible width in
characters, e.g. SIZE="24" for a 24 character field. The MAX attribute can be used to specify an upper
limit to the number of characters that can be entered into a text field, e.g. MAX=72 . Use the
TEXTAREA element for text fields which can accept multiple lines (see below).
• HIDDEN: It creates a Hidden field. No field is presented to the user, but the content of the field is
sent with the submitted form. This value may be used to transmit state information about
client/server interaction.
• CHECKBOX: It is Used for simple Boolean attributes, or for attributes which can take multiple values
at the same time. The later is represented by a number of checkbox fields each of which has the same
NAME.
• RADIO: For attributes which can take a single value from a set of alternatives. Each radio button
field in the group should be given the same NAME.
• SUBMIT: This is a button that when pressed submits the form. It offers authors control over the
location of this button. You can use an image as a submit button by specifying a URL with the SRC
attribute.
• RESET: This is a button that when pressed resets the form's fields to their initial values as specified
by the VALUE attribute. You can use an image as a reset button by specifying a URL with the SRC
attribute.
• Button :Creates a push button. User should use the value of the value attribute as the button's label.
• File :Creates a file select control. User may use the value of the value attribute as the initial file
name.
FORM example:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form >
User-Name: <input type="text" name="enter user name" />
<br>
Password: <input type="password" name="password" />
<br>
Mobile No: <input type="text" name="mob_no" />
<br>
Gender:<br>
Male <input type="radio" name="gender" value="male"> Female <input type="radio"
name="gender" value="female">
<br>
Country:<br>
<input type="checkbox" name="India" value="on"> INDIA<br>
<input type="checkbox" name="USA" value="off"> USA <br>
<input type="checkbox" name="JAPAN" value="off"> JAPAN<br>
feedback:<br>
<textarea rows="4" cols="30" name="address">
Text Area.....
</textarea><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Form Control Types:
There are different types of form controls that you can use to collect data using HTML form −
1. Text Input Controls

2. Checkboxes Controls
3. Radio Box Controls
4. Select Box Controls
5. File Select boxes
6. Hidden Controls
7. Clickable Buttons
8. Submit and Reset Button
1. Text Input Controls :There are three types of text input used on forms –
• Single-line text input controls − This control is used for items that require only one line of
user input, such as search boxes or names. They are created using HTML <input> tag.
• Password input controls − This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTML <input> tag.
• Multi-line text input controls − This is used when the user is required to give details that may
be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.
Single-line text input controls :This control is used for items that require only one line of user input,
such as search boxes or names. They are created using HTML <input> tag.
Example :Here is a basic example of a single-line text input used to take first name and last name −
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
o/p:
Attributes :Following is the list of attributes for <input> tag for creating text field.
S.no Attribute & Description

1 Type :Indicates the type of input control and for text input control it will be set to text.
2 Name: Used to give a name to the control which is sent to the server to be recognized and
get the value.
3 Value :This can be used to provide an initial value inside the control.
4 Size :Allows to specify the width of the text-input control in terms of characters.
5 Maxlength: Allows to specify the maximum number of characters a user can enter into the
text box.
Password input controls :This is also a single-line text input but it masks the character as soon as a
user enters it. They are also created using HTML <input>tag but type attribute is set
to password.
Example :Here is a basic example of a single-line password input used to take user password −
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID :<input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
o/p:
Attributes: Following is the list of attributes for <input> tag for creating password field.
S.No Attribute & Description

1 Type :Indicates the type of input control and for password input control it will be set
to password.
2 Name :Used to give a name to the control which is sent to the server to be recognized and get
the value.
3 Value :This can be used to provide an initial value inside the control.
4 Size :Allows to specify the width of the text-input control in terms of characters.
5 Maxlength
Allows to specify the maximum number of characters a user can enter into the text box.
Multiple-Line Text Input Controls: This is used when the user is required to give details that may be
longer than a single sentence. Multi-line input controls are created using HTML <textarea>
tag.
Example :Here is a basic example of a multi-line text input used to take item description
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description :<br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>
o/p:
Attributes :Following is the list of attributes for <textarea> tag.

the value.
2 Rows :Indicates the number of rows of text area box.
3 Cols :Indicates the number of columns of text area box
2.Checkbox Control : Checkboxes are used when more than one option is required to be
selected. They are also created using HTML <input> tag but type attribute is set to checkbox.
Example :Here is an example HTML code for a form with two checkboxes −
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on">Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>
o/p:
Attributes :Following is the list of attributes for <checkbox> tag.

1 Type :Indicates the type of input control and for checkbox input control it will be set
to checkbox..
the value.
3 Value :The value that will be used if the checkbox is selected.
4 Checked :Set to checked if you want to select it by default.
3.Radio Button Control ; Radio buttons are used when out of many options, just one option is required
to be selected. They are also created using HTML <input> tag but type attribute is set to radio.
Example :Here is example HTML code for a form with two radio buttons −
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths">Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>
o/p:
Attributes :Following is the list of attributes for radio button.

1 Type
Indicates the type of input control and for checkbox input control it will be set to radio.
2 Name
Used to give a name to the control which is sent to the server to be recognized and get the value.
3 Value
The value that will be used if the radio box is selected.
4 Checked
Set to checked if you want to select it by default.
4. Select Box Control : A select box, also called drop down box which provides option to list down
various options in the form of drop down list, from where a user can select one or more options.
Example :Here is example HTML code for a form with one drop down box
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
o/p:
Attributes :Following is the list of important attributes of <select> tag –

1 Name
2 Size
This can be used to present a scrolling list box.
3 Multiple
If set to "multiple" then allows a user to select multiple items from the menu.
Following is the list of important attributes of <option> tag –

1 Value
The value that will be used if an option in the select box box is selected.
2 Selected
Specifies that this option should be the initially selected value when the page loads.
3 Label
An alternative way of labeling options
5. File Upload Box: If you want to allow a user to upload a file to your web site, you will need
to use a file upload box, also known as a file select box. This is also created using the <input> element
but type attribute is set to file.
Example :Here is example HTML code for a form with one file upload box −
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>
o/p:
Attributes: Following is the list of important attributes of file upload box –
Sr.No Attribute & Description

1 Name
2 Accept
Specifies the types of files that the server accepts.
6. Button Controls : There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input>tag by setting its type attribute to button.
The type attribute can take the following values –
Sr.No Type & Description

1 Submit
This creates a button that automatically submits a form.
2 Reset
This creates a button that automatically resets form controls to their initial values.
3 Button
This creates a button that is used to trigger a client-side script when the user clicks that button.
4 Image
This creates a clickable button but we can use an image as background of the button.
Example :Here is example HTML code for a form with three types of buttons −
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>
o/p:
7. Hidden Form Controls: Hidden form controls are used to hide data inside the page which
later on can be pushed to the server. This control hides inside the code and does not appear on the
actual page.
For example, following hidden form is being used to keep current page number. When a user
will click next page then the value of hidden control will be sent to the web server and there
it will decide which page will be displayed next based on the passed current page.
Example :Here is example HTML code to show the usage of hidden control −
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
o/p:
CLASS ATTRIBUTE
The HTML class attribute is used to specify a single or multiple class names for an HTML element. The
class name can be used by CSS and JavaScript to do some tasks for HTML elements. You can use this class
in CSS with a specific class, write a period (.) character, followed by the name of the class for selecting
elements.
A class attribute can be defined within <style> tag or in separate file using the (.) character.
In an HTML document, we can use the same class attribute name with different elements.
Defining an HTML class
To create an HTML class, firstly define style for HTML class using <style> tag within <head> section as
following example:
Example:
<head>
<style>
.headings{
color: lightgreen;
font-family: cursive;
background-color: black; }
</style>
</head>
We have define style for a class name "headings", and we can use this class name with any of HTML
element in which we want to provide such styling. We just need to follow the following syntax to use it.
<tag class="ghf"> content </tag>
ID ATTRIBUTE
The id attribute is used to specify the unique ID for an element of the HTML document. It allocates
the unique identifier which is used by the CSS and the JavaScript for performing certain tasks.
Syntax :<tag id="value">

Ex:
<head>
<style>
#s1{
color: lightgreen;
font-family: cursive;
background-color: black; }
</style>
</head>
META TAG
HTML <meta> tag is used to represent the metadata about the HTML document. It specifies page
description, keywords, copyright, language, author of the documents, etc.
The metadata does not display on the webpage, but it is used by search engines, browsers and other web
services which scan the site or webpage to know about the webpage.
With the help of meta tag, you can experiment and preview that how your webpage will render on the
browser.
The <meta> tag is placed within the <head> tag, and it can be used more than one times in a document.
Syntax: <meta charset="utf-8">
Following are some specifications about the HTML <meta> tag
Display None
Start tag/End tag Empty Tag(Only Start tag)
Usage Document Structural
Following are some specific syntaxes of meta tag which shows the different uses of meta Tag.
1. <meta charset="utf-8">
It defines the character encoding. The value of charset is "utf-8" which means it will support to display any
language.
2. <meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">
It specifies the list of keyword which is used by search engines.
3. <meta name="description" content="Free Online tutorials">

It defines the website description which is useful to provide relevant search performed by search engines.
4. <meta name="author" content="thisauthor">
It specifies the author of the page. It is useful to extract author information by Content management
system automatically.
5. <meta name="refresh" content="50">
It specifies to provide instruction to the browser to automatically refresh the content after every 50sec (or
any given time).
6. <meta http-equiv="refresh" content="5; url=https://www.html.com/html-tags-list">
In the above example we have set a URL with content so it will automatically redirect to the given page
after the provided time.
7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
It specifies the viewport to control the page dimension and scaling so that our website looks good on all
devices. If this tag is present, it indicates that this page is mobile device supported.
MULTIMEDIA OBJECTS
Audio tag:HTML audio tag is used to define sounds such as music and other audio clips.
<audio>allows you to load, play, and pause audios, as well as set duration and volume.
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from.
The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support
the <audio> element.
Attributes of HTML Audio Tag:There is given a list of HTML audio tag.

controls It defines the audio controls which is displayed with play/pause buttons.
autoplay It specifies that the audio will start playing as soon as it is ready.
loop It specifies that the audio file will start over again, every time when it is
completed.
muted It is used to mute the audio output.
preload It specifies the author view to upload audio file when the page loads.
src It specifies the source URL of the audio file.
Example:
<html>
<body>
<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
Your browser does not support the html audio tag.
</audio>
</body>
</html>
Output:
Video Tag:HTML supports<video> tag also. The HTML video tag is used for streaming video
files such as a movie clip, song clip on the web page.
The controls attribute adds video controls, like play, pause, and volume.
You can include width and height attributes. If height and width are not set, the page might flicker while
the video loads.
The <source> element allows you to specify alternative video files which the browser may choose from.
The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not support
the <video> element.
Attributes of HTML Video Tag
controls It defines the video controls which is displayed with play/pause buttons.
height It is used to set the height of the video player.
width It is used to set the width of the video player.
poster It specifies the image which is displayed on the screen when the video is not
played.
autoplay It specifies that the video will start playing as soon as it is ready.
loop It specifies that the video file will start over again, every time when it is
completed.
muted It is used to mute the video output.
preload It specifies the author view to upload video file when the page loads.
src It specifies the source URL of the video file.
Example:
<html>
<body>
<video width="320" height="240" controls autoplay loop>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>
</body>
</html>
Output:
<embed> tag: Sometimes you need to add music or video into your web page. The easiest way to
add video or sound to your web site is to include the special HTML tag called <embed>. This tag
causes the browser itself to include controls for the multimedia automatically provided browser supports
<embed> tag and given media type.
You can also include a <noembed> tag for the browsers which don't recognize the
<embed> tag. You could, for example, use <embed> to display a movie of your choice,
and <noembed>to display a single JPG image if browser does not support <embed> tag.
The <embed> Tag Attributes:Following is the list of important attributes which can be used with
<embed> tag.
Sr.No Attribute & Description

1 Align
Determines how to align the object. It can be set to either center, left or right.
2 Autostart
This boolean attribute indicates if the media should start automatically. You can set it either true
or false.
3 Loop
Specifies if the sound should be played continuously (set loop to true), a certain number of times
(a positive value) or not at all (false)
4 Playcount
Specifies the number of times to play the sound. This is alternate option for loop if you are
usiong IE.
5 Hidden
Specifies if the multimedia object should be shown on the page. A false value means no and
true values means yes.
6 Width
Width of the object in pixels
7 Height
Height of the object in pixels
8 Name
A name used to reference the object.
9 Src
URL of the object to be embedded.
10 Volume
Controls volume of the sound. Can be from 0 (off) to 100 (full volume).
HTML Object tag:HTML 4 introduces the <object> element, which offers an all-purpose solution to
generic object inclusion. The <object>element allows HTML authors to specify everything required by
an object for its presentation by a user agent.
The <object> element is used to embed different kinds of media files into an HTML
document. Initially, this element was used to insert ActiveX controls, but according to the specification,
an object can be any media object such as video, audio, Java applets, ActiveX, document (HTML, PDF,
Word, etc.), Flash animations or even images.
Example:
<html>
<head>
<title>Example of Inserting Audio Using object Element</title>
</head>
<body>
<object data="/examples/audio/sea.mp3" width="200px" height="50px"></object>
<object data="/examples/audio/sea.ogg" width="200px" height="50px"></object>
</body>
</html>
Output:
CANVASTAG
The HTML canvas element provides HTML a bitmapped surface to work with. It is used to draw graphics
on the web page.
The HTML 5 <canvas> tag is used to draw graphics using scripting language like JavaScript.
The <canvas> element is only a container for graphics, you must need a scripting language to draw the
graphics. The <canvas> element allows for dynamic and scriptable rendering of 2D shapes and bitmap
images.
It is a low level, procedural model that updates a bitmap and does not have a built-in scene. There are
several methods in canvas to draw paths, boxes, circles, text and add images.
Create a canvas:A canvas is a rectangle like area on an HTML page. It is specified with canvas element.
By default, the <canvas> element has no border and no content, it is like a container.
<canvas id = "mycanvas" width ="200" height ="100"> </canvas>
Ex:
<!DOCTYPE>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:2px solid;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
Drawing Line on Canvas
If you want to draw a straight line on the canvas, you can use the following two methods.
moveTo(x,y): It is used to define the starting point of the line.
lineTo(x,y): It is used to define the ending point of the line.
If you draw a line which starting point is (0,0) and the end point is (200,100), use the stroke method to
draw the line.
Drawing Circle on Canvas
If you want to draw a circle on the canvas, you can use the arc() method:
arc(x, y, r, start, stop)
To sketch circle on HTML canvas, use one of the ink() methods, like stroke() or fill().
Drawing text on canvas
There are property and methods used for drawing text on the canvas.
font property: It is used to define the font property for the text.
fillText(text,x,y) method: It is used to draw filled text on the canvas. It looks like bold font.
strokeText(text,x,y) method: It is also used to draw text on the canvas, but the text is unfilled.
MAINTAG
HTML <main> tag is used to represent the main content of the <body> tag.
The <main> tag is written within <body> tag. It is used to accurately describe the primary content of a
page.
The content of the main tag is directly related to the central topic of the document.
HTML <main> is a new tag and introduced in HTML5.
Note: The <main> element should not used as a child of an <article>, <aside>, <header>, <footer>, or
<nav> element.
Ex:
<!DOCTYPE>
<html>
<body>
<main>
<h2>Apples</h1>
<p>The apple is a red colorpomaceous fruit of the apple tree. It is a very famous saying about apple.
</br> "An apple in a day, keeps the Doctor away".</p>
<article>
<h3>Red Delicious</h3>
<p>These bright red apples are the most common found in many supermarkets.</p>
</article>
<article>
<h3>Granny Smith</h3>
<p>These juicy, green apples make a great filling for apple pies.</p>
</article>
</main>
</body>
</html>
Output:
ARTICLETAG, ASIDE, NAV,SECTION, FIGURE
Article Tag:The HTML <article> tag defines an independent self-contained content in a document,
page, application or a site.
The article tag content makes sense on its own. It is independent and complete from other content shown
on the page. This tag is generally used on Forum post, Blog post, News story, comment etc.
Aside Tag:The HTML <aside> tag provides information about the main content. According to W3C
definition, the <aside> element represents content that forms the main textual flow of a document.
HTML aside is a new tag introduced in HTML5.
Figure Tag:HTML <figure> tag is used to mark up a photo in the document on a web page.
As we know image tag is already available in HTML to display the pictures on web pages. But HTML 5
<figure> tag is used to handle the group of diagrams, photos, code listing etc. with some embedded
content. You can also add a caption for the photo with the help of <figcaption> tag.
HTML figure is new a new tag introduced in HTML5.
Section tag :The HTML <section> tag is used to define sections in a document. When you put your content
on a web page, it may contains many chapters, headers, footers, or other sections on a web page that is
why HTML <section> tag is used.
HTML <section> is a new tag introduced in HTML5.
Nav Tag:HTML <nav> tag is used to represent a section which contains navigation links, either within
current document or to another document. Examples of some navigation links are menu, table of contents,
indexes, etc.
The <nav> tag is newly added tag in HTML5.
Header Tag and Footer Tag

HTML <header> tag is used as a container of introductory content or navigation links. Generally a
<header> element contains one or more heading elements, logo or icons or author's information.
You can use several <header> elements in one document, but a <header> element cannot be placed
within a <footer>, <address> or another <header> element.
HTML <footer> tag is used to define a footer for a document or a section. It is generally used in the last
of the section (bottom of the page).
The footer tag is included in HTML5.
HTML <footer> tag contains information about its containing elements for example:
o author information
o contact information
o copyright information
o sitemap
o back to top links
o related documents etc.
If you want to put information like address, e-mail etc. about the author on your web page, all the relevant
elements should be included into the footer element.
Ex:
<!DOCTYPE>
<html>
<body>
<header>
<h2>ABCOnline.com</h2>
<p> World's no.1 shopping website</p>
</header>
<footer>
<p>Posted by: Sonoo Jaiswal</p>
<p>
<address>JavaTpoint, plot no. 6, near MMX Mall,Mohan Nagar, Ghaziabad Pin no. 201007
</address>
</p>
<p>Contact information:
<a href="mailto:sonoojaiswal1987@gmail.com">sonoojaiswal1987@gmail.com</a>.
</p>
</footer>
</body>
</html>
EVENT
When a browser reacts on user action, then it is called as an event. For example, when you click on the
submit button, then if the browser displays an information box.
In HTML5 there are lots of event attributes available which can be activated using a programming language
such as JavaScript.
Following is a table of event attributes, using these attributes you can perform several events .
Windows Event Attributes
Windows events are related for the window object, and it can only be applied with <body> tag.
onafterprint Executed the script after the document is printed.
onbeforeprint Executed the script before the document is printed.
onbeforeunload Executed the script before a document being unloaded.
onerror Executed the script when an error occurs.
onhashchange Executed the script when the anchor part in URL of the webpage is changed.
onload Executed the script when the webpage is entirely loaded.
onmessage Executed the script when a message event occurs.
onoffline Executed the script when the network connection is disconnected, and browser started
working offline.
ononline Executed the script when the browser started working online
onpagehide Executed the script when the current webpage is hidden such as if the user has moved
away from the current webpage.
onpageshow Executed the script when the current webpage is focused.
onpopstate Executed the script when the window's active history is changed.
onresize Executed the script when the window is resized.
onstorage Executed the script when web storage is updated.
onunload Executed the script when the current webpage is unloaded, or window is closed.
Form Event Attributes
Form event occurs when the user performs some action within the form such as submitting the form,
selecting input field, etc.
The form events can be used with any element, but these are mainly used with HTML form elements.
Following is the list of all Form Event attributes:
onblur Executed the script when form element loses the focus.
onchange Executed the script when the value of the element is changed.
onfocus Trigger an event when the element gets focused.
oninput Executed the script when the user enters input to the element.
oninvalid Executed the script when the element does not satisfy its predefined constraints.
onreset Triggers the event when user reset the form element values.
onsearch Triggers the event when a search field receives some input.
onselect Triggers the event when the user has selected some text.
onsubmit Triggers the event when a form is submitted.
Keyboard Event Attributes
Keyboard event occurs when a user interacts with the keyboard. Following is a list of the Keyboard event.
onkeydown Triggers the event when the user presses down a key on the keyboard.
onkeypress Trigger the event when the user presses the key which displays some character.
onkeyup Trigger the event when the user releases the currently pressed key.
Mouse Event Attributes :
onclick Trigger the event when the mouse clicks on the element.
ondblclick Trigger the event when mouse double-click occurs on the element.
onmousedown Trigger the event when the mouse button is pressed on the element.
onmousemove Trigger the event when the mouse pointer moves over the element.
onmouseout Trigger the event when the mouse moves outside the element.
onmouseover Trigger the event when the mouse moves onto the element.
onmouseup Trigger the event when the mouse button is released.
onmousewheel Deprecated. Use the onwheel attribute.
onwheel Trigger the event when the mouse wheel rolls up or down on the element
Clipboard Event Attributes
oncopy Trigger the event when the user copies the content to the system clipboard.
oncut Trigger the event when the content of an element is cut and copy to the clipboard.
onpaste Trigger the event when the user pastes some content in an element.
Media Event Attributes
onabort Executed the script when media playback is aborted.
oncanplay Executed the script when the media file is ready to play.
oncanplaythrough Executed the script when the media file is ready to play without buffering or
stopping.
oncuechange Executed the script text cue of <track> element is changed.
ondurationchange Executed the script when the media file duration is changed.
onemptied Executed the script if media occurs some fatal error, and the file becomes
unavailable.
onended Executed the script when the media file occurs its end point.
onerror Executed the script when some error occurred while fetching the media data.
onloadeddata Executed the script when media data is loaded.
onloadedmetadata Executed the script when metadata of media file is loaded.
onloadstart Executed the script when loading of media file starts.
onpause Executed the script when media playback is paused.
onplay Executed the script when media file ready to play after being paused.
onplaying Executed the script when media file is started playing.
onprogress Executed the script when the browser is in the process of getting the media data.
onratechange Executed the script when playback speed changed.
onseeked Executed the script when seek operation is ended and seeking attribute is set to
false.
onseeking Executed the script when seek operation is active and seeking attribute is set to
true.
onstalled Executed the script when browser unexpectedly stopped fetching the data media.
onsuspend Executed the script if fetching of media data is intentionally stopped.
ontimeupdate Executed the script when playback position is changed, such as if a user fasts
forward the track.
onvolumechange Executed the script when media volume is changed (muted or unmuted).
onwaiting Executed the script if playback pause to wait for loading more data.
MODULE2

WT Unit I

Uploaded by

Copyright:

Available Formats

WT Unit I

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WT Unit I

Uploaded by

Copyright:

Available Formats

Module 1

WORLD WIDE WEB

Internet and WWW

The Evolution of the World Wide Web

Growth of IoT or Internet of Things

The components of the URL are combined and delimited as follows:

• The scheme is followed by a colon and two forward slashes.

Here is an example of an HTTP URL:

With a port number specified, the URL is:

Absolute and RelativeURL

History of Web Browser :

• Opera is a web browser that was created in the late 1990s.

1. Crawler based search engines

Static web servers vs. Dynamic web servers

S.NO. Static Web Servers Dynamic Web Servers

1. Apache HTTP server:

2. Microsoft Internet Information Services (IIS): IIS (Internet

There are two main purposes of proxy server:

Types of Proxy Servers

Web server security Methods

• The Hyper Text Transfer Protocol(HTTP) is a request/response protocol.

REQUEST AND RESPONSE STRUCTURE

PUT This method uploads are presentation of the specified resource.

URL Intended server

ftp://ftp.mywebsite.com/index.txt File can be located on FTP server

telnet://mywebsite.org Telnet server

Following table explains some commonly used status codes.

Status Reasonphra Description

500 Internal It is a generic error message that appears due to software

The headerfield in response message is similar to that of request message.

The message body consists of response message.Forexample

Server The name of the server which is responding

An HTML document has two main parts:

HTML FUNDAMENTAL ELEMENTS

Head Elements Usages

1. HTML <!doctype> tag use for define a type of document.

<link rel="stylesheet" type="text/css" href="/styles.css">

<title> Example is Head Tag Elements </title>

Basic Body Section Tags:

Body Tag Structure:

This is Body Section

goto HTML Index Page

o All HTML tags must enclosed within <> these brackets.

o Every tag in HTML perform different tasks.

<tag> content </tag>

Syntax:<element_name> content </element_name>

Block-level and Inline HTML elements

o These elements can contain block-level as well as inline elements.

Following are the block-level elements in HTML.

o The Inline elements are mostly used with other elements.

o Attributes should always be applied with start tag.

<p> This tag should be put at the end of every paragraph.

<div>So monkey decided to teach a lesson to the fly.</div>

Hmmm at last it found a fly and

Lesson from the story: Never keep a fool servant!!!

In HTML the formatting tags are divided into two categories:

Element name Description