Assignments for Class 4
Lists in HTML
Assignment
1: Unordered Lists
1.
Create a Simple
Shopping List:
o
Create an HTML page with an unordered
list of items you need to buy. Include at least 5 items.
2.
Personal Hobbies
List:
o
Create an HTML page with an unordered
list of your top 5 hobbies. Each hobby should be a list item.
Assignment
2: Ordered Lists
1.
Recipe Steps:
o
Create an HTML page that lists the
steps to make a simple recipe (e.g., making a sandwich or a smoothie). Use an
ordered list to number the steps.
2.
Daily Routine:
o
Create an HTML page that includes an
ordered list detailing your daily routine from morning to evening.
Assignment
3: Definition Lists
1.
Glossary of Terms:
o
Create an HTML page with a definition
list of 5 technical terms related to web development. Each term should have a
corresponding definition.
2.
FAQs List:
o
Create an HTML page that lists common
questions and answers about a specific topic using a definition list. For
example, FAQs about your favorite hobby or a popular technology.
Assignment
4: Nested Lists
1.
Organizational
Chart:
o
Create an HTML page with a nested list
representing an organizational chart. Include at least three main departments,
each with at least two sub-departments.
2.
Travel Itinerary:
o
Create an HTML page with a nested list
for a travel itinerary. Include main destinations and sub-items for activities
or places to visit at each destination.
Assignment
5: Customized Lists
1.
Custom Ordered List:
o
Create an HTML page with an ordered
list where the list items are displayed with lowercase letters. For example, a
list of steps to complete a task.
2.
Nested Unordered
List with Custom Style:
o
Create an HTML page with a nested
unordered list. Customize the list style using CSS to change the bullet points
to custom images or symbols.
Assignment
6: Practical Application
1.
Webpage Structure:
o
Create a sample HTML page for a website
menu. Use nested lists to represent the main navigation items and sub-items
(e.g., Home, About Us, Services with sub-services).
2.
Event Planning List:
o
Create an HTML page to plan a small
event. Use different types of lists (unordered, ordered, and definition lists)
to organize various aspects of the event such as guest list, schedule, and
tasks.
Submission
Guidelines:
- Format: Submit
HTML files.
- Content: Ensure
that all required elements (lists, nested lists, custom styles) are
included as per the assignment.
- Style: Use
basic CSS to enhance the appearance of your lists where applicable.
- Deadline: [Specify
the due date for the assignment]
Solutions
Assignment
1: Unordered Lists
1.
Create a Simple
Shopping List
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Shopping
List</title> </head> <body> <h2>Shopping
List</h2> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> <li>Butter</li> <li>Cheese</li> </ul> </body> </html> |
2.
Personal Hobbies
List
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Personal
Hobbies</title> </head> <body> <h2>My
Top 5 Hobbies</h2> <ul> <li>Reading</li> <li>Cooking</li> <li>Traveling</li> <li>Photography</li> <li>Gardening</li> </ul> </body> </html> |
Assignment
2: Ordered Lists
1.
Recipe Steps
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Recipe
Steps</title> </head> <body> <h2>Steps
to Make a Sandwich</h2> <ol> <li>Gather
all ingredients.</li> <li>Spread
butter on the bread.</li> <li>Add
desired fillings (e.g., ham, cheese, lettuce).</li> <li>Top
with another slice of bread.</li> <li>Cut
the sandwich in half and serve.</li> </ol> </body> </html> |
2.
Daily Routine
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Daily
Routine</title> </head> <body> <h2>My
Daily Routine</h2> <ol> <li>Wake
up and exercise.</li> <li>Have
breakfast.</li> <li>Attend
classes/work.</li> <li>Have
lunch.</li> <li>Continue
with work/studies.</li> <li>Have
dinner.</li> <li>Relax
and go to bed.</li> </ol> </body> </html> |
Assignment
3: Definition Lists
1.
Glossary of Terms
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Glossary
of Terms</title> </head> <body> <h2>Glossary
of Web Development Terms</h2> <dl> <dt>HTML</dt> <dd>HyperText
Markup Language - the standard language for creating web pages.</dd> <dt>CSS</dt> <dd>Cascading
Style Sheets - a stylesheet language used to describe the presentation of a
document written in HTML.</dd> <dt>JavaScript</dt> <dd>A
programming language used to create interactive effects within web
browsers.</dd> <dt>URL</dt> <dd>Uniform
Resource Locator - the address used to access resources on the
web.</dd> <dt>HTTP</dt> <dd>HyperText
Transfer Protocol - a protocol used for transferring data over the
web.</dd> </dl> </body> </html> |
2.
FAQs List
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>FAQs</title> </head> <body> <h2>Frequently
Asked Questions</h2> <dl> <dt>What
is HTML?</dt> <dd>HTML
stands for HyperText Markup Language, used to create the structure of web
pages.</dd> <dt>How
does CSS work?</dt> <dd>CSS
is used to style and layout web pages, such as changing colors, fonts, and
spacing.</dd> <dt>What
is JavaScript used for?</dt> <dd>JavaScript
is used to create dynamic and interactive elements on a webpage.</dd> <dt>What
is the difference between HTTP and HTTPS?</dt> <dd>HTTPS
is the secure version of HTTP, using encryption to protect data transferred
between the server and the client.</dd> <dt>What
are web browsers?</dt> <dd>Web
browsers are software applications used to access and view websites on the
internet.</dd> </dl> </body> </html> |
Assignment
4: Nested Lists
1.
Organizational Chart
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Organizational
Chart</title> </head> <body> <h2>Organizational
Chart</h2> <ul> <li>CEO <ul> <li>Marketing
Department <ul> <li>Content
Creation</li> <li>Advertising</li> </ul> </li> <li>Development
Department <ul> <li>Front-End
Development</li> <li>Back-End
Development</li> </ul> </li> <li>HR
Department <ul> <li>Recruitment</li> <li>Employee
Relations</li> </ul> </li> </ul> </li> </ul> </body> </html> |
2.
Travel Itinerary
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Travel
Itinerary</title> </head> <body> <h2>Travel
Itinerary</h2> <ul> <li>Paris <ul> <li>Visit
Eiffel Tower</li> <li>Explore
Louvre Museum</li> <li>Walk
along Champs-Élysées</li> </ul> </li> <li>Rome <ul> <li>See
Colosseum</li> <li>Visit
Vatican City</li> <li>Explore
Roman Forum</li> </ul> </li> <li>New
York <ul> <li>Visit
Statue of Liberty</li> <li>Explore
Central Park</li> <li>See
Times Square</li> </ul> </li> </ul> </body> </html> |
Assignment
5: Customized Lists
1.
Custom Ordered List
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Custom
Ordered List</title> </head> <body> <h2>My
Favorite Books</h2> <ol
type="A"> <li>To
Kill a Mockingbird</li> <li>1984</li> <li>Pride
and Prejudice</li> <li>The
Great Gatsby</li> <li>Moby
Dick</li> </ol> </body> </html> |
2.
Nested Unordered
List with Custom Style
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Custom
Styled List</title> <style> ul.custom-list
{ list-style-type:
square; } ul.custom-list
li { margin-bottom:
10px; } </style> </head> <body> <h2>Travel
Plans</h2> <ul
class="custom-list"> <li>Europe <ul
class="custom-list"> <li>France</li> <li>Germany</li> </ul> </li> <li>Asia <ul
class="custom-list"> <li>Japan</li> <li>Thailand</li> </ul> </li> </ul> </body> </html> |
Assignment
6: Practical Application
1.
Webpage Structure
|
<!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Website
Menu</title> </head> <body> <h2>Website
Menu</h2> <ul> <li>Home</li> <li>About
Us</li> <li>Services <ul> <li>Web
Development</li> <li>Graphic
Design</li> <li>SEO</li> </ul> </li> <li>Contact</li> </ul> </body> </html> |
2.
Event Planning List
|
<!DOCTYPE html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Event
Planning</title> </head> <body> <h2>Event
Planning</h2> <ol> <li>Venue
Selection</li> <li>Guest
List <ul> <li>Family</li> <li>Friends</li> <li>Colleagues</li> </ul> </li> <li>Food
and Beverages <ul> <li>Appetizers</li> <li>Main
Course</li> <li>Desserts</li> <li>Beverages</li> </ul> </li> <li>Entertainment <ul> <li>Music</li> <li>Games</li> <li>Speeches</li> </ul> </li> </ol> </body> </html> |
*********************************