You are on page 1of 54

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 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.

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 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).

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 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 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 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. 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:

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 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 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.

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">Centrealigned 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. 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 "text-align" 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 line-through 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 "text-decoration" 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.

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 "margintop" 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:

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 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 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. 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.

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. 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. 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 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.

Assignment Set- 2

Q.1 Give one example each for the following and explain the use in one/two tine each.
Answer:-

Web Design Tools:Design for the Web is one of the most significant areas that are emerging in the development of websites. Web design refers to the task of developing a Web page or the user interface of the Web page. The design of a Web page acts as a medium between people and information. The major intention of Web design is in the development of attractive Web pages that reside on Web servers. Web design tools concentrates more on the presentation of contents using hypertext, images, videos, and so on. There are various tools available today that help us develop and design Web pages. We can term these as design tools. Design tools help us to design attractive Web pages easily and quickly. Some of the popular Web design tools are as follows: HTML Editors. Adobe Photoshop. Adobe Flash. Firebug Browser. We need a Web design tool? Some of the reasons Web design tool are as follows: It is very much useful for people who do not have much experience in coding. As such it saves a lot of time that needs to be spent on learning the program to build a professional looking Website. It is easy to learn and as such reduces the cost involved in developing a Website for your organisation and also the cost involved in making modifications to the Websites. It helps us to create attractive Websites using professional templates, and dynamic layouts. It helps us to create robust Websites by allowing us to add simple forms, guest books, calendars and various other features that could make a dynamic Web page. It saves a lot of development time. It is easy to create, modify and maintain Web applications using a Web design tool. It allows you to edit images and add graphics to your Websites. It helps us to create interactive Web pages with animations and videos.

It is also useful for creating on-lines games and advertisements.

HTML Editors :-

HTML editor refers to a software application that we can use to create Web pages. It provides us with various tools that are required to design a Website. Even though the HTML files can be written using any text editor such as notepad or textpad, specialised HTML editors can provide convenience and additional functionalities. It not only offers support to work with HTML tags but also provides support to work with technologies such as Cascading Style Sheets (CSS), Extensible Mark-up Language (XML) and JavaScript. They even help us to handle the interactions that happen with remote Web server through the File Transfer Protocol (FTP) and Web based Distributed Authoring and Versioning (WebDAV). HTML Editor is useful as we need not have to type or remember all the HTML tags. We can say that it is just like the word processor where we type the content and apply the required formats. We can see the HTML source as well as view how the Webpage would look like when viewed on the Web browser, by switching to the display format. HTML Editors are of two types. They are: Text Editors. WYSIWYG HTML Editors. Text editors: It helps us to insert HTML elements and structures using toolbars, templates and keyboard shortcuts. It even provides features such as auto-completion and tool tip prompts to perform common tasks. These editors include built-in functions to check and validate code, check for spelling errors and formatting mistakes in the code. In order to use a text editor we need to have knowledge of HTML and other Web technologies that a designer wishes to use such as JavaScript, CSS and any other script language. Some of the examples of text editors are: Notepad++, Leo, Kate, JuffEd and Eddie. WYSIWYG HTML editors: It stands for What You See Is What You Get. This means that the content that you enter in the editor will be displayed in the same form as you would see it on a Web browser. This tool helps us to insert and format text, images or links in a Web page just the way we create and format text in a document such as Microsoft Word. It does not expect you to be an expert programmer to create a Web page. This is because this editor generates the required mark-up tags when you add or format text, images, and links. We can also view or modify the underlying code if we wish to do so. It also helps in rapid creation of Web pages. Some of the examples of WYSIWYG HTML Editors are: Amaya, SiteDesigner 2.0, Microsoft FrontPage, Dreamweaver, Freeway and GoLive. We will now learn more about Amaya HTML Editor as it is the popular HTML Editor preferred by most Web developers. Amaya is also a popular WYSIWYG HTML Editor today that is used in Web

development. It is one of the open source Web editor developed by World Wide Web Consortium (W3C) that is written in C language. We can create and modify Web pages directly on the Web using this tool. It was developed by the inventor of World Wide Web (WWW) Tim Berners-Lee in the year 1998. After that various new functionalities have been added with the latest releases. Some of the uses of using Amaya as HTML editor are as follows: One of the major use of Amaya apart from being an open source software is that it is one of the most user friendly HTML Editor. Any body with little or no knowledge of HTML can create Web pages using this tool. We can split the screen to view both the HTML code and visual editor. This helps you to write the program while being able to see the changes or vice versa. It also offers features to create a CSS style sheet. It is very easy to create a CSS style sheet as you need not to code in CSS. It all happens with the press of a button. It even comprises a debugger that checks for errors, such as mismatched opening and closing tags, in your HTML content. We can use it with any operating system you are using such as Linux, UNIX, Windows or MacOSX. Today, Amaya not only supports HTML and CSS but also, Extensible Markup Language (XML) and various other XML applications. Many developers prefer WYSIWYG Editors on text editors as it provides various advantages over text editors. They are as follows: WYSIWYG Editors facilitates us to preview the Web pages that we are creating inside the HTML Editors. This means that you can get an idea as to how your Web page would look like when it published on the browser. WYSIWYG Editors provides drag and drop features that help us to complete our task quickly without wasting time on writing code for each

and every element on the Web page.


Adobe Photoshop :Adobe Photoshop is a software application package useful in editing images and is considered as an important tool for Web designing. It is an excellent tool to create attractive Websites. Photoshop is a product of Adobe Systems Incorporated. It was originally developed by two brothers Thomas Knoll and John Knoll who named it as Display. Later, it was renamed as Photoshop. The first version of Photoshop was Photoshop 1.0 and was released in the year 1990. After that it has found many releases with enhanced features. The latest version of Photoshop available today is Adobe Photoshop CS5. Here, CS stands for Creative Suite. Adobe Photoshop CS5 is said to be the 12th major release of Adobe Photoshop. Photoshop can read and write raster and vector image formats. For example, gif, jpeg and png. An image in raster format is described in a table of pixels, where each pixel has a specific colour. An image in vector format is instead made up of descriptions for the characteristics of the image, such

as a coloured line or shape in the image. It is available in various languages and provides native support for 64-bit on Windows Vista x64. It is very easy to learn as it is very much intuitive. Adobe Photoshop is considered as an image editing tool for Web design as it useful in the following ways: It helps you to tune your art work to the design of your a Web page on your Website. It helps in restoring old images and as such can be used to restore or enhance the look of the old images you have on your old Website. For example, you can change a black and white image to a coloured one. You can also change the existing colour of an image to a colour of your choice and there by enhance the look of your Website. It can be used to correct any mistakes in the image. For example, you can correct the red eye problem in your image using a tool known as eyedropper tool. The red eye problem is caused due to the reflection of the flashlight of the camera off the retina at the eyeballs. The red colour is because of the blood vessels that nourishes our eyes. It can be used to add graphics to your videos that you might have uploaded on your Website. It helps to create different types of web banners and buttons that would enhance the look of your Website. It helps to add text on the images. For example you can use this tool to add the name of your organisation on an image of your company building on your organisation's Website. It can also be used to enhance the text effects for your Website. Text effects refers to the special effect that we can give to the text that we use in our Websites such as a embossed look or a glossy look to the text. It also helps us to turn an image or photograph look like a work of art, that is, to look like a painting. It can be used to create a rollover effect to the images or button on your Web pages easily without writing any code by just adding different behaviours to different images or buttons. Here, by rollover effect we mean that we can make a particular area of an image to change when you click or move the mouse over an image. It even assists us to create animated GIF files. We will now see how we can use Photoshop to design a Web page. The design processes that we need to follow are as follows: We have to first create an image by using Adobe Photoshop that we wish to develop for our Website. After creating the image we have to slice the image using the slice tool that is available in the tool box of Photoshop software. Here, slicing refers to the process of cutting the image into smaller pieces which can later be inserted into an HTML program. Slicing an image helps to optimise every piece individually that in turn helps you to make the size of the file smaller. Then, we have to arrange these slices as desired using HTML. This will generate the template for our Website and thus can be used to create all the pages of the Website. We have to note that the interface design of a Website is the most important part of the design process. It is very important that you have a good design

for your Website as it facilitates the usability. The various other popular applications used in editing images are: CorelDRAW 10, Gimp (used in Linux/Windows operating systems), Paint Shop Pro and Macromedia Fireworks.

Adobe Flash:Now that you have learnt about Adobe Photoshop, which is a Web design tool used for image editing, we will now learn about another popular Web design tool that is extensively used in developing Websites, that is, Adobe Flash. Adobe Flash is a multimedia graphics program that is used to create interactive Web pages, videos and animations. It can be embedded inside any HTML program to create interactive Web pages. Other than being used for creating interactive Web pages it is also widely used in games and advertisements. Flash was first known as Future Splash Animator. It was then a small program that was used to create and animate vector art. In the year 1997, Macromedia (an American graphics and Web development organisation whose corporate office is in San Francisco, California.) acquired Future Splash and renamed it as Flash. It then promoted the program as a tool to create graphic content for World Wide Web (WWW). However, it is now owned by Adobe Systems Incorporated. Adobe Flash Professional CS5 is the latest version available today. Adobe Flash helps you to create interactive videos on the Web. It uses vector graphics. Here, vector graphics refers to graphics that can be scaled to any size of our choice without any loss in quality or clarity. We need not have any kind of programming knowledge to use this software as it is very easy to learn. It captures user input through keyboard, mouse, microphone and camera. The animations in Flash are created using standard animation techniques that creates the illusion of movement. A series of still images are created, each of which will be slightly different from the previous one. When these images are viewed rapidly, it looks to have continuous movement to the eyes of the viewer. We can create, organise and synchronise animations of various graphic elements, sounds and video clips using this software. We will now look into some of the uses of Adobe Flash. Some of the uses of Adobe Flash are as follows: It helps us to load Flash movies at a faster pace when compared to animated GIF's. This is because animated GIF's includes numerous images saved in one image. Thus when a Web browser loads such an image, the browser may need to load all the frames of the image before display. Therefore, it takes longer time for a GIF image to load. It helps to create simple animations and buttons quickly and easily. It supports interactivity. Thus, it helps us to control animations using Flash software. For example, we can begin animating an image after the user clicks on a button. It is possible to embed the animations created using Flash into a Web page. It is mostly used in the creation of vector based animations and helps in reducing the file sizes. Reduction in the file size helps to quickly

download and play movies on the Web pages. It helps in creation of more attractive Web pages by including splash screens and presentations. It helps to develop more sophisticated Web applications such as tutorials with self testing exercises and interactive animations. It can also be used to create online and offline presentations, screen savers, games, advertising banners and so on. It can run on all the browsers and on all the computer platforms by downloading the required plug-in, thus providing platform independence. It is also possible for us to extract information from a database into a Flash movie. This helps us to develop Web applications that can update information automatically. It is very easy to use this software as it provides drag-and-drop interface and various other features, and as such is very intuitive. This helps developers to create dynamic Websites that are attractive. It even provides tools to write the necessary HTML tags to show images, animations and interface elements as a Web page through a browser. Microsoft Silverlight, Java FX W3C's Scalable Vector Graphics (SVG) and Synchronised Multimedia Integration Language (SMIL) are the various other software applications that are considered as competitors to Adobe Flash.

Firebug Browser
Firebug is also an excellent Web development tool, which is an add-on for Mozilla Firefox. It provides us with various tools to inspect, edit, and debug Web pages. This add-on provides us a tabbed interface that facilitates us to edit as well as debug HTML, CSS and JavaScript codes in any Web page. It also offers DOM (Document Object Model) inspection and appraisal related to the performance of Websites. It is helpful to mobile Web developers to examine mark-up and style syntax, detect errors, debug client-side scripts and thereby improve performance. It also provides facility to monitor network activities, which assists you in finding out why your Web page takes time to load in the browser. Firebug console or add-on looks like when youopen it in Mozilla Firefox Web browser. You can also observe the tabbed interface that consists of six tabs used for various purposes.

Firebug Console1

We will now look into some of the uses of Firebug Browser. Some of the uses of Firebug Browser are as follows: It is very easy to learn the tool as it is user friendly. It also provides you the facility to open the Firebug window within your Web browser, as you saw in Figure 10.1, or as a separate window. It lets us examine and edit the HTML tags. Whenever there is any change in the HTML code the Firebug highlights the modifications made in yellow. It even lets you make modifications to the code and see the output of the change instantly. It helps you to inspect any part of your Web page. This can be done by just moving your mouse on the part of the Web page that you want to inspect. When you move your mouse around the Web page the Firebug instantly shows the HTML or CSS code for that part of the Web page. In this way you can examine and rectify only that part of the Web page what you feel could have some mistake or error. It even provides a powerful debugger that helps us to find errors if any in our JavaScript code. It helps us to create CSS code. This is true because whenever we try to create or edit a CSS code in the CSS tab we get help in the form of a small text editor that suggests us about any thing we would like to know, such as the styles in your Web pages. This means that it provides auto complete feature that provides you a list of possible values for the property you are editing. This also helps us to save a lot of time in typing the entire line of code. We should also note that Firebug is an open source software add-on that is available for Mozilla Firefox.

Q Write a Java program to demonstrate the use of control statements (all three statements) in Java. Answer :-

Control Statements in Java


As you are now familiar with the structure of a Java program, and how to create, compile, and run a Java program on your system, and also with the classes, let us now proceed further and discuss about the control statements used in Java. We know that a program is a collection of statements that are carried out to accomplish a task which was decided in advance. And, in a program, normally the statements are executed in sequential order, which is called sequential execution or sequential control flow. Thus, you can define Control statements as the statements which are used for controlling the execution flow in a program. In Java, we can classify the control statements into three categories namely, looping statements, conditional statements, and special control statements

Looping statements Looping statements used in Java.Looping statements are those statements, which enables you to executegroup of statements frequently. They are also called as iteration statements. You will notice that the JAVA programming language has three types of looping statements/constructs, namely, for, while, and do-while. briefly describe them. For loop For loop is the most flexible looping statement, used for the continuous execution of a piece of code until a specific condition is satisfied. We use the following syntax of for loop. For initialisation; condition; increment or decrement) { <statement 1>; <statement 2>; .;

<statement n>; } In the above syntax, you can see that there are three components of the for loop. They are: Initialisation: It specifies the value with which the loop starts. Condition: It evaluates to either 'true' or 'false'. Increment or decrement: It specifies the increment or decrement of the value after each repetition/iteration. Let us have a look, how for loop works. Firstly, you have to initialize the control variables. You can do so, by using the assignment statements, such as i=1, and count = 0 (i, and count are the control variables of this loop). Then, use the given condition for testing the value of the control variable, such as i<10. It specifies when the loop will exit. If the result of this test is true, the statements will execute, otherwise, the loop will terminate and the execution will jump to the statement immediately following the loop. When the statements are executed, the program will transfer the control back to the for statement, after the evaluation of the last statement in the loop. Then, you can increment or decrement the control variable with the help of an assignment statement such as i=i+1 or i=i++. The control variables new value is again tested, and the same process will be followed again. You can see the same in the flowchart for for
Flowchart of for loop

While loop : While loop is a looping statement which frequently executes a block of statements as long as a condition remains true. Let us have a look at the syntax of while loop. initialisation; while(condition) { <statement 1>; <statement 2>; ..; <statement n>; } In the above syntax, condition evaluates to either 'true' or 'false'. If you use while loop in your program, you have to first initialise the control variable outside the loop. Then, you have to test the given condition. If the result of the test is true, the statements enclosed within the brackets of the while loop are executed. Again, the evaluation of the given condition takes place. If the result is true, again the statements are executed. These steps are repeated, until the result of the given condition becomes false, and the control transfers out of the loop. When the control is transferred outside the loop, the program continues with the statement immediately following the loop.

You can see the flowchart for the while loop in the figure 11.4 below Do-while loop:-

Do-while loop is a looping statement, which is used like while loop (which frequently executes a block of statements as long as a condition remains true). The difference between the do-while and while loops is that, in the dowhile loop, the statements within the loop are guaranteed to be executed at least once regardless of the condition evaluation. You can see the syntax of do-while loop below: initialisation; do { <statement 1>; <statement 2>; ..; <statement n>; } while(condition); In do-while loop, you have to initialise the control variable before the loop. Then, the statements are executed. After the statements are executed, the given condition in the while statement is tested. If the result of this test is true, again the statements within the body of the loop are executed. These steps are followed as long as the condition is true. When the condition becomes false, the loop terminates and the control goes to the statement immediately after the while statement. You can see the flowchart of do-while loop

.
Flowchart of do-while loop

Conditional statements After looping statements, let us discuss briefly about the conditional statements or conditional branching. You may define conditional branching as the breaking of the sequential flow of a program, and jumping to another part of the code, on the basis of a specific condition. As you have seen in the figure 11.1 that Java supports three conditional statements, that is, if, ifelse, switch. Let us now understand their working. If statement If is a conditional statement, which gives permission to a program, for executing various blocks of code, depending on the evaluation of a test. The syntax of if statement is as follows: if (condition) { resulting-statement 1; resulting-statement 2; } As per the above syntax, if the given condition is true, the statements within the parentheses (statement 1, statement 2) are executed; otherwise, the statements are skipped and the statements after the loop are executed. If-else statement If-else is also a conditional statement, which is an addition to the if statement. The general form of the if-else statement is: if (condition) { statement 1; } Else { statement 2; } In the above syntax, if the given condition is true, the statement 1 is executed; else, statement 2 is executed. You can see the flowchart for if-else statement in the

Flowchart of if-else statement

Switch statement Switch statement is also a conditional statement, which is like else-if statement with several else statements whose conditions are tested in sequential order. Let us have a look at the syntax of switch statement: Switch (expression) { case value -1: statement 1 break; case value 2: statement 2 break; .. .. default: statement n break; } statement x; In the above syntax, firstly the value of a given variable (expression) is tested against a list of case values. If the program finds a match, the

statements associated with that case are executed. If no match is found, the statement in the default block is executed.

Flowchart of Switch statement

Special control statements Apart from looping and conditional statements, Java has some special control statements also. We will now briefly discuss them. Break statement Break is a special control statement, which is used for getting out from a loop before its (loops) completion, on a pre-defined condition, or you can say that it ends the loop that immediately surrounds it. We can use this statement with while loop, do-while loop, for loop, and switch statement. Continue statement Continue is also a special control statement, which is used to stop the control flow in the program and return the control to the loop without the execution of the statements which are written after the continue statement; and which tells the system to jump out from the remaining part of the current loop. This statement is useful when we want to execute just some of the statements in a loop. The continue statement will skip the remainder of the loop statements and evaluate the condition of the loop as before. Return statement Return is the last special control statement, which is used for finally returning from a method, that is, it tells the Java interpreter to stop the execution of the current method. If you want your method declaration to return a value, you have to write an expression after the return statement;

and that expressions value will become the desired return value. You must have noticed that in some programs, some methods are declared void; it means that they do not return any value.

Q.3 What are the difference types of inheritance in Java? Explain the relationship between interfaces and inheritances.

We can define inheritance as the process of inheriting features of one object by another. If we use inheritance, we can easily manage the information about the objects. A superclass and its subclasses have an is-a relationship. We can define such relationship using Java inheritance. It means that you can use an object of a subclass (sometimes it is called as child class), wherever you can use an object of the superclass (sometimes it is called as parent class). In Java, we use class inheritance for creating or building new classes from existing classes

Inheritance in Java

Inheritance types in Java As we are discussing about Java inheritance, let us now discuss about the types of inheritance in Java. There are three types of inheritance in Java, namely simple inheritance, multilevel inheritance, and hierarchical inheritance. We will discuss them one-by-one. Simple inheritance: It refers to the process of deriving/inheriting a child class simply from its parent class. You must note that there is only one child class and its parent class, in this kind of inheritance. You can also call it as single inheritance or one level inheritance. Let us take an example of a parent class vehicle, and a child class bus;

Example of Simple Inheritance

Multilevel inheritance: It refers to the process of deriving a child class from another child class. Here, note that the inherited class is known as child class for its parent class and this child class act as the parent class for its child class. There may be many levels in multilevel inheritance. For example, a parent class vehicle has a child class bus. This child class, bus becomes a parent class for another child class A/C Bus.

Example of Multilevel Inheritance

Hierarchical inheritance: This type of inheritance is used for assisting the hierarchical program design. In this type of inheritance, many features of one level (one parent class) can be inherited by many others (child classes) below that level. Let us analyse this by looking at the example

Example of Hierarchical Inheritance

In this example, you can see that there is a parent class Vehicle, which has two child classes Two-Wheelers and Four-Wheelers. These child classes become parent classes for Scooter, motorcycle, and Bus, Car, respectively.

The relationship between interfaces and inheritances. multiple inheritance and interfaces in Java. You must have seen that multiple inheritance is used in C++, but Java was evolved without multiple inheritance, that is, multiple inheritance is not supported by Java. The problems which are solved with the help of multiple inheritance, can be solved in some other ways in Java. In Java, we can achieve multiple inheritance with the help of interfaces. We can do so by exercising one or more than one interface within a class, which results in the creation of classes which are built upon other classes. These classes will not be constrained by the problems created by multiple inheritance. The main problem with multiple inheritance is that it is difficult to resolve a method that is inherited from more than one parent. We can define an interface as a logical collection of methods. Any class implementing an interface must define such methods. Note that such interfaces can also define constants (public static final). Only abstract methods and final fields are defined in interfaces, not the code for implementing these methods. In interfaces, data fields only comprise of constants. Let us have a look at some similarities between an interface and a class: Both an interface and a class can have any number of methods. We write an interface and a class in a file which has a .java extension, with the same name as the file name. Nevertheless, an interface and a class are different in several ways, such as: Interface cannot be instantiated, but a class can be. An interface does not have any constructor, but a class can have a constructor. All the methods of an interface are abstract while a class may or may not have abstract methods. We cannot extend an interface by a class; but can implement it by a class. One major difference is that a class explains the properties and behaviours of an object, but an interface explains behaviours which will be implemented by a class. We will now see how to define interfaces, extend interfaces, implementing interfaces.
Defining interfaces You know the way a class is defined. Similarly, we define an interface. Let us have a look at the general syntax for defining an interface: interface InterfaceName { Declaration of variables; Declaration of methods; } In the above syntax: interface: It is the keyword in Java for interfaces. InterfaceName: It is a legal Java variable (similar to the names of the classes). Declaration of variables: We can declare variables as given in the following syntax:

static final type VaribaleName = Value of the variable; Here, we declare all variables as constants. Declaration of methods: It contains the declaration of methods, that is, only methods' signatures, and not the statements within the method body. Extending interfaces As we can extend classes, so we can extend interfaces also. It means that we can derive a child interface from a parent interface. This new child interface derives all the members of the parent interface, as a child class would. We can do so, by using the extends keyword as given in the syntax below: interface ChildInterface extends ParentInterface { Body of ChildInterface } Although Java permits interfaces to extend other interfaces, child interfaces cannot define the methods which are declared in their parent interfaces. You
Java and Web Design Unit 12 Sikkim Manipal University Page No. 231

must separate the interfaces using commas, if two or more interfaces are extended by an interface. You should always keep in mind that an interface cannot extend classes, as this would be the violation of the interface rule which says that an interface consists of only abstract methods and constants. Implementing interfaces Now you are familiar with defining and extending interfaces. Let us now discuss about implementing interfaces. We use interfaces as parent classes or superclasses whose attributes are derived by other classes. So, creation of a class that derives or inherits the mentioned interface is mandatory. The syntax for implementing interface is as given below: class ClassName implements InterfaceName { ClassName body } As extends is a keyword used by a subclass for inheriting methods and variables from its superclass, in the same way implements keyword is used by a class for implementing one or more than one interfaces supported by it. This keyword can be seen in the declaration of a class after the extends keyword, as given below in another syntax of implementing interfaces, in which, a class can extend another class while implementing interfaces.
class ClassName extends ParentClass implements InterfaceName1, InterfaceName 2,...... { ClassName body; }

The declaration of an interface (by a class) in the implements keyword of

the class, means that body of that class will contain a method implementation for every abstract method defined in all of the implemented interfaces.

Q.4 How do you handle exceptions in Java

Handling Exceptions
A Java exception is nothing but an object that defines an exceptional condition, or an error that has occurred in a piece of code. In Java, we can handle this exception by creating an object that represents the exception, and throwing that object into the method that triggered the error. The method may handle the exception by itself or pass on the exception to another method to handle it. In either of the ways, the exception is caught and processed at some point. There are two ways by which exceptions can occur. They are as follows: Java run-time system: These exceptions relate to the fundamental errors that violate the rules of the Java programming language or the constraints of the Java execution environment. Code generated: The code that we write can manually generate exceptions. These are used to report some error condition to the caller of a method. Exception types All the different types of exceptions are subclasses of the built-in class Throwable. Therefore, Throwable is at the top most level of the exception class hierarchy. In the next level of hierarchy are two important types of exception classes, namely, Exception and Error. Let us now discuss these exception classes: Exception: This class specifies the exceptional conditions that your programs should catch. The subclass of this class will contain the custom exception types created by the program. Another important subclass of this exception class is RuntimeException. This subclass contains the exceptions that are automatically defined for programs and includes exceptions such as divide by zero and invalid array indexing. Error: This class defines exceptions that are not expected to be caught under normal circumstances by your program. Java run-time system uses exceptions of the type Error to indicate errors that are related to the run-time environment. An example for such an error is, stack overflow.

Hierarchy of Exception Class

There are two benefits of manually handling exceptions. They are: It allows you to fix the error. It prevents the program from automatically terminating. In Java, exception handling is performed using five keywords, they are: try, catch, throw, throws, and finally.
Java and Web Design Unit 13 Sikkim Manipal University Page No. 247

The general form of an exception handling block is as follows: try { // block of code to monitor for errors } catch (ExceptionType1 ex1){ // exception handler for ExceptionType1 } catch (exceptionType2 ex2) { //exception handler for ExceptionType2 } // finally { // block of code to be executed after try block ends } Let us now discuss how these exception handlers are used in Java. Using try and catch The program statements that you want to monitor for exceptions are

specified within the try block. Immediately after a try block, a catch block must be defined. This catch clause specifies the exception type that you want to catch. Let us look into a simple program that shows how the try and catch blocks are used. class HandleException { public static void main (String args[]) { int a, b, c; try {//monitor a block of code. a=0; b=45; c=b/a; System.out.println(The result is: +c); } catch (ArithmenticException e) {//catch divide by zero error System.out.println(Division by zero); } System.out.println(After catch statement); } } The execution of the program has been explained in the previous units. We will now look at the output generated by this program. Output Division by zero After catch statement Note that the call to println() inside the try block is not executed. Once an exception is thrown, the program control is transferred from the try block to the catch block. The execution is never returned to the try block from the catch block. Once the catch statement is executed, the control is transferred to the next line in the program following the entire try/catch mechanism. A try and catch statement together form a unit. The scope of the catch statement is restricted to those statements specified by the immediately preceding try statement. The statements that are protected by try must be written within curly braces. The purpose of using a catch is to resolve the exceptional condition and continue with the program as if the error never occurred. Using throw We have defined the ways to catch an exception that has been thrown by the Java run-time system. We can also throw an exception explicitly by using the throw statement. The general form of throw is as follows: throw ThrowableInstance; ThrowableInstance must be an object, which is of type Throwable or a subclass of Throwable. We cannot use primitive types, such as int or char, and non-Throwable classes, such as String and Object, as exceptions. We

can obtain a Throwable object in the following two ways: Using a parameter in a catch clause. Using the new operator. The execution of the program stops immediately after the execution of the throw statement. The subsequent statements are not executed. The program checks for a catch statement that matches the type of exception in the nearest try block. If a matching catch statement is found, control is transferred to that statement. If a matching catch statement is not found, the programs checks for a matching catch statement in the next try block and so on. If a matching catch statement is not found, the default exception handler halts the program and prints the stack trace. Let us now look into an example for creating and throwing an exception. class Demo { static void demoprac() { try { throw new NullPointerException(demo); } catch (NullPointerException e) { System.out.println (Exception was caught inside demoprac.); throw e; //rethrow the exception } } public static void main (String args[]) { try { demoprac(); } catch(NullPointerException e) { System.out.println (Exception was recaught: +e); } } } In this program, you can observe that two opportunities are provided to deal with the same error. Let us discuss the program in detail. 1. main() sets up an exception context and then calls demoprac(). 2. The demoprac() method then sets up another exception-handling context. 3. Immediately a new instance of NullPointerException is thrown, which is caught in the next line of code. The statement in the catch section prints a line stating that the exception was caught inside demoprac. 4. The exception is then rethrown and passed to the main method to catch. The main method catches the exception and prints another line stating that the exception was recaught along with the type of exception. Let us look at the output generated by this program.

Output Exception was caught inside demoprac. Exception was recaught: java.NullPointerException: demo This program also helps us in learning how to create Javas standard exception objects. The method followed to create an exception object as used in the program is as follows: throw new NullPointerException (demo); In this statement, we use new to construct an instance of NullPointerException. Javas built-in run-time exceptions have the following constructors: One with no parameter. One that takes a string as a parameter. Using throws We have discussed how we can throw exceptions explicitly. However, there are certain methods that trigger an exception, but are incapable of handling it. In such cases, this behaviour must be specified so that the callers of the method are aware of this exception and can guard them against that exception. This can be done by declaring a throws clause in the method. It is important to declare a throws clause for all exceptions, except those of type Error and RuntimeException, or any of their subclasses. All other exceptions that a method can throw must be listed in the throws clause. If the exceptions are not developed in the throws clause, it results in a compile-time error. The general form of a throws clause declaration is as follows: type method-name(parameter-list) throws exceptionlist { //body of method } With the help of the following program, let us analyse how throws clause is used. class ThrowsExample { static void throwOne() throws IllegalAccessException { System.out.println(inside throwOne.); throw new IllegalAccessException(demo); } public static void main(String args[]) { try { throwOne(); } catch (IllegalAccessException e) { System.out.println(Exception caught. +e) } } } The output generated by this program is as follows:

Output inside throwOne Exception caught java.lang.IllegalAccessException: demo In the above example, we can notice that throwOne() throws Illegal Access Exception and main() defines a try/catch statement that catches this exception. Using finally We have discussed the try; catch blocks and how to use throw and throws in the previous sections. Now let us discuss the use of the finally block. When exceptions are thrown, the execution of a method is interrupted and this alters the normal flow of the program. Sometimes, the code is written in such a way that an exception causes a method to return prematurely. This may create problems in few methods. For example, suppose you have a code for opening a file, entering data, and closing the file. In such a situation, you will want that part of the code, which closes the file, to be executed at any cost. It may happen that this part of the code is not executed due to an exception that occurred when opening the file. Hence, we need a mechanism to handle such cases. The finally keyword is used to address this issue.finally is a block of code that is executed: After the execution of the try/catch block. Before the execution of the code following the try/catch block. The finally block of code is executed at any cost. If there is an error in the program, the catch block is executed, then the finally block is executed. If there are no errors, the try block is executed, then the finally block is executed. Let us look into an example program to analyse how finally block is used with the try and catch block. public class Exception { public static void main(String args[]) { int a=1, b=0; int c=a/b; try{ System.out.println(Try Block before the error.); System.out.println(the result is: +c); System.out.println(Try Block after the error.); //this line will not printed } catch(java.lang.ArithmeticException e) { System.out.println(Catch Block); System.out.println(A Stack Trace of the Error:); e.printStackTrace();

//e.getMessage(); //This can be used when we write our own exceptions System.out.println(This operation is not possible.); } finally{ System.out.println(This is the Finally Block); } } } The output of the above program is as follows: Output: Try Block before the error. Catch Block A Stack Trace of the Error: java.lang.ArithmeticException: / by zero at Exceptions.main(Exceptions.java:5) The operation is not possible. This is the Finally Block In the above program, we can observe that a divide by zero error has occurred. The print statement after this error within the try block was not printed as the exception caused the program control to be transferred to the catch block. However, we can notice from the output of the program that no matter which block has control and for how long, the finally block will be executed after either the try block or catch block has completed.

Q.5 Write a small snippet in which the program uses POST method to accept the keywords to accomplish the task. Also suggest the alternative method to perform this task and its benefits

Q.6 Explain Java web technologies with its types Answer:-

Java Web Technologies


These arespecial software some of which are available in JDK and some can be downloaded independently or purchased from software vendors. In this section, let us discuss the following Java technologies: Java Data Base Connectivity (JDBC). Struts. Java Sever Faces (JSF). Java Data Base Connectivity (JDBC) Java Data Base Connectivity is a Java application that is available in all the latest versions of JDK. This is an application developed by a private

organisation called JavaSoft. This is an Application Program Interface (API) and it provides a common interface for a number of databases and enables you to build higher level tools and interface applications. The JDBC API enables you to define Java classes to establish connections between databases, generate Structured Query Language (SQL) statements and so on. The SQL is the standard programming language used to create, maintain and search for data in large databases. JDBC has become the most popular standard for data access. JDBC helps the developers working with Java to develop a data access application without having knowledge of complex API's of different database available in the market. They can link different type of databases and form a single database with the help of JDBC easily. Regardless of the platform that you use, JDBC helps you to establish an interface between the database and Java application. Usually, this interface is established using the JDBC drivers. These drivers are a set of classes and interfaces that helps your Java application to interact with the databases. Basically, there are two types of JDBC architecture: the JDBC 2-tier and JDBC 3-tier architectures. JDBC 2-tier architecture: In this architecture the Java application communicates directly with the database through JDBC. The database may be located on the same system or on another computer in the network. Therefore, it is called two tire or two layered architecture. The JDBC and the Java application together form one tier that will directly communicate with the second tier, i.e., the database and access the required information. JDBC 3-tier architecture: In this architecture along with the two layers that we learnt in 2-tier architecture, there is one more layer in between these two layers. This middle tier or layer acts a link between the JDBC and database. First, the request from the Java application will be sent to the middle layer, the middle layer then sends the request to the database. The database again sends back the requested information to the middle tire and then to the Java application via JDBC. The purpose of the middle layer is to handle any application or business specific rules for applications that access the database. Struts In the previous sub section, we learnt about the JDBC. In this section, let us discuss about Struts. What is a strut? A strut is a collection of Java classes, servlets and Java Server Pages (JSP) (refer Unit 14 for servlets and JSP). A strut is an open source framework and it enables you to build Web applications based on the Java servlet and JSP. Struts are not a library but a framework where you can develop Web applications. Craig R. McClanahan was the developer of Web applications using the struts framework. Later, he donated the strut software that he developed to Apache Software Foundation in 2000. Today, a number of developers are working to upgrade the software and enhance its capacity. Many developers believe that developing Web application using struts framework is a complex job. However, the number of users using the framework for their

developmental activities is growing and the popularity of the software is increasing. As we have studied, we can use Java code in HTML documents using JSP and servlets. However, both methods have their own advantages and disadvantages. But, struts is developed using the technologies, the JSP and servlets. It proves to be more efficient and effective in developing Web applications. The Apache struts offer two major versions of struts framework, the struts 1 and struts 1.x frameworks. The "struts 1" is still the most popular framework for Web based applications. Even though "struts 1.x" is a more advance framework than "struts 1", "struts 1" is still the most preferred choice of most of the Web developers. Let us now study some of the advantages of struts: It enables you to make global changes in the Web documents by editing a single file and these changes can be made without recompiling or modifying the Java code. It provides you a collection of JSP tags that will help you to easily output the properties of JavaBeans components. A JavaBean component provides standard methods to fetch and update information in an object. It provides a group of JSP tags to create HTML forms that are associated with the JavaBeans components. It helps you to validate the contents of form fields. This is possible since the struts can check if the form values are in proper format as per the requirement. If there is any error or mistake in the format, the form can be automatically redisplayed with the error message. Let us learn now look at some of the disadvantages of struts: For small Web based projects, the burden of learning and implementing struts becomes time consuming and complicated. When compared to JSP and servlets, struts have less resource available online. It will be difficult for beginners to gather the information online and work with struts. Experts believe that the struts applications are difficult to standardise and optimise when requirement arises. Java Server Faces (JSF) In the previous sub-section we briefly discussed about struts. Java Server Faces (JSF) is another important Web application development technology based on Java. A community named Java Community Process (JCP) formed by Web application experts from companies such as, Oracle, Sun, IBM and so on developed JSF. JSF is a standard framework to simplify the process of developing Web application in Java. All those who found Struts difficult for development, switched to JSF. Since, it was easy to learn and implement. It also provided more flexibility and efficiency when compared to struts. What is JSF? JSF is a new standard framework for Web application development using Java. You can consider JSF framework as a toolbox that contains a large set of components which you can use quickly and easily as per you requirements. You can use and reuse the JSF components in the same Web page, a number of times. The JSF is available as a part of JDK

The benefits of using JSF: It provides standard and reusable components which you can use to create user interfaces for Web applications. It provides many tags for accessing and manipulating the components. You use these tags similar to HTML tags discussed in Unit 2 and Unit 3. The form data is automatically saved and repopulated when it is displayed at client side. Many Graphic User Interface (GUI) components are available in JSF that makes Web based applications based on JSF framework more simple and effective. JSF components Let us now study about JSF components. In JSF, components are elements like text boxes, buttons, tables and so on, that are used to create User Interfaces (UI) for JSF applications. These UIs help to manage interaction with the user. The components of JSF mainly consist of two important things: A set of APIs to indicate and manage the various states of JSF components that helps server side validation, handle events, page navigation and so on. A tag library to create User Interface (UI) components on the Web page. The UIs created using JSF runs on server and displays an output on the client browser window. The main goal of JSF is to create Web applications faster and easier. Two types of components in JSF: Standard UI components: This type contains most of the basic set of UI components such as text fields, check boxes, list boxes, radio buttons and so on (refer Unit 3 for component description). Some of the UI components that you can find in JSF are: UIForm: This represents a Web form that contains various other components to make it a component i.e. number of components are grouped together to form a single component. UICommand: This represents UI components like buttons, hyperlinks, menu items and so on. UIInput: This represents input UI components such as text input fields, numeric input fields and so on. Custom UI components: Usually, while designing UIs you need some different and stylish components to make the component appear more attractive for example, fancy calendar, stylish table borders and so on. These are not standard type of JSF components but, designed as per the requirement. Therefore, they are called custom UI components. Thus, with the help of this the JSF enables you to create and use your own set of reusable components. It is also very important for us to know the flexibility that UI component offers, when it comes to handling third party components. The third party components are UI components that are not a part of JSF but, components that are developed and used by non-JSF technologies. JSF is highly flexible enough that you can easily use the third party components along with JSF

components. All the components are stored in a component tree on the server. This tree is nothing but a collection of files which are structured in a user defined order and stored on the server system. You can manipulate the components which are written in Java code on the server. Features of JSF You can notice that the JSF is rich with features related to Java technology. The features of JSF are a set of standard features, which has made it more flexible and efficient when compared to other technologies available for Web application development. Let us list out some of the features of JSF: It is a standard Web user interface framework for Java based applications. It is built with the servlet API as its base architecture. It is a component-based framework and hence highly flexible. User Interface (UI) components can be stored on the server. Components from other technologies can be used effectively. It uses an event driven programming model and events generated by users are handled on the server. It can support multiple client devices simultaneously.