Scribd
Upload
4 views

problemstatements

html problem statement

Uploaded by

smartlenin348
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

problemstatements

html problem statement

Uploaded by

smartlenin348
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Objective:

Create a simple webpage that displays a list of car images using an ordered list
in HTML.

Requirements:
HTML Structure:
Create a well-structured HTML document that includes the following:
Header: Contains the title of the page (e.g., "Car Gallery").
Main Content:
Introduction: Create a heading as car gallery it should be in the centre of
webpage and A brief paragraph introducing the car gallery.
Ordered List of Car Images: An ordered list (<ol>) that includes at least six
different car images. Each list item should contain:
The name or model of the car as a heading.
An image of the car with an appropriate alt attribute.
Additional Elements:
Text Formatting: Use appropriate heading tags (e.g., <h2>, <h3>) for the car
names/models.
Objective:
Create a simple HTML webpage that displays a gallery of bike images using
an unordered list (<ul>). The gallery should feature at least six different bike
images.

Requirements:
1. Webpage Structure: Use an HTML document to structure the webpage.
2. Unordered List: Use an unordered list (<ul>) to display the bike
images.
3. List Items: Each image should be placed inside a list item (<li>).
4. Image Sourcing: Use publicly accessible URLs for at least six bike
images.
5. Accessibility: Ensure each image has an alt attribute with a brief
description of the bike.

Instructions:
1. Create a new HTML file named bikes.html.
2. Set up the basic HTML structure including the <!DOCTYPE html>
declaration, <html>, <head>, and <body> tags.
3. Add a title to your webpage within the <head> section.
4. Inside the <body>, create an <h1> heading with the text "Bike Gallery".
5. Create an unordered list (<ul>) within the body to hold the bike images.
6. Add at least six list items (<li>) inside the unordered list. Each list item
should contain an image (<img>).
7. Ensure each image has a descriptive alt attribute.
Objective:
Create a simple HTML webpage that displays a South Indian hotel menu
using nested lists. The menu should include at least three categories (e.g.,
Breakfast, Lunch, Snacks), each containing multiple items.

Requirements:
1. Webpage Structure: Use an HTML document to structure the webpage.
2. Categories: Create at least three categories for the menu (e.g., Breakfast,
Lunch, Snacks).
3. Nested Lists: Use nested lists (<ul> and <li>) to organize the
categories and their respective items.
4. Menu Items: Each category should contain at least three menu items.
5. Descriptive Content: Include the name of the dish and a brief description
or price for each item.

Instructions:
1. Create a new HTML file named south_indian_menu.html.
2. Set up the basic HTML structure including the <!DOCTYPE html>
declaration, <html>, <head>, and <body> tags.
3. Add a title to your webpage within the <head> section.
4. Inside the <body>, create an <h1> heading with the text "South Indian
Hotel Menu".
5. Use an unordered list (<ul>) to create the main categories of the menu.
6. For each category, use nested unordered lists (<ul>) to list the menu
items.
7. Each menu item should be within a list item (<li>) and include a name
and a brief description or price.
Problem Statement: Create a Product
Catalog Using HTML Tables with
colspan and rowspan
Objective: Design a product catalog webpage using only HTML tables. The catalog
should display information about various products in a structured table format. Additionally,
utilize colspan and rowspan attributes to merge cells for a more complex table layout. The
goal is to practice creating and formatting tables using various HTML elements and
attributes, including colspan and rowspan.

Requirements:
1. Basic Structure:
o Use the <!DOCTYPE html> declaration.
o Include <html>, <head>, and <body> tags.
2. Head Section:
o Add a title to the webpage using the <title> tag.

Body Section:

 Header:
o Use a <header> tag to include the main heading of the catalog (e.g., "Product
Catalog") using an <h1> tag.
 Product Table:
o Use a <table> tag to create a table.
o Include a table caption using the <caption> tag (e.g., "Our Products").
o Use <thead>, <tbody>, and <tfoot> tags to structure the table.
o Add the following columns to the table:
 Product ID
 Product Name
 Description
 Price
 Availability
o Include at least 5 products in the table.
o Use the <th> tag for table headers.
o Use the <tr> tag for table rows.
o Use the <td> tag for table data cells.
o Utilize colspan to merge columns in the footer or any row.
o Utilize rowspan to merge rows for any product category or section.
o Ensure that the table is well-organized and easy to read.
 Footer:
o Use a <footer> tag to include footer information (e.g., "© 2024 Company
Name").

Instructions:

1. Create an HTML file (catalog.html) and include the specified structure and content.
2. Ensure proper use of HTML table elements, colspan, and rowspan attributes.
3. Validate the HTML to ensure it follows best practices and standards.

Deliverables:

 An HTML file (catalog.html) containing the complete implementation.

Evaluation Criteria:

 Correctness: The implementation meets all the specified requirements.


 Use of HTML: Proper use of HTML table elements and attributes, including colspan
and rowspan.
 Structure: The table is well-organized and easy to read.

Tools and Technologies:

 HTML
 A text editor or IDE of your choice (e.g., VSCode, Sublime Text)
 A web browser to view and test the webpage
Problem Statement: Create a Personal
Profile Webpage Using HTML
Objective: Design a personal profile webpage using only HTML. The webpage
should contain sections for personal information, a profile picture, hobbies, education, work
experience, projects, skills, and contact information. The goal is to practice structuring a
webpage using various HTML elements and attributes.

Requirements:
1. Basic Structure:
o Use the <!DOCTYPE html> declaration.
o Include <html>, <head>, and <body> tags.
2. Head Section:
o Add a title to the webpage using the <title> tag.

3. Body Section:

 Header:
o Use a <header> tag to include the main heading of the profile (e.g., "John
Doe's Profile") using an <h1> tag.
o Optionally, include a navigation bar using a <nav> tag with links to different
sections of the page.
 Profile Picture:
o Use an <img> tag to add a profile picture. Include src, alt, and optional
title attributes.
 Personal Information:
o Use a <section> tag for personal information.
o Include details like full name, date of birth, and a brief biography using
appropriate tags (e.g., <p>, <strong>, <em>).
 Hobbies:
o Use a <section> tag for hobbies.
o Create an unordered list (<ul>) to list hobbies. Each hobby should be an item
(<li>).
 Education:
o Use a <section> tag for education.
o Create an ordered list (<ol>) to list educational qualifications. Each
qualification should be an item (<li>).
 Work Experience:
o Use a <section> tag for work experience.
o Include details of at least two jobs. For each job, use appropriate tags (e.g.,
<h3>, <p>, <ul>, <li>).
 Projects:
o Use a <section> tag for projects.
o List at least two projects. For each project, include the project name, a brief
description, and a link to the project if available.
 Skills:
o Use a <section> tag for skills.
o Create an unordered list (<ul>) to list skills. Each skill should be an item
(<li>).
 Contact Information:
o Use a <section> tag for contact information.
o Include details like email address, phone number, and a link to a LinkedIn
profile or personal website using appropriate tags (e.g., <a href="mailto:">
for email, <a href="tel:"> for phone).

 Footer:
 Use a <footer> tag to include footer information (e.g., "© 2024 John Doe").

Instructions:
1. Create an HTML file (profile.html) and include the specified structure and content.
2. Ensure proper use of HTML elements to organize the content logically.
3. Validate the HTML to ensure it follows best practices and standards.

Deliverables:

 An HTML file (profile.html) containing the complete implementation.

Tools and Technologies:

 HTML
 A text editor or IDE of your choice (e.g., VSCode, Sublime Text)
 A web browser to view and test the webpage

You might also like