Class IX · Chapter 76 min read
Share:WhatsAppLinkedIn

Chapter 7: Project

Class: IX | Subject: Information and Computer Technology

Key Concepts

Website Development Guidelines

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

  1. Identify the problem, understand what the website is about.
  2. Analyze the problem, determine which web pages need to be created.
  3. Design, pay attention to layout, typography, and images.
  4. Use standard font styles so that all browsers support them.
  5. Strong design, user-friendly navigation, clear and consistent layout, professional appearance.
  6. Proper use of colours, background and font colours should complement each other.
  7. Include at least one image, scanned photo, digital photograph, or graphic/artwork.
  8. Respect copyright, do not violate copyright laws with images.
  9. ALT tags on all images, must be well placed and working correctly.
  10. Appropriate titles on every page.
  11. Consistent navigation menu on each page, functional links to all other main pages.
  12. Test all links, visit every page and verify links work correctly.
  13. Cross-browser testing, test across multiple browsers (Internet Explorer, Firefox, Safari) and operating systems (Windows, iOS).

Sample Case Studies

The textbook provides four complete project examples with HTML source code:

Project 1: Favourite Cartoon Character (Tom & Jerry)

Structure: Homepage + linked pages (Home, Tom, Jerry, About Us, Video, Contact Us)

Techniques demonstrated:

  • Background colour with hex code: bgcolor=#7aafef
  • Link colours: alink="green" vlink="white" link="red"
  • Background audio: <embed src="audio.mp3" autostart="true" height=1 width=1>
  • Navigation bar using anchor tags with pipe separators, Image gallery with multiple <img> tags, Video embedding: <embed src="1.avi" height=300 width=300>
  • Copyright footer using &copy; entity, Font styling with face, size, and colour attributes

Project 2: Bollywood Music Personality (Kishore Kumar)

Structure: Homepage + Videos page + Contact Us page

Techniques demonstrated:

  • Custom fonts: face="Calligraph421 BT"
  • Bold and italic styling: <b><i>...</i></b>
  • Image sizing: height=250 width=350
  • Scrolling image gallery: <marquee> tag with scroll settings, Navigation using table layout with links, Multiple video embeds: <embed src=Video1.mp4>
  • Colour coding with hex values

Project 3: Food Point Website (Eating Paradise)

Structure: Homepage + Videos page + Contact Us page

Techniques demonstrated:

  • Background colour: bgcolor=#abe764
  • Interactive marquee: onmouseover="this.stop()" onmouseout="this.start()"
  • HTML entities: &copy;, &#36; (dollar sign), &amp;, &euro;
  • Image sizing with multiple images in a row, Centered video embedding, Horizontal rule with colour: <hr size=10 width=100% color=#fcac28>
  • Table layout for navigation and content

Project 4: Festivals of India

Structure: Homepage + Contact Us + Diwali + Dussehra + Holi + Feedback pages

Techniques demonstrated:

  • Table-based layout: <table>, <tr>, <td> with attributes (width, height, bgcolor, cellpadding, valign, align, rowspan), Image border: border=2, border=3
  • Photo gallery using <marquee> with scrollamount and loop, Unordered list of festivals with some linked: <a href="Diwali.htm">Diwali</a>
  • Multiple page linking to home page, Non-breaking space: &nbsp;
  • Underline tag: <u>Diwali</u>
  • Feedback page concept, Footer with copyright and "All Rights Reserved" notice

Code/Syntax Examples

Typical Homepage Structure (Delhi Project from Chapter 5)

This is a simpler project example provided earlier in the textbook:

<html>
<head>
  <title>Visit Delhi</title>
</head>
<body bgcolor="lightgreen" text="darkblue">
  <center>
    <font face="Bookman Old Style">
      <img src="delhimap.jpg" align="left">
      <h1 align="center">My City Delhi</h1>
    </font>
    <font size="4">
      <p>This is my homepage. This page describes about the Delhi City.</p>
      <p>Delhi is the capital of
        <b><font color="Magenta">India</font></b>,
        the country with many traditions...
      </p>
      <hr>
    </font>
  </center>

  <!-- Image links to other pages -->
  <a href="indiagate.html" target="_blank">
    <img src="indiagate.jpg" align="right" alt="The Indian Gate">
  </a>
  <a href="connaught.html" target="_blank">
    <img src="connaught.jpg" align="left" alt="CP">
  </a>

  <!-- Unordered lists -->
  <b>Monuments in Delhi</b>
  <ul>
    <li>Akshardham Temple</li>
    <li>Lotus Temple</li>
    <li>India Gate</li>
  </ul>
</body>
</html>

Typical Linked Page Structure

<html>
<head>
  <title>About Connaught Place</title>
</head>
<body text="darkblue">
  <h1 align="center">CONNAUGHT PLACE</h1>
  <font face="arial">
    <img src="connaughtnight.jpg" align="left">
    <p><b>Connaught Place</b>, also called as <b>CP</b>,
       is located at the heart of New Delhi.</p>
    <p>It was built in <b>1931</b>.</p>
  </font>
</body>
</html>

Common HTML Entities Used in Projects

Entity Symbol Description
&copy; (c) Copyright symbol
&amp; & Ampersand
&nbsp; Non-breaking space
&#36; $ Dollar sign
&euro; EUR Euro sign

Key Points

  1. Always start by identifying the problem and analyzing which pages are needed.
  2. Use standard fonts and consistent layout across all pages.
  3. Every image must have an ALT tag for accessibility.
  4. Test the website across multiple browsers and operating systems.
  5. Include a navigation menu on every page linking to all other main pages.
  6. A typical school project website has 3-5 pages: Homepage, Content pages, Contact Us, and optionally Video/Feedback pages.
  7. Use GIMP to edit and enhance images before including them in the website.
  8. Images as hyperlinks are created by wrapping <img> inside <a> tags.
  9. Use <marquee> for scrolling image galleries (note: this is a non-standard HTML tag).
  10. HTML entities like &copy; and &nbsp; are useful for special characters and spacing.
  11. The target="_blank" attribute opens linked pages in new windows, keeping the homepage accessible.
  12. Consistent colour schemes, font choices, and footer sections create a professional-looking website.

Practice Activities

  1. Cartoon Character Website: Create a multi-page website about your favourite cartoon character with homepage, character pages, video page, and contact page. Use GIMP for image effects.

  2. Bollywood Personality Website: Build a website about a music personality with introduction, contribution pages, video page, and contact page. Use image galleries and audio embedding.

  3. Food Point Website: Design a website displaying nutritious food items with homepage, video page, and contact page. Include scrolling image galleries.

  4. Festivals of India Website: Create a website depicting Indian festivals with homepage linking to individual festival pages. Include photo gallery, feedback page, and consistent navigation.

General Project Tips, Plan the site structure before writing code (draw a sitemap)., Keep all HTML files and images in the same folder for easy relative linking., Use consistent colour schemes and font families across all pages., Always include a link back to the homepage on every page., Add a copyright footer on every page., Test every link and every image before submitting.

Test Your Knowledge

Take a quick quiz on this chapter

Start Quiz →

Prefer watching over reading?

Subscribe for free.

Subscribe on YouTube