Professional Documents
Culture Documents
MI 0041 Final Assignment
MI 0041 Final Assignment
MI 0041 Final Assignment
Q1. Explain the browser components and its features Ans: Browser components 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. 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. Web Browser and its Features 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, Favorites 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. Q2. Describe in detail the building of webpage. ANS: 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.
Page 1
Page 2
Page 3
Page 4
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 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: 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 "capitalize", the first letter of each word in the text will appear in capital for example, "garden city of India" will be "GardenCity 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. Web Page with Margins 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 pageand 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 colors with CSS In the previous sub-section, we learnt the basic techniques of formatting the text on a HTMLdocument using CSS. Let us now learn how to apply colors to the text and background of the Web page. Color property The color property of the CSS enables you to change the color of the text displayed on the Web page. Say for example, you want to create a class to change the color 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 color value, in our example we are passing the value "red". When you use the class "recolor" in a text element, the text within the tags will be displayed in red color. You can provide various other values such as blue, green and so on. Background color: This property enables you to choose the background color of the Web page. With the help of the attribute "background-color", you can change the background color of the Web page. One more important point to remember is that you can choose independent background color for each element. For example, you can have a green background for the paragraph text, a blue background for the heading text and grey color 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
Page 5
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 overlap 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 h1is 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. Q5. Describe the working of search engine. What are the different types of search engine? Explain with its application. ANS. 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 utilizes special software robots known as spiders. The spiders are simple programs that scan the Web
Page 6
Page 7
Page 8