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

Posted on by tchastkavich

Shape of the Day:

  • Finish the HTML Dictation from last week
  • Tips and Hints when working with HTML
  • Continue HTML Learning – Embedding Videos and Widgets, Block vs Inline elements and Tables

Website of the Day:

http://isitfridayyet.net/ – Try to come back to this website tomorrow to check the code.

Check out http://isittuesday.co.uk/ What do you think gives the website the properties of telling us what day of the week it is – HTML, CSS, or Javascript? Why? What would the response be if it wasn’t Tuesday?

1. HTML Dictation – Complete and submit with your HTML Questions on Teams Assignment #5

2. Mr. Chastkavich will be sharing tips and hints for HTML.

3. Try the following exercises by adding to your “HTML Dictation Challenge” Page:

A) 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
  • Dissect the parts of the iframe tag that you have copied and pasted. What are the editable/changeable components?

B) 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)?

C) 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.

D) 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?

E) Add a Favicon to your webpage

  • Favicons are tiny pictures next to your page title in the browser. What’s the icon for Mr. Chastkavich’s website?
  • To make one on your website, you must find an image that is 16 x 16 pixels (pretty small!)
  • Download this image of flags and find a country that represents your background (can also be Canadian Flag). Open the file in Paint and use the Crop function to select one flag.
  • Save the cropped image in the SAME folder as where your website is saved. Call the image “flag.jpg”
  • Now add the following code to your <head> section to make the icon appear

<link rel="shortcut icon" href="flag.jpg">