Today’s goals:
- Finish your first HTML challenge from yesterday (broken code) and review the code together
- Finish Progress Report individual meetings
- Continue learning HTML: Adding videos through iframe code; adding weather stickers; block vs inline elements
Today’s featured web site:
- http://the100meterscroll.com/– A workout for your finger!
Adding Videos to a Webpage
- Choose a video to embed onto your page from YouTube
- Pick a video, then go to Share, then Embed, and copy the HTML onto your page
- 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
Adding Weather Stickers
- Go to the following site: https://www.accuweather.com/en/free-weather-widgets/current
- Let’s create a weather banner for Medford and then grab the code
- Let’s copy & paste the code into the first practice webpage we created
- What code do you recognize? You should see two HTML tags that you’ve recently learned.
- How do you think the banner is able to display the weather (where is the data coming from and how is it being delivered)?
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?
Up Next: 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.
- Let’s peek at the code: https://www.w3schools.com/tags/tag_table.asp
- Tags to know: table row tr and table data td