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

Features of Web Browser

Most Web browsers offer common features such as:

1. Refresh button: Refresh button allows the website to reload the contents of the web
pages. Most of the web browsers store local copies of visited pages to enhance the
performance by using a caching mechanism. Sometimes, it stops you from seeing the
updated information; in this case, by clicking on the refresh button, you can see the
updated information.

2. Stop button: It is used to cancel the communication of the web browser with the
server and stops loading the page content. For example, if any malicious site enters
the browser accidentally, it helps to save from it by clicking on the stop button.

3. Home button: It provides users the option to bring up the predefined home page of
the website.

4. Web address bar: It allows the users to enter a web address in the address bar and
visit the website.

5. Tabbed browsing: It provides users the option to open multiple websites on a single
window. It helps users to read different websites at the same time. For example,
when you search for anything on the browser, it provides you a list of search results
for your query. You can open all the results by right-clicking on each link, staying on
the same page.
 6. Bookmarks: It allows the users to select particular website to save it for the later
retrieval of information, which is predefined by the users.

Types Of Web Servers

Web page should be made in such a way that it should be able to work on almost all kind of browsers.
1 Google Chrome
Beta version of chrome was developed on September 2, 2008 by Google for Microsoft windows.

Universal share of Chrome is more than 50% recognized to be one of the greatest popular web browser.

2 Internet Explorer
Software giant Microsoft developed the Internet Explorer (IE).One of the most generally used

browser in the world. This was familiarized in 1995 beside with Windows 95 launch and it has

approved Netscape popularity in 1998.

3 Mozilla Firefox
7. Mozilla derived the new browser called Firefox. It was out in 2004 and has grown-up to be the

second most widely held browser on the Internet.

4 Safari
Apple Inc. developed the web browser called Safari and incorporated in Mac OS X. In January 2003 Apple

Inc. released its first public beta. Latest technologies like XHTML, CSS2 etc. has a very good support in

Safari browser.

5 Opera
Opera is full- featured smaller and faster than most other browsers. Fast, user-friendly, with keyboard

interface, multiple windows Java and non-Java-enabled versions available. , zoom purposes and more.

How does a browser work?

When a user enters a web address or URL in the search bar like javatpoint.com, the request
is passed to a domain name servers (DNS). All of these requests are routed via several
routers and switches.

The domain name servers hold a list of system names and their corresponding IP addresses.
Thus, when you type something in the browser search bar, it gets converted into a number
that determines the computers to which the search results are to be displayed.
The browser acts as a part of the client-server model. A browser is a client program that
sends the request to the server in response to the user search queries by using Hypertext
Transfer Protocol or HTTP. When the server receives the request, it collects information about
the requested document and forwards the information back to the browser. Thereafter, the
browser translates and displays the information on the user device.

-----------------

HTML LINKS

Link is an important feature of HTML to connect web resources. Link in HTML

is used to create hyperlinks to web content. Web content may be an HTML
document or an external webpage or any multimedia content such as an image,
video, audio, animation etc., or even a part of the current document.

There are two important things needs to create a link in HTML,

(1)          The name of the file or URL to which you want to link

(2)          The text that will serve as the clickable link.

The anchor tag <A> is used to create links along with HREF attribute. HREF is
abbreviated as “Hypertext Reference”.

 Structure of an anchor tag with href:

<A href = “ Web content path / URL “> Text – Clickable link </A>

Example:
The above link code creates the target of the hyperlink to the website
http://thscert.org/ index.html. At the time the user clicks the link, the browser
opens the home page of the URL.

 TYPES OF HTML LINKS

 Links are used to “link” a visitor from one area to another.There area many types of links :
1. Local Links:
A Local link uses a page name (including sub-directories if needed) as the target. It is “local”
to the current server.

<a href=”Page_in_the_same_server.html“>
Click here to go to the local page
</a>

2.Internal Links:
Internal links can also be called page jump, u can make this jump with two simple steps

First step:

assign the place of the page where u want the pointer to move, and bookmark it by adding
this cod in it

<A NAME=”ur bookmark name“></A>

u will need the “ur bookmark name” in the next step.

Second step:

u need to add a link in anyplace in ur page to let the user move to ur bookmark point from it

<A HREF=”#ur bookmark name “> Add the text to be displayed and clicked by the
user </A></P>
The A stands for Anchor. In general, the anchor tag tells the browser to anchor or to attach
to something else. Every Anchor tag must have a closing or end tag (</A>) to signal the end
of the anchor. HREF stands for Hypertext REFerence. It means that “this is where the link
is going to.
Example:

lets add a link to move the user to the top of the current page

first step: we add the bookmark code at the top of the page

<A NAME=”top“></A>
second step: add the link anywhere in ur page

<A HREF=”#top “> click here to go to the top of this page </A></P>

and this is my link:
click here to go to the top of this page
the link will take u few lines above since we are not far from the top of this page

3. External Links:

To link to any page in the world,u need the (URL) of the page you want to link to.

<a href = “URL for the website“> text to click on </a>

Example:

i want to link to my blog home page, so i will use this code

<a href = “http”//me2learn.wordpress.com“> Click here to visit my blog, enjoy! </a>

and this is my link

Click here to visit my blog, enjoy!

4. Download links:

File links are used for allowing a visitor to download a file. These links are set up exactly the
same as the local or external links. Instead of “pointing” to another page or site, it points to a
file. When the user clicks on this link, the browser knows it is a file and will ask the visitor if
they want to download the file. The types of files available to be used for download depends
on your online server. A common and most accepted type is a ZIP file.

<a href=”File URL.zip“>
Click here to d ownload this file
</a>
u can get the file URL by uploading ur file to any uploading site and they will give u the URL
for ur file.

5. E-mail links:

The e-mail link is for receiving e-mail and feedback from visitors. This link will prompt the
browser’s e-mail program to start and place the e-mail address in automatically.

<a href= “mailto: mail_address@mail.com“>

click here ti send me e-mail </a>

Link colors:
Links, by default, show up in different colors from the rest of the text on your web page.
These settings are found in the individual browser settings. To over-ride these settings, you
can declare your own link colors in the opening BODY tag:

 LINK: Color of an non-activated link. (default blue)

 VLINK: Color of a previously visited link. (default red)
 ALINK: Color of a currently active link. (default orange)
<body link= “#0000ff”  vlink= “#ff0000” alink= “#ff8429”  > ur HTML code here </body>
Using the hex color codes, you can choose the colors to suit your page. The ALINK is not
used much. There aren’t many instances when there is an open link at the same time as the
current page. Be sure you are just inserting these properties into the current opening
BODY tag.Do NOT create a second opening BODY tag. Any given HTML document can have
only one BODY tag set. Any more than one set will result with page errors.

----------

Event
JavaScript's interaction with HTML is handled through events that occur when the user or
the browser manipulates a page.
When the page loads, it is called an event. When the user clicks a button, that click too is
an event. Other examples include events like pressing any key, closing a window, resizing
a window, etc.Developers can use these events to execute JavaScript coded responses,
which cause buttons to close windows, messages to be displayed to users, data to be
validated, and virtually any other type of response imaginable.
Events are a part of the Document Object Model (DOM) Level 3 and every HTML element
contains a set of events which can trigger JavaScript Code.Please go through this small
tutorial for a better understanding HTML Event Reference. Here we will see a few examples
to understand a relation between Event and JavaScript −

onclick Event Type

This is the most frequently used event type which occurs when a user clicks the left button
of his mouse. You can put your validation, warning etc., against this event type.

Example
Try the following example.

Live Demo

<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>

<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello"
/>
</form>
</body>
</html>
Output

Click the following button and see result