Java and Web Design

Unit 2

Unit 2

Basic Web Page Development

Structure: 2.1 Introduction Objectives 2.2 HTML Basics Creating HTML document 2.3 Building a Web Page Text and Image formatting Adding links 2.4 Web Development Tools 2.5 Summary 2.6 Glossary 2.7 Terminal Questions 2.8 Answers 2.9 Caselet

2.1 Introduction
By now you must be familiar with the concept of World Wide Web (www). In the previous unit we studied about the functionalities of a Web browser and the concept behind the Web pages. We understood how a search engine works and learnt about the different types of search engines. We also learnt about the various Web servers that are available on Web which we can use to search for information on Web. We know that a Website is a collection of a number of different Web pages. A Web page enables you to arrange the data and present it on the Web along with text and graphics making the view of the Web user friendly. However, the most important question that arises in our mind at this point is how do we insert or arrange text on the Web page? In this unit we will learn some basic techniques of Web designing which will provide us a clear picture of how exactly the text and images are organised on a Web page. In this unit you will learn the steps needed to build a Web page using the markup language HTML. You will also learn how to organise the content on the Web page to improve the efficiency of your design.
Sikkim Manipal University Page No. 20

Java and Web Design

Unit 2

You will also learn some the primary tags used to mark-up the Web page with HTML. You will also learn to add links in the appropriate locations on the Web page that allows you to browse and read the contents on other Web pages in a flexible manner. We will also learn about some of the popular Web page development tools that we can use to design a Web page. Learning Objectives: After studying this unit, you should be able to: analyse the basic tags that structure the HTML document. build a Web page with a markup language. organise your Web content for effective presentation. use links to effectively guide the reader to the content. decide if you need use a Web page development tool.

2.2 HTML Basics

Hyper Text Markup Language (HTML) is one of the most popular and widely used languages to create a Web page. Before starting our discussion about Web design, let us first learn some basics of HTML. Tim Berners Lee the creator of World Wide Web (www) developed HTML in 1989. The initial version of HTML was developed based on the Standard Text Markup Language (STML) and it was developed to create only text documents. Later in 1993 a programmer Dave Raggett developed an upgraded version of HTML and named it HTML+draft. This was the first standardised version of HTML which was more flexible in creating tables and fill-out forms (refer unit 3 for tables and forms). Later many upgraded versions of HTML were developed based on HTML + draft". Upgraded versions like the HTML 4.0 and HTML 5.0 that were released after 2000 were more advanced versions which had number of features. The most important thing that we need to know is that the HTML is not a programming language but a mark-up language for Internet. A mark-up language is a language which describes how text should be displayed on a Web page, for example, the style, size, colour, alignment and so on. The HTML is one such language which is used to insert and format text, and images on the Web page.

Sikkim Manipal University

Page No. 21

Java and Web Design

Unit 2

HTML is one of the easiest languages to learn and is used to create Web pages. The HTML tags enable us to edit and display the text on the Web page. The tags are inbuilt commands or instructions used to define the operation that will be performed on text to be displayed on the Web page. The tags are written within angled brackets "<Name of the operation>" for example, "<p>" indicates that the content following the tag should be placed in a new paragraph. HTML has two types of tags: start tags and end tags. Both these tags are written within angled brackets, but the end tags start with a forward slash inside the angled brackets. For example, "<p>" indicates beginning of the paragraph and "</p>" indicates the end of the paragraph. For example, <p> "The content of the paragraph" </p> 2.2.1 Creating HTML document We have understood what HTML is, its origin and some basics of it. Let us now learn the basics of creating a HTML document. There are many HTML editors available in the market which you can use to create a HTML document like Dreamweaver and Frontpage. As a beginner, you can create effective HTML document using a plain text editor like a notepad. You can create a HTML document in a text file by simply saving the document with an ".html" extension. When you save your document with this extension the document will be saved as a HTML document. Every HTML document begins with the tag <html> and ends with </html>. The text between the <html> and </html> tags describes the Web pages information and content on the Web page. Further, <html> is divided into two more parts the <head> and <body>. The text between the <head> and </head> tags contains the title of the Web page and other metadata. The text between <body> and </body> will be the content displayed on your Web page. The example below shows the general format of a HTML document,

Sikkim Manipal University

Page No. 22

Java and Web Design

Unit 2

<html> <head> <title> Title of the Web page </title> </head> <body> Content of the Web page.</body> </html> Each HTML document is defined by a number of HTML elements. All the content between the start and end tags are known as the HTML elements. For example, <p> this is a paragraph </p> is an HTML element. We can also have a nested HTML element for example: <body> <p> This is a <b> paragraph</b></p> </body> In the above example, you can see that the <b> element is nested inside the <p> elements. Again the <p> element is nested inside the <body> element. (Refer 1.3.1 for description about the tags used here.) In HTML, we use attributes to provide additional information about the HTML element. These attributes are specified in the start tag. You can represent an attribute using the general syntax as shown below: Name= "value" Here, "Name" is the attribute that you want to use and "value" is the parameter that you want to pass to the attribute. For example, to provide a hyperlink link to a text in an HTML document we use the <a> tag. The address of the link that you want to add is specified in the "href" attribute. For example: <a href="http://www.google.com">This is a link.</a> In above example, the text "This is a link." appears as a hyperlink on the Web page and when you click on it you can open "http://www.google.com" Website. One thing we need to keep in mind is that the value that you pass to an attribute must always be in double quotes as shown in the above example. (refer 1.3.2 for hyperlink attributes.)

Sikkim Manipal University

Page No. 23

Java and Web Design

Unit 2

HTML has a large collection of elements, in the next section we shall discuss and use some of these elements and learn some basic concepts and techniques of creating Web pages. Self Assessment Questions 1. _____________ the creator of World Wide Web (www) developed HTML in 1989. 2. The tags are inbuilt commands or instructions used to define the operation that will be performed on text to be displayed on the Web page. 3. We can use attributes to provide additional information about the HTML document. Activity 1: Research the Web and search for the various other markup languages that you can use to create Web page. Hint: http://www.peterindia.net/MarkupLanguages.html

2.3 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. The first major issue that you need to address is gathering the right content and organising 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 organise 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 categorise the content. Also, there must be a logical flow in which you present the content.
Sikkim Manipal University Page No. 24

Java and Web Design

Unit 2

The usability of the page will make the Website reach out to large a group of audience. Only if the page is user friendly it can retain its users. Therefore, you need to design the Web page with simple and reliable interfaces and navigations so that it can be easily understood and used by the audience. These interfaces comprises of images, graphics, coloured texts and so on. You must provide hyperlinks to related content so that the Web page users can navigate to other Web pages to get more information about the content. Once you have gathered, organised, and structure the next part is deciding upon the placement of the content on the Web page. A plan that describes how to organise 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: 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. For example, if you want to have a page which has a specific width, then you can centre it on the browser screen and make the background colour and the page colour different. (The page colour is the colour of your Web page and background colour is the colour of the browser window where the Web page is displayed.) When you aligning
Page No. 25

Sikkim Manipal University

Java and Web Design

Unit 2

the Web page at the centre of the browser window enables the page to be resized for different browsers. Say, if the browser you use has a large space the page will be displayed along with the background. In case your browser has small space the page will be displayed with less or no background. 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 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. 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).

Sikkim Manipal University

Page No. 26

Java and Web Design

Unit 2

<html> <head> <title>My First Web Page!</title> </head> <body> <h2>My Web page</h2> <p>This is my first Web page. I have created this Web page using a Notepad. </p> </body> </html>

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 Microsoft's 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.

Sikkim Manipal University

Page No. 27

Java and Web Design

Unit 2

Figure 2.2: 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. 2.3.1 Text and image formatting1 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. Let us now study some of text formatting elements available in html and format our Web page. Heading elements You can use these elements to format the headings in your Web page. The font sizes of the heading elements vary form size one to six. For example, if you want to display a main heading of a Web page My Page with the font size of six then the command line is, <h1>My Page</h1>. If you want to
1

http://www.digistore.co.nz/blog/2008/08/text-html-codes-tutorial/

Sikkim Manipal University

Page No. 28

Java and Web Design

Unit 2

display the same text Web Page with the font size one then, the command line is <h6>My Page</h6>. The font size can be specified precisely in pixels for each header tag using Cascading Style Sheets (refer Unit 4). Font styling elements The HTML provides you a number of elements that allow you to modify the styles of the font. Let us now discuss some of the elements you can use to modify the styles and they are: Bold text: To make the text appear in bold on your Web page you can start that part of the text or word with the tag <b> and close the text with "</b>". The part of the text within these tags appears bold on your Web page. For example, if you want to display the sentence, "Sachin is the best cricketer in India." on your Web page. The code to display this sentence is:
<p>Sachin is the <b>best cricketer</b> in India.</p>

Italic text: To make the text appear in italics on your Web page you can start that part of the text or the word with the tag <em> and close the text with "</em>". The part of the text within these tags appears in italic style on your Web page. For example, if you want to display the sentence, "Sachin is the best cricketer the world has ever seen." on your Web page. Then the code to display this sentence is: <p>Sachin is the <em>best cricketer</em> the world has ever seen.</p>

Underlining the text: To underline the text on your Web page, you can start that part of the text or the word that you want to underline with the tag <u> and close the text with "</u>". The part of the text within these tags appears underlined on your Web page. For example, if you want to display the sentence, "Sachin is the best cricketer in India" on your Web page. Then the code to display this sentence is: <p>"Sachin is the <u>best cricketer</u> the world has ever seen."</p>

Sikkim Manipal University

Page No. 29

Java and Web Design

Unit 2

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: <p>Sachin is the <b>best cricketer</b> that India has ever produced. </p><p>He is also called the <b>God</b> of world cricket. </p> This will appear on your Web page as shown below: Output: Sachin is the best cricketer that India has ever produced. He is also called the God of world cricket. 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: <p align="right">Text</p>. For example: <p align="right">Study says, "India <b>developed</b> country by 2020."</p> will be a

Sikkim Manipal University

Page No. 30

Java and Web Design

Unit 2

Output The text appears as on the Web page as shown below, India will be a developed country by 2020. 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: <font size="14">Lets us learn about formatting a Web page.</font>. In the above code you see two tags, <font size="14"> this is the opening tag and </font> is the closing tag, between these two tags you will enter the text that you want to modify. The opening tag comprises of "<font size" indicating that you want to modify the size of the font, if you want to modify the colour then it will be "<font color" and for modifying the font type it is "<font type". In each case, the parameter that you pass to the attribute will be different. In our example we have considered the font size so we pass the size in the form of an integer number. However, the parameter that you pass must be enclosed within double quotes for example "14". For text colour the opening tag will be <font color=" The colour name of your choice.">, and for type the opening tag will be <font colorface="The type name of your choice.">. Inserting and formatting image You can insert an image on your Web page and also format the size of the image. You can insert images on the Web page using the <img> tag. Let us see how to use this tag to insert the image. First, you need to save your image in the same folder where you have saved your HTML document. For example, if you have saved an image "Picture12.gif" and HTML document My First Web Page! in the same folder. Then you can use the tag and insert the image on the Web page using the code given bellow, <img src="Picture12.gif" width="130" height="101">
Sikkim Manipal University Page No. 31

Java and Web Design

Unit 2

In the above code, we use the attribute "src" to specify the source/location of the image to the editor along with the file type. For example, the ".gif" specifies the type of the image and the file name specifies the location of the image. Along with this you also 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 specify the width and height for all the images that you want to insert. You can find the values for these attributes using graphics editor software like Paint Shop Pro. You can vary the width and height attributes and format the size of the image. 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: <p align="right"><img src="Picture12.gif" width="130" height="101"> 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. 2.3.2 Adding links We understood how to insert and format the text on your Web page. Let us now learn to insert text and images with links or hyperlinks. Links are found in all Web pages. You can click on these links and navigate from one Web page to another. These links are also called as hyperlinks. They can be a word, group of words or even an image. How do we come to know whether the text or image on the Web page is a hyperlink or not? It is very simple, usually if a text is a hyperlinked then it appears in blue colour or else when you keep your cursor on the hyperlinked text or image the pointed arrow cursor turns into a little hand. This means the text or image is hyperlinked. In HTML you can use <a> tag and the attribute "href" to create a hyperlink text or image. Let us now see the syntax of this element: <a href="url">Link text</a>

Sikkim Manipal University

Page No. 32

Java and Web Design

Unit 2

In the above syntax, the "href" attribute specifies the address or Uniform Resource Locator (URL) to which the text or image is linked. For example, if you have a sentence, "The national bird of India is Peacock." and you want to link the sentence to the URL "www.indiafirst.com" then the code is written as: <p><a href="http://www.indiafirst.com">The national bird of India is Peacock.</a></p> As you can see from the above mentioned code that the attribute "href" is used to specify the URL address and we also need to keep in mind that the value passed to the attribute must be in double quotes. Now, if you want the single word in the sentence to be linked to an address then the code can be written as: <p>The national bird of <a href="http://www.indiafirst.com">India</a> is Peacock.</p> You can see in the above code that only the word "India" is linked to the URL "http://www.indiafirst.com". Now how do we link an image to an address? It is very simple let us take the same example we used in the previous section to insert an image: <img src="Picture12.gif" width="130" height="101"> We want to link this image to the address "www.imageworld.com". We can simply rewrite the above code as: <a href="http://www.imageworld.com"><img src="Picture12.gif" width= "130" height="101"></a> When you click on the image Picture12 displayed on the Web page, you can navigate to the address www.imageworld.com. Self Assessment Questions 4. While gathering the content, you must make sure that any content that does not define the objectives should be excluded or removed. 5. Most designers prefer to have _______ to _________ words in a line just to make sure that the user is able to read it without any difficult. 6. The _______________ tag is used to make the text italic.
Sikkim Manipal University Page No. 33

Java and Web Design

Unit 2

7. You can insert an image on the Web page and also format the size of the image using the tag <img>. 8. A text is said to be hyperlinked if it appears in ______________ colour. Activity 2: Visit the Website given below and analyse the various examples of HTML codes given their. Hint: http://www.w3schools.com/html/html_examples.asp

2.4 Web Development Tools

In the previous section, we have learnt some of the commands of HTML that are used to insert and format text and images on the Web page. Let us now study some of the tools that we can use to design the Web page. These tools are known as the Web development tools. These Web development tools are software that enables you to design Web pages easily and efficiently. The Web development tools enable you, as a designer to design the Web page under controlled conditions within a short span of time. Let us not go for an in depth analysis of these tools but, we shall learn some of most popular tools that are used by the professional Web designers for creating Web pages. You can use Web development tools mainly for editing and viewing the Web page, testing the codes written using a mark-up language, and previewing the working of codes written before it is actually used on the platform for which it is designed. Let us now learn few popular tools that are used by Web designers: Dreamweaver: This Web development software tool was initially created by Macromedia and now it is a part of Adobe System. We can see that the initial versions of this tool comprised of simple HTML based editors. However, the later versions of Dreamweaver. For example, version 8 supports many technologies such as CSS, Javascript and many other script languages (refer Unit 6). From the last 10 to 15 years Dreamweaver has been the most popular Web development tool that is used by the Web developers. It currently holds 80% of the HTML editor market in the world and rated as the most preferred HTML editor.
Page No. 34

Sikkim Manipal University

Java and Web Design

Unit 2

Some of the most important features of Dreamweaver (version 8) are mentioned below: This tool provides you a clear view of the HTML code and it also allows you to use all the latest HTML options such as eXtensible-HTML (XHTML) and Dynamic HTML. You can use the Cascading Style Sheets (CSS) (refer Unit 4) that provides you a better design environment to create Web pages. You can use it to create database driven Websites easily and efficiently. You can easily switch between Dreamweaver editor and a text editor like Notepad. Frontpage: This is a product of Microsoft. You can use this tool for designing and editing Web pages. There is no need for you to learn HTML to use the Frontpage editor. This is because the editor creates or generates all the HTML tags and other features like CSS, frames and so on by itself. Using the Frontpage editor's HTML view you can enter text, edit HTML tags and also use the standard Microsoft Word commands such as Cut, Paste, Find and Replace, and so on. Therefore, using Frontpage editor for creating your Web page is as simple as creating a word document using Microsoft Word. Some of the features of the Frontpage editor are: You can create new HTML pages using the inbuilt wizards and templates. It also enables you to create your own templates. You can apply some of the inbuilt themes to make your Web page look more dynamic, colourful and attractive. You can insert text in all HTML styles, change text size and colour, and format the document for example, line spacing, font style and so on. You can also add borders for your Web page and also insert navigation bars which help users to use the Website more efficiently, and makes your Web page more interactive. You can create and insert Javascript (refer Unit 6) and other Microsoft visual basic scripting edition scripts. Self Assessment Questions 9. The initial versions of __ tool comprised of simple HTML based editors. 10. Using the _____________ editor creating a Web page is as simple as creating a word document using Microsoft Word.

Sikkim Manipal University

Page No. 35

Java and Web Design

Unit 2

Activity 3: Make a list of the popular Web developing tools available in the market today and analyse how they can be used to build a Web page. Hint: http://sixrevisions.com/tools/20_Web_development_tools/

2.5 Summary
From the above discussion we are able to understand the basics of the mark-up language HTML. We learnt the short history of HTML. We also learnt about the basic tags like <html>, <head> and <body> and the function of each of these elements in HTML. We studied the basic design aspects of building a Web page. We understood the importance of gathering and organising the content that goes in our Web page. We also understood the importance of having a Web layout and some of the key aspects that we need to keep in mind while designing a Web page. We also learnt the basic procedure to create a Web page using Notepad. We learnt the various tags that we can use to insert and format the text and images on our Web page which will help to organise and structure the contents on the Web page. We have also learnt each of these tags and their syntax. We learnt how to make a provide hyperlinks to the content like the text and images on the Web page. We understood the importance of Web development tools. We also analysed two of the most popular and widely used tools the Dreamweaver and Frontpage. We learnt some of the most features these tools offer for Web page development.

2.6 Glossary
Term Cursor Description It is an indicator used to show the position on a computer monitor or other display device that will respond to input from a text input or pointing device. It is a Website where we can take data for example, your companys customer
Page No. 36

Database driven Website

Sikkim Manipal University

Java and Web Design

Unit 2

information, order history, inventory control, and so on, and creates a Web-based interface for that data. This data can be accessed by your vendors, marketing managers, sales managers, and so on, online. Metadata It is descriptive information about a particular set of data, content or resource and describes how it is formatted, and also information telling when and by whom the data was collected. It is a quality attribute that assesses how easy user interfaces are to use. It also refers to methods for improving ease-of-use during the design process. It is a user interface element that presents a user with a sequence of dialog boxes that lead the user through a series of welldefined steps.

Usability

Wizard

2.7 Terminal Questions

1. Write a note on HTML. 2. Describe why content gathering and Web layout is important for Web designing. 3. Explain the steps for creating a HTML document 4. What is a hyperlink? How are they inserted on the Web page? 5. Write a note on Web development tools.

2.8 Answers
Self Assessment Questions 1. Tim Berners Lee 2. True 3. False 4. True 5. Seven, eleven
Sikkim Manipal University Page No. 37

Java and Web Design

Unit 2

6. 7. 8. 9. 10.

<em> True Blue Dreamweaver Frontpage

Terminal Questions 1. Refer section 2.2 HTML Basics 2. Refer section 2.3 Building a Web Page 3. Refer section 2.3 Building a Web Page 4. Refer section 2.3.2 Adding Links 5. Refer section 2.4 Web Development Tools

2.9 Caselet
Silicon City Corporation is a marketing company which sells various products from computer hardware to software products. The company is in the business of marketing for the last 20 years and is a reputed company in Bangalore. In January 2010, the company decided to market consumer electronics. This was a major step the company took to enter into the consumer electronic sector. However, the companys official Website is very familiar to all its vendors and customers. They wanted to make certain modifications in the official Website which they had designed three years back. One of the senior sales managers was given the responsibility of modifying the official Website of the company. Even though the task appears to be simple, a lot of design challenges were faced by the manager. The company is well established in marketing the computer hardware and software products and this is the major source of revenue for the company. Firstly, the sales manager had to decide where exactly the information regarding the products that the company is currently marketing has to be placed on the web page. Secondly, how and where the product details of the upcoming products had to be placed on the same web page? Thirdly, the consumer products that they want to launch had to be the highest priority. Since, they are marketing a new product
Sikkim Manipal University Page No. 38

Java and Web Design

Unit 2

they have to inform their customers about their new venture. The manager had to sort out and prioritise the products and all this had to be available on the home page of the Website. He came up with a solution which he thought could address the current problem. He decided to have menu which lists out all the three products like the products that the company is marketing, latest and upcoming products and newly launched consumer products. This menu will be visible to the customers when they open the home page of the company. He also planned to advertise some of the important products on the home page which will help attract customers who visit the web page. He also decided to have flashy images that display on the home page saying that the company is now marketing consumer products which. Thus, the customers will be able to see the special products advertisement on the home page along with flashy images displaying the consumer products. The customers can check the various products the company is marketing by clicking on the menu provide on the home page. Questions: 1. What is the task before the senior sales manager? 2. If you are a Web designer how will you organise the content on the home page. References Jon Duckett. (2005), Beginning Web Programming with HTML, XHTML, and CSS http://www.accessfp.net/frontpageeditor.htm http://tutorials.ausWeb.com.au/hosting/Tutorials/Dreamweaver-HTMLEditor-Tutorials/ http://Webdesign.about.com/od/layout/a/aa062104.htm

Sikkim Manipal University

Page No. 39