SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

Student Name: Registration Number: Subject Name:

Course: LC Code: 01522

Subject Code:

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

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

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.

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

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 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. Therefore, setting a proper width for your Web page is very essential and improves the efficiency of the design.

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

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.

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

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,

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.

Checkboxes: The code to define the checkboxes is shown below:

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

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:

Q.4.Give an example for cascade style sheets and explain editing with cascade style sheets in detail.
Answer:Web Page Editing with CSS 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:

Text decoration: This property is used to add effects such as underline, over-line or linethrough 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 "textdecoration" 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:
5

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

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

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.

Using colours with CSS 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.

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.

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

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

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

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.

Q.6.List the benefits and drawbacks of Lamp stack.

Answer:-Benefits and drawbacks of LAMP stack 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). 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.

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

10

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

11

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

12

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

13

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

14

SIKKIM MANIPAL UNIVERSITY-DE Vernacular Programs Assignment format

15