HTML - Basic HTML Part 7
Instructors: Jess, Carmen, and Eda
Basic HTML
Before this session, please:
- Read Working with the iframe Element: What Are Replaced Elements, and What Are Some Examples? and take notes
- Read Working with the iframe Element: How Do You Embed Videos onto Your Page Using the iframe Element? and take notes
- Work through the steps from Build a Video Display Using iframe and record any questions or new concepts
- Complete Build a Video Compilation Page on your own over the next few days.
During this session, we’ll:
- Review notes
- Review notes
- We’ll work through all the steps from Build a Video Display Using iframe together to review HTML video elements and better understand iframes
- We’ll talk through Build a Video Compilation Page together to prepare you to finish this solo over the next few days
After this session, please:
- Read Working with Links: What Are the Different Target Attribute Types, and How Do They Work? and take notes
- Read Working with Links: What Is the Difference Between Absolute and Relative Paths? and take notes
- Read Working with Links: What Is the Difference Between Slashes, a Single Dot, and Double Dot in Path Syntax? and take notes
- Read Working with Links: What Are the Different Link States, and Why Are They Important? and take notes
- Read Basic HTML Review and take notes
- Complete Basic HTML Quiz on your own to test what we’ve learned
Instructor Notes
Working with the iframe Element: What Are Replaced Elements, and What Are Some Examples?
Usually styling in our HTML elements will usually be determined by CSS, which we will start learning soon, I promise. But some types of elements have their content and style determined by an external resource. These are called ⬇️
Repeated elements: elements that display external content and styling. We can style aspects of them (like the width or height) but most of what they show on our page will be determined by the external resource.
A good example of this is the image element. When we start working with CSS we’ll learn ways to style image elements, but the content they display (the image) is determined by an external source, the image file.
iFrame elements: a repeated element that allows us to embed content from another webpage on our page. This is commonly used to embed maps, menu pages or other web content people might need to access while on another webpage. MDN’s iFrame documentation has more information.
Video elements: a repeated element that allows us to embed videos in our webpages
Input elements: can be repeated elements when used in some ways, but we’ll learn more about them later in the course!
Working with the iframe Element: How Do You Embed Videos onto Your Page Using the iframe Element?
Remember that iFrame elements are used when you want to embed external web or video content in your webpage.
We can use attributes to set the size and positioning of our iFrame elements. We can also use the following attributes:
Title: sets the title of the external resource, which is especially useful for accessibility
Allowfullscreen: Let’s you allow users to enlarge the frame to take up the full screen
Allow: Let’s you set rules about what users can and can’t do when interacting with the content in the iFrame element, which could include access to microphones, clipboards or more. MDN’s documentation on permissions-policy gives us more examples of the kinds of permissions we could grant using allow.
Build a Video Display Using iframe
Note that we can put the attributes for our iFrame element in any order and things will still work.
Allow attribute values we used include:
Accelerometer: lets the iFrame access information about how the user is holding or moving their device
Autoplay: lets the iFrame automatically play media embedded in it
Clipboard-write: lets the user copy information from the iFrame to their clipboard
Encrypted-media: Allows the iFrame’s source to use software protecting the media it is displaying
Gyroscope: lets the iFrame element access more information about how the user is moving their device by allowing access to sensors on their device
Web-share: lets the user share the content in the iFrame using the share capabilities built into their device
Sending and requesting information on the web:
When we access information on the web (like accessing a website or clicking to play the video here) we’re sending requests to access that information using a protocol called HTTP. A protocol is a series of set steps to exchange information. We don’t need to know too much about HTTP (and HTTPS, which is a more secure protocol for accessing things in the web) yet but it’s good to know that this exists.
If you do want to learn more about HTTP and HTTPS, here’s the Wikipedia article and MDN documentation.
When we send a request for information (like this video) we also often send information about the request like the referrer (the page or domain where the user accessed the iFrame content from)
The referrerpolicy attribute sets what information you want to send back to the content in the iFrame about where the user accessed the information from. Setting this attributes value to strict-origin-when-cross-origin means that we’ll send complete information about the referrer when the iFrame’s content is part of the same site. And we’ll send the referring domain when the iFrame’s content is from a trusted site (that is using the HTTPS protocol) that isn’t a page on the referring site. This value also means we won’t send any information on the referrer when the iFrame’s content is from an untrusted site. This sounds complicated, let’s look at an example.
If I’m add an iFrame element into the html in the https://jessica.tech/contact.html page on my website with a source that links to http://example.com our referrer is https://jessica.tech/contact.html and information about this could be sent to the owner of http://example.com, depending on our settings.
Let’s look at what this means using this Geeks for Geeks HTTP headers explainer
Build a Video Compilation Page
We’re seeing the section element for the first time in this tutorial. Section elements allow us to divide the content in our pages into sections with related content. We’ll learn more about this when we start learning about semantic HTML soon.
Where can we get the video to link to in our projects: