MBA IS-4th SEM MI0041-Java and Web design ASSIGNMENT

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 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. 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 Address field: This is the area on the browser window where you enter the Web page address or URL. 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. 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. 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. 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 organize 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 organizing 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 organize 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 categorize the content. Also, there must be a logical flow in which you present the content. Once you have gathered, organized, and structure the next part is deciding upon the placement of the content on the Web page. A plan that describes how to organize 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: 1. Space and white space, 2. Images and graphics, 3. Text width, 4. Font styling elements, 5. Bold text 6. Italic text, 7. Underlining the text, 8. Text positioning, 9. Paragraph, 10. Centre alignment, 11. Right alignment, 12. Font appearance, 13. Inserting and formatting image, 14. Adding links Q.3.How to use forms? Explain with an example. Answer :- Using a Form 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 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. 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.

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:

Q.4.Give an example for cascade style sheets and explain editing with cascade style sheets in detail. Answer:- Web Page Editing with 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. The class selector is used to specify a style for a group of 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. 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". 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. 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:

Text alignment: We can align the text using the CSS attribute. For example:

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,

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.

Text transformation: The text transformation property helps you to control the capitalization of the text on the Web page. You can make the text all upper caps, lower caps or capitalize 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:

Margins: Page, whether it is a page in your text book or the Web page, will have margins. 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:

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 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. 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. 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 utilizes special software robots known as spiders. 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. 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. For

example, OR, AND, and NOT are known as Boolean operators. Table 9.1 illustrates the use each of these Boolean operators.

Figure 9.1: Working of a Search Engine Types of search engine 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. 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. 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. Google and Yahoo are today using hybrid search engines. Google calls this Universal Search. 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. 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. The benefits of LAMP stack are as follows: It is open source software package and thus can be got free of cost. This helps organizations 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). 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 utilizing 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. 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, organizations fear to switch to LAMP.