Scribd
Upload
5 views3 pages

Module 1-HTML 5

The document outlines a series of HTML5 exercises aimed at creating a Local Community Event Portal for a city council. It includes tasks such as setting up a base template, implementing navigation, creating an event registration form, and utilizing geolocation features. Each exercise focuses on different aspects of HTML5, CSS, and JavaScript to enhance user interaction and experience.

Uploaded by

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

Module 1-HTML 5

The document outlines a series of HTML5 exercises aimed at creating a Local Community Event Portal for a city council. It includes tasks such as setting up a base template, implementing navigation, creating an event registration form, and utilizing geolocation features. Each exercise focuses on different aspects of HTML5, CSS, and JavaScript to enhance user interaction and experience.

Uploaded by

hema22050.ec
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML5 Exercises

Project Theme: Local Community Event Portal


A local city council wants a lightweight, browser-based portal to help residents register for
events, check locations, and access basic services.

1. Create the HTML5 Base Template


Scenario: You’re setting up the base document that every page on the portal will use.
Objective: Ensure semantic structure and compatibility across browsers.
Task:
• Use <!DOCTYPE html>, <html lang="en">, <meta charset="UTF-8">
• Add comments to label sections like "Navigation", "Main", "Footer"
• Save as index.html and open it in Chrome
• Inspect the document structure in Chrome Dev Tools

2. Navigation and Linking


Scenario: Users should navigate between "Home", "Events", and "Contact" sections.
Objective: Provide intuitive navigation and section-based references.
Task:
• Use <nav> with anchor tags <a href="#events">Events</a>
• Define matching IDs for each section like <section id="events">
• Add a link to an external help document using <a href="help.html" target="_blank">

3. Welcome Message with Styling and ID/Class


Scenario: Display a welcome banner styled uniquely for a logged-in user.
Objective: Practice block/inline tags and differentiate id and class
Task:
• Use <div id="welcomeBanner"> and apply a blue background via internal CSS
• Use inline styles for a special offer <span> (e.g., color red, bold)
• Apply the .highlight class to certain elements for visual emphasis
4. Image Gallery for Community Events
Scenario: Show images from past events in a table layout.
Objective: Work with <img>, tables, and formatting tags.
Task:
• Use a <table> with 2 rows and 3 columns of <img> tags
• Include alt, title, and style each image with borders using a class
• Add a caption to describe each event

5. Event Registration Form


Scenario: Residents need to register for events.
Objective: Practice input types, validation, placeholder, autofocus, and output
Task:
• Include fields: name (text), email (email), date (date), event type (select), message
(textarea)
• Add placeholder, required, and autofocus
• Display a confirmation message using <output> when the form is submitted
• Style the form using CSS

6. Event Feedback with Events Handling


Scenario: Collect real-time feedback and interactions from the user.
Objective: Handle blur, change, click, double-click, and keyboard events.
Task:

• Use onblur to validate a phone number field


• Use onchange on a dropdown to display the selected event fee
• onclick on a submit button to show a confirmation
• ondblclick on an image to enlarge it
• Capture key events in the feedback textarea and count characters

7. Video Invite with Media Events


Scenario: Show a short event promo video.
Objective: Work with <video> and oncanplay event
Task:
• Insert a <video> element with source and controls
• Use oncanplay to display a message like "Video ready to play"
• Use onbeforeunload to warn users if they try to leave the form page unfinished

8. Saving User Preferences


Scenario: Store preferred event type for returning users.
Objective: Work with localStorage, sessionStorage, and deletion
Task:
• Save selected event type in localStorage
• On reload, retrieve and pre-select it
• Add a "Clear Preferences" button that clears both localStorage and sessionStorage

9. Geolocation for Event Mapping


Scenario: Locate the nearest event to the user.
Objective: Practice geolocation.getCurrentPosition, error handling, and options
Task:
• Create a button “Find Nearby Events”
• On click, use getCurrentPosition to get and display coordinates
• Handle permission denial and timeouts
• Use high accuracy options

10.Debugging with Chrome DevTools


Scenario: A few users report layout issues and script errors.
Objective: Use Chrome DevTools and VS Code features to debug.
Task:
• Use “Inspect Element” to modify styles and experiment live
• Use the Console tab to view logs from your <script>
• Add breakpoints in JS and reload the page to watch variable values

You might also like