HTML 2 – Videos, Widgets, Block/Inline, and Tables

Posted on by tchastkavich

Shape of the Day:

  • Finish the HTML Challenge from yesterday
  • Continue HTML Learning – Embedding Videos and Widgets, Block vs Inline elements and Tables

Website of the Day:

https://www.signs.com/branded-in-memory/ – Check out these cool stats from asking people to draw logos from memory!

1. Finish the HTML Challenge from yesterday

2. Add Videos to a Webpage

  • Choose an appropriate video from YouTube – we are going to embed this into your webpage
  • Once you find your video, right click the video and click “copy embed code“
  • Paste the code into your text editor – what is the iframe tag? Why would it be used to embed a video on your webpage? After thinking about it, check to see if you can find the answer here: https://www.w3schools.com/tags/tag_iframe.asp

3. Add a Weather Widget

  • Go to https://weatherwidget.io/ – we can create a weather banner for Vancouver, Port Coquitlam, or any place you want to see how the weather forecast is this week.
  • Type in the location you want at the top left of the page.
  • Click on “Get Code” and paste this code into your text editor.
  • Is there any code that looks familiar? What are the two HTML tags you recently learned that have shown up?
  • How do you think the banner is able to display such specific data (in this case weather)?

4. Block vs Inline Elements

  • On a webpage, block elements take up as much space as possible/allowed on the page or container. They also start on a new line (just like which kinds of tags?).
  • On a webpage, inline elements take up only the space needed for the size of their content. They do not start on a new line and this is the default display.
  • Identify the block and inline elements in your page, ensure that you can tell how they are block or inline.

5. Tables

  • These elements can display data in spreadsheet form, thus it can be more organized but is fitted to the style within the table. Tables can be responsive and more mobile friendly.
  • Take a look at the code from w3schools: https://www.w3schools.com/tags/tag_table.asp
  • Important code tags: Table tag – <table>, table row – <tr>, table cell/data – <td> and table header – <th>
  • Create a table with your current school schedule. Your headers should be Block, Class, Teacher
  • Now create a table showing the Vancouver Canucks next 5 games, or any other sporting team of your choice. Ensure you include Date, Opponent, Time, Arena/Location, and of course a title.
  • If you had a small screen, what would happen to the tables you made?