html

Class Monday, October 1, 2018

 Today’s goals

  • Review block and inline elements
  • Learn the difference between the video tag and iframe tag
  • Learn how to create tables with HTML

 2 Quick Things

  • October desktop wallpaper is available from Smashing Magazine!
  • Period 6: Please let me know if you have a food allergy as we will be doing our Harvest of the Month activity on Thursday

 Today’s featured web site(s):

  Quick Review: 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).
  • Please name some block elements you’ve learned. How about inline elements?

 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?

 Tables

  • Web developers often used tables before CSS was used to control the layout of webpages
  • Tables are still 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.
  • 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
  • Let’s practice: We will begin with this example. Let’s add a border that is one pixel wide. What do you notice about table rows tr and table cells td?
  • Let’s now begin a new webpage in Notepad++ and add our table to it. What HTML tags should we put in first and in what order? Go ahead and look at your other webpages for help.
  • Can you: Create a table showing Patriots games for October? Let’s change the table we’re working with by changing the text and adding some more rows. The first row should have 3 table headers that say Date, Opponent, and Time. Then, the second row should say October 4, Colts, 8:20. See the schedule here..
  • What problems do you think could happen when trying to view tables on small screens?