Building an algorithm with HTML

Lesson Content

• Lesson Plan Template:

  CTE Lesson Plan

• CTE Course Info and Benchmark Notes

  
  
  • Course Name: Coding Fundamentals
  • Course Number: 9009200
  • Course Type: Orientation/Exploratory
  • CIP Number: 0511020109

  CTE Standards

  • 05.07 - Create a program that implements an algorithm to achieve a given goal, individually and collaboratively.
  • 07.01 - Describe the structure of a simple program, and explain why sequencing is important.

• Unit Outline

  
  

  This lesson is designed to be used with the case study, “Real-life Algorithms” See CPALMS resource ID# 209804.

• Career Connection

  
  

  Algorithmic thinking is an important skill to learn because it allows software engineers and computer science developers to outline efficient procedures to solve errors and complete a specific task. This lesson encourages students to use their critical thinking and problem-solving skills along with their knowledge of HTML.

• Learning Objectives

  
  

  Students will be able to:

  • Understand and use the basic steps in algorithmic problem-solving in HTML.
  • Develop a set of step by step procedure to create an algorithm in HTML.
  • Select the most efficient algorithm to solve a problem, individually and collaboratively.

• Prior Knowledge

  
  

  Students should be familiar with/able to:

  • Block coding (beginner level)
  • Basic knowledge of HTML elements (lists, headings, etc.)

• Guiding Questions

  
  
  • How does sequencing of an algorithm relate to building a website?
  • What do algorithms allow computers to do?

• Procedure

  
  
  1. As a class, briefly review the term “Algorithm” as a sequence of steps that an individual or computer follows to complete a task.
  2. Then distribute the case study “Real-Life Algorithm” to students to read. (see CPALMS resource ID #209804).
  3. Students will be divided into pairs and briefly answer the following questions:
     • What do you notice about all of Liliana’s algorithms?
     • What similarities and differences do you notice in her algorithms?
     • What do you believe it’s the most effective algorithm? And why?
  4. Students will circle the attempt they believe is the most effective. Once the team discussion is finished, have students share their findings to the whole group.
  5. At this time, hand out the HTML criteria listworksheet and explain the requirements the website must include. See attachments.
  6. Students will discuss with their partner the sequencing of HTML elements they will be specifically using for the directions and ingredients of the sandwich algorithm from the case study. Students will complete the worksheet filling out the final HTML Sequence worksheet.
  7. Circulate around the room during the discussion and provides support as needed.
  8. After the discussion, students will collaboratively use a basic HTML code editor to create the website. Students will begin working with their shoulder partner to create the most efficient sequence in displaying Liliana’s sandwich algorithm.
  9. Give each pair of students the opportunity to share their HTML website. In the brief presentation students must answer the following questions:
     
     • What attempt have you and your partner chosen? And why?
     • Why have you chosen that specific sequencing of HTML elements?
  10. To bring the lessons to a close, the teacher will have the students answer the exit ticket:
  • • What makes HTML and daily tasks function similarly? What do they have in common? Provide an example.

• Teacher Notes

  
  
  • You can use algorithms to help describe things that people do every day (brushing teeth, making paper airplanes, dressing up for school, etc.)
  • An efficient algorithm is a sequence of tasks with the least number of steps, being sure to be exact, unambiguous, and precise. Share a recipe website of your choice when appropriate to encourage students to think why ingredients are shown first and directions second etc.
  • In step #9, it is likely you will see variations in how the HTML sequence is written – this is perfectly fine, provided the desired result was achieved.
  • This link will show an example created in HTML for additional guidance.

• Optional

  
  
  • Create a rubric based on the HTML criteria list to collect feedback on HTML knowledge and sequencing. Additionally, the rubric may include questions in step #9 that are answered during the presentation.
  • Students can style their website with the use of CSS (advanced).