Unit 1final

Java and Web Design Unit 1
Sikkim Manipal University Page No. 1

Unit 1 Introduction to Java and Web Design
Structure:
1.1 Introduction
Objectives
1.2 World Wide Web
1.3 Web Browsers
Browser components
Features of browser
1.4 Web Page
1.5 Introduction to Java and its Web Applications
1.6 Search Engines
1.7 Summary
1.8 Glossary
1.9 Terminal Questions
1.10 Answers
1.11 Caselet

1.1 Introduction
The World Wide Web is abbreviated as www and is quite a familiar word
which we commonly use while using the Internet. Most of us use the Internet
for some or the other reason in our day to day activities in offices, homes,
banks and so on, and every time we use the Internet without our knowledge,
we use www. So what is this www and how does it work? This unit will
help you understand how the Web works and its basic features. We will also
learn the difference between the Internet and Web.
A Web browser enables you to access the Web; in this unit we will study
what is a Web browser and also analyse the different browsers available.
We will also discuss the origin of Java and also its significance. We also
briefly discuss about Java applications such as Java servlets and JSP that
we can use for Web designing. We will also learn about the most popular
tool on the Web, the search engine in this unit.
Learning Objectives:
After studying this unit, you should be able to:
explain the difference between the Web and the Internet.
describe the purpose of a browser.
analyse the structure of a Web page in a browser.
explain the importance of Java in Web designing.
learn the uses and performance of search engine.

1.2 World Wide Web
World Wide Web is popularly known as "Web". It is defined as "wide area
information retrieval initiative aiming to give universal access to a large
universe of information." Thus, Web is an Internet based network of
computers, which allows users of one computer, to access information
saved on anothers computer, through a worldwide network called the
Internet. The Web is a collection of a group of graphics and text files called
the Web pages (refer sub section 1.3.2 to know more about Web pages).
We also need to know that a Web page is a single Hyper Text Marker
Language (HTML) text file consisting of one or more graphics along with
some additional features to make the Web page more user friendly. These
Web pages are combined and linked together logically to form Websites.
We usually define Web with the help of two specifications the Hyper Text
Transfer Protocol (HTTP) and Hyper Text Markup Language (HTML). The
most interesting concept of Web is the hypertext, where a hypertext is the
text that enables you to link to other parts of the text and other information.
For example, consider that you are searching for some information in the
Google search engine. First, you will enter the key word (search term) of
your search item and click the search button to start the search. Later, a
number of blue coloured texts appear on the screen. These blue coloured
texts are called the hyperlinks. When you click this link, the browser opens
the respective Web pages.
The name "Web" was coined because the structure in which all the texts
linked in this system resembled a spider's Web. So how exactly this Web
works? The concept is very simple every Web page has its own unique
address also known as the Uniform Resource Locator (URL). An URL is a
unique address given to a Web page, using which we can access the page
on the Web. When you type the URL in the browser, the browser will
connect to the Web page and the page appears on your screen. For
example, when you enter the URL [http:// www. smude. edu.in/
Pages/Welcome.aspx] then your browser connects to the Sikkim Manipal
University (SMU) server and sends a request for the page. The server
machine receiving the request sends back the SMU home page URL.
Internet versus web
We understood what is World Wide Web. Let us now discuss the difference
that exists between the Internet and Web. Many get confused with the
Internet and Web and during a casual conversation we use it in such a way
that there is no difference between them. However, this is not right. The
Internet and Web are two different entities. Web is one of the services
available on the Internet. As we know, Web comprises of Web pages and
these pages are transported in the form of information packets on the
Internet. For example, the Web can be compared to a train running on
the rails called the Internet.
The Internet comprises of a huge hardware network which can be accessed
by everyone across the world. The network is further divided into sub-
networks, which consist of a number of computers transmitting data in the
form of information packets. The computers establish a connection using
fibre optical cables, copper wires or wireless connection and these
connections form the network. However, Web is the software that functions
on the Internet. As we have studied, it is a collection of Web pages, which
are linked through URLs and hyperlinks. Therefore, it is termed as the
service provided by the Internet just like other services such as file transfer,
chat, e-mail and so on. Therefore, we can say that the Internet is
independent of Web whereas, Web is dependent on the Internet.
One more major difference between the Internet and Web is the protocol
suite that they use. The Internet is governed by the Internet Protocol (IP)
which is the primary communication protocol used for transmitting data
packets across the network. However, Web is governed by the Hyper Text
Transfer Protocol (HTTP) which links various resources like the files,
documents and so on of the Web.
The Internet and Web have made it possible to establish reliable, efficient
and high speed communication from every part of the world.
Self Assessment Questions
1. The ______ is a collection of a group of graphics and text files called
the Web pages.
2. When you type the URL the browser will connect to the Web page and
the page appears on your screen. (True/False)?
3. The Internet comprises of a huge software network which can be
accessed by everyone across the world. (True/False)?

Activity 1:
Many people find surfing the Web fun and entertaining. Why do you think
people are attracted so much to Web?

1.3 Web Browsers
We learnt that Web comprises of a number of text files that are linked to
each other is a specific manner and these text files are called HTML Web
pages. You can view these Web pages with the help of a Web browser.
Therefore, a browser is a software program that enables you to view and
interact with any information available on the Web. In general, the term
browser is a user interface that allows you to navigate through and read text
files online. The browser program is used to make a Web page or Website
request to a Web server through the Internet using the URL of the
respective Web page or Web site.
The WorldWideWeb created in 1990 was the first Web browser. However,
later this name was changed to Nexus to avoid confusion with the World
Wide Web. Today, there are a number of Web browsers available in the
market for example, the Internet Explores (IE), Firefox, Flock, Web 2.0,
Safari, Opera, and so on.
Let us now study the two main functions of a Web browser:
To make a request for a page from a computer. You can do this by
typing the URL of the page in the address field of the browser. Even
when you click on a hyperlink the similar action that of accessing the
Web page associated with the URL is performed by the browser.
To interpret the HTML page sent back by the Web server. This is done
because the HTML text received from the Web server is in the American
Standard Code for Information Interchange (ASCII) form. The Web
browser, after receiving this text interprets it and creates the page in its
original form.
The HTML and Cascading Style Sheets (CSS) specifications (refer Unit 4),
specifies the way in which the browser interprets and displays the HTML
files. The World Wide Web Consortium organisation monitors the standards
of the Web and helps to maintain the browser specifications defined by
HTML and CCS.
1.3.1 Browser components
Now let us learn the architecture of a Web browser with the help of
reference architecture. This reference architecture is the basic architecture
for Web browsers and helps you to easily understand the various
components that exist in the Web browser.

Figure 1.1: Main Components of Browser
1

As shown in the figure 1.1 the Web browser consists of seven main
components, each having a specific task to perform and they are:
User interface: It consists of an address bar where you can enter the
URL, bookmark menu to save the links of your favourite Web pages,
back/forward button to navigate to the previous Web page/next Web
page, and so on.
Browser engine: It is the interface through which you can ask questions
to the browser and manipulate the rendering engine. It also sets the
layout of a Web page formatted with HTML tags within a browser.

1
http://taligarsiel.com/Projects/howbrowserswork1.htm#Communication_between_the_components
Rendering engine: It is displays the content you had requested, after
obtaining it from the respective Web server.
Networking: It is used for calling the network for example, raising an
HTTP request for a URL connection through the server.
Display backend: It provides drawing tools, user interface widgets, and
fonts that help to display text and graphics.
J avascript interpreter: It is used to parse and execute the codes of
written using the Java script (refer Unit 6).
Data storage: This enables the browser to save all the data on the hard
disk and acts as the database of the browser.
1.3.2 Features of browser
Now that we have learnt about the components of a browser, let us now
study some of the most important features of a browser. The figure 1.2
shows the screen shot of the Microsofts Internet Explorer Web browser.
The arrows point to the features that are available on the Web browser
along with the name of the corresponding feature mentioned at the other
end of the arrow.

Figure 1.2: Web Browser and its Features
From the figure 1.2 you can see some of the features that are present as
icons or buttons on a Web browser. If you do not find it as a button you can
find the same in one of the menus provided in the menu bar. Let us now
briefly discuss the features that are mentioned in the figure 1.2:
Address field: This is the area on the browser window where you enter
the Web page address or URL. At the right end of this area, there is a
small arrow pointing towards the menu bar, when you click this arrow
you will view a list of some of the Websites that you have visited
recently. When you click on these URLs you will view the respective
Website or else you can directly enter the address in the address field.
After you enter the address you can either press "Enter" or click on the
"Go" button (which is present next to the downward facing arrow button
in some browsers).
Back and forward buttons: The back button is used to go back to the
previous page that you have opened in a particular browser window.
The forward button allows you to view pages that you have previously
viewed in that browser window. In some browsers, there is a small arrow
pointing towards the menu bar arrow right next to these buttons, when
you click this arrow you will see the list of Websites that you have visited
after opening the browser window.
Home button: When you click this button you will be able to view the
page that you have set as home page. A home page is a default page
that opens when you open the browser window.
Menu bar: A menu bar is a part of each browser window, it contains
menus like File, Edit, View, Favourites or Bookmarks, Tools and Help.
Refresh or reload: When you click the refresh or reload button, the
page is updated. For example, if you think that the contents of a browser
window may have changed since the last time you viewed it, you can
click this button to update the page.
Security indicators: At the left corner of the window, a lock icon
appears when you use a browser and this is called padlock. If the
padlock is in a lock position then you can say that your server
connection is secure, i.e. the data being sent and received by the server
is encrypted. This indicates that nobody else can access this data.
There is another way to find out whether your browser is secure or not
and that is done by looking at the URL. If the URL of your Website
begins with "https://" for example, you enter an address
"www.gofind.com" in the address field and press enter or click "Go" then
automatically the address changes to "https://www.gofind.com"
indicating that your browser connection is secure.
Status bar: This is a bar at the bottom of the browser window which
indicates the URL of the Web page currently being loaded into the
browser window. It also displays the URL of the link on which the cursor
of your mouse is placed. While loading, the Web page shows a progress
indicator which shows how much percentage of a file has been
downloaded.
Stop button: This button is used to stop the browser from loading the
Web page on to the browsing window.
4. A _________ is a software program that enables you to view and
interact with any information available on the Web.
5. The _____________ displays the content the user had requested after
obtaining it from the respective Web server.
6. A status bar is a part of each browser window, in contains menus like
File, Edit, View, Favourites or Bookmarks, Tools and Help.
(True/False)?

Activity 2:
Research on the Web and make a list of Web browsers that are available
in the market.
Hint: You can visit http://www. w3 schools. com/ browsers/ browsers_
stats.asp for details.

1.4 Web Page
We discussed how we can browse Web pages using the browser in the
Web. Now, let us briefly understand what a Web page is. A Web page
represents various types of information presented to the user who visits a
Website which is in a readable manner. It could be in the form of a text or
graphic or both text and graphic. Most of the Web pages are available on
the Web. However, some of the pages are restricted from the general
public. For example, some sensitive pages of an organisation, government,
military, and so on are restricted for security reasons and such pages can
be accessed only by some authorised persons.
We have already learnt in the previous section that the Web browser
displays the information on a Web page by connecting to the respective
Web server. The Web page contents are presented either in HTML or
XHTML format. As it enables the Web browser to easily structure and
quickly read the information from the Web server. You as a Web page
designer can modify the look and feel of various elements like the layout,
typographic elements, colour scheme, navigation, and so on with the help of
Cascading Style Sheets (CSS).
The Web page contains information such as images, animations, audio files,
video files and so on. Hyperlinks are provided to the text and images on the
Web page, using which you can navigate to other Web pages.

Figure 1.3: Document Tree Structure of Web Page
2

Now let us study the basic structure of a Web page. Figure 1.3 shows the
document tree of Web page, which helps you to understand the structure of
the Web page. In the figure, the box that the arrow is pointing is the actual
Web page view of the document tree. A document tree is made up of a
header and body tags that in turn have many other HTML tags. The Web
page comprises of following elements in its structure: the doc type and
HTML element.
Doc type: This is the first item that appears in the source code of a Web
page. This provides the information about the type of language used to write

2
http://reference.sitepoint.com/html/page-structure
the content on the Web page. Some Web editing software that you use to
create a Web page will create the doc type automatically when you select
the document type before you start creating the Web page. For example,
the What You See Is What You Get (WYSIWYG) Web editing software
package.
In the figure 1.3 of the document tree, the first two lines of the document
tree is the doc type. It begins with "<!DOCTYPE" followed by the name of
the markup language used to create the document, which is "html" in our
example. The "PUBLIC" tells the browser the version of HTML and
language (4.01 and English) that follows in the Web page Document Type
Definition (DTD). The DTD describes a set of rules for creating a Web page
document using a markup language. It also enables the browser to render
the content accordingly in a publicly available resource. The other portion of
the doc type is used to identify the creator or owner of the Web page.
HTML element: The doc type is followed by the HTML element. As you can
see in the figure 1.3 this forms the root of the document tree and it starts
with the tag <html>. The document tree shows the structure in which the
Web page is written. The page is constructed on the HTML element. As you
can see in figure 1.3 the HTML element is further divided into two blocks the
"Head" and "Body":
Head: This element contains information that describes the document
such as scripts, style sheets and so on, and it starts with the syntax
<head>. As you can see from the document tree figure 1.3 the "Head"
contains a tag "<title>" which is used to name the Web page. This title
appears in the title bar of the browser when you open the page. The rest
of the code is used for formatting the title.
Body: This is the area where all the content that you want to insert on
the Web page is present and starts with the tag <body>. The look and
feel of the Web page depends on the kind of content you put in the body
of the Web page. As you can see in the document tree figure 1.3, there
are various elements to control the style and size of the text. For
example, <h1> is used for header style, <em> for italicizing the text, <p>
for paragraph, and so on.
Note that we begin and end sections of a Web page with the identical tags,
except that the ending tag begins with a forward slash. For example, as
shown in the document tree of figure 1.3 we begin the body of the Web
page with the tag "<body>" and end it with </body>.

1.5 Introduction to Java and its Web Applications
In the previous section, we discussed about Web page and its structure.
Before going to other aspects of Web, let us first have a brief introduction
about Java which used in developing web pages.
You might have heard of programming languages like C, C++ and so on.
Using these programming languages you can instruct a computer to perform
a specific task like a mathematical or logical operation. Java is one such
programming language. It is also called the higher level language since, you
write the instructions using simple English words which allows you to easily
learn, understand and write the instruction to develop a program. This
simplicity has made the language as one of the most popular programming
languages which is used in various software applications. For example,
mobile software, software games, and so on.
After James Gosling developed and released Java in 1995 at Sun
Microsystems, it has been considered as the most varsity programming
language. The upgraded versions of Java has revolutionised the
programming world.
In the last ten years, there is a significant development in Java language
which has encouraged developers to use it for Web designing. For example,
Java Servlets and Java Server Pages are extensively used for developing
Web applications and Web pages. We will discuss the basic programming
concepts of Java in Unit 11.
Java servlets and Java Server Page(JSP)
We have understood the significance of Java language. Let us now briefly
discuss about the web applications of Java such as, the Java Servlets and
Java Server Page.
A Java servlet is nothing but a Java program that runs on a Web server and
processes Web pages using HTTP. Usually, many Web servers simply
transfer data between the browser and server. However, servlets not just
transfers content, but they also process the data before transferring the data
to the browser from the server. This processed data is returned to the
browser in the form of an HTML document (refer Unit 2 for HTML
document). You can also call the servlet as a mini-server. Thus, a Java
servlet reads and processes the data that you provide as an input in a
HTML Web page. It will also process other information for example, what
browser are you using to access the Web. (refer Unit 14 for Java servlets)
A Java Server Page (JSP) is based on Java servlets and used to create
Web pages using HTML and Java codes. This provides you a greater
flexibility in designing your Web page (refer Unit 14 for JSP). The advantage
of JSP is that you can create tags to perform some specific operations.
(refer Unit 2 to know more about tags and their operation). We need to know
that when you request for a JSP in your Web browser, the request will be
passed on to the Web browser, later the JSP saved in the server database
is converted into servlet by the servlet engine and is sent back to the
browser. Thus, the servlet enables the browser to display the JSP as a
HTML page (refer Unit 14 for Servlet engine). We will discuss in detail about
the Java servlet and JSP in Unit 14.
7. The Java programming language was developed by _________
________ in the year ____________.
8. Servlets not just transfers content, but it also process the data before it
transfer the data to the browser. (True/False)?

1.6 Search Engines
We learnt how browsers enable you to view the Web pages with the help of
URLs and hyperlinks. Let us now study about search engines, which enable
you to search data with the help of a key word. Technically speaking, a
search engine is a software program that enables you to search Web pages
based on a key word. You can learn more about search engines in unit 9.
The process of data search carried out by a search engine is very complex
and it involves highly detailed processes and techniques. Along with this the
owner of the search engine has to update the database of the engine
regularly. Since, most of the information that a search engine finds would be
from its own huge database. Let us now understand the basic process of
searching the information using a search engine:
First you enter the data in the form of keyword about the item that you
want to search in the form of a key word or combination of words into
the search engine.
The keywords entered in the previous step start the actual search
process. The search engine software sorts through a number of Web
pages stored in its database and finds pages that match to the question
or keyword entered. To do this, the search engines have special
software programs called spider or crawler. This spider/crawler visits
and reads Web pages of Websites to create an index of Web pages for
a search engine. Usually the search engine index is a collection of data
that helps fast and accurate information retrieval. Further, this index is
divided into special groups such as linguistics, psychology,
mathematics, physics, computer science, and so on. The spider/crawler
regularly visits sites and checks for new updates and modifications this
ensures that the database of the search engine is updated.
The search result displays an indexed list of hyperlinked Web pages
along with some text relevant to the key word from the respective Web
page.
There are various types of search engines which are based on the search
technique they follow.
They are:
Internal search: The internal search engine is used to find content on a
single Website. For example, in some organisational Websites, search
options are provided to search information within the boundaries of their
Website.
External or public search: This is used to find content on any Website
on the Web and they have their own database and search indexes, for
example, the Google, Yahoo and so on.
Meta search engine: These engines use the indexes of other search
engines to find content on the Web, for example, Dogpile.

Now let us see some of the popular search engines that you can use to
search the Web. They are:
Google: This is the most popular search engine among the Web users.
It was a project implemented by the students of Stanford University,
Larry Page and Sergey Brin. Later in the year 1998 these students
formed a private company Google and launched their first commercial
search engine. The spider service of Google provides a comprehensive
coverage of the Web and relevant search results. It enables you to find
more than Web pages, such as the images from across the Web,
newsgroups' discussions, product search, and so on. It also offers
excellent spell check, access to definitions in dictionary, maps,
telephone directories, and so on. The URL of Googles search engine is
http://www.Google.com.
Yahoo: It was launched in the year 1994 and has the oldest Web
directory. Along with its excellent search results, you can use the tabs
provide above the search box on the home page to see images, use
shopping search engine, or yellow page listings. It also offers a number
of advanced search options which you can view when you open the
home page of yahoo. The Yahoo's content acquisition program offers
paid inclusion of your Websites, i.e. you can pay Yahoo and make your
Website available at the top of the search list. However, it gives higher
preference to the search results of relevant Web pages and does not
guarantee the ranking to in the list to its paid customer. The URL of
Yahoos search engine is "http://www.Yahoo.com".
Ask: It was launched in the year 1999 and was termed as the natural
language search engine which lets you search for information by asking
questions. The result would be in the form of answers to your question.
However, the technology was not the driving force behind the success of
Ask. It was the support system the company had built, where it had
about 100 editors who monitored and maintained the search logs. They
manually visited various Websites on the Web and located the best site
to provide the answers for the most popular questions. However, today it
depends on spider technology to provide results to its users. The URL of
Asks search engine is "http://www.Ask.com".

9. A search engine is a software program that enables you to search
pages of Websites based on a key word. (True/False)?
10. The ________________ is used to find content on a single Website.
11. Public search engines use the indexes of other search engines to find
content on the Web. (True/False)?

Activity 3:
Research on the Web and analyse the market share of various search
engines available today in the market.
Hint: You can visit the following Web site for information http://
marketshare.hitslink.com/search-engine-market-share.aspx?qprid=4.

1.7 Summary
In this unit, we learnt the definition of World Wide Web. We understood that
the Web is a collection of a group of graphics and text files. We also learnt
that Web pages are combined and linked together logically to form
Websites. We also understood how the URL is used to address the Web
pages and search the Web for a specific Web page. We also learnt the
difference that exists between the Internet and Web.
We learnt about the origin of the Web browser and main functions of it. We
studied the various components of a Web browser and their function in the
browser. We also learnt some of the most basic features of the Web
browser such as the address field, home button, menu bar and so on. We
also understood the purpose they serve in the browser.
We learnt that the Web browser displays the information on a Web page by
connecting to the respective Web server. We learnt what a Web page is and
few elements that a designer of a Web page can modify such as the layout,
typographic elements, colour scheme, navigation, and so on. With the help
of the document tree, we understood the various elements that exist in the
structure of the Web page such as the doc type and HTML element. We
have learnt the origin of Java and also its significance. We also briefly
discussed about Java applications such as Java servlets and JSP that we
can use for Web designing.
We learnt the basic concept behind a search engine and how it enables us
to search for information from the Web. We also learnt the basic process
using which a search engine searches for content on Web. We also
analysed the various types of search engines that we can use to search
information such as internal search, external search and Meta search
engines. We also discussed briefly about some of the search engines that
we can use to search the web.
1.8 Glossary
Term Description
Parse To give a description of a word or command or used in Java script
language.
Hyperlink It is a reference to a document that the reader can directly follow,
or that is followed automatically on the Web.
Widgets It is a software service available to users for running and
displaying small programs on a graphical user interface, such as
that of the desktop.
Typography It refers to the style, size and layout of the text characters (fonts).

1.9 Terminal Questions
1. Explain the difference between the Internet and Web.
2. What are Web browsers? Explain the two main functions of a Web
browser.
3. Write a note on the structure of a Web page.
4. What is Java? What are the applications of Java that you can use for
Web designing?
5. What are search engines? Explain the various types of search engines.

1.10 Answers
1. Web
2. True
3. False
4. Browser
5. Rendering engine
6. False
7. James Gosling, 1995
8. True
9. True
10. Internal search engine
11. False
Terminal Questions
1. Refer section 1.2 World Wide Web.
2. Refer section 1.3 Web Browsers.
3. Refer section 1.4 Web Page.
4. Refer section 1.5 Introduction to Java and its Web Applications.
5. Refer section 1.6 Search Engines.

1.11 Case let
Browser selection
Mr. Hari is a project manager in ACD Company which is a Knowledge
Processing Outsourcing company. He has shortlisted two browsers, the
Firefox from Mozilla and Internet Explorer (IE) from Microsoft. Now he
has a task of choosing a browser out of these two which will be used by
all the other team members for gathering content from the Web.
While analysing the browsers he noticed that both the browsers are quite
similar and share almost similar features. The number of HTML tags they
support is large. However, just because the Web presentation looks great
under Firefox you cannot think that it will also look the same when you
use IE, or vice versa. He also finds that both the companies have
independently developed the features in their browser. He discovered
that the Firefox supports more number of plug-ins than IE and is faster
when compared to IE. That is you can open two to three tabs on the
same browser and work efficiently. However, if you do the same
operation with IE, the browser become very slow and requires more time
to download the data from the server.
When he looks at the user statistics of these browsers, he finds out that
for every person using Firefox, about two people use IE. He discovers
that the Firefoxs security features are much better when compared to
Internet Explorer. However, both the products are very good in their own
kind. He also found out that the Firefox software can be directly
downloaded from Web or purchased from a software vendor. However,
the Internet Explorer is packaged and distributed along with other
Microsoft products, i.e. if you are using any windows Operating System
the IE is present in it by default.
Questions:
1. What are the major issues Mr.Hari notices while analysing the two
browsers?
2. If you were the project manager of ACD Company, which browser
will you choose for your team and why?

References
Bud E. Smith. (2009), Creating Web Pages For Dummies.
Alfred Glossbrenner, Emily Glossbrenner. (2001), Search engines for
the World Wide Web.
http://computer.howstuffworks.com/Internet/basics/Internet-versus-
world-wide-Web.htm
http://www.microsoft.com/windowsxp/using/networking/setup/Internet.
mspx

Unit 1final

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Unit 1final

Diunggah oleh

Hak Cipta:

Format Tersedia

Java and Web Design Unit 1

Sikkim Manipal University Page No. 1

Anda mungkin juga menyukai