MBA IS- 4th SEM

MI0041 Java & Web Design 4 Credits Assignment Set- 1 (60 Marks) Note: Each question carries 10 Marks. Answer all the questions. 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 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. 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.. 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 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 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 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.. 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. 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 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 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> 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

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

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. 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"/>. 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 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. Checkboxes: 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. 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. 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. . 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. 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. 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 Text decoration: This property is used to add effects such as underline, over-line or line-through the Web page text. 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

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

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

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

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

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.