Web Development 101

A project-based introduction to web development for intermediate coders in upper middle or high school using HTML and CSS. Request Quote

  • Grades 7 - 8
  • 10 lessons
    • Web
  • Advanced Course
Course includes
  • 10 lessons
  • 134 activities
  • Enhanced Creativity Tools
  • Automatic Assessment
  • Tutorials and Reviews
  • Coding Puzzles
  • DIY Projects
  • Quizzes
  • Teacher Guides
  • Answer Keys
Prerequisites
No previous coding experience required.

Web Development 101

Lesson: Tables and Media
Time: 50+ mins

Introduction

In this lesson, students will learn how to embed video and audio in their web page and format content using tables. Activities include solving challenge activities; building a My Channels Page project that has four web pages (Home, My Photos, My Channels, and My Pets); and taking a 5-question multiple-choice quiz about “Lesson 6: Tables and Media†concepts. Note: Answers to all challenge activities (8 total) are located below the “Standards†section in this teacher guide.

New HTML Elements

  • <table> : Defines a table made up of rows and columns of cells.
  • <tr> : Defines a row of cells in a table.
  • <td> : Defines a cell of a table.
  • <th> : Defines a cell as header.
  • <video> : Embeds a video player (e.g., video clip, video stream) into the document.
  • <audio> : Adds an audio file to the web page.

New HTML Attributes

  • colspan: Indicates how many columns the cell extends (e.g., 2).
  • rowspan: Indicates how many rows the cell extends (e.g, 3).
  • src: Indicates the URL of a media resource.
  • controls: Indicates whether the user can play and pause a video.
  • autoplay: Indicates whether playback should automatically begin.
  • loop: Indicates whether media element should start over when it reaches the end.
  • muted: Indicates whether to mute the media element.

New CSS Styles

  • border-collapse: Sets whether cells have shared or separate borders.
  • border-spacing: Sets the distance between cells (e.g., 50px).
  • border-top: Sets the value of the element’s top border (e.g., 3px solid black).
  • border-right: Sets the value of the element’s right border (e.g., 3px solid black).
  • border-bottom: Sets the value of the element’s bottom border (e.g., 3px solid black).
  • border-left: Sets the value of the element’s left border (e.g., 3px solid black).

Vocabulary

  • HTML table: A two-dimensional table made up of columns and rows that allows you to group data together
  • Audio file: A file that contains music, speech, or any other forms of sound
  • Embedded video: Code structure of a video that’s taken from a website (e.g., YouTube) and placed onto your web page
  • GIFs: A small, animated image format

Objectives

  • Apply coding concepts to complete provided challenge activities
  • Add tables, videos, and sound to web pages
  • Apply concepts from this lesson to create a My Channels Page project

Materials

  • Computers or laptops (1 per student) with student account access to Tynker.com

Warm-Up (5 minutes)

  • What have you enjoyed so far in the Web Development 101 course?
  • What is something you struggle with in this course? If you can’t think of anything, describe what someone taking this course might struggle with.
  • What would you like to learn how to create or do using HTML and CSS?

Activities (45 minutes)


1. Tables (Document)
  • Students are introduced to new elements and will learn how to create tables in web pages.
  • This module introduces three new concepts:
    • The table Element- To create a new table, students must use the table element:

    • The tr Element- Each table can have one or more rows, which are specified using the tr element:

    • The td and th Elements- Each row of the table can have one or more cells.
      • The th element represents a header cell:

      • The td element is used for cells that hold data:

  • To solve the challenge activity, students will need to make a 3 by 3 table for a tic-tac-toe game. Note: Answers to challenge activities are located below the “Standards†section in this teacher guide. Give a hint: Tell students to look at the code in the “Contact List†exercise as a reference.
  • Tell students to click the “Next†button (located at the bottom of the document) to move on to the next module.
2. Table Attributes (Document)
  • The colspan and rowspan attributes allow students to have cells that span multiple columns or rows.
  • Here’s an example of the colspan attribute:

  • Here’s an example of the rowspan attribute:

  • To solve the challenge activity, students will need to create a table that looks like this provided image:

    Give a hint: Tell students to use the colspan and rowspan attributes.
3. Table Styling (Document)
  • Tables can be styled by customizing features such fonts, borders, and backgrounds. However, there are some CSS properties that are specific to tables.
  • This module introduces three new concepts:
    • The border-collapse Property- Cells can share borders, which makes the table look more compact. Point out the aesthetic differences to your students:

    • The border-spacing Property- If students have the border-collapse property set to separate, then they can adjust the amount of spacing between cells. Here’s an example:

    • The vertical-align Property- This property allows students to align content vertically inside a cell. Here’s an example:

  • To solve the challenge activity, students will need to make a maze using a single table. If students are struggling, ask them to analyze how different CSS classes affect their output. Here are a few examples to help them get started:

4. Embedding Video (Document)
  • The video element is a media element that will display video and audio data.
  • This module introduces three new concepts:
    • The video Element- The video element is used to add a video to a web page:

    • The src Attribute- The src attribute is needed to tell the web browser where to find the video file. Here’s an example:

    • The controls Attribute- The controls attribute is needed to play and pause a video. Here’s an example:

  • To solve this challenge activity, students will need to add a video element with the given src attribute: fish-video.mp4. Give a hint: Tell students they need to add styletags to their code.
5. More on Videos (Document)
  • Students are introduced to four new concepts:
    • The autoplay Attribute- The autoplay attribute automatically plays the video. Here’s an example:

    • The loop Attribute- The loop attribute indicates that the video element should restart once it has finished playing. Here’s an example:

    • The muted Attribute- The muted attribute of the video element disables (mutes) audio. Here’s an example:

    • Video Embed- Some websites (e.g., YouTube) provide a code that you can use in your web page to embed a video.
  • This module includes two different challenges.
    • Challenge 5- Customizing the Video: Students will need to make the video play automatically with muted sound. Give a hint: Tell students to focus on modifying the code inside the opening <video> tag..
    • Challenge 6- Embed a YouTube Video: Students will need to go to YouTube and find a video to embed. If students’ computers do not have access to YouTube (due to district web page blocking restrictions), you can solve the challenge as a class using your teacher computer. Then instruct students to use the code in the “YouTube Embed Example.â€
6. Embedding Audio (Document)
  • Students will learn how to add sound to their web pages.
  • This module introduces three new concepts:
    • The audio Element- The audio element is used to add an audio file to a web page:

    • The src Attribute- The src attribute is needed to tell the web browser where to find the audio file. Here’s an example:

    • Other Attributes- So far students have learned about the controls, loop, autoplay, and muted attributes. Here’s an example:

  • To solve the challenge activity, students will need to make a sound board by creating a table that has 2 columns and 3 rows; add a provided sound file to each cell of the table; and add the name of each sound in bold below it. Give a hint: Tell students to add six td elements and six audio elements.
7. Embedding GIFs (Document)
  • Students are shown a GIF of Codey dancing.
  • To solve the challenge activity, students will need to find a GIF online and embed it. If needed, provide students with a website to get the GIFs, such as “giphy.com.â€
8. Project 6: My Channels Page (DIY)
  • In this DIY (do-it-yourself) project, students will use the Text Code Editor to create a My Channels page for their website. Note: Students are provided step-by-step directions in the Text Code Editor “Tutorial†tab, which will guide them through the project.
  • Here’s a screen image sample of what their project might look like:

  • Did students finish early? Direct their attention to “Step 5†of the Tutorial, which provides bonus challenges such as adding more content and experimenting with different colors.
9. Quiz (Multiple Choice)
  • Students will be asked 5 quiz questions to review concepts from this lesson.

Extended Activities (20 minutes)

Show and Tell
  • Ask 2-4 students to share their project with the class. This will provide an opportunity for students to get project inspiration from their classmates. Did anyone add more pages? What are some unique features they added?

U.S. Standards

  • CCSS-Math: MP.1, MP.2, MP.4, MP.7
  • CCSS-ELA: RI.7.4, RI.8.4, 6-8.RST.3, 6-8.RST.4, 6-8.RST.7
  • CSTA: 2-AP-10, 2-AP-13, 2-AP-17
  • CS CA: 6-8.AP.10, 6-8.AP.13, 6-8.AP.16, 6-8.AP.17
  • ISTE: 1.c, 1.d, 4.d, 5.c, 5.d, 6.b

U.K. Standards

  • Understand several key algorithms that reflect computational thinking [for example, ones for sorting and searching]; use logical reasoning to compare the utility of alternative algorithms for the same problem.
  • Create, re-use, revise and re-purpose digital artefacts for a given audience, with attention to trustworthiness, design and usability.
  • Understand a range of ways to use technology safely, respectfully, responsibly and securely, including protecting their online identity and privacy; recognise inappropriate content, contact and conduct and know how to report concerns.