Assignments Of Class 14
Building a Basic Web Page Structure
Assignment 1: Personal Web Page
Instructions:
1. Create a simple HTML page that includes the following:
o A main heading (<h1>) with your name.
o A short introduction about yourself in a paragraph (<p>).
o A list of your hobbies using an unordered list (<ul>).
o An image of yourself (or something representing you) using the <img> tag. Make sure to provide an alt description.
o A footer section with a copyright statement using the <footer> tag.
Example:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My Personal Web Page</title>
</head>
<body>
<header>
<h1>John Doe</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Hello! I am John Doe, a web development enthusiast.</p>
</section>
<section>
<h2>My Hobbies</h2>
<ul>
<li>Coding</li>
<li>Photography</li>
<li>Travelling</li>
</ul>
</section>
<section>
<h2>My Picture</h2>
<img src="john_doe.jpg" alt="John Doe's Picture">
</section>
</main>
<footer>
<p>© 2024 John Doe. All rights reserved.</p>
</footer>
</body>
</html>
Assignment 2: Simple Product Page
Instructions:
1. Create a new HTML page for a product you like.
2. Include the following:
o A main heading with the product name.
o A short description of the product in a paragraph.
o A list of key features of the product using an ordered list (<ol>).
o An image of the product using the <img> tag.
o A footer with a copyright statement.
Example:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Smartphone XYZ</title>
</head>
<body>
<header>
<h1>Smartphone XYZ</h1>
</header>
<main>
<section>
<h2>Product Description</h2>
<p>The Smartphone XYZ is a high-end mobile device with an advanced camera, fast processing speed, and sleek design.</p>
</section>
<section>
<h2>Key Features</h2>
<ol>
<li>6.5-inch Display</li>
<li>48MP Camera</li>
<li>Fast Charging</li>
<li>64GB Storage</li>
</ol>
</section>
<section>
<h2>Product Image</h2>
<img src="smartphone_xyz.jpg" alt="Smartphone XYZ">
</section>
</main>
<footer>
<p>© 2024 Smartphone XYZ. All rights reserved.</p>
</footer>
</body>
</html>
Assignment 3: Web Page with Multiple Sections
Instructions:
1. Create a webpage that represents a blog or news article with the following sections:
o A header with the blog or news title.
o A section for the introduction with a heading and a paragraph.
o A section for an article with the heading and multiple paragraphs.
o A footer with copyright information.
Example:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
</head>
<body>
<header>
<h1>My First Blog Post</h1>
</header>
<main>
<section>
<h2>Introduction</h2>
<p>Welcome to my blog! In this post, I'll be sharing some thoughts about web development.</p>
</section>
<article>
<h2>Why Learn Web Development?</h2>
<p>Web development is one of the most important skills to learn in today’s digital age...</p>
<p>It enables you to create dynamic, interactive websites that can help solve problems...</p>
</article>
</main>
<footer>
<p>© 2024 My Blog. All rights reserved.</p>
</footer>
</body>
</html>
Assignment 4: Web Page with Lists and Images
Instructions:
1. Create a page listing your favorite movies or books.
2. Include the following:
o A heading with a title such as “My Favorite Movies” or “Top 5 Books.”
o An ordered or unordered list of your favorites.
o For each movie/book, provide a brief description in a paragraph.
o An image related to each movie/book.
Example:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Movies</title>
</head>
<body>
<header>
<h1>Top 5 Movies I Love</h1>
</header>
<main>
<section>
<h2>My Favorite Movies</h2>
<ul>
<li>
<h3>The Matrix</h3>
<p>A sci-fi action film that explores the concept of artificial reality.</p>
<img src="matrix.jpg" alt="The Matrix Movie Poster">
</li>
<li>
<h3>Inception</h3>
<p>A mind-bending thriller that dives into the world of dreams.</p>
<img src="inception.jpg" alt="Inception Movie Poster">
</li>
<li>
<h3>The Dark Knight</h3>
<p>A superhero film featuring Batman, fighting crime in Gotham City.</p>
<img src="dark_knight.jpg" alt="The Dark Knight Movie Poster">
</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 My Favorite Movies. All rights reserved.</p>
</footer>
</body>
</html>
Assignment 5: Responsive Web Page Layout
Instructions:
1. Create a webpage with at least three sections:
o A header section with the title of your webpage.
o A content section with a paragraph and an image.
o A footer section with copyright information.
2. Use basic CSS to style the page.
o Make sure the page looks good on different screen sizes (desktop, tablet, mobile).
Example CSS (for responsive design):
css
Copy code
/* Basic styling */
body {
font-family: Arial, sans-serif;
}
header, footer {
text-align: center;
padding: 10px;
background-color: #f1f1f1;
}
section {
margin: 20px;
}
/* Responsive styling */
@media (max-width: 768px) {
body {
font-size: 14px;
}
img {
width: 100%;
}
}
These assignments will help students practice the core concepts of building a basic web page structure with HTML, while incorporating semantic tags and basic styling for layout and presentation.
4o mini
You said:
some more
ChatGPT said:
ChatGPT
Here are some additional assignments that continue to focus on building a basic web page structure while incorporating more HTML elements and concepts:
Assignment 6: Simple Restaurant Menu Page
Instructions:
1. Create a webpage for a restaurant menu.
2. Include the following elements:
o A main heading with the restaurant name.
o A short description of the restaurant in a paragraph.
o An ordered or unordered list for each category of the menu (e.g., appetizers, main courses, desserts).
o Add images of some items in the menu (e.g., a pizza, pasta, or dessert).
o A footer with the restaurant's contact information (address, phone number).
Example:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Delicious Diner Menu</title>
</head>
<body>
<header>
<h1>Delicious Diner</h1>
</header>
<main>
<section>
<h2>About Us</h2>
<p>Welcome to Delicious Diner, where we serve mouthwatering meals for all tastes!</p>
</section>
<section>
<h2>Menu</h2>
<h3>Appetizers</h3>
<ul>
<li>Bruschetta</li>
<li>Garlic Bread</li>
<li>Stuffed Mushrooms</li>
</ul>
<h3>Main Courses</h3>
<ul>
<li>Spaghetti Bolognese</li>
<li>Grilled Chicken</li>
<li>Vegetarian Pizza</li>
</ul>
<h3>Desserts</h3>
<ul>
<li>Chocolate Cake</li>
<li>Tiramisu</li>
<li>Ice Cream</li>
</ul>
<h3>Images</h3>
<img src="pizza.jpg" alt="Vegetarian Pizza">
<img src="pasta.jpg" alt="Spaghetti Bolognese">
</section>
</main>
<footer>
<p>Contact Us: 123-456-7890 | Address: 101 Delicious St.</p>
</footer>
</body>
</html>
Assignment 7: Travel Destination Page
Instructions:
1. Create a webpage that showcases 3 travel destinations.
2. Include the following:
o A main heading with the title “Top Travel Destinations.”
o A section for each destination with a heading, a description of the place, and an image.
o Links to more information about each destination (you can use placeholder links or real ones).
o A footer with your contact information.
Example:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Top Travel Destinations</title>
</head>
<body>
<header>
<h1>Top Travel Destinations</h1>
</header>
<main>
<section>
<h2>Paris, France</h2>
<p>Known for its rich history, art, and the iconic Eiffel Tower, Paris is a must-visit destination.</p>
<img src="paris.jpg" alt="Paris Eiffel Tower">
<p><a href="https://www.parisinfo.com">Learn More about Paris</a></p>
</section>
<section>
<h2>Tokyo, Japan</h2>
<p>Tokyo combines modern technology with ancient traditions, offering a unique cultural experience.</p>
<img src="tokyo.jpg" alt="Tokyo Skyline">
<p><a href="https://www.gotokyo.org">Learn More about Tokyo</a></p>
</section>
<section>
<h2>New York City, USA</h2>
<p>The city that never sleeps, New York is full of iconic landmarks like Times Square and Central Park.</p>
<img src="nyc.jpg" alt="New York City Skyline">
<p><a href="https://www.nycgo.com">Learn More about New York City</a></p>
</section>
</main>
<footer>
<p>Contact Us: info@travelagency.com</p>
</footer>
</body>
</html>
Assignment 8: HTML Table for Product Listing
Instructions:
1. Create an HTML page that displays a list of products in a table.
2. Include the following:
o A heading with the title “Product Listing.”
o A table with 4 columns: Product Name, Price, Quantity, and Total Price.
o Fill the table with 5 sample products.
o Below the table, calculate the total price for all the products using a paragraph.
Example:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Product Listing</title>
</head>
<body>
<header>
<h1>Product Listing</h1>
</header>
<main>
<section>
<h2>Products</h2>
<table border="1">
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
<tr>
<td>Smartphone</td>
<td>$500</td>
<td>2</td>
<td>$1000</td>
</tr>
<tr>
<td>Laptop</td>
<td>$800</td>
<td>1</td>
<td>$800</td>
</tr>
<tr>
<td>Headphones</td>
<td>$150</td>
<td>3</td>
<td>$450</td>
</tr>
<tr>
<td>Tablet</td>
<td>$300</td>
<td>1</td>
<td>$300</td>
</tr>
<tr>
<td>Smartwatch</td>
<td>$200</td>
<td>2</td>
<td>$400</td>
</tr>
</table>
</section>
<section>
<h3>Total Price: $2950</h3>
</section>
</main>
<footer>
<p>© 2024 Product Listing. All rights reserved.</p>
</footer>
</body>
</html>
Assignment 9: Web Page with Forms
Instructions:
1. Create a webpage with a contact form.
2. The form should include:
o A field for the user’s name.
o A field for the user’s email.
o A message text area.
o A submit button.
o Use the <form>, <input>, and <textarea> elements.
o Ensure the form is styled appropriately.
Example:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<header>
<h1>Contact Us</h1>
</header>
<main>
<section>
<h2>Get in Touch</h2>
<form action="submit_form.php" method="POST">
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Your Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Your Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
</section>
</main>
<footer>
<p>© 2024 Contact Us. All rights reserved.</p>
</footer>
</body>
</html>
Assignment 10: Web Page with Navigation Menu
Instructions:
1. Create a webpage that includes a navigation menu at the top.
2. The menu should contain links to the following sections:
o Introduction
o Services
o Contact
3. Each section should have a heading and some content.
4. Use anchor (<a>) tags to link to each section.
Example:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Simple Navigation Page</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="intro">
<h2>Introduction</h2>
<p>Welcome to our website! We provide high-quality services to meet your needs.</p>
</section>
<section id="services">
<h2>Services</h2>
<p>We offer web design, development, and SEO services to help your business grow online.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Feel free to reach out to us at contact@ourwebsite.com.</p>
</section>
</main>
<footer>
<p>© 2024 Our Website</p>
</footer>
</body>
</html>