Master of Business Administration MBA Semester IV MI0041 Java and Web Design

Q1.Explain the browser components and its features?

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

Q.2. Describe in detail the building of webpage.

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

Q.3.Give an example for cascade style sheets and explain editing with cascade style sheets in detail.

Ans. 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. Below is an example that helps you understand how to use the class selector.

Q.4 Give one example each for the following and explain the uses 1. Web Design Tools, 2. HTML Editors, 3. Adobe Photoshop,
4. Adobe Flash, & 5. Fire bug Browser

Ans. 1. Web Design Tools:

Design for the Web is one of the most significant areas that are emerging in the development of websites. Web design refers to the task of developing a Web page or the user interface of the Web page. The design of a Web page acts as a medium between people and information. The major intention of Web design is in the development of attractive Web pages that reside on Web servers. Web design tools concentrates more on the presentation of contents using hypertext, images, videos, and so on. There are various tools available today that help us develop and design Web pages. We can term these as design tools. Design tools help us to design attractive Web pages easily and quickly. Some of the

popular Web design tools are as follows: HTML Editors. Adobe Photoshop. Adobe Flash. Firebug Browser

2. HTML Editors:
HTML editor refers to a software application that we can use to create Webpages. It provides us with various tools that are required to design a Website. Even though the HTML files can be written using any text editor such as notepad or text pad, specialized HTML editors can provide convenience and additional functionalities. It not only offers support to work with HTML tags but also provides support to work with technologies such as Cascading Style Sheets (CSS), Extensible Mark-up Language (XML) and JavaScript. They even help us to handle the interactions that happen with remote Web server through the File Transfer Protocol (FTP) and Web-based Distributed Authoring and Versioning (WebDAV). HTML Editor is useful as we need not have to type or remember all the HTML tags. We can say that it is just like the word processor where we type the content and apply the required formats. We can see the HTML source as well as view how the Webpage would look like when viewed on the Web browser, by switching to the display format.

3. Adobe Photoshop:
Adobe Photoshop is a software application package useful in editing images and is considered as an important tool for Web designing. It is an excellent tool to create attractive Websites. Photoshop can read and write raster and vector image formats. For example, gif, jpeg and png. An image in raster format is described in a table of pixels, where each pixel has a specific color.

Adobe Photoshop is considered as an image editing tool for Web design as it useful in the following ways: 1. It helps you to tune your art work to the design of your a Web page on your Website. 2. It can be used to add graphics to your videos that you might have uploaded on your Website.

3. It helps to create different types of web banners and buttons that would enhance the look of your Website. 4. It also helps us to turn an image or photograph look like a work of art, that is, to look like a painting. 5. It can be used to create a rollover effect to the images or button on your Web pages easily without writing any code by just adding different behaviors to different images or buttons. Here, by rollover effect we mean that we can make a particular area of an image to change when you click or move the mouse over an image.

It helps us to load Flash movies at a faster pace when compared to animated GIF's. This is because animated GIF's includes numerous images saved in one image.

1. When a Web browser loads such an image, the browser may need to load all the frames of the image before display. Therefore, it takes longer time for a GIF image to load. 2. It helps to create simple animations and buttons quickly and easily.

3. It supports interactivity. Thus, it helps us to control animations using Flash software. For example, we can begin animating an image after the user clicks on a button. 4. It is possible to embed the animations created using Flash into a Web page.

5. It is mostly used in the creation of vector based animations and helps in reducing the file sizes. Reduction in the file size helps to quickly download and play movies on the Webpages.

5. Firebug Browser: Firebug is also an excellent Web development tool, which is an add-on for Mozilla Firefox. It provides us with various tools to inspect, edit, and debug Web pages. This add-on provides us a tabbed interface that facilitates us to edit as well as debug HTML, CSS and JavaScript codes in any Web page. It also offers DOM (Document Object Model) inspection and appraisal related to the performance of Websites.

4. Adobe Flash: Adobe Flash is a multimedia graphics program that is used to create interactive Web pages, videos and animations. It can be embedded inside any HTML program to create interactive Web pages. Other than being used for creating interactive Web pages it is also widely used in games and advertisements. Adobe Flash helps you to create interactive videos on the Web. It uses vector graphics. Here, vector graphics refers to graphics that can be scaled to any size of our choice without any loss in quality or clarity. We need not have any kind of programming knowledge to use this software as it is very easy to learn. It captures user input through keyboard, mouse, microphone and camera.

We will now look into some of the uses of Adobe Flash. Some of the uses of Adobe Flash areas follow:

Some of the uses of Firebug Browser are as follows: It is very easy to learn the tool as it is user friendly. It also provides you the facility to open the Firebug window within your Web browser, as you saw in Figure 10.1, or as a separate window. It lets us examine and edit the HTML tags. Whenever there is any change in the HTML code the Firebug highlights the modifications made in yellow. It even lets you make modifications to the code and see the output of the change instantly.