Assignments Of Class 17: Introduction to HTML5 Elements
Assignments on HTML5 Elements: <figure>, <figcaption>, and <progress>
Below are some assignments designed to test your understanding of the new HTML5 elements, including <figure>, <figcaption>, and <progress>. Each assignment is accompanied by a solution.
Assignment 1: Creating an Image Gallery with Captions
Task:
- Create a simple webpage that displays a gallery of three images using the <figure> and <figcaption> elements.
- Each image should have a caption that explains the image.
- Make sure to use the correct alt attribute for each image to improve accessibility.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
</head>
<body>
<h1>Image Gallery</h1>
<section>
<figure>
<img src="beach.jpg" alt="Beautiful beach with clear water" width="300">
<figcaption>Sunny day at the beach with clear blue waters.</figcaption>
</figure>
<figure>
<img src="mountain.jpg" alt="Mountain view with snow" width="300">
<figcaption>Snow-covered mountains during winter season.</figcaption>
</figure>
<figure>
<img src="forest.jpg" alt="Green forest in spring" width="300">
<figcaption>Vibrant green forest with fresh spring leaves.</figcaption>
</figure>
</section>
</body>
</html>
Explanation:
- This solution uses the <figure> element to wrap each image, and the <figcaption> element is used to describe each image.
- The alt attribute is provided for accessibility purposes, describing what each image depicts.
Assignment 2: Displaying Progress of a Task
Task:
- Create a webpage that displays a progress bar using the <progress> element.
- The progress bar should represent the percentage of a task that has been completed (e.g., file upload or task completion).
- Use the value attribute to show the current progress and the max attribute to specify the maximum value.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Progress</title>
</head>
<body>
<h1>Task Progress</h1>
<p>File upload progress:</p>
<progress value="60" max="100"></progress>
<p>60% completed</p>
<p>Task completion:</p>
<progress value="80" max="100"></progress>
<p>80% of the task is complete.</p>
</body>
</html>
Explanation:
- The <progress> element is used to display a progress bar. The value attribute indicates the current progress (60% and 80% in this case), and the max attribute defines the total progress (100%).
- The progress is also explained in text to give users more context.
Assignment 3: Interactive Progress Bar with JavaScript
Task:
- Create a webpage with a progress bar that increases automatically from 0 to 100% over 10 seconds.
- Use the <progress> element to display the progress, and control the progress through JavaScript.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Progress Bar</title>
<script>
function startProgress() {
var progressBar = document.getElementById("progress");
var value = 0;
var interval = setInterval(function() {
if (value < 100) {
value++;
progressBar.value = value;
} else {
clearInterval(interval);
}
}, 100); // Increase every 100ms
}
</script>
</head>
<body>
<h1>Interactive Task Progress</h1>
<button onclick="startProgress()">Start Task</button>
<br><br>
<progress id="progress" value="0" max="100"></progress>
<p>Task Progress</p>
</body>
</html>
Explanation:
- A JavaScript function startProgress() is used to simulate task progress by increasing the value of the <progress> element over time.
- The setInterval() method updates the progress every 100ms until it reaches 100%.
Assignment 4: Combining <figure>, <figcaption>, and <progress>
Task:
- Create a webpage that combines both the <figure> with <figcaption> and <progress> elements.
- Use an image to represent a task and show the progress of that task (e.g., file upload) as a progress bar.
- The image should show what the task is about, and the progress bar should show the completion percentage.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Progress with Image</title>
</head>
<body>
<h1>Task Progress</h1>
<section>
<figure>
<img src="upload.jpg" alt="File upload in progress" width="300">
<figcaption>File upload in progress</figcaption>
</figure>
<p>Upload Progress:</p>
<progress value="40" max="100"></progress>
<p>40% uploaded</p>
</section>
</body>
</html>
Explanation:
- The image in the <figure> element represents the task (e.g., a file upload in progress).
- The <progress> element shows the current progress of the task. In this case, it shows 40% of the task is complete.
Assignment 5: Displaying Multiple Tasks with Progress Bars
Task:
- Create a webpage displaying multiple tasks, each with its own progress bar.
- Each task should have a name, an image (optional), and a progress bar that shows the current task completion.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Task Progress</title>
</head>
<body>
<h1>Task Progress</h1>
<section>
<h2>Task 1: File Upload</h2>
<figure>
<img src="upload.jpg" alt="File upload" width="100">
<figcaption>File upload progress</figcaption>
</figure>
<progress value="25" max="100"></progress>
<p>25% uploaded</p>
<h2>Task 2: Data Processing</h2>
<figure>
<img src="processing.jpg" alt="Data processing" width="100">
<figcaption>Data is being processed</figcaption>
</figure>
<progress value="50" max="100"></progress>
<p>50% of data processed</p>
<h2>Task 3: Image Rendering</h2>
<figure>
<img src="rendering.jpg" alt="Image rendering" width="100">
<figcaption>Rendering images</figcaption>
</figure>
<progress value="75" max="100"></progress>
<p>75% rendered</p>
</section>
</body>
</html>
Explanation:
- Each task has an associated progress bar that shows the completion percentage (25%, 50%, and 75%).
- An image and caption describe each task, providing context to the progress.
Conclusion:
These assignments focus on applying the HTML5 elements <figure>, <figcaption>, and <progress> in different practical scenarios. By completing these assignments, students will have a clear understanding of how to use these elements effectively in web pages.
4o mini
You said:
give more 5
ChatGPT said:
ChatGPT
Sure! Here are five more assignments related to the HTML5 elements <figure>, <figcaption>, and <progress>:
Assignment 6: Creating a Photo Gallery with Descriptions
Task:
- Create a webpage that displays a photo gallery using the <figure> and <figcaption> elements.
- Each photo should be displayed in a grid, and below each image, there should be a caption that describes the photo.
- Use CSS to style the gallery in a simple grid layout.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
figure {
margin: 0;
text-align: center;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Photo Gallery</h1>
<div class="gallery">
<figure>
<img src="nature1.jpg" alt="Beautiful sunset over the ocean" />
<figcaption>Sunset over the ocean</figcaption>
</figure>
<figure>
<img src="nature2.jpg" alt="Mountain range covered in snow" />
<figcaption>Snow-covered mountain range</figcaption>
</figure>
<figure>
<img src="nature3.jpg" alt="Green valley with a river" />
<figcaption>Serene green valley with a river</figcaption>
</figure>
</div>
</body>
</html>
Explanation:
- This assignment creates a responsive photo gallery using the <figure> and <figcaption> elements.
- CSS grid layout is used to arrange the images in a grid with three columns.
Assignment 7: Create a Progress Bar for Multiple Tasks
Task:
- Create a webpage with multiple tasks, each having its own progress bar.
- Use the <progress> element to represent the completion percentage of each task.
- Display each task's name above the progress bar, and set initial progress values to 0%.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Tasks Progress</title>
</head>
<body>
<h1>Task Progress Overview</h1>
<section>
<h2>Task 1: Code Compilation</h2>
<progress value="0" max="100"></progress>
<p>Task 1: Code Compilation is 0% complete.</p>
<h2>Task 2: Testing</h2>
<progress value="0" max="100"></progress>
<p>Task 2: Testing is 0% complete.</p>
<h2>Task 3: Deployment</h2>
<progress value="0" max="100"></progress>
<p>Task 3: Deployment is 0% complete.</p>
</section>
</body>
</html>
Explanation:
- The progress elements are used to display the progress of multiple tasks.
- Each task has a name above its respective progress bar, with the value set to 0 initially.
Assignment 8: Create a To-Do List with Progress Bar for Task Completion
Task:
- Create a to-do list that includes tasks with completion percentages.
- Display each task as a progress bar with a description using the <progress> element.
- Update the progress value as the user marks the task as completed.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List with Progress</title>
<script>
function updateProgress(taskId, value) {
document.getElementById(taskId).value = value;
}
</script>
</head>
<body>
<h1>To-Do List</h1>
<ul>
<li>
Task 1: Write Report
<progress id="task1" value="20" max="100"></progress>
<button onclick="updateProgress('task1', 100)">Complete</button>
</li>
<li>
Task 2: Review Code
<progress id="task2" value="50" max="100"></progress>
<button onclick="updateProgress('task2', 100)">Complete</button>
</li>
<li>
Task 3: Submit Assignment
<progress id="task3" value="10" max="100"></progress>
<button onclick="updateProgress('task3', 100)">Complete</button>
</li>
</ul>
</body>
</html>
Explanation:
- Each task in the to-do list is represented with a progress bar.
- A button is provided to update the progress bar when a task is marked as complete.
Assignment 9: Create a Task Completion Tracker
Task:
- Create a webpage that tracks the progress of several tasks.
- Display the task name, progress bar, and completion percentage.
- Update the progress bar using JavaScript as the task progresses.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Completion Tracker</title>
<script>
function updateProgress(taskId, value) {
let progress = document.getElementById(taskId);
progress.value = value;
document.getElementById(taskId + "Text").innerText = value + "% complete";
}
</script>
</head>
<body>
<h1>Task Completion Tracker</h1>
<section>
<h2>Task 1: Writing Report</h2>
<progress id="task1" value="0" max="100"></progress>
<p id="task1Text">0% complete</p>
<button onclick="updateProgress('task1', 40)">Update to 40%</button>
<button onclick="updateProgress('task1', 100)">Mark as Complete</button>
<h2>Task 2: Code Review</h2>
<progress id="task2" value="0" max="100"></progress>
<p id="task2Text">0% complete</p>
<button onclick="updateProgress('task2', 60)">Update to 60%</button>
<button onclick="updateProgress('task2', 100)">Mark as Complete</button>
</section>
</body>
</html>
Explanation:
- This webpage allows users to track the completion of tasks using progress bars.
- Buttons are provided to manually update the progress and track the completion percentage.
Assignment 10: Displaying Task Progress in a List
Task:
- Create a list of tasks where each task has a progress bar showing the completion percentage.
- Use the <progress> element to show the progress for each task.
- Use <figure> and <figcaption> to describe each task.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Progress List</title>
</head>
<body>
<h1>Task Progress</h1>
<section>
<figure>
<h2>Task 1: Design UI</h2>
<progress value="50" max="100"></progress>
<figcaption>Design the user interface for the new website. 50% complete.</figcaption>
</figure>
<figure>
<h2>Task 2: Develop Backend</h2>
<progress value="30" max="100"></progress>
<figcaption>Develop the backend APIs for the application. 30% complete.</figcaption>
</figure>
<figure>
<h2>Task 3: Write Documentation</h2>
<progress value="70" max="100"></progress>
<figcaption>Write documentation for the project. 70% complete.</figcaption>
</figure>
</section>
</body>
</html>
Explanation:
- The tasks are listed, and each one has a description and a progress bar to show completion.
- <figure> and <figcaption> are used to describe the task alongside the progress.
These additional assignments further reinforce the understanding of the <figure>, <figcaption>, and <progress> elements in practical web design scenarios. Completing these assignments will help students become more confident in using these elements to enhance their webpages.
4o mini
You said:
write 100 MCQs for the concept above with explanation
ChatGPT said:
ChatGPT