HTML Lab Questions
Part 1: Head Section (Meta, Link, Script)
Objective: Understand how to use <head> elements to include metadata, external files, and
scripts.
1. Create an HTML page and include the following inside the <head> section:
o A title: "My First Webpage"
o A meta tag for charset = "UTF-8".
o A meta tag for description with your own content.
o A meta tag for responsive design using viewport.
2. Link an external CSS file named [Link] and confirm styling is applied to a paragraph.
3. Link an external JavaScript file named [Link] and display an alert saying "Welcome to
my site".
4. Use a favicon (icon for the webpage) by linking an image named [Link].
5. Add a meta tag to refresh the webpage every 10 seconds automatically.
Part 2: Layout Tags (Semantic Tags)
Objective: Create page layouts using semantic tags.
6. Create a simple webpage with the following layout:
o <header> containing the site title.
o <nav> with three links: Home, About, Contact.
o <main> with a short article.
o <footer> containing the copyright.
7. Create a layout using <section> and <article> tags:
o A section titled "Technology".
o Inside it, two articles: "AI" and "Web Development".
8. Design a blog page layout using <aside> for sidebar content (e.g., latest posts).
9. Use semantic tags to create a portfolio page:
o <header> → Profile picture and name.
o <main> → Two sections: Projects and Skills.
o <footer> → Social media links.
10. Create a webpage where <nav> links smoothly scroll to different <section> parts of the
same page.
Part 3: Responsive Basics
Objective: Make webpages adjust to different screen sizes.
11. Create a responsive webpage using the viewport meta tag so the content fits mobile
screens.
12. Create three <div> blocks side by side on desktop and stacked vertically on mobile using
CSS media queries.
13. Build a responsive navigation bar that changes to a hamburger menu on small screens
(use placeholder menu).
14. Create an image gallery where images shrink and wrap properly on smaller devices.
15. Create a two-column layout that automatically changes to one column on mobile screens.
Part 4: Forms (Attributes, Elements, Input Types, Input Attributes, Form Attributes)
Objective: Understand form elements and collect user data.
16. Create a form with the following:
Name (Text box)
Email (Email input)
Password (Password input)
Submit button
17. Design a registration form using at least 5 different input types like text, number,
date, email, checkbox, and radio button.
18. Create a login form where:
Username field is required.
Password field has a minlength of 6.
Submit button is disabled until both fields are filled.
19. Create a feedback form with a <textarea> and a dropdown list for rating (Excellent,
Good, Average, Poor).
20. Create a form that automatically sends data to a dummy URL using the action attribute
with method "POST".
21. Use the placeholder attribute to show hints in all input fields.
22. Create a form that prevents autocomplete by setting autocomplete="off".
23. Add a file upload field with accept=".png,.jpg" so only images are uploaded.
24. Create a search form using <input type="search"> with a search button.
25. Add a reset button to a form to clear all input fields.
26. Create a form with fieldset and legend to group related inputs.
27. Build a newsletter subscription form where:
Email field is required.
Includes a checkbox for "I agree to terms and conditions".
Submit button should remain disabled until the checkbox is checked (use JavaScript).
28. Create a responsive form layout where form fields align side-by-side on large screens
and stack vertically on mobile.
29. Design a form that uses pattern to validate:
Username must only contain letters and numbers.
Password must include at least one uppercase letter, one number, and one special
character.
30. Create a job application form that includes:
Name, Email, Contact Number
Resume upload
Dropdown for selecting preferred position
Textarea for cover letter
