Assignment 1: Basic HTML Website

Published

February 2, 2026

Overview

Create a multi-page website about a topic of your choice using only HTML5. This assignment will help you practice HTML structure, semantic elements, links, images, lists, and tables.

Due Date: February 11, 2026, 11:59 PM
Points: 100
Estimated Time: 6-8 hours

Learning Objectives

By completing this assignment, you will:

  • Practice writing valid HTML5 documents
  • Use semantic HTML5 elements appropriately
  • Create multi-page website navigation
  • Work with images, links, lists, and tables
  • Understand proper HTML document structure

Requirements

1. Topic Selection

Choose ONE of the following topics (or propose your own):

  • Your hobbies or interests
  • A technology or programming language
  • A historical figure or event you find interesting
  • A travel destination guide
  • A recipe collection
  • A tutorial on something you’re knowledgeable about

2. Website Structure

Your website must include at least 4 pages:

  1. Home Page (index.html)
    • Welcome message
    • Brief introduction to your site
    • Navigation to all other pages
    • At least one image
  2. About Page (about.html)
    • Detailed information about your topic
    • Multiple sections with headings
    • At least 2 images
    • Use of lists (ordered or unordered)
  3. Gallery/Details Page (gallery.html or similar)
    • Multiple images with captions (using <figure> and <figcaption>)
    • Organized layout
    • Descriptive alt text for all images
  4. Contact/Additional Page (contact.html or similar)
    • Contact information or additional content
    • A table displaying relevant information
    • Links to external resources (if applicable)

3. Technical Requirements

Your website MUST include:

    • <header>, <nav>, <main>, <footer>
    • <article> and/or <section>
    • <aside> (if appropriate)

Content Guidelines

Images

  • Use appropriate file names (lowercase, no spaces)
  • All images must have descriptive alt text
  • Create an images/ folder for organization
  • Use web-appropriate image formats (JPEG, PNG, GIF)
  • Consider image file sizes (keep under 500KB each)

Text Content

  • Write meaningful, relevant content (minimum 500 words total)
  • Use proper grammar and spelling
  • Break content into logical sections
  • Make use of headings to organize content

Example Structure

assignment1/
│
├── index.html
├── about.html
├── gallery.html
├── contact.html
├── images/
│   ├── logo.png
│   ├── image1.jpg
│   ├── image2.jpg
│   └── ...
└── README.txt

Grading Rubric

Criteria Points Description
HTML Structure 25 Valid HTML5, proper document structure, semantic elements used correctly
Content 20 Complete content across all pages, well-written text, appropriate images
Navigation 15 Working navigation on all pages, proper links, good user experience
Semantic HTML 15 Appropriate use of HTML5 semantic elements
Images & Media 10 Proper image usage, alt text, figure/figcaption where appropriate
Code Quality 10 Clean, organized code with proper indentation and comments
Validation 5 HTML validates with no errors at W3C Validator
Creativity 5 Original design, creative use of HTML features
Total 100

Submission Instructions

  1. Test Your Website
    • Open all pages in a web browser
    • Click all links to verify they work
    • Check that all images load correctly
  2. Validate Your HTML
  3. Create README.txt
    • Include your name and roll number
    • Brief description of your website
    • List the pages included
    • Note any special features
  4. Zip Your Files
    • Name: RollNumber_Assignment1_YourName.zip
    • Include all HTML files, images folder, and README.txt
  5. Submit
    • Upload to the course portal
    • Submit before the deadline: February 11, 2026, 11:59 PM

Tips for Success

TipHelpful Hints
  • Start early! Don’t leave this for the last day
  • Plan your content before coding
  • Use proper indentation (2 or 4 spaces consistently)
  • Test in multiple browsers (Chrome, Firefox, Edge)
  • Validate your HTML frequently as you build
  • Ask questions if you’re stuck!
WarningCommon Mistakes to Avoid
  • Broken links between pages
  • Missing alt text on images
  • Incorrect file paths
  • Unclosed tags
  • Skipping heading levels (h1 → h3)
  • Not using semantic elements
  • Forgetting to validate HTML

Example Code Snippets

Basic Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title - Your Site Name</title>
</head>
<body>
    <header>
        <h1>Your Site Name</h1>
        <nav>
            <!-- Navigation links -->
        </nav>
    </header>
    
    <main>
        <!-- Main content -->
    </main>
    
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

Image with Caption

<figure>
    <img src="images/example.jpg" alt="Description of the image">
    <figcaption>Caption for the image</figcaption>
</figure>

Resources

Questions?

If you have questions about this assignment:

Good luck, and have fun building your website! 🚀