Scribd
Upload
40 views2 pages

Html5 Css Js Worksheet

The document outlines a program-based worksheet for HTML5, CSS, and JavaScript, consisting of various tasks. It includes creating personal info pages, lists, tables, forms, and styling elements with CSS, as well as implementing JavaScript functionalities like alerts and form validation. Each section provides specific instructions for developing web components and enhancing user interaction on web pages.

Uploaded by

karthiyayini191105
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
40 views2 pages

Html5 Css Js Worksheet

The document outlines a program-based worksheet for HTML5, CSS, and JavaScript, consisting of various tasks. It includes creating personal info pages, lists, tables, forms, and styling elements with CSS, as well as implementing JavaScript functionalities like alerts and form validation. Each section provides specific instructions for developing web components and enhancing user interaction on web pages.

Uploaded by

karthiyayini191105
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 + CSS + JavaScript – Program-

Based Worksheet
Section A: HTML5
1. Create a Personal Info Page
Write an HTML5 program that displays your:
- Name in a heading
- Short introduction in a paragraph
- A photo using an <img> tag
- A link to your favorite website

2. Create a List of Favorite Movies


Write an HTML page with:
- An <h2> heading: "My Favorite Movies"
- An unordered list with 5 movie names

3. HTML Table of Marks


Create an HTML table showing subject names and marks in 3 subjects (2 rows, 3
columns minimum).

4. Create a Simple Registration Form


Design a basic form using HTML5 that includes:
- Name (text input)
- Email (email input)
- Password (password input)
- Submit button

Section B: CSS
5. Style the Registration Form (from Q4)
Write internal CSS to:
- Set background color of the form
- Make labels bold
- Add padding to input boxes
- Center the form on the page

6. Colorful Text Block


Create a <div> with the text "Welcome to Web Design!" and use CSS to:
- Set the background color to yellow
- Text color to dark blue
- Font size to 24px
- Add a border with 2px solid black

7. Responsive Two-Column Layout using CSS


Write HTML + CSS to create a layout with two side-by-side boxes (columns) that
stack vertically on smaller screens.

Section C: JavaScript
8. Show Alert on Page Load
Write a script that shows an alert box saying “Welcome to my website!” when the
page loads.

9. Button Click Alert


Create a page with a button labeled "Click Me". When clicked, it should show an alert
message: “You clicked the button!”

10. Simple Calculator - Add Two Numbers


Create an HTML form with two number inputs and a button.
Use JavaScript to calculate and display the sum when the button is clicked.

11. Change Text on Button Click


Write a page with a paragraph and a button.
When the button is clicked, the paragraph text should change to: “Thank you for
clicking!”

12. Form Validation – Check Empty Field


Create a form with a name field and a submit button.
Use JavaScript to:
- Show an alert if the name field is empty
- Else, show “Form Submitted!”

You might also like