Scribd
Upload
2 views

WD Week1 3rd

The document outlines a curriculum plan for an 8th-grade ICT course focused on web design, specifically covering embedding and modifying images and videos, understanding HTML tags, and creating hyperlinks. Each day's lesson includes objectives, content standards, performance standards, and instructional goals aimed at developing students' skills in web page creation and usability analysis. The plan spans from December 16-20, 2024, and integrates various subjects such as arts, media literacy, and mathematics to enhance learning outcomes.

Uploaded by

DONNA MAY ZUNIGA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

WD Week1 3rd

The document outlines a curriculum plan for an 8th-grade ICT course focused on web design, specifically covering embedding and modifying images and videos, understanding HTML tags, and creating hyperlinks. Each day's lesson includes objectives, content standards, performance standards, and instructional goals aimed at developing students' skills in web page creation and usability analysis. The plan spans from December 16-20, 2024, and integrates various subjects such as arts, media literacy, and mathematics to enhance learning outcomes.

Uploaded by

DONNA MAY ZUNIGA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

School: Rio Chico National High School Grade Level: 8

MATATAG K to 10
Name of Teacher: DONNA MAY Z. PADOLINA Learning Area: SP – ICT 8 (Web Design)
Curriculum - Lesson
Exemplar Teaching Dates and Time: December 16-20,2024 Quarter: 3rd

I. CURRICULUM CONTENT, STANDARDS, and LESSON COMPETENCIES


Day: 1 Day: 2 Day: 3 Day: 4 Day: 4
Embedding and Modifying Embedding and Modifying Embedding and Modifying The <html> tag Creating Hyperlinks
A. CONTENT:
Images Videos Image Alt
The learner demonstrates The learner demonstrates The learner demonstrates The learner demonstrates The learner demonstrates
basic understanding of basic understanding of basic understanding of basic understanding of basic understanding of
terminologies, history, terminologies, history, terminologies, history, terminologies, history, terminologies, history,
principles of creating an principles of creating an principles of creating an principles of creating an principles of creating an
effective web page, effective web page, including effective web page, including effective web page, effective web page, including
including an in-depth an in-depth consideration of an in-depth consideration of including an in-depth an in-depth consideration of
B. Content
consideration of information architecture. information architecture. consideration of information architecture.
Standards
information architecture. Become familiar with graphic Become familiar with graphic information architecture. Become familiar with graphic
Become familiar with design principles that relate design principles that relate Become familiar with design principles that relate
graphic design principles to the web and learn how to to the web and learn how to graphic design principles to the web and learn how to
that relate to the web and implement these theories implement these theories that relate to the web and implement these theories
learn how to implement into practice. into practice. learn how to implement into practice.
these theories into practice. these theories into practice.
By the end of the quarter, By the end of the quarter, the By the end of the quarter, the By the end of the quarter, By the end of the quarter, the
C. Performance the learners are able to learners are able to develop learners are able to develop the learners are able to learners are able to develop
Standards develop skills in analyzing skills in analyzing the usability skills in analyzing the develop skills in analyzing skills in analyzing the usability
the usability of a website. of a website. usability of a website. the usability of a website. of a website.
Embeds and modifies Embeds and modifies videos. Embeds and modifies alt Prepares web page Creates hyperlinks to a page.
D. Learning
images. attributes document according to
Competencies
HTML document standard.
E. Instructional At the end of the lesson, At the end of the lesson, At the end of the lesson, At the end of the lesson, At the end of the lesson,
Objectives students will be able to: students will be able to: students will be able to: students will be able to: students will be able to:

1. Identify the HTML tag 1. Identify the HTML tag used 1. Identify the purpose and 1. Identify the purpose and 1. Define what hyperlinks
used to embed images to embed videos on a importance of the alt structure of the <html> are and their purpose in
on a webpage. webpage. attribute in HTML. tag. web development.
2. Demonstrate how to 2. Demonstrate how to 2. Demonstrate how to 2. Explain the importance 2. Identify the components
embed an image using embed a video using the embed an image using the of the <html> tag in a of a hyperlink in HTML.
the <img> tag. <video> tag. <img> tag with a webpage’s structure. 3. Create internal and
3. Modify image properties 3. Modify video properties descriptive alt attribute. 3. Demonstrate how to external hyperlinks using
such as width, height, such as width, height, 3. Modify the alt attribute to properly use the <html> the <a> tag.
and alignment using controls, autoplay, and loop provide accurate tag in a basic HTML 4. Demonstrate the use of
HTML attributes and CSS. using HTML attributes. alternative text for document. hyperlinks to navigate
Apply inline CSS to style 4. Apply inline CSS to style different images. 4. Create a simple HTML between pages or external
images on a webpage. videos on a webpage. 4. Understand the role of alt page utilizing the <html> websites.
text in improving web tag to define the
accessibility and SEO structure of the
(Search Engine webpage.
Optimization).
Arts: Use of image ICT: Application of HTML and ICT: Application of HTML for ICT: Use of HTML to ICT: Developing basic website
placement and dimensions CSS for embedding embedding and describing structure and create functionality.
to create visually appealing multimedia content. images. webpages. Language Arts: Structuring
designs. Arts: Designing multimedia Media Literacy: English: Writing proper tag content for clarity in
ICT: Application of HTML content for visually appealing Understanding accessibility descriptions and labels for hyperlinks.
F. Integration and CSS to manipulate websites. and how alt text helps people web content. Mathematics: Logical
images. Media Literacy: with disabilities access Media Literacy: arrangement of paths and
Mathematics: Proportion Understanding how content. Understanding how the directories.
and scaling when resizing multimedia impacts online English: Writing clear, basic structure of a
images. communication. concise, and descriptive alt webpage is organized
text. through HTML.
II. LEARNING RESOURCES
Ppt presentation on Ppt presentation embedding Ppt presentation on image alt Ppt presentation on html Ppt presentation on
embedding and modifying and modifying videos tag hyperlinks
images
III. TEACHING AND LEARNING PROCEDURES
A. Pre- Lesson Proper Show examples of popular Show examples of popular Show a website with broken Show students a simple Show examples of popular
a. Activating Prior websites that use images websites that use embedded images and ask students: HTML page on a browser websites and highlight how
Knowledge
b. Establishing Purpose effectively. videos (e.g., tutorial sites, "What happens when images and its corresponding HTML hyperlinks guide navigation.
of the Lesson promotional videos). don't load on a webpage?" code. Ask: "How would you get
Ask students: “What role do Ask: “How do videos enhance Ask students: “What do you from one webpage to
images play in enhancing a the user experience on a Explain that the alt attribute think is the most important another without hyperlinks?"
webpage?” webpage?” ensures a description is part of this code?”
available if the image fails to Introduce the concept of Share today’s objectives and
Briefly recap basic HTML Recap how images are load or for screen readers to the <html> tag as the connect them to real-life use
tags (e.g., <html>, <body>, embedded on a webpage help visually impaired users. foundation for every cases (e.g., linking pages in a
<head>) and how they using the <img> tag. webpage. school project or creating a
structure a webpage. Transition to the importance Recap the use of the <img> personal website).
of embedding videos for tag for embedding images on Recap basic HTML
engaging content. a webpage. terminology (tags,
attributes, elements).
B. Lesson Proper Introduction to Embedding Introduction to Embedding Introduction to the alt Introduction to the <html> Discussion:
a. Developing and Images Videos Attribute Tag
Deepening What is a hyperlink?
Understanding
b. Making Generalization HTML <video> Tag Overview:
HTML <img> Tag Overview: Definition and Purpose of alt: Definition and Purpose of A clickable element that
Introduce the <img> tag as Introduce the <video> tag as The alt attribute is used to the <html> Tag: directs users to another
the HTML element used to the HTML element used to provide alternative text for Explain that the <html> tag location (webpage, section,
display images on a embed videos on a webpage. an image. is the root element of an file).
webpage. It describes the image HTML document. It wraps
Explain the syntax of the Explain the basic syntax of the content or function when the all the content of the Anatomy of a hyperlink:
<img> tag: <video> tag: image cannot be displayed webpage and tells the <a href="URL">Link Text</a>
<video src="video.mp4" (e.g., due to slow internet or browser that the document
<img src="image.jpg" broken links). It also improves is written in HTML. href: Specifies the destination
controls></video>
alt="Description of the accessibility for users relying Mention that everything URL or file path.
image"> Emphasize that the src on screen readers. inside the <html> tag is part Link Text: The clickable text or
Emphasize that the src attribute specifies the file path HTML <img> Tag with alt of the webpage. content.
attribute specifies the file of the video, and the controls Attribute: Basic Structure of an HTML
path of the image, and the attribute adds playback Types of hyperlinks:
alt attribute provides controls (e.g., play, pause, Introduce the structure of the Document:
volume). Internal Links: Link to another
alternative text for <img> tag with the alt page within the same
accessibility. Video File Formats: attribute: <!DOCTYPE html> website.
<html>
Example of Image Discuss common video <img src="image.jpg" alt="A <head> External Links: Link to a
Embedding: formats used on the web (e.g., description of the image"> <title>Page Title</title> different website.
MP4, WebM, Ogg). Explain that the alt text </head>
Anchor Links: Link to a
<img src="example.jpg" Explain the need to provide should be concise but <body>
specific section within the
alt="An example image"> multiple formats for browser descriptive enough to convey <h1>This is a
same page.
compatibility: the image's purpose or Heading</h1>
Image File Formats: content. <p>This is a Activity: Create a simple
Discuss common image <video controls> Example of Embedding paragraph.</p> HTML page with hyperlinks:
formats used on the web Images with Alt Text: </body>
<source src="video.mp4" Task:
(e.g., JPG, PNG, GIF). </html>
type="video/mp4">
Explain when to use each <img src="forest.jpg" alt="A Explaining the Parts of the "Create a webpage with at
format (e.g., PNG for <source src="video.webm" dense green forest with tall HTML Document: least one internal link, one
transparency, JPG for type="video/webm"> trees"> external link, and one anchor
smaller file sizes). <!DOCTYPE html>: Declares link. Use placeholders for
Your browser does not Importance of alt in the document type and now (e.g., #)."
Modifying Image Properties support the video tag. Accessibility: version of HTML (HTML5).
Resizing Images Using Emphasize how the alt text <html>: Root element that
</video>
assists users with visual contains everything.
HTML Attributes: Example of Video Embedding: impairments by being read <head>: Contains metadata
Introduce the width and aloud by screen readers. like the page title and links
height attributes to resize <video src="example.mp4" Discuss how alt attributes to external resources (CSS,
an image: controls improve SEO, helping search JavaScript).
width="400"></video> engines understand the <body>: Contains the visible
<img src="example.jpg" Modifying Video Properties content of images. content, such as headings,
alt="Resized image" paragraphs, and images.
width="200" height="150"> Resizing Videos Using HTML Modifying the alt Attribute
Explain how to maintain Attributes: for Different Scenarios Practical Use of the <html>
image proportions by only Introduce the width and Tag
setting one dimension height attributes to resize a Writing Descriptive alt Text:
(either width or height), video: Explain how to write effective Creating a Basic Webpage:
allowing the browser to alt text that is meaningful Show students how to
automatically adjust the <video src="example.mp4" and avoids redundancy. For create a basic HTML file
other. controls width="600" example: using a simple text editor
Adding CSS for Further height="400"></video> (e.g., Notepad, Visual
Explain the importance of <img src="logo.png" Studio Code).
Image Styling: setting dimensions for alt="Company logo"> Create an HTML document
Introduce inline CSS for consistent layout design. that includes a title, a
modifying image styles such Best Practices for Using alt: heading, and a paragraph.
as borders and margins: Adding Playback Attributes: Use clear descriptions (e.g., Explaining the <html>,
“A bowl of fresh <head>, and <body>
Introduce additional attributes
<img src="example.jpg" strawberries” instead of
to control video playback:
alt="Styled image" “Image of strawberries”). Sections:
style="border: 2px solid Autoplay: Automatically starts Avoid overly long or Discuss that the <html> tag
black; margin: 10px;"> playing the video when the irrelevant descriptions (e.g., contains two main sections:
Example of Full Image page loads. “A picture of a beautiful view <head>: Holds meta-
Modification: in a scenic mountain information about the
Loop: Repeats the video
range…”). document (like title and
continuously.
<img src="example.jpg" Examples of Correct and links).
alt="Modified image" Muted: Mutes the audio on Incorrect alt Text: <body>: Contains the actual
width="300" height="200" page load. content that will be
style="border: 2px solid Correct: displayed on the webpage.
#000; border-radius: <video src="example.mp4"
10px;"> autoplay loop muted controls <img src="dog.jpg" alt="A Example:
width="600"></video> happy brown dog running in <!DOCTYPE html>
Demonstration of Image a park"> <html>
CSS for Styling Videos:
Embedding and <head>
Modification Introduce inline CSS for Incorrect: <title>My First
Live Coding Demonstration: modifying the appearance of Webpage</title>
the video player, such as <img src="dog.jpg" </head>
Embed an image on a adding a border or adjusting alt="Image"> <body>
sample webpage, then margins: <h1>Welcome to My
apply various modifications Demonstration of Embedding Webpage</h1>
like resizing, adding <video src="example.mp4" and Modifying alt Attributes <p>This is a simple
borders, and adjusting controls style="border: 3px Live Coding Example: webpage created using
margins using HTML solid #000; margin: HTML.</p>
attributes and inline CSS. 20px;"></video> Embed images in a sample </body>
HTML document, each with </html>
Hands-on Practice: an appropriate alt attribute.
Ask students to create a Demonstration of Embedding Demonstrate how to modify Hands-on Activity: Building
simple HTML page with at and Modifying Videos the alt text to match different Your First HTML Page
least one embedded image. Live Coding Example: types of images.
Instruct students to resize Guided Practice:
the image and add a border Embed a video on a sample Hands-on Practice: Have students open a text
using both HTML attributes webpage, then apply various Ask students to create a editor and type the basic
and CSS styling. modifications like resizing, simple webpage with three structure of an HTML
autoplay, and adding controls images. document, ensuring they
using HTML attributes and Instruct students to add use the <html>, <head>,
inline CSS. relevant alt text to each and <body> tags correctly.
Hands-on Practice: image and ensure the
descriptions match the Customizing the Webpage:
content. Ask students to modify the
content inside the <body>
Ask students to create a
tag to include their name, a
simple HTML page with at
brief introduction, and a
least one embedded video.
short paragraph about their
Instruct students to resize the favorite hobby.
video, add playback controls, Saving and Previewing:
and style the video using CSS. Guide students through
saving their files with
a .html extension and
opening the file in a
browser to view their first
webpage.
Review Questions: Review Questions: “What is the purpose of the “What is the purpose of the Summarize:
alt attribute?” <html> tag?” The role of hyperlinks in web
“Which tag is used to “Which tag is used to embed “How can you write effective “What two main sections navigation.
embed an image on a videos on a webpage?” alt text for an image?” are contained within the How to create internal,
webpage?” “How can you resize a video “Why is the alt attribute <html> tag?” external, and anchor links.
using HTML?” important for web “What is the difference Assessment
“How can you resize an “What does the autoplay accessibility?” between the <head> and
image using HTML?” attribute do?” <body> tags?” Quick quiz:
C. Post-Lesson Proper Activity: Label parts of a hyperlink.
a. Evaluating Learning “What is the purpose of the Activity: Pair students and ask them Activity: Write HTML to create a link
b. Remarks alt attribute in the <img> Pair students and ask them to to review each other’s HTML Pair students and ask them to a specified location.
c. Reflection
tag?” review each other’s code to code. They should check to review each other’s
ensure the correct embedding whether the alt attributes are HTML files, ensuring the
Activity: and modification of videos. descriptive and appropriate <html> structure is correct.
for each image.
Pair students and ask them
to review each other’s work
to ensure correct image
embedding and
modifications.
Remarks: Remarks: Remarks: Remarks: Remarks:

Prepared by: Checked: APPROVED:

DONNA MAY Z. PADOLINA ALMA G. PAR CARLOS G. CORPUZ, PhD


Teacher III Head Teacher III School Principal IV

You might also like