Q.1. Explain the browser components and its features.

Answer: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 favorite 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. 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. 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: 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. 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. 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: 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 finalize 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. 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.

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

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.

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

 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.

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:

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:

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 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. You can also restrict the class to a particular HTML tag. Say for example, you want to create a class only for the paragraph tag <p>, and the style defined by a class will not be applicable to any other tags. Let us modify the previous code example for better understanding.

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

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: Web Page with Margins[1] As you can see from the figure the top margin is 100 pixels from the top end of the page, left margin is 70 pixels from left end of the page, right margin is 40 pixel from right end of the page and bottom margin is 10 pixels from bottom end of the page. Let us now write the code line to fix the page using the CSS for the margins as shown in figure 4.1.

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

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

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

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. index, and allowing users to search for matching Web pages using the keywords saved in the index. 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, 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. 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.

We will now study more about these 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 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.

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