Today’s Goals:

• Review answer code for broken.html and webpage2.html (previous 2 practice pages)
• Review code for embedding videos and the weather banners
• Learn the difference between the video tag and iframe tag
• Continue learning basic HTML: tables, block and inline elements

 Today’s featured website:

• http://www.internetlivestats.com/ – Find out how many websites were hacked today and more on this website.

 Answer Code for Practice Webpages

• Happy pineapple page 
• Broken code page 

 Embedded Content Code

1. YouTube video
   • What is the iframe tag and why do you think we are using it to embed a video on our webpage? Let’s see https://www.w3schools.com/tags/tag_iframe.asp 
   • Where is the video code being hosted?
2. Weather banner
   • What code do you recognize? Do you see any HTML tags you know?
   • How do you think the banner is able to display the weather (where is the data coming from and how is it being delivered)?
   • What happens to your weather banner when you shrink the screen?

 Adding Videos to a Webpage

1. One way is to use the iframe tag  (like YouTube )
2. Another way is to use the video tag 
3. What differences do you notice?

  Block and Inline Elements

• Block elements take up as much space as they can (the full width of a page or container) and start on a new line (like paragraphs, headlines) while inline elements (the default display) only take up the space they need for the width of their content and don’t start on a new line (like images, links).
• Let’s look at our practice webpage and identify the block and inline elements: paragraph, link, image, headline, iframe, bullets. What is each one? How can you tell?

 HTML Tables

• Tables are mainly used on webpages to display data and other types of content that might commonly be put into a spreadsheet. You will learn later on this year how to make tables responsive and mobile-friendly.
• Web developers often used tables before CSS was used to control the layout of webpages
• Let’s look at some table examples: W3Schools.com  reference, this Code Pen example 
• Code to know: Table tag table, table row tr, table cell/data td, and table header th
• Table Practice
  1. Open up Notepad++ and start a new webpage with opening and closing html, head, title, and body tags.
  2. Save as tables.html
  3. Let’s start with the code from W3Schools . Only copy the table code and nothing else!
  4. We’re going to create a table that shows the next 5 Patriots games (last one in September and schedule for October). Schedule link: https://www.patriots.com/schedule/
  5. We will need to add 2 more rows and change the table headers to Date, Opponent, and Time.
  6. The first row should have 3 table headers that say Date, Opponent, and Time. Then, the second row should say September 29, Bills, 1:00 pm. We will continue to build our table like this using the schedule details.
  7. What problems do you think could happen when trying to view tables on small screens?