← Back to Overview

🏗️ Website Preparation with KompoZer

Website preparation with KompoZer is the process of creating a structured, multi-page HTML website by building a reusable page template and duplicating it for each section. This is a core practical topic in GSEB Std 12 Computer Studies, teaching file organization, layout design, navigation, and consistent page styling.

Following these steps will help you create a consistent, linked website starting from a single homepage template.

---

Phase 1: Setup & The Homepage

Step 1: File Organization 📁

• Copy all necessary images and assets from the KompozerEx folder on your Desktop (or download KompozerEx Assets Package) into your specific project folder using your File Manager.

Step 2: Define Page Identity 🏷️

• In KompoZer, go to Format > Page Title and Properties. Enter your Title (e.g., Fruit Bazaar) and the Author.

Step 3: Save the Home Page 💾

• Save this file as index.html inside your project folder.

Note: The homepage must be named index.html for web browsers to recognize it as the main entry point.

GSEB Board Exam Tip

In GSEB theory (OMR) and practical exams, remember that the main entry file of any website MUST be named index.html in lowercase.

Step 4: Create the Main Layout 📊

• Go to Insert > Table. Create a 2x2 table.
  • Set Width to 100%.
  • Set Border to 1.

GSEB Board Exam Tip

Setting Width = 100% ensures your layout expands to fit the full width of any browser screen.

Step 5: Designate Content Areas 🗺️

• Use the table cells to create space for your:
  1. Top Left: Logo/Brand
  2. Top Right: Main Heading/Slogan
  3. Bottom Left: Categories Sidebar
  4. Bottom Right: Main Content/Product Images

---

Phase 2: Styling & Assets

Step 6: List Your Categories 📑

• In the Sidebar (bottom-left cell), type your category titles (e.g., Fruits, Vegetables).
  • Use Size 12 for the main title.
  • Use Size 10 for the individual list items.

Step 7: Define Headings ✍️

• Type your main page heading and set it to Heading 1 (h1) using the format toolbar.

Step 8: Apply Global Styles (CSS) 🎨

• Open the CSS Editor (top toolbar) to define styles for h1, h2, and h3. This ensures all headings look identical across the whole site.

Step 9: Insert the Logo 🖼️

• Go to Insert > Image. Select your logo file.
  • Important: While the image is selected, click the Link tab and link it to index.html. This allows users to click the logo to go home.

---

Phase 3: Building the Catalog

Step 10: Create the Product Grid 🧺

• Inside the 4th cell (bottom-right), right-click and select Table > Insert > Table. This "nested table" will hold your product thumbnails.

GSEB Board Exam Tip

A table inserted inside another table cell is called a Nested Table. This is a favorite practical exam question for organizing product grid items!

Step 11: Add Product Images 🍎

• Insert your category images into the new table. Right-click each image to Specify Dimensions so they all look uniform.

Step 12: Duplicate for New Pages 👯

• Close KompoZer and go to your File Manager. Copy and paste index.html multiple times. Rename these copies to match your categories (e.g., apple.html, orange.html).

Step 13: Create the Navigation Link 🔗

• Back in KompoZer on index.html, highlight the text for a category (e.g., "Apple") and link it to the corresponding file (e.g., apple.html).

---

Phase 4: Customizing Category Pages

Step 14: Edit Individual Pages ⚙️

• Open each new file (like apple.html) in KompoZer and update:
  • Heading: Change to "Apple - Fruit Bazaar."
  • Page Title: Update in Format > Page Title and Properties.
  • Cleanup: Remove images that don't belong in this category. Right-click a cell > Table > Delete > Rows.
  • Add Details: For each product, add:
    • Name & Description
    • Price & Quantity Text
    • Form Field: Add a Textbox for quantity and a Checkbox for "Add to Cart."

Step 15: Final Sync 🔄

• Ensure the category links on your index.html are updated and point correctly to all your new sub-pages.

---

Frequently Asked Questions

What is website preparation in GSEB Std 12?

Website preparation covers planning, organizing files, and creating multiple linked HTML pages in KompoZer — starting from a homepage template and duplicating it for all sections.

Why must the homepage be named index.html?

Browsers automatically serve index.html when a folder URL is visited. Without this exact name, the browser cannot find your site's starting page.

How do you create a multi-page website in KompoZer?

Build the homepage (index.html) as a layout template first, then use File > Save As to duplicate it for each new page (products.html, contact.html, etc.). Customize only the content area on each copy.

What is the 2x2 table structure used in GSEB Std 12?

A 2-row × 2-column table at 100% width: the top row spans both columns as the header, the left column holds navigation links, and the right column holds the main content.

---

🔗 Related Topics

• Chapter 1: HTML Forms with KompoZer — build interactive forms for your website pages
• HTML Tutorial — Tables & Layout — deeper reference for table-based layouts
• GSEB Std 12 Overview — complete chapter index and exam guide