0% found this document useful (0 votes)
25 views2 pages

HTML5 Mini Website Project Guide

The assignment requires students to design a mini website using only HTML5, consisting of a home page and three additional themed pages. Students can choose from various themes such as a favorite tourist destination or a personal portfolio, and must include specific content and structure guidelines. The project will be evaluated based on content, layout, and navigation, with a total of 20 marks available, plus an optional bonus for additional features.

Uploaded by

Ahsan Raza
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views2 pages

HTML5 Mini Website Project Guide

The assignment requires students to design a mini website using only HTML5, consisting of a home page and three additional themed pages. Students can choose from various themes such as a favorite tourist destination or a personal portfolio, and must include specific content and structure guidelines. The project will be evaluated based on content, layout, and navigation, with a total of 20 marks available, plus an optional bonus for additional features.

Uploaded by

Ahsan Raza
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

HTML5 Mini Website Project Assignment

Subject: Web Page Design

Level: Beginner (HTML5 only, no forms)

Deadline: [Insert Deadline Date]

Total Marks: 20

Objective
Design and develop a mini website using only HTML5 that consists of at least four HTML
pages:

 - Home Page ([Link])


- Three additional pages based on the theme

Theme Options (Choose One)


Students can pick one of the following themes or suggest their own (with teacher approval):

1. Your Favorite Tourist Destination


2. A Book or Movie Review Site
3. Your Personal Portfolio
4. A College or Department Website
5. A Hobby or Interest (e.g., Photography, Gardening, Gaming)

Project Structure
Your website must include:

1. Home Page ([Link]) [5 marks]


- Introductory content about the theme

- A navigation menu with working links to the other three pages

- At least one image and one heading structure (h1-h3)

2. Three Linked Pages [3 x 4 = 12 marks]


Each page should:

 Be linked both ways to the home page and to other pages


 Contain at least 2 paragraphs and 1 image
 Use semantic tags and internal links
 Include a list (ordered or unordered)
 Embed one media element (image, audio, or video tag — video/audio can be external
with proper attribution)

3. Navigation & Internal Linking [3 marks]


- All pages must be connected through a consistent navigation bar on each page

- All relative links must function correctly

Technical Guidelines
 Use HTML5 only (no CSS or forms for this assignment)
 Use correct tag syntax, nesting, and structure
 Use meaningful file and folder names
 Name your homepage as [Link]
 Place all pages in one folder; use a subfolder for images (e.g., /images)

Bonus (Optional - 2 Marks)


 Add an HTML table with relevant content on any one page
 Include the use of comments in your HTML code for clarity

Submission Instructions
- Submit a zipped folder named YourName_HTMLWebsite

- Folder must include:

 [Link]
 [Link], [Link], [Link]
 /images folder with all required images

Evaluation Rubric
Criteria Marks
Home Page Content & Layout 5
Page 1 Content & Structure 4
Page 2 Content & Structure 4
Page 3 Content & Structure 4
Navigation & Linking 3

Common questions

Powered by AI

Semantic tags provide meaningful context to the content, which can improve SEO and accessibility by helping screen readers and search engines understand the page structure better. Internal links enhance user experience by creating a coherent navigation system across the website, allowing users to easily transition between related content. These elements ensure that the website is not only readable by machines but also navigable by users, fulfilling important web design principles .

Navigational elements such as a consistent navigation bar across pages are essential for improving user experience. They provide users with an intuitive way to explore the site content, ensuring a seamless browsing experience. A working navigation system, required by the project, helps users easily access different sections of the website without confusion, reflecting an organized and user-centric design approach .

The project mandates using a specific folder structure, with an "images" subfolder and well-named HTML files, such as "index.html." These requirements teach students how to organize project files efficiently, a crucial skill in web development. By learning to maintain a structured file hierarchy, students can easily manage, locate, and update files, facilitating smoother development processes and a professional approach to project management .

Requiring students to include lists and media elements on each page promotes diverse content presentation, catering to different learning preferences. Lists aid in organizing information succinctly, improving readability. Media elements like images, audio, or videos engage users visually and auditorily, enhancing the overall user experience. These requirements help students understand the importance of multimedia in web design, preparing them to create more dynamic and engaging webpages .

The HTML5 mini website project requires students to create a website with four HTML pages without using CSS or forms. This restriction ensures that students focus on mastering basic HTML5 structures, tags, and navigation. Each page must use semantic tags, contain internal linking, and feature ordered or unordered lists. By adhering to these guidelines, students learn to organize content effectively using HTML alone, enhancing their skills in structuring webpages correctly. Additionally, the project encourages understanding of file management by requiring proper file and folder naming conventions and nesting structures .

Incorporating elements like semantic tags, lists, media, navigation, and file management prepares students for real-world web development by providing a comprehensive understanding of accessible, organized, and media-rich web design. Knowledge of semantic HTML5 ensures sites are scalable and SEO-friendly. Understanding linked navigation and proper file organization guides students in creating projects that are both user-friendly and maintainable, integral qualities for professional web development and collaboration in development teams .

By restricting the use of CSS and forms, the project focuses on the foundational skills of HTML5, ensuring students gain a solid understanding of static webpage construction and content structuring before dealing with styling and dynamic interactions. This allows beginners to concentrate on core HTML5 skills, such as structuring content logically, using correct syntax, and creating functional navigation, which are crucial before advancing to more complex concepts like styling and interactivity .

The "Bonus" section challenges students to go beyond the basic requirements by including an HTML table and code comments, which are not mandatory. This encourages students to explore additional HTML5 features like tables, which organize data logically and clearly. Adding comments helps students learn to document their code, improving readability and maintenance. This optional task allows students to explore more complex features without pressure, enriching their learning and providing opportunities to earn extra marks by demonstrating a deeper understanding of HTML5 .

The requirement to link all pages bidirectionally offers students the chance to practice and understand interconnectivity within a website. This task promotes the development of logical navigation structures, teaching students how to create interlinked content that enhances accessibility and usability. It encourages them to think about user journeys and ensures that every page is part of a coherent website experience .

A consistent navigation bar on each page is crucial for user engagement and retention as it provides a familiar frame of reference, reducing cognitive load and enhancing user satisfaction. Users can easily predict and control their browsing experience, preventing frustration and encouraging prolonged interaction with the site. This feature is critical in maintaining user interest and ensuring they do not abandon the site due to navigational confusion .

You might also like