Computer Class 12 GSEB Solutions Chapter 3 Designing Simple Website using KompoZer

Students frequently turn to Computer Class 12 GSEB Solutions and GSEB Computer Textbook Solutions Class 12 Chapter 3 Designing Simple Website using KompoZer for practice and self-assessment.

GSEB Computer Textbook Solutions Class 12 Chapter 3 Designing Simple Website using KompoZer

Question 1.
How does a website play an important role in business ?
Answer:

A website plays a very important role in a business now-a-days.
1. It helps in presenting the business to the world.
2. It helps in promoting the business, selling the products.
3. It can attract a large number of customers. Therefore it is important that the website should have good design techniques which will enable the company to get the maximum amount of traffic, therefore making the maximum amount of profit.
A website is a collection of interlinked webpages for a specific purpose.
The challenge however is in creating a website that is interactive, user friendly and providing accurate and useful information.
The website should be designed in such a way that the users find the website informative and visit it repeatedly.
It should increase customer base if the site is commercial.
This objective can be achieved if appropriate care is taken at the time of website designing.

Question 2.
List the important points to be considered for developing a good website as part of planning process.
Answer:

Developing a good website is a project similar to any other project and requires detailed planning.
The better the planning, the chances of success in terms of usefulness of the website is higher.
In other words we can say that the desired goals for developing the website can be achieved.
Following are the important points which should be considered for developing a good website as part of planning process.

(1) Purpose :

The purpose of the website should be clearly identified. Before creating a website, we should be clear with the definition and goal of the website.
A properly designed website will be helpful to the organization.
The purpose for creating the website may be to provide information to a group of people or it may be to attract the new customers or it may be to sell the products online.
Having decided the purpose, the content and layout of the website can be properly developed.

(2) Audience :

Before we start with the designing part, we should know the expected users of the website.
The website should contain both general and detailed information.
It should also contain specific and non-specific data.
The proportion of the different type and extent of detailed aftd specific information depends on the nature of the expected audience.
The user expectations from the website are important to know, as it helps to develop the appropriate content and layout of the site.
This also ensures that the website is useful and successful.
Another consideration is the speed of connection that the expected users will have.
In case, large graphical files are kept on the website, they will take a long time to download. The users will become impatient while waiting for large files and leave the site.
Thus, it is desirable that the website should contain minimal required graphic and multimedia files.

(3) Content:

The website must contain complete and relevant information.
Excessive use of irrelevant information can cause frustration to the users as they are unable to seek the specific data.
Also if the information provided is incomplete the users can leave the website.
Placing appropriate and relevant content will satisfy users and sustain their interest in the website.
The website content should be classified into general and detailed categories.
The general content provides an overview of the site, organization, products and services and other items. Brief descriptive information helps user in determining what he is searching.
It directs to the appropriate specific data and informs about other available items at the site.
The detailed content provides users with the detailed information on the site like products and services description.
The layout of the site must ensure easy access to the detailed information and specific information
they seek.
Text paragraphs should always be kept at reasonable lengths.
If there is a lot of content to be displayed on a webpage, then try to split it into small text blocks, this way visitors will be easily able to pick out the content they need to know.
The navigation in the website should also be made as easy as possible.
Moving from one page to another should be easy so that the user knows where he is and how to get back to home page.
Ensuring that appropriate information (both general and detailed) is available and easily accessible ensures that site can serve its intended purpose.
A website is a valuable tool for businesses and other organizations when composed of the right material (content).
As with other tools, the website can perform an outstanding job.

(4) Medium :

More and more people are using Internet through smart phones and tablets.
The website design should scale for all the devices like computers, smart phones and tablets.
Also the website should be designed keeping in mind that it is well displayed in all the popular web browsers like Mozilla Firefox, Chrome, Opera or Internet Explorer.

Creating a simple website using KompoZer :

Let us create a simple E-commerce website named “School Plaza”, which creates to the needs of the school going students.
On our website, all the school related items like books, stationary, school bags, water bottles, lunch box, files, folders and other such related items are available and can be easily ordered.
We will also create a shopping cart which will show us all the products and the total amount of the items ‘that we have purchased.
Figure shows the look of the home page and shopping cart of the website that we plan to design.

Home Page :

Shopping Chart :

Let us learn to create our website step by step. To start with, we should first design the home page of our website.
The home page of the website is the first page that opens when the user enters the URL address in the
address bar of the browser.

Question 3.
Why should the purpose of the website be clearly defined ?
Answer:
Purpose :

The purpose of the website should be clearly identified. Before creating a website, we should be clear with the definition and goal of the website.
A properly designed website will be helpful to the organization.
The purpose for creating the website may be to provide information to a group of people or it may be to attract the new customers or it may be to sell the products online.
Having decided the purpose, the content and layout of the website can be properly developed.

Question 4.
How does knowing the expected audience help in the design of the website ?
Answer:
Audience :

Before we start with the designing part, we should know the expected users of the website.
The website should contain both general and detailed information.
It should also contain specific and non-specific data.
The proportion of the different type and extent of detailed aftd specific information depends on the nature of the expected audience.
The user expectations from the website are important to know, as it helps to develop the appropriate content and layout of the site.
This also ensures that the website is useful and successful.
Another consideration is the speed of connection that the expected users will have.
In case, large graphical files are kept on the website, they will take a long time to download. The users will become impatient while waiting for large files and leave the site.
Thus, it is desirable that the website should contain minimal required graphic and multimedia files.

Question 5.
What content should be placed in the website while designing it ?
Answer:
Content :

The website must contain complete and relevant information.
Excessive use of irrelevant information can cause frustration to the users as they are unable to seek the specific data.
Also if the information provided is incomplete the users can leave the website.
Placing appropriate and relevant content will satisfy users and sustain their interest in the website.
The website content should be classified into general and detailed categories.
The general content provides an overview of the site, organization, products and services and other items. Brief descriptive information helps user in determining what he is searching.
It directs to the appropriate specific data and informs about other available items at the site.
The detailed content provides users with the detailed information on the site like products and services description.
The layout of the site must ensure easy access to the detailed information and specific information
they seek.
Text paragraphs should always be kept at reasonable lengths.
If there is a lot of content to be displayed on a webpage, then try to split it into small text blocks, this way visitors will be easily able to pick out the content they need to know.
The navigation in the website should also be made as easy as possible.
Moving from one page to another should be easy so that the user knows where he is and how to get back to home page.
Ensuring that appropriate information (both general and detailed) is available and easily accessible ensures that site can serve its intended purpose.
A website is a valuable tool for businesses and other organizations when composed of the right material (content).
As with other tools, the website can perform an outstanding job.

Question 6.
Why is the home page of the website named as index.html ?
Answer:
Generally, whenever we create the home page of the website it is named as index.html. Every website is built inside directories on a web server and each webpage is a separate file on that web server. Whenever the user types the URL of the website in the browser, say for example, www.schoolplaza.com, he/she does not specify the file to be opened. But the web server needs a default file name in order to display some content. This default file is the page named index.html. Thus, when we type a URL without the filename, the server looks for the default file and displays it automatically.

Question 7.
Which are the options available to set the table properties ?
Answer:

Size : It shows the number of rows, columns and height and width of the table. Height and width can be specified in pixels or % of the window.
Borders and Spacing : It shows the border option in case you want to give a border to the table. Spacing is used to specify gap between cells. Padding gives a gap between the edge of the cell and the text within it.
Table Alignment : To align the table as left, centre or right.
Caption : Used to give caption to table if require.
Background Color : To give a background color to the table.

Question 8.
What is a Cookie ?
Answer:
A cookie is a variable that is stored on the user’s computer. They are useful as they provide feature to remember and track preferences, purchases, commissions and other information required for better visitor experience or site statistics.

Question 9.
What do you mean by publishing a website ?
Answer:
To publish a website means to transfer the webpages, images and stylesheets related to the site, to a web server from which they may be accessed by the users. This process is generally called ‘Uploading’.

Question 10.
Name some of the open source web development tools available in the market.
Answer:
The open source web development tools available in the market are :

KompoZer
Aptana Studio
BlueGriffon
Amaya

Question 11.
Choose the most appropriate option from those given below :

1) Which of the following helps in promoting the business, selling the products and attracting a large number of customers ?
(A) Website
(B) Webpage
(C) Form
(D) CSS
Answer:
(A) Website

2) Which of the following is not an important point to be considered for developing a good website as part of planning process ?
(A) Purpose
(B) Audience
(C) Content
(D) Input
Answer:
(D) Input

3) Which of the following information should a website contain ?
(A) Complete, Relevant
(B) Complete, Irrelevant
(C) Incomplete, Irrelevant
(D) Incomplete, Relevant
Answer:
(A) Complete, Relevant

4) Which of the following content provides an overview of the site, organization, products and services and other items ?
(A) Detailed
(B) Long
(C) General
(D) Short
Answer:
(C) General

5) Which of the following is a collection of interlinked webpages ?
(A) Webpage
(B) Form
(C) KompoZer
(D) Website
Answer:
(D) Website

6) Which of the following is the first page that opens when the user enters the URL address in the address bar of the browser ?
(A) Home page
(B) Last page
(C) Web page
(D) First page
Answer:
(A) Home page

7) Which of the following filename is the home page of the website saved as ?
(A) first.html
(B) index.html
(C) home.html
(D) one.html
Answer:
(B) index.html

8) Which of the following is a variable that is stored on the user’s computer ?
(A) Integer
(B) HTML
(C) Cookie
(D) Java
Answer:
(C) Cookie

9) Which of the following stands for FTP ?
(A) File Truncate Protocol
(B) File Transfer Process
(C) Fine Tune Protocol
(D) File Transfer Protocol
Answer:
(D) File Transfer Protocol

Computer Class 12 GSEB Notes Chapter 3 Designing Simple Website using KompoZer

Creating a Website
Making a Home Page :

The home page of our website should list all the categories of the items that are available.
Clicking on any one of the categories will take us to another webpage showing the items of that particular category.
To create the website, various designs which are known as templates are freely available on Internet.
We can easily download the templates and can customize them as per our needs.
To start with the designing of home page, open KompoZer and create a new webpage.
To organize all the contents and the images related to the theme we will insert a table with single cell as shown in the figure.
The table will contain all the text and the images related to the website.
To insert the table go to Insert → Table.
Select single cell table and press OK button.

Save the webpage with a suitable title. The title will be displayed on the title bar of the web browser. Here, we have given the title as “School Plaza” Save the file with the name “index.html”.
Generally, whenever we create the home page of the website it is named as index.html. Every website is built inside directories on a web server and each webpage is a separate file on that web server.
Whenever the user types the URL of the website in the browser, say for example, www. schoolplaza.com, he/she does not specify the file to be opened. But the web server needs a default file name in order to display some content.
This default file is the page named index.html. Thus, when we type a URL without the filename, the server looks for the default file and displays it automatically.
Now, we will give a background color to the inserted table. Select the table and double click it. Alternatively, we can also right-click the table and select ‘Table Cell properties’.
This will open Table Properties dialog box as shown in figure.

You can see two tabs ‘Table’ and ‘Cells’ which allows user to control several aspects of either the table or individual cells.
You can see the cells related to a particular table.

The options seen in the table tab are :

1. Size : It shows the number of rows, columns and height and width of the table. Height and width can be specified in pixels or % of the window.
2. Borders and Spacing : It shows the border option in case you want to give a border to the table. Spacing is used to specify gap between cells. Padding gives a gap between the edge of the cell and the text within it.
3. Table Alignment : To align the table as left, centre or right.
4. Caption : Used to give caption to table if require.
5. Background Color : To give a background color to the table.
Now select a background color of your choice as shown in figure.

Now, to display the text “School Plaza” and the related image, we will insert another table with one row and two columns.
One of the columns will display the text and the other displays the image. Go to Insert Table. Select 1 × 2 table as shown in figure and press OK button.

Give a background color to the table. Now in the left cell we will insert the text and in the right cell the image. To insert image, select Insert → Image. Alternatively, you can click the image icon on the toolbar. This will open the dialog box as shown in figure.

Specify the location of the image. Specify the alternate text in the input box otherwise select the “Don’t use alternate text” radio button in case you do not want to give alternate text. Giving alternate text will display the text in case the image is not displayed in the browser.
Note : We have used an image named 01-go-to- school_590.jpg. Students may design their own image or use any other alternative image of their choice.
Now, select the Dimensions tab and select the Custom Size option. As we want to display the image in the whole cell we will specify the height and the width as 100% of the cell as shown in figure.

Insert the text as shown in figure in another cell.

Figure shows the inserted text and the image. Now, we will insert another table with 2 rows and 2 columns to display the categories and New Products. In the first row cells, type the text “Categories” and “New Products”. Give a suitable color to the text by going to Format → Text color. Figure shows the row with the text.

Next, in the second row just below the categories we will insert another table with single column and multiple rows. In this table, we will insert different categories in each row like school bag, water bottle and others.
Give a suitable color to the text. Here we have inserted a horizontal line to differentiate the categories. To insert a horizontal line, go to Insert → Horizontal lines. Also, the categories will be a link which takes us to the related page of the selected category.
We will make the link on the categories later on. Let us now create table to add the images of the items and the related details in the cell below the new products. Insert the table depending on the items we want to display on the page. Here we have inserted a table with 3 rows and 3 columns. Figure shows the added tables in the webpage.

Next, we will insert another table at the bottom of the page for the details like “About school plaza”, “Feedback”, “Contact us” and “Site map”. Create the table and insert the text. This text will also be a link. We have designed most of the home page. Whenever we click on any of the categories, the design of the page remains the same, but the images related to the category are changed.
Thus we need not create other webpages from scratch but make multiple copies of our home page which can then be customized as per our need. Go to Save As option and save the file with different names. We have saved the file as waterbottles.html, school-bags.html and lunchbox.html.
Now when the link of a particular category is clicked the corresponding webpage will be opened. You must have observed that the webpages thus created have the same title as that of the home page. Open the webpages one by one and change the page title by going to Format → Page Title and Properties.
Now, open the respective webpages and put the images as per the category. We will add the images on the ‘home page and the same way they can be added to other webpages also. Before inserting images of the items and their details on the home page, let us create link on the different categories.
Clicking on a category will open the related webpage. Open the index.html. To create link, select the text (School Bags), go to Insert → Link. This will open a dialog box as shown in figure.

Under the Link Location option, select the file to be opened (school-bags.html). Press OK button.
Now, let us insert the details of the new products in the home page. In each cell of the table, we will insert an image of the item, name of the item, price and add to cart checkbox and quantity textbox. Insert the image as discussed earlier. Add the product name and price.
Now, insert a checkbox by going to form field. We will add an HTML attribute “id” named bl to the checkbox which will be used in JavaScript later on. Add the label “Add to cart”.
Then, insert textbox with initial value 1 and an id “ql”. Add the label “Quantity”. When the user selects add to cart checkbox, the item and its quantity are saved in the shopping cart.
Figure shows the details of the products added.

Note : Add the images related to the category on the webpages that we have created. Rest of the features remains the same.
We have not shown the other webpages here. We will add a button “Purchase” at the bottom of the page which will take us to the bill details webpage. This page displays the total items purchased and the total amount. On the buttons onclick event we will add a JavaScript shown in code listing. It calls the function oncartO, the function oncart(), will then call the bill webpage.

<script>
function oncart()
{
var check = false;
var cookievalue="";
if (document. getElementByld ("b1"). checked)
{
check=true;
var quantity=document.getElemenById("q1"). value;
var price = 399;
var total = (price* quantity);
cookievalue+=":Girls pink bag," + price + ","+ quantity +"," + total;
}
if (document.getElementById("b2"). checked)
{
check=true;
var quantity=document.getElement(ById("q2").value;
var price = 410;
var total=(price*quantity);
cookievalue+=":Boy's Blue bag," + price + "," quantity + "," + total;
}
if (document.getElementById("b3"). checked)
{
check=true;
var quantity=document.getElementById("q3").value;
var price = 500;
var total=(500*quantity);
cookievalue+=":Bheem bag," + price + quantity + "," + total;
}
if (document.getElementById("nb1"). checked)
{ '
check=true;
var quantity=document.getElementById("q4").value;
var total = (50*quantity);
cookievalue+=":NoteBook (set of 3)," + total;
}
if (document.getElementById("cp1").checked)
{ ’
check=true;
var quantity=document.getElementById("q5"). value;
var total=(45*quantity);
cookievalue+=":Color pencils,"+total;
}
if (document.getElementById"p1"). checked)
{
check=true;
var quantity=document.getElementById("q6").value;
var total=(80*quantity);
cookievalue+=":Pencil Box," + total;
}
if (document.getElementById("11"). checked)
{
check=true;
var quantity=document.getElementById("q7").
value; var total=(110*quantity);
cookievalue+=":Angry Bird Lunch box," + total;
} "
if (document.getElementById("12"). checked)
{ ~
check=true;
var quantity=document.getElementById("q8").
value; var total=(120*quantity);
cookievalue+=":cartoon lunch box," + total;
}
if (document.getElementById("e1"). checked)
{ '
check=true;
var quantity=document.getElementById("q9").value;
var total=(50*quantity);
cookievalue+=":Eraser (set of 4)," + total;
}
if (! check)
{
alert("No item selected");
}
else
{
document.cookie=cookievalue;
window.location="bill.html";
}
}
</script>

Code Listing : Validation JavaScript

Explanation :

As seen in the code listing we have a function oncart(). The first if statement block checks whether the checkbox for iteml is checked or not. Earlier we have given an id named “bl” to the checkbox of iteml.
Using document.getElementByID(“bl”).checked, we will check whether the user has checked the item. If it is checked then we will save the quantity into a variable and calculate the total price. We finally save the product name, price, quantity and amount as a string in a’ variable. Each of the details are separated with a delimiter “, ” (comma). Individual product description is separated with delimiter “: ” (colon).
The script continues for each item listed. If the user has not selected any of the items then pressing the purchase button will show a message with text “No item is selected”. Otherwise, the items are saved as cookie. A cookie is a variable that is stored on the user’s computer.
They are useful as they provide feature to remember and track preferences, purchases, commissions and other information required for better visitor experience or site statistics. JavaScript can manipulate cookies using the cookie property of the document object. Cookies can be read, created, modified and deleted.
When the user clicks on the Purchase button, the script calls the webpage “bill.html”. The JavaScript in bill.html will calculate the total of all the items selected along with the total amount to be paid. Code listing shows the JavaScript that calculates the total “amount. Here we have defined a function myfun(). The function is accepting data from cookie and storing it in an array. Then we are converting the data into number by using function parseFloatO and add it to total. Finally we print the values of the total,

function myfunQ {
var cookiearr=new Array ();
cookiearr=document.cookie.split(":");
document.writeln("<center><h1>welcome to Billing </h1></center>");
document. write("<center><table
border=3><thead><tr><th>Description</th><th>Price</th><th>Quanity</th><th>Total</th></tr></
thead>");
var total2=0;
vartotal3=0;
for(var i=l;i<cookiearr.length;i++)
{
var cookiedata=cookiearr[i].split(",");
document. writeln("<tr><td>"+cookiedata[0]+"</td><td>"+cookiedata[1]+
"</td><td>"+cookiedata[2]+"</td><td>"+cookiedata[3]+"</td><td>");
total2+=parseFloat(cookiedata[2]);
total3+=parseFloat(cookiedata[3]);
}
document.writeln("<trxtd>Total</tdxtd>"+" "
+"</tdxtd>"+total2+"</tdxtd>"+tota!3+"</tdx/td>");
document. write("</tbody></table></center>");
}
</script>

Code listing : JavaScript to calculate total amount

Finally, the user clicks on the Proceed to Checkout button on the bill webpage. This will ask the user to login in case he/she has not logged in or Sign-up to create an account if he/she is not a registered user.

Publishing a Website

To publish a website means to transfer the webpages, images and stylesheets related to the site, to a web server from which they may be accessed by the users. This process is generally called ‘Uploading’.
We can upload the website if we have an account on the web server. The Internet Service Provider (ISP) offers limited free space on the web server. We can also buy space from professional hosting providers. Alternatively, to upload the website, there are many web hosts that provide limited free space to the users. The free space can also be for a limited time period. We can register on these sites and can avail the free space.
In our sample website example we have opted one of these free space provider and uploaded the website. To publish a site, we need to know the settings for the space to set up the system. Open the index.html page and go to File → Publish. This will open a Publish Page dialog box as shown in figure.

The following details are to be provided in settings tab of Publish Page dialog box.
(1) In the site name field, enter the name of the website. This name is only used for internal purpose by KompoZer to refer to the website.
(2) In the website information, “HTTP address of your home page” field specify the actual web address or URL of the website.
Note : We can register a domain on Internet. There are many websites on Internet wherein we can register a domain name, for example : www.schoolplaza.com, for our website by paying nominal cost.
(3) Publishing server details are provided by the ISP or the web host from where we have purchased the space. Type the publishing address. If connecting via FTP then type in FTP address. File Transfer Protocol(FTP) is the means by which we can transfer the webpages from our computer to the web host. As discussed earlier, this is known as uploading or publishing. Provide the FTP username and password.
Note : The detail shown in figure has been provided by the web host providing the free space. Now click on Publish tab of figure. This will open a dialog box as shown in figure.

Perform the steps mentioned below :

Select the site name from the drop down box if it is not selected.
Enter Page Title, it refers to the title of our index.html page.
Provide the filename. Here, as index.html file is open, it will take the filename automatically.
If this webpage needs to be in a sub-directory of your site, enter in the “Site subdirectory” field. Remember that some hosting providers require that you keep the webpages in a separate directory like public_html.
Specify the directory for the images. Generally, keep the images in a folder in the same directory.
Click Publish button. This will open Publishing dialog box as shown in figure.

KompoZer will now upload the files and a popup message will be shown when finished. After uploading, type the URL of the website in the browser and check the website.

Other open source web development tools

KompoZer is a free open source web development IDE.
Just like KompoZer, we have many other open source web development tools which are freely available on Internet. Aptana studio, BlueGriffon and Amaya are open source web development tools that are available easily on the net and are used by web developers to develop websites with ease.

(1) Aptana studio :

Aptana studio is a powerful open source IDE (Integrated Development Environment) for building web applications. It is a complete web development environment which provides language support for HTML, CSS, JavaScript, Ruby, Rails, PHR Python and many others.
It also comes along with a large number of additional plug-ins. Aptana Studio 2.0.5 (also known as Aptana studio2) is currently used to develop web applications using HTML, CSS and JavaScript.
It can be easily downloaded from its website www.aptana.com.

Figure shows the Aptana studio interface. As seen in the figure it can create projects in PHR Rails, Ruby or Web.
Figure : Aptana Studio Interface

(2) BlueGriffon:

BlueGriffon is another free open source WYSIWYG HTML editor. It can be easily downloaded from www.bluegriffon.org.
It supports languages like English, Dutch, German, Chinese and many more.
It is an intuitive application that provides web developers with a simple user interface which allows them to create attractive websites without requiring in depth technical knowledge about web standards.
Figure shows the interface of BlueGriffon version 1.6.2. We have created a simple form using the tools.

(3) Amaya :

Amaya is another free open source WYSIWYG web editor developed by the World Wide Web Consortium (W3C). It was initially started as an HTML/CSS editor and has now grown into an editor for many XML- based systems.
It can be easily downloaded from www.w3.org/Amaya. 3.20 shows a webpage created in Amaya. The source for the webpage can be seen in the window just below the design of the webpage.

GSEB Computer Textbook Solutions Class 12 Chapter 3 Designing Simple Website using KompoZer

Computer Class 12 GSEB Notes Chapter 3 Designing Simple Website using KompoZer

Leave a Comment Cancel Reply