Description
Students will learn basic HTML and how to embed content into a page or post.
Objectives
- Students will become familiar with basic HTML.
- Students will discover a resource for improving their skills.
- Students will learn how to find embed codes and place them onto a page or post.
Common Core State Standards
| CCSS.ELA-LITERACY.CCRA.W.6 | Use technology, including the internet, to produce and publish writing and to interact and collaborate with others. |
| CCSS.ELA-LITERACY.SL.9-10.5 | Make strategic use of digital media (e.g., textual, graphical, audio, visual and interactive elements) in presentations to enhance understanding of findings, reasoning and evidence and to add interest. |
Length
50 minutes
Resources
- Computers with internet access
- Slideshow: Basic HTML and embed codes
- An account on Code Academy (free)
- Rubric for coding
It is suggested that the instructor complete the activities on slides 18 and 19 prior to teaching this lesson. This can be done in less than 15 minutes depending on the instructor’s prior knowledge.
Lesson step-by-step
- Introduction — 5 minutes
Use a browser like Google Chrome to show www.cnn.com. Have students point out the page elements that they can see (photo, scrolling text, headlines, etc.) Right-click on the page and select the option to reveal the source code (CTRL+U).
Have students discuss what they see and recognize (some might be able to pick out some of the HTML elements like <href> – if so, let the students explain what they do). Tell students that this is obviously a very high level website, and there are a lot of fancy elements included. However, they can achieve a similar look by learning just a few basic HTML commands. (Alternately, you can do this same exercise with your own school website or your school news website).
- Direct instruction — 10 minutes
Have students take notes as you deliver the content on slides 1-17 of the presentation.
- Transition — 5 minutes
Students will need computer access to complete the next steps. Give students this link to sign up for an account (free) on Code Academy.
- Practice — 30 minutes
- Show students Slide 18 and direct them to complete tutorials 1-20 at the “Web Beginner Tutorial”
- Students will work at their own pace to complete these activities. Encourage them to add to their notes as they learn more about HTML. (Alternately, students can work in pairs to complete this assignment).
- Instructor should walk around the class and provide support as needed.
- Once students complete the 20 tutorials, reveal Slide 19.
- Have students follow the directions on that slide to embed a video and turn in the assignment.
- Assessment
Use the rubric provided to ensure students have completed the tutorial and understand basic HTML.
Differentiation
Students may complete the practice activity with a partner.