Chapter 7: Project

Class: X | Subject: Information and Computer Technology

Key Concepts

Website Development Guidelines

Once you have understood all HTML tags and the basics of GIMP, you are ready to make web applications. The following specifications must be considered:

Identify the problem, understand what the website is about.
Analyse the problem, get a clear idea about the web pages to be created.
Pay attention to design, layout, typography, and images.
Use standard font styles so all browsers support them.
Strong design, user-friendly navigation, clear and consistent layout, professional appearance.
Proper use of colours, appropriate background and font colours.
Include at least one image, scanned photo, digital photograph, or graphic/artwork created by you.
Respect copyright laws, do not use images that violate copyright.
Alt tags on all images, well placed and working correctly.
Appropriate titles, each page must have a title.
Consistent navigation menu, on each page with functional links to all other main pages.
Test all links, visit every page and verify all links work.
Cross-browser testing, test across multiple browsers (Internet Explorer, Firefox, Safari) and operating systems (Windows, iOS/macOS).

Website Structure Best Practices

Create a folder to store all project files in one place., Use a consistent navigation bar across all pages (e.g., Home | Contact Us | Feedback)., Include a feedback form on the website., Use GIMP to edit and apply effects to images before including them., Include a photo gallery section where appropriate., Use tables for layout structure (header area, navigation column, content column)., Add a footer with links, copyright notice, and creator information.

Sample Case Studies

The textbook provides three fully worked-out website projects with complete HTML code:

Case Study 1: Festivals of India

Structure: Home page with links to festival pages (Diwali, Dussehra, Holi, Eid, Christmas, etc.).
Features:
Header table with image and styled title.
Navigation bar with links.
Photo gallery using <marquee> for scrolling images.
Two-column layout using tables (content area + sidebar with festival list).
Individual festival pages with descriptions and images.
Feedback page with form (text fields, radio buttons, submit button).
Consistent footer across all pages.
Techniques demonstrated: Table-based layout, <marquee>, <a href> links, bgcolor, rowspan, <form>, radio buttons, submit button.

Case Study 2: Global Warming, Effects and Prevention

Structure: Home page linking to Effects, Prevention, and Feedback pages.
Features:
Background images on pages.
Navigation bar.
Image and text side-by-side using tables.
Effects page describing climate change impacts.
Prevention page with practical suggestions.
Feedback form with text fields, radio buttons, textarea, and submit button.
"Click to Go Back" links.
Techniques demonstrated: background attribute on body, table-based two-column layout, <textarea>, method="get" on forms.

Case Study 3: London Olympics 2012

Structure: Home page with links to Mascots, Performance of Countries, and Venues pages.
Features:
Background image using background attribute.
<marquee> for scrolling sports images.
<hr> for horizontal rules with size and noshade.
Navigation using <div> and <ul>/<li>.
Medal information page.
Venue page with full-width image.
Techniques demonstrated: <div> for navigation, <ul>/<li> for menu items, image sizing, <center> alignment.

Case Study 4: Travel and Tourism (India)

Structure: Home page linking to city pages (Goa, Ladakh, Taj Mahal, Mumbai) plus Contact and Feedback.
Features:
Banner image spanning full width.
Navigation bar using a table with links.
City pages with image and description side-by-side.
Contact Us page with address information.
Feedback form with text fields, radio buttons, and submit button.
Techniques demonstrated: Full-width images, table-based page layouts, multiple linked pages, consistent navigation.

Important Definitions

Term	Definition
Alt Tag	Alternative text attribute for images; displayed when the image cannot be loaded
Navigation Menu	Consistent set of links present on every page allowing movement between pages
Cross-browser Testing	Checking website behaviour across different browsers and operating systems
Feedback Form	A form on the website that allows users to submit their comments/opinions
Layout	The arrangement of visual elements on a web page
Typography	The style, arrangement, and appearance of text on a page

Code/Syntax Examples

Basic Website Page Template

<html>
<head>
  <title>Page Title</title>
</head>
<body bgcolor="white">
  <!-- Header -->
  <table width="100%" bgcolor="#F2AC28" cellpadding="10">
    <tr>
      <td width="35%"><img src="logo.jpg" height="50" border="2"></td>
      <td align="right"><font face="trebuchet ms" color="maroon" size="6">
        <i>Website Title</i></font>
      </td>
    </tr>
  </table>

  <!-- Navigation Bar -->
  <table width="100%" height="35" bgcolor="#F2AC28">
    <tr>
      <td align="center">
        <font face="trebuchet ms" color="maroon" size="4">
          <a href="index.htm">Home</a> |
          <a href="about.htm">About</a> |
          <a href="contact.htm">Contact</a> |
          <a href="feedback.htm">Feedback</a>
        </font>
      </td>
    </tr>
  </table>

  <!-- Content Area -->
  <table width="100%" cellpadding="20">
    <tr>
      <td width="65%">
        <p align="center"><img src="main.jpg" height="300" width="300" border="3"></p>
        <font face="trebuchet ms" color="blue" size="4">
          <p align="justify"><i>Description text goes here...</i></font>
      </td>
      <td width="35%" bgcolor="#F2AC28" valign="top">
        <font face="trebuchet ms" color="maroon" size="5"><u>Sidebar</u>:</font>
        <ul>
          <li><a href="page1.htm">Link 1</a></li>
          <li><a href="page2.htm">Link 2</a></li>
        </ul>
      </td>
    </tr>
  </table>

  <!-- Footer -->
  <hr>
  <p align="center">
    <font face="trebuchet ms" size="2">
      Home | Privacy Policy | Terms of Service | Feedback<br>
      2014 &copy; Website Name | All Rights Reserved
    </font>
  </p>
</body>
</html>

Scrolling Image Gallery with Marquee

<table width="100%" border="3">
  <tr>
    <td><font face="trebuchet ms" size="3">Photo Gallery</font></td>
  </tr>
  <tr>
    <td>
      <marquee scrollamount="8" behavior="scroll" loop="100">
        <img src="img1.jpg" height="100" width="100">
        <img src="img2.jpg" height="100" width="100">
        <img src="img3.jpg" height="100" width="100">
      </marquee>
    </td>
  </tr>
</table>

Feedback Form

<form method="get" action="html_form_action.asp">
  First Name: <input type="text" name="First Name"><br>
  Last Name: <input type="text" name="Last Name"><br>
  E-Mail Address: <input type="text" name="E-Mail Address"><br><br>

  <u>Gender:</u><br>
  <input type="radio" name="sex" value="male">Male<br>
  <input type="radio" name="sex" value="female">Female<br><br>

  <u>How Would You Rate Our Website:</u><br>
  <input type="radio" name="rating" value="excellent">Excellent<br>
  <input type="radio" name="rating" value="very good">Very Good<br>
  <input type="radio" name="rating" value="good">Good<br>
  <input type="radio" name="rating" value="acceptable">Acceptable<br>
  <input type="radio" name="rating" value="bad">Bad<br><br>

  <input type="submit" value="Submit">
</form>

Two-Column Layout with Image and Text

<table width="100%">
  <tr>
    <td width="50%">
      <img src="photo.jpg" height="350" width="450" border="3">
    </td>
    <td width="50%">
      <font face="calibri" size="5">
        <b>Description of the place or topic goes here...</b>
      </font>
    </td>
  </tr>
</table>

Key Points

Plan your website before coding: identify the problem, analyse pages needed, design layout.
Use standard fonts for cross-browser compatibility.
Every image must have an alt tag for accessibility.
Each page needs a title and consistent navigation menu.
Test all links and test across multiple browsers and operating systems.
Use GIMP to prepare and edit images before including them in the website.
Do not use images that violate copyright laws.
Tables are the primary layout mechanism used in these projects (this is a 2014 textbook; modern practice uses CSS Grid/Flexbox).
The <marquee> tag creates scrolling content (deprecated in modern HTML but covered in this textbook).
A feedback form should include appropriate input types: text fields, radio buttons, and a submit button.
Organise all project files in a single folder.

Practice Questions

Project Tasks from the Textbook:

Festivals of India: Create a website depicting different festivals. Home page should link to all festival pages. Each page should link back to the home page. Include a feedback form. Use GIMP to edit images.
Global Warming: Create a website on "Global Warming, its effects and prevention." Include links between pages, a feedback form, and GIMP-edited images.
London Olympics: Create a website on London Games. Include links to various games, results, a feedback form, and GIMP-edited images.
Travel and Tourism: Create a website on Travel and Tourism of India. Include links to destination pages, a feedback form, and GIMP-edited images.

Checklist for Project Evaluation: