Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

MI0041 Java and Web Design 4 Credits

Assignment
Set 1
Q.1. Explain the browser components and its features.
Answer: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.
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.
Javascript 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.
Features of browser

Vinay K. Singh

Reg. No. 571013423

Page 1 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

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.

Vinay K. Singh

Reg. No. 571013423

Page 2 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

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.

Q.2. Describe in detail the building of webpage.

Answer:Building a Web Page
We understood the basic concepts of HTML. Now let us study how to organise the content
on a Web page. Building a Web page involves great planning and design. Before you design
the Web page it is very important to plan the structure of the Web page and also decide the
kind of content that you insert in to the Web page.
The first major issue that you need to address is gathering the right content and organising
the gathered content on the Web page. While doing so, you need to understand the
requirements of the audience who use the Web page clearly. Therefore, you need to define
the objectives of your design clearly before gathering the content. While gathering the
content, you must ensure that you do not include any content that does not define the
objectives. This will make sure that only the right content is used for creating the Web page.
After you gather the content you also make sure that you organise the content logically.
This means you need to structure the content properly on the Web page. This involves
providing proper names to the sections and subsections that you use to categorise the
content. Also, there must be a logical flow in which you present the content.
The usability of the page will make the Website reach out to large a group of audience. Only
if the page is user friendly it can retain its users. Therefore, you need to design the Web
page with simple and reliable interfaces and navigations so that it can be easily understood
and used by the audience. These interfaces comprises of images, graphics, coloured texts
and so on. You must provide hyperlinks to related content so that the Web page users can
navigate to other Web pages to get more information about the content.
Once you have gathered, organised, and structure the next part is deciding upon the
placement of the content on the Web page. A plan that describes how to organise the

Vinay K. Singh

Reg. No. 571013423

Page 3 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

various elements of content like text, graphics and so on, on the Web page is known as the
Web layout. While designing the Web layout, you first need to decide the position and
placement of every element of the content. A good designer will not place and position the
element randomly on the Web page. Therefore, you need to think about the significance of
each element, how it is related to the objectives of the Web page, whether it fits with other
elements around it and so on and then decide the positioning and placement of the
elements. As a designer you have to consider all the aspects of style, requirement, and
objective, and then place the element in its appropriate position. This improves the look and
feel of the Web page you design. For example, if you are creating a Web page which talks
about the biography of an individual. You want to insert his picture on the Web page; you
can either insert it at the right or left top corner of the Web page. Many a times these
design aspects are governed by individual interests and requirements.
Some of the basic aspects of Web layout that you need to keep in mind while designing a
Web page are:
Space and white space: Try to use the entire space available on the Web page. However,
make sure you do not overcrowd the page with too much information. You need to keep the
screen resolution in mind so that your text does not look too small or too large. You can use
colours to define spaces. For example, if you want to have a page which has a specific
width, then you can centre it on the browser screen and make the background colour and
the page colour different. (The page colour is the colour of your Web page and background
colour is the colour of the browser window where the Web page is displayed.) When you
aligning the Web page at the centre of the browser window enables the page to be resized
for different browsers. Say, if the browser you use has a large space the page will be
displayed along with the background. In case your browser has small space the page will be
displayed with less or no background.
Images and graphics: Images and graphics are a major part of your Web layout. You
need to make sure that you check the image size and position before you put it on the Web
page. Since, images have large impact on the audience than the text.
Text width: Often referred to as scan length this defines the number of words you can
display on one line. Most designers prefer to have seven to eleven words in a line just to
make sure that the user is able to read it without any difficult. Since, most people are not
comfortable reading lengthy sentences. Therefore, setting a proper width for your Web page
is very essential and improves the efficiency of the design.
Once you finalise the Web layout you can easily build the Web pages. With the Web layout,
more than one designer can work on the same page and still maintain uniformity.
Let us first create a Web page with few lines of text displayed on it. Later, in the next sub
section we will discuss how to format text and images on the Web page. In the previous
section we have already learnt about the basic document structure of the HTML. Using this
let us now create our Web page using the notepad.
First write a simple HTML code as shown below, on your notepad (refer previous section 2.1
for the structure of an HTML document). You can use the title element <title> and </title>
tag to provide a name to the Web page which appears on the title bar of the browser
window.
(Refer
figure 2.2).

Vinay K. Singh

Reg. No. 571013423

Page 4 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

Now choose a name for your document and save it as a HTML document. To save it as a
HTML document, your document name should end with the extension ".html" or .htm. For
example, "First Web Page.html".

Figure 2.1: Icon of an HTML Document

Note: All HTML documents will appear with a browser icon. For example, if you are using the
Microsofts Internet Explorer then your HTML document appears as shown in the figure 2.1.
Go to the location were you have saved the HTML document and double click on it to view
your Web page.

Figure 2.2: Web Page Displayed on the Browser

Vinay K. Singh

Reg. No. 571013423

Page 5 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

The Figure 2.2 shows the Web page that you have created. As you can see the Web page
has the title My First Web Page! which is described inside the title tags of our example
above.
Text and image formatting[1]
We have learnt how to create a Web page and include content in our Web page. Let us now
learn how to format our Web page.
The formatting elements help you to organise and format the content on your Web page.
This makes your Web pages more attractive and allows you to present the information as
you wish. Let us now study some of text formatting elements available in html and format
our Web page.
Heading elements
You can use these elements to format the headings in your Web page. The font sizes of the
heading elements vary form size one to six. For example, if you want to display a main
heading of a Web page My Page with the font size of six then the command line is,
<h1>My Page</h1>. If you want to display the same text Web Page with the font size
one then, the command line is <h6>My Page</h6>. The font size can be specified precisely
in pixels for each header tag using Cascading Style Sheets (refer Unit 4).
Font styling elements
The HTML provides you a number of elements that allow you to modify the styles of the
font. Let us now discuss some of the elements you can use to modify the styles and they
are:
Bold text: To make the text appear in bold on your Web page you can start that part of
the text or word with the tag <b> and close the text with "</b>". The part of the text
within these tags appears bold on your Web page. For example, if you want to display the
sentence, "Sachin is the best cricketer in India." on your Web page. The code to display
this sentence is:

Italic text: To make the text appear in italics on your Web page you can start that part of
the text or the word with the tag <em> and close the text with "</em>". The part of the
text within these tags appears in italic style on your Web page. For example, if you want to
display the sentence, "Sachin is the best cricketer the world has ever seen." on your Web
page. Then the code to display this sentence is:

Underlining the text: To underline the text on your Web page, you can start that part of
the text or the word that you want to underline with the tag <u> and close the text with
"</u>". The part of the text within these tags appears underlined on your Web page. For
example, if you want to display the sentence, "Sachin is the best cricketer in India" on your
Web page. Then the code to display this sentence is:

Text positioning

Vinay K. Singh

Reg. No. 571013423

Page 6 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

The text positioning elements enable you to align the text on your Web page. Some of the
most important elements are:
Paragraph: You can create a paragraph on your Web page by entering the text within the
<p> and </p> tags. You can use the font styling element inside the paragraph element and
this is called nesting. The syntax for this is:
<p>Paragraph text</p>
For example:

This will appear on your Web page as shown below:

Centre alignment: To align your text at the centre of your Web page you include the text
with in the <center> and </centre> tags. The text with in these tags will appear aligned to
the centre of your Web page.
Right alignment: Similar to aligning the text at the centre you can even align the text to
the right of your Web page. The text on the Web page by default, will be aligned to the. To
align the text to right of the Web page you can use the following command:

For example:

Font appearance
The font appearance includes the colour, size and type of the font. Using the attributes font
colour, font size and font type you can assign different font colour, size and type to the fonts
that you want to display on your Web page. Let us learn how to use these attributes to
modify the text appearance. For example, consider if you want to change the size of the text
using font size attribute this is how you will do it:

In the above code you see two tags, <font size="14"> this is the opening tag and </font>
is the closing tag, between these two tags you will enter the text that you want to modify.
The opening tag comprises of "<font size" indicating that you want to modify the size of the

Vinay K. Singh

Reg. No. 571013423

Page 7 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

font, if you want to modify the colour then it will be "<font color" and for modifying the font
type it is "<font type". In each case, the parameter that you pass to the attribute will be
different. In our example we have considered the font size so we pass the size in the form
of an integer number. However, the parameter that you pass must be enclosed within double
quotes for example "14". For text colour the opening tag will be <font color=" The colour
name of your choice.">, and for type the opening tag will be <font colorface="The type
name of your choice.">.
Inserting and formatting image
You can insert an image on your Web page and also format the size of the image. You can
insert images on the Web page using the <img> tag. Let us see how to use this tag to
insert the image. First, you need to save your image in the same folder where you have
saved your HTML document. For example, if you have saved an image "Picture12.gif" and
HTML document My First Web Page! in the same folder. Then you can use the tag and
insert the image on the Web page using the code given bellow,

In the above code, we use the attribute "src" to specify the source/location of the image to
the editor along with the file type. For example, the ".gif" specifies the type of the image
and the file name specifies the location of the image. Along with this you also find two more
attributes "width" and "height" which specify the width and height of the image in pixels
that will be displayed on your Web page respectively.
You can specify the width and height for all the images that you want to insert. You can find
the values for these attributes using graphics editor software like Paint Shop Pro. You can
vary the width and height attributes and format the size of the image.
You can also adjust the alignment of the image on your Web page using the attribute
"align". For example, if you want to align the image "Picture12" to the right of the paragraph
then the code is:

Similarly, you can align the image in various positions on your Web page by passing
different parameters to the attribute "align" for example,<p align= "bottom"> to align the
image at the bottom of the paragraph, <p align= "top"> to align the image at the top of the
paragraph, and so on.
Adding links
We understood how to insert and format the text on your Web page. Let us now learn to
insert text and images with links or hyperlinks.
Links are found in all Web pages. You can click on these links and navigate from one Web
page to another. These links are also called as hyperlinks. They can be a word, group of
words or even an image. How do we come to know whether the text or image on the Web
page is a hyperlink or not?
It is very simple, usually if a text is a hyperlinked then it appears in blue colour or else when
you keep your cursor on the hyperlinked text or image the pointed arrow cursor turns into a
little hand. This means the text or image is hyperlinked.

Vinay K. Singh

Reg. No. 571013423

Page 8 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

In HTML you can use <a> tag and the attribute "href" to create a hyperlink text or image.
Let us now see the syntax of this element:

In the above syntax, the "href" attribute specifies the address or Uniform Resource Locator
(URL) to which the text or image is linked.
For example, if you have a sentence, "The national bird of India is Peacock."
and you want to link the sentence to the URL "www.indiafirst.com" then the code is written
as:

As you can see from the above mentioned code that the attribute "href" is used to specify
the URL address and we also need to keep in mind that the value passed to the attribute
must be in double quotes.
Now, if you want the single word in the sentence to be linked to an address then the code
can be written as:

You can see in the above code that only the word "India" is linked to the URL
"http://www.indiafirst.com".
Now how do we link an image to an address? It is very simple let us take the same example
we used in the previous section to insert an image:

We want to link this image to the address "www.imageworld.com". We can simply rewrite
the above code as:

When you click on the image Picture12 displayed on the Web page, you can navigate to
the address www.imageworld.com.

Q.3.How to use forms? Explain with an example.

Answer :Using a Form
We have learnt about multimedia files and how to insert multimedia files on the Web page.
Let us now discuss about HTML forms. You might have signed up to Gmail, Yahoo! or any of
the other online communities. When you visit the page, it asks you to fill and submit an
online form. We can use the HTML tags to create such forms on Web page. Usually, forms
contain input elements like text fields, checkboxes, radio-buttons, submit buttons and so on.
You can create the forms using the <form> tag. First you create the form element using
<form> and </form> tags. Next you define the elements that you want to display on the
form within the form element. The syntax of the form is as shown below:

Vinay K. Singh

Reg. No. 571013423

Page 9 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

Let us learn how to create some of the input elements that we use in a Web page form;
Text fields: This is a single line input filed where you can enter the text. The example
code shows how to create it using the tag <input type="text"/>.

In the above code, the type attribute is used to specify the type of element you want to
create. In our example we are creating a text field and the value that we pass to "type"
attribute is "text". The attribute "name" is used to define the variable where your input will
be saved. In our example we have defined "Name1" as the variable. In all the elements that
we will discuss below contain these two attributes. The text "First name" and "Last name" is
displayed in the beginning of the text field as shown below:

The rectangular boxes are the text fields where you enter the text.
Password field: This field is similar to text field and the only difference is that you can
view the text you enter in the text field. However, in password field you cannot see the text
that you enter, for every character that you enter you see either an asterisks (*) or dot (.).
You can use the same tag that you used to create text field except that the value that you
pass to the attribute "type" will be "password". This signifies that the field is a password
field. Using the attribute "name" you can define a variable to store the password that you
enter. The example code for the password field is given below,

The password field that we have defined in the above code appears as shown below:

Radio buttons: This button allows you to select only one of the items from the given list.
For example, for a question asked in a form they provide four answers out of which only one
answer will be correct and you have to choose only one out of the four. In such cases, you
can use radio button. The code given below explains how to insert radio buttons on the Web
page.

In the above example code, you can see that we are passing the value "radio" to the
attribute "type" indicating that the element that the browser is supposed to display is a
radio button. In the radio button element we have to define the value that we want to store

Vinay K. Singh

Reg. No. 571013423

Page 10 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

in the variable. Here, "answer" is the variable in which the value which we have defined
using the attribute "value" is saved (true or false). The output of the above code is as shown
below:

Note: The arrow is just to indicate the radio button. It is not a part of the output. The
circles are the radio buttons which you can select by clicking on the circle.
Checkboxes: The code to define the checkboxes is shown below:

You can notice from the above example code that the code for checkboxes is similar to the
radio buttons. The only difference is the value that we pass to the attribute "type". For
selecting the checkbox element we pass the value "checkbox" to the attribute "type".
Another important difference which we need to know is that in checkbox you can select any
number of items. For example, you can select all the items given with a checkbox in a list
which is opposite to radio buttons where you were able to select only one of the items in the
list. The output of the above code for checkboxes appears as shown below:

Note: The arrow is just to indicate the checkboxes. It is not a part of the output. The
square boxes are the checkboxes by clicking on these boxes you can select the option.
Submit button: This button is used to send form data from the Web page to the Web
server. This button is created on the Web page using the example code shown below:

You can see from the example code shown above that there are few new attributes which
we have defined in the opening <form>, "action" and "method". The "action" attribute
specifies the address or URL to which the form has to be submitted when you click the
submit button. When you pass the value "get" to the attribute "method" then, the form data
that you send to the URL specified in the attribute "action" is sent as an attachment to the

Vinay K. Singh

Reg. No. 571013423

Page 11 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

URL. This means it will not be sent separately but as a part of the URL page. Therefore, the
amount of data that you can send is limited. It is used to send short forms with one or two
input fields such as text fields, radio buttons, checkboxes and so on. Since, the data is
simply attached to the URL and other users on the Web can easily access it. There is
another way of sending the data that is by passing the value "post" to the attribute
"method". You can send any number of data or input elements such as text fields, radio
buttons, checkboxes and so on using the post method. Form data sent using the post
method can also be encrypted and sent securely using the HTTPS protocol.
The output of the above code is as shown below,

Q.4.Give an example for cascade style sheets and explain editing with cascade
style sheets in detail.
Answer:Web Page Editing with CSS
In the previous section, we studied about the benefits of CSS and also the methods by
which you can apply CSS to HTML documents. In this section we will learn some simple
techniques to format your HTML document using CSS.
Now, before discussing about the text formatting let us discuss how you can create styles in
a style sheet and incorporate it in the HTML document. This is achieved using the CSS class
selector. So, what is this CSS class selector? The class selector is used to specify a style for
a group of HTML elements (refer to Unit 2 for HTML elements). Using this you can specify a
particular style for any HTML element. Below is an example that helps you understand how
to use the class selector.

Vinay K. Singh

Reg. No. 571013423

Page 12 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

This example uses internal method to apply style to the HTML document (refer section 4.2
for internal method). All the CSS class selectors will start with a ".", followed by the name of
the class selector. In our example, the name given to the class selector is ".center" (refer
previous section for syntax of CSS tag). The "text-align" attribute is used for aligning the
text, in our example, we are passing the value "center" to the attribute "text-align" i.e. the
text for which the style is applied will be aligned at the centre of the Web page. Now we
have created a class selector named "center" to align the text at the centre of the Web
page. "<h1 class="center">Center-aligned heading</h1>" this line shows how you can call
the class defined in the <head> element to apply style.
Note, you can choose any name you like for the class. In this case, we have chosen to call
the class as centre, since it is being used to centre text. As you can see in the code line we
are calling the class "center" using the attribute "class" inside the opening tag <h1>.
Similarly, in the above code we are calling the class "center" inside the opening tag <p>.
Once you call the class, the style will be applied to the content that you define using the
HTML element. We have called the class "center" in the header element and the content that
is present in the <h1> element will be aligned at the centre of the Web page. Similarly, the
content within the <p> and </p> tags will be aligned at the centre of the Web page. You
follow the same method of class usage in the style sheet that is defined in a separate file.
First, you define the class in the style sheet and then link the style sheet to the HTML
document (refer to section 4.2.2) and use the class selector as explained above.
You can also restrict the class to a particular HTML tag. Say for example, you want to create
a class only for the paragraph tag <p>, and the style defined by a class will not be
applicable to any other tags. Let us modify the previous code example for better
understanding.

We have taken a part of the code from the previous code example and modified it. As you
can see in the above code instead of "." we have used "p." before the class selector
"centre". This means that the class is restricted only to <p> tag and you cannot use it to
apply style to other tags. For example, "<p class="center">Centre-aligned paragraph.</p>"
code line is correct and the text with in the tags will be aligned at the centre. However, "<h1
class="center">Centre-aligned heading</h1>" code line is incorrect. Even though you
define the class, the style will not be applied to the text inside the <h1> tag.
Formatting the text
We have learnt to create CSS class and also how to use them for apply styles in the HTML
document. Let us now learn how to format text on an HTML document using the class.
Text indention: This is used to align the text from the margin of the Web page. This is
done as shown below:

The above code line is a class that we have defined to apply an indentation of 30 pixel form
the margin. The "text-indent" is a CSS attribute to which we pass the appropriate
indentation value.

Vinay K. Singh

Reg. No. 571013423

Page 13 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

Text alignment: We can align the text using the CSS attribute similar to the HTML
attributes that we studied in Unit 2. For example:

In the above code line we have defined a p-class with the class name "aligntext". The "textalign" is the CSS attribute used to align the text on the Web page and "centre" is the value
that we pass the attribute. This attribute aligns the text to the centre of the Web page. The
text can be aligned to the right or justified (refer Unit 2 for example of right alignment).
When you pass the value justify" to the attribute, each text line on the Web page will be
stretched so that both the right and left margins are straight. This is similar to the style that
you see in this book, were every line in a paragraph is of same length.
Text decoration: This property is used to add effects such as underline, over-line or linethrough the Web page text. You can define a class as shown below to achieve text
decoration,

In the above example code, the "decoration" is the name given to the class and "textdecoration" it is the attribute used to decorate the text on the Web page. We are passing
the value "underline" which underlines the text on the Web page. We can pass other values
such as:
Over-line: The value helps you to draw a line over the text on the Web page.
Line-through: This value helps you to draw a line through the text on the Web page.
Letter space: This allows you to fix the spacing between the text characters. You can
specify it with the help of the attribute "letter-spacing" and by passing the desired value of
the space in the form of pixel you can adjust the spacing between the text characters. The
example code line for obtaining a character spacing of three pixels is given below:

Text transformation: The text transformation property helps you to control the
capitalisation of the text on the Web page. You can make the text all upper caps, lower caps
or capitalise the first character of every word in the given text. This is achieved by using the
attribute "text-transform". The code line for text transformation is as shown below:

In the above code line, the "transform" is the CSS class selector name and "text-transform"
is the attribute to which we pass the value "uppercase" to convert the text to uppercase. For
example, "sachin" will be transformed to "SACHIN". For converting the text to lower case,
you can pass the value "lowercase" to the attribute. When you pass the value "capitalise",
the first letter of each word in the text will appear in capital for example, "garden city of
india" will be "Garden City Of India".
Margins: Page, whether it is a page in your text book or the Web page, will have margins.
This is the portion of the page acts as the border for the page and within this border you
can insert the content. Figure 4.1 show a Web page along with its margin widths.

Vinay K. Singh

Reg. No. 571013423

Page 14 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

Figure 4.1: Web Page with Margins[1]

As you can see from the figure the top margin is 100 pixels from the top end of the page,
left margin is 70 pixels from left end of the page, right margin is 40 pixel from right end of
the page and bottom margin is 10 pixels from bottom end of the page. Let us now write the
code line to fix the page using the CSS for the margins as shown in figure 4.1.

This code enables you to create the page that you see in figure 4.1. The "fixmargin" is the
name of the class selector used to define the class containing the page margins. The
attribute "margin-top" is used to adjust the top margin, "margin-bottom" is used to adjust
the bottom margin, "margin-left" is used to adjust the left margin, and "margin-right" is
used to adjust the right margin of the page. (Fixing the margin is similar to selecting the
page margin in Microsofts Word documents.)
Using colours with CSS
In the previous sub-section, we learnt the basic techniques of formatting the text on a HTML
document using CSS. Let us now learn how to apply colours to the text and background of
the Web page.
Colour property: The colour property of the CSS enables you to change the colour of the
text displayed on the Web page. Say for example, you want to create a class to change the
colour of the text to red then you can write the code as shown below:

Vinay K. Singh

Reg. No. 571013423

Page 15 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

In the above code you can see that the attribute "color" is used to pass the colour value, in
our example we are passing the value "red". When you use the class "redcolour" in a text
element, the text within the tags will be displayed in red colour. You can provide various
other values such as blue, green and so on.
Background colour: This property enables you to choose the background colour of the
Web page. With the help of the attribute "background-color", you can change the
background colour of the Web page. One more important point to remember is that you can
choose independent background colour for each element. For example, you can have a
green background for the paragraph text, a blue background for the heading text and grey
colour for the other portion of the Web page. This can be done as follows:

Now, the entire body of the Web page will appear with a grey background, content within
the <h1> element will appear with a blue background and content within the <p> element
will appear with a green background.
Positioning elements with CSS
In the previous sub section we learnt about the colour property of CSS. Let us now learn
about the positioning elements of HTML with CSS.
With the help of positioning property of CSS, you a place an HTML element wherever you
want it on the Web page. The principle behind this is very simple, the entire Web page is
divided into number of pixels, by providing the appropriate pixel position you can position
the content of the HTML element such as paragraph or heading on the Web page. You can
position the elements using the four different properties top, bottom, left and right.
Let us now learn the two important positioning types, they are:
Absolute positioning.
Relative positioning.
Absolute positioning: With this type of positioning you can place your content anywhere
on the Web page. The example code for absolute positioning is as shown below:

As you can see from the above code the attribute "position" is used to define the positioning
type. In the "left" attribute, we define the distance between the first character of the
content of the paragraph element and the left end of the Web page. In the "top" attribute,
we define the distance between the first line of the content of the paragraph element and

Vinay K. Singh

Reg. No. 571013423

Page 16 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

the top of the Web page. Note, if we have multiple paragraph elements in a page, the text
of an earlier paragraph will be replaced by the text of a paragraph later in the Web page,
since
all
paragraphs
start
at
the
same
position
in
the
Web page. The value passed to these attributes is in the form of pixels.
Relative positioning: The relative positioning is similar to absolute positioning. The
difference between the absolute and relative positioning is that in absolute positioning, no
other elements can over lap on the space that it defined for absolute positioning. For
example, consider the previous absolute positioning code, where the content starts 100
pixels form the left end of the page. No other element can occupy the space next to the

element with absolute positioning. However, using relative positioning you can place
elements next to each other. The example below clearly explains how this is done:

In the above code you can see that the value for the attribute "top" is same i.e.150 pixels.
The h1 is placed, 350 pixels away from the left end of the page, the h2 is placed, 150 pixels
away from the left end of the page and h3 is placed, 50 pixels away from the left end of the
page.
For example, consider three header elements <h1> Header 1 </h1>, <h2> Header 2
</h2>, <h3> Header 2 </h3> and display them on the Web page. The top half of the figure
4.2 shows the header elements without the use of relative positioning. The bottom half
shows the same header elements with the use of the relative positioning. Notice, the header

Vinay K. Singh

Reg. No. 571013423

Page 17 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

elements in the bottom half are positioned relative to their normal positioning in the top half
without CSS.

Q.5. Describe the working of search engine. What are the different types of search
engine? Explain with its application.
Answer:Working of a Search Engine
You have now learnt the meaning and origin of a search engine. Let us now study about the
working of a search engine.
How do we search for a Web page using any search engine? We open the search engine
Website for example, www.google.com or www.bing.com and then in the text box provided
we type the keywords of our choice and press enter key or click the search button. This
process will provide us a list of Websites based on the keyword entered.
Do you think the working of a search engine so simple? The answer is No. The working of
search engines is not this simple. It involves incredibly detailed processes and
methodologies. There might be some differences in the working of different search engines.
However, all of them perform three fundamental tasks includingcrawling the Web by
following all possible links from any Web page, extracting keywords from the collected Web
pages and building an index, and allowing users to search for matching Web pages using the
keywords saved in the index.
Search engines today are indexing and responding to billions of Web pages in a single day.
Let us now look at how all these happen.
Search engines use the following processes in its working:
Web Crawling.
Indexing.
Searching.
We will now study each of these operations in detail.
Web crawling: When you search for information by typing keywords in a search engine
Website it gives you a list of related information. Prior to listing the related information, it
has to find it. In order to retrieve information from the numerous Websites that exist on the
WWW, a search engine utilises special software robots known as spiders. The spiders are
simple programs that scan the Web pages to create a list or index of words that are found
on the Websites, and the process of creating a list or index of words by a spider is known as
Web crawling.
Spiders are also known as bots, web robots or automatic indexers. The spider program has
to scroll through many Web pages in order to create and maintain a list of useful words. A
search engine uses a spider program to gather information that is available on Web pages.

Vinay K. Singh

Reg. No. 571013423

Page 18 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

The information needs to be gathered so that the search engines can provide us the
relevant Websites when we search for a particular term.
Indexing: After the spider program finishes the job of looking for information on the Web
pages, the search engines have to store the information such that it is useful for the users.
This is known as indexing. An efficient indexing helps us to quickly find information on the
Web.
We have to note that the data needs to be encoded and then stored in a more compact form
in order to save the storage space. The information is ready for indexing once it is
compacted.
The two key components responsible for indexing or making the gathered data accessible to
users are as follows:
The information that is stored with the data: Here, a search engine can store the
word and the Uniform Resource Locator (URL) of the Web page where the word was found.
However, this result in limited use of the Web page as it will not inform the user if the word
was used many times or only once. It will also not specify if the page comprises links to any
other page, or if the word was an important phrase on the Web page. Therefore, we can say
that we will not be able to put the most important page on top of the list from the search
results.
The technique in which the information is indexed: Here, a search engine stores the
number of times the word has appeared on the Web page rather than storing only the word
and the URL. A particular words value increases when it appears in the heading, sub
heading or in the links. Considering this, a search engine assigns weight to every entry.
Every search engine follows different formulas to allot weight to words in its index.
Therefore, we can observe that, different lists are produced by different search engines
when we search for a particular word. Most of the search engines today are following this
technique.
Searching: It refers to the process of querying a search engine. A query should have at
least a minimum of one word. You can also have complex queries. Complex queries are built
using Boolean operators that help us to refine the search. For example, OR, AND, and NOT
are known as Boolean operators. Table 9.1 illustrates the use each of these Boolean
operators.
Table 9.1: Boolean Operators and Its Uses

Figure 9.1 depicts the working of a search engine.

Vinay K. Singh

Reg. No. 571013423

Page 19 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

Figure 9.1: Working of a Search Engine

As you can observe in figure 9.1 a spider program starts the process of indexing on
Websites that are listed on frequently used servers and on popular Web pages. It indexes
the words and links present within a Website. Like this the spider program moves through
various areas of the WWW that are widely used and creates index of words and compresses
the same to save the storage space. Then the compressed data is stored so that the users
can access the data by querying the search engine.
Types of search engine
Now that you have learnt how a search engine works, let us now study the different types of
search engines.
The different types of search engines are:
Crawler based search engines.
Human powered directories.
Hybrid or mixed search engines.
We will now study more about these search engines.
Crawler based search engines: In this type of search engines the spiders crawl through
the Web and create a listing or index of words. Whenever a user enters a query or a
keyword using a search engine, the word is searched for against these listings or index. The
index consists of a copy of all the Web pages that is found by the spider. Whenever a
change is made to any of the Web pages, the spider will update the changes in the index.
This is possible as the spiders are always crawling through the Web pages on a regular
basis. This also affects the way your Website is listed. We should also note that it takes
some time when the spiders crawl through the Web pages and an index is created. Until
then the Web page will not be found when you search for it using a search engine. Google
and Yahoo use a crawler based search engines.

Vinay K. Singh

Reg. No. 571013423

Page 20 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

Human powered directories: In this type of search engine there is a directory which gets
information from short descriptions about the websites along with the address and title of
the Web pages that are submitted by the webmasters. These submissions are later reviewed
by the editors. The disadvantage of human powered directories is that it can take months to
get your Website reviewed unless you take up a paid inclusion program. We should also note
that when a user searches for a topic these directories look for only the descriptions that are
submitted on the Website and not the entire content of the Web page. As such any change
made to the Website does not affect its listing. The only advantage of this type of a search
engine is that a Website which comprises good content could be reviewed for free when
compared to a poor site. Earlier Yahoo! was a human powered directory. However, today it
uses a crawler based search engine.
Hybrid or mixed search engine: It is a combination or mixture of crawler based search
engines and human powered directories. The basic idea behind a hybrid search engine is to
provide the users with a combination of results including spidered results and directory
results. Google and Yahoo are today using hybrid search engines. Google calls this Universal
Search. The advantage of this type of a search engine is that the multiple types of results
complement each other, and ultimately offer the users with more complete and relevant
search results. This is depicted in figure 9.2.

Figure 9.2: Result of Search on a Hybrid or Mixed Search Engine

In figure 9.2 we can see how a Google looks for the keyword java books. On top of the list
we can find shopping results, and below it are results from the crawler based search
engines. Towards the right hand side of the screen you can find sponsored links.
Importance of search engine friendly website
You have now learnt about the different types of search engines. Let us now learn why a
search engine friendly Website is important.
Search engine friendly refers to the design of a Website that includes images, videos,
menus, content management system and various other elements that help a search engine
to get the maximum information about the Website for the purpose of search engine
exposure.

Vinay K. Singh

Reg. No. 571013423

Page 21 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

A search engine friendly Website is important because, when your Website is search engine
friendly it is easy for visitors to find your Website. This could be done by listing your Website
on top of all the other Websites in the list returned by a search engine. When your Website
is on top of the list it generally gains the attention of the visitors and thus will motivate
them to visit your Website.
It is also important because in todays corporate world many organisations are building their
business through Internet marketing. This Internet marketing generally starts with your
organisations Website. Thus, the Website should be developed or listed in such a way that it
gains the attention of the customers.
It also helps you in your search engine marketing efforts. Here, search engine marketing
refers to a type of internet marketing. The main intention of this is to promote your Website
by allowing it to appear on the result page of the search engine by means of paid
placement, paid inclusion, or contextual advertising.
We can even find a decrease in the costs related to the advertising or search engine
marketing if you develop a search engine friendly Website.
We should also note that the design of your Website affects search engine friendliness. This
is because when you have a Website that contains keyword rich text the search engines
spiders will be able to access the keywords easily and index it for users to access.

Q.6.List the benefits and drawbacks of Lamp stack.

Answer:Benefits and drawbacks of LAMP stack
Now that you have understood how the LAMP stack originated, we will now discuss the
benefits of LAMP stack that has made it popular.
Even though there are various commercially available software packages that provide
various features in Web development, many Web applications today, are using the LAMP
stack. This is because of the various benefits it provides. The benefits of LAMP stack are as
follows:
It is open source software package and thus can be got free of cost. This helps
organisations to develop Web applications without spending hefty amounts for its licensing.
Even though Microsoft offers the ASP (Active Server Pages) extensions free of cost, they
charge you for their Operating System, database servers, and Integrated Development
Environment (IDE). However, sometimes companies may have to pay for customer support
for the open source products that they purchase from vendors.
It can be installed on a wide range of platforms. We can use Windows instead of Linux if
we are working on Windows platform, or use IIS instead of Apache Web server. This helps
us to adapt to our companies current environments by utilising the existing infrastructure.
It provides a greater support when compared to other commercially available software.
This is because the components of LAMP stack are open source and thus we can find

Vinay K. Singh

Reg. No. 571013423

Page 22 of 23

Sikkim Manipal University

- MBA -

Semester: 4 - Assignment

support from the actual developers who have worked on the project, and also from its
community.
It is possible for us to find various modules that can be reused. These modules are built by
a community of developers who publish the modules developed by them. This saves time
and results in rapid development of Web applications.
It facilitates us with an efficient hardware support such as Linux that can run on almost all
servers. This is possible as it facilitates the administrator with the choice of running only
what is required to perform a particular job.
It offers greater performance as we use Linux. When compared to Windows, Linux scales
high in performance, memory management, and stability.
It is possible for us to find constant updates and improvements for the LAMP stack. As you
know, we can find developers and support communities that update new features and
enhancements constantly.
Despite of the above mentioned benefits LAMP stack has a few drawbacks. The drawbacks of
LAMP stack are as follows:
The main disadvantages of LAMP stack is in updating the applications. This is because,
whenever you have a new version released, we have to follow the same procedure that is
used in installing the applications, to update the changes.
There could be confusion as to where the application is installed as the application files are
not placed in the file system in a standard way.
One more disadvantage is that it is difficult to find people who are good and qualified in
developing Web applications on LAMP platform. Hence, organisations fear to switch to LAMP.

Vinay K. Singh

Reg. No. 571013423

Page 23 of 23