Remember to take your time and work through each question diligently! Test your code, make sure it works, and try to find ways to improve. Once you are happy and satisfied with your code, upload it to Github, then turn in your Github link at the bottom of the page!
Don't forget. Make sure this assignment is in it's own repository. Not mixed in with others!
1. Embedding Multimedia in Educational Content
Objective: The aim of this assignment is to enhance the delivery of educational content through the effective use of multimedia elements in a web page. By embedding images, audio, and video, students will learn to create more engaging and interactive educational resources.
Problem Statement: In an era where digital learning is becoming increasingly prevalent, the traditional text-based delivery of educational content can fail to fully engage students. This assignment challenges you to incorporate multimedia elements into an HTML document designed to teach a simple concept (e.g., the water cycle, basic math principles, or a historical event), thereby improving the learner's engagement and understanding.
Create an HTML page and embed an image that illustrates the concept you're teaching. Add a caption using the element to describe the image.
Task 1: Embed an Educational Image
Create an HTML page and embed an image that illustrates the concept you're teaching. Add a caption using the <figcaption>
element to describe the image.
Expected Outcome: A web page displaying an image relevant to the educational content, with a caption explaining the image.
Task 2: Include an Instructional Audio Clip Embed an audio clip that provides a brief explanation or reading of the concept. Ensure the audio is accessible with playback controls.
Expected Outcome: A web page with an embedded audio clip that plays an explanation of the chosen concept, complete with controls for play, pause, and volume.
Task 3: Integrate an Informative Video Incorporate a video that visually explains the concept. The video could be a lecture, an animation, or a documentary clip related to the topic.
Expected Outcome: A web page featuring a video that provides a comprehensive explanation or visualization of the concept, enhancing the learner's understanding through visual and auditory stimulation.
Completion Criteria:
The HTML document must include at least one example of each multimedia element (image, audio, video) related to the educational content.
Each multimedia element must be appropriately captioned or described to aid understanding.
The page should be structured semantically, with clear headings and descriptive text accompanying each multimedia element to contextualize its relevance to the educational content.
2. Crafting a Semantic Web Document
Objective: The aim of this assignment is to deepen understanding and application of semantic HTML5 elements in creating a well-structured, accessible web document. Students will learn to use semantic tags to outline the structure of a web page, enhancing both its readability for humans and its interpretability for search engines.
Problem Statement: In the sprawling landscape of the web, countless pages suffer from poor structure and accessibility, making it challenging for both users and search engines to navigate and understand content. This assignment challenges you to build a semantically rich, accessible web page on a topic of your choice (e.g., a hobby, a tutorial, or a personal project), using HTML5 semantic elements to organize content logically.
Task 1: Define the Page Structure Use semantic elements to define the basic structure of your web page, including a header, navigation, main content, and a footer.
Expected Outcome: A web page with a clear, logical structure, marked up with semantic elements that delineate the header, navigation, main content, and footer.
Task 2: Organize Content Using Articles and Sections
Within the <main>
element, use <article>
and <section>
tags to organize the content related to your topic. Use headings (<h2>
to <h6>
) to title each section or article appropriately.
Expected Outcome: A semantically structured main content area, with articles and sections that logically separate different topics or ideas related to the main subject.
Completion Criteria:
The web document must employ semantic HTML5 elements to structure the content logically and accessibly.
The page should make appropriate use of
<article>
,<section>
,<nav>
,<header>
,<main>
, andHeadings should be used to structure the content hierarchically, improving both readability and accessibility.
<footer>
elements where relevant to the content.