JS-100-PreWork
  • Introduction
  • JavaScript Library
    • 0-PreWork
      • 1-Getting Started
        • Installs
        • Directory Set up
        • Configuration
      • 2-HTML Basics
        • Basic Tags
        • h & p
        • list
        • link
        • img
        • table
        • div
        • input
        • form
        • section
        • article & header
        • footer
        • nav
        • iframe
      • 3-CSS Basics
        • CSS Set Up
        • class
        • id
        • margin & padding
        • font
        • background
        • width & height
        • borders
        • position
      • 4-JS Basics
        • JS Set up
        • numbers
        • variables
        • strings
        • booleans
        • conditionals
        • functions
        • loops
        • arrays
        • objects
Powered by GitBook
On this page
  • File Location
  • Description
  • Sample Code
  • Discussion
  • Challenge
  • Extra Reading
  1. JavaScript Library
  2. 0-PreWork
  3. 2-HTML Basics

iframe

In this module we wil learn about the <iframe> tag.

File Location

For this module, you should be working in the following location:

    javascript-library
        └── 0-PreWork
            └── 1-HTML-Basics

                14-iframe.html <---You should be here.

            └── 2-CSS-Basics
            └── 3-JavaScript-Basics
            └── 4-assets

Description

The inline frame (iframe) is used to embed another document inside of an HTML document. This is a fairly straight-forward way to describe the <iframe>, and that is because it is a fairly straight-forward element to use in practice. Embedding third-party media is a common use of <iframe> and we'll show you how to insert a YouTube video into your own HTML using this tag.

Sample Code

Add the following sample code to your file:

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
</head>
<body>

 <iframe width="560" height="315" src="https://www.youtube.com/embed/owsfdh4gxyc" frameborder="0" allowfullscreen></iframe>       

</body>
</html>

Discussion

It may seem strange that this isn't a void element, similar to the <img /> tag, but that is explained readily enough: compatibility with legacy versions of web browsers. If you've already tried to insert text between the opening/closing tags, you probably noticed that the text doesn't appear when the document is rendered. This is because the browser simply ignores that content. <iframe> can still be styled, as we have done above with the width and height attributes. However, you'll want to consider how your styling may be rendered on a variety of devices.

Challenge

Try changing the src attribute to a different target. How does that affect your layout? Practice changing the width and height using values such as percentages (i.e. width="20%").

Extra Reading

PreviousnavNext3-CSS Basics

Last updated 7 years ago

Resources:

http://html.com/tags/iframe/