What is Iframe in HTML and what is it used for?

Hello friends,

You are welcome to our html series.

In the last session, we learned to format the text with the available tags for formatting related to Bold, Italic, underline, size, strike etc.

In the same way, we learned phrase tags to format paragraphs and lengthy content.

Along with it, we learned to provide comments to the code while programming in html.

So, in the last session, we learned three things: formatting, face tags and commenting.

I hope you went through all the tags we learned & if you faced any difficulty, you can let us know at forum.learnvern.com.

We will try to solve your problems as soon as possible and revert to you.

Today, we will learn file paths and iframes in html.

Firstly, we will learn the file path after the iframe.

Let us see what file paths are.

Whenever we need to include any external file like an image or table in our current html webpage, in that case, we need a file path.

The file path is the address where the file is saved.

So, when we mention the file path, the html program fetches the file from a particular path and adds it.

The file path isn't only used for images, it can also add any file like CSS for design purposes, JavaScript file or any external video to the web page that can be supported by the html program.

So, file paths can be used for different things & not only for one thing.

So ideally, the file path defines at which location the file is saved & from where it has to include in the webpage, & this information is determined by the file path.

Now, as it is mentioned here,

It has only one attribute that is the src mean source attribute.

So let us learn what file path is with the help of an example.

Here,

I have added image 1 along with my program 1.

This is the logo of learnvern, this is an image & I have saved it in a jpg format.

So, the image name is learnvern.jpg & this image is saved where my program is present in the same folder.

So, if I want to include this image in my web pages. How will I do that

Firstly, we'll open sublime text.

The font appears to be small here & and if we want to increase the size of the fonts, we can do that by pressing the control key and plus key on the keyboard & the font size will increase by doing this.

I repeat, control and plus key.

So, the size of the font is increased by pressing control and plus key now it will be easier to see the program.

So now what we have to do is that,

How to add that is saved on the same path where my program is saved.

So, let's go to the program.

As we need to add the image into the program,

I will write "image" as soon as I write "image", the src attribute which is a mandatory and default attribute that is necessarily needed to add an image shows up by default.

So, I will write learnvern.jpg in the source & save it.

Soon as I try to run it, it is not working & a broken image sign is shown.

There might be two reasons for that,

The spelling or the path I wrote might be wrong.

To check I will go to the program and check the spelling first.

So, as you can see the L E R N V E R N Same L E A R N V E R N.

So, I didn't write A here.

The first mistake we found while troubleshooting is the name of the image.

If you add an image, you need to write the same name as the name of the image.

Let me save and reload it.

And when I correct the name, the image is visible properly.

The name we have given to the image is the same name we have to mention here in the program.

Next,

Currently, this image is shown properly, because the image and the program are saved in the same location.

If I move this image to another folder, there are two possibilities

Either the image is in the same folder, in a subfolder of that file or in the external folder.

So, let's say,

I move this file into a new folder, give it the name "images", & keep this file here.

Currently, the image is in a subfolder instead of the folder where my program is saved.

And the name of the folder is images.

When I reload, that broken image sign shows again.

That means the file isn't present on the path I have taken for the file.

I repeat, the image is not showing because the file is not there.

If we write it without any folder, the browser determines that the file is located in the same folder where the program is saved.

Currently, the file is not in the same folder but in a subfolder named images.

So, I will add a path and write images/ because the file is in a subfolder.

So, I press control+ s, save and reload

As soon as I reload, we can see the file, which means whenever we define a path, we have to make sure the path must be of the same location & the path must be proper otherwise, the image or any other file will not show.

There are other ways to show the file,

The first example we saw,

As it's written here, "picture.jpg", we took learnvern.jpg at this place.

And the first example was for the condition when the file and the program are present in the same folder.

The second example is that the file is present in any subfolder in that folder.

In the third example, the image is present in the subfolder but also exists in any other folder.

So, what we can do in that case.

Currently, the image is inside the folder named images.

If you don't know where the file is located, if it is in a folder, subfolder or in a sub folder's folder, you can add a slash in that case and reload it.

We will not see the image because the file is in a subfolder.

So, I will remove this from here & now we can see the image properly.

If the file is not in the folder but located exactly outside a folder.

Like,

Currently, the file is in the images and in the folder named "HTML".

So, if I don't want to save in html but on the desktop, I will need to come 1 step out of the html folder.

If I come 1 step out and see where my file is, in that case, I need to write a double dot (..) and slash followed by a picture.

When we write in this way double dot slash learnvern (../learnvern) the program will not check one folder inside but outside one folder.

I repeat,

If the image is present in the same folder, we do not need to give the path like this.

If the image is in a subfolder, we will need to write the name of the subfolder in place of the double dot.

And if we have saved the file outside one folder, we need to add the double dot (..).

That was all, how we define file paths for the program.

Now let's move further.

The next topic is the types of the file path.

There are a total of two types of file paths.

The first is the absolute file path & the second is the relative file path.

The difference between absolute and relative file paths is,

Whenever we define a file path, the file can be located on a server or on the system.

So, the current example we have taken,

Image one, in this case, the file is in the system itself.

Because the file is located in the system, & we added it to our program, this method is relative file path adding.

That means, if we have the file in the system, it is a relative file path adding method,

But if we are adding the file from somewhere else, in that case, we need to write the complete address of the server & in this method, the file path is the absolute file path.

I repeat,

If we add the file from the server or somewhere else, it is the absolute way whereas, if we add the file capturing it from the system, it is the relative way.

The examples we saw until now were the examples of the relative method now we will see the absolute way.

 So, if we need to add the file from a server or somewhere externally, in that case, we need the complete URL of the file.

So let's say the image is located somewhere on the website of learnvern.

In that case, I need to add the complete URL of the learnvern's website.

Now, we will see the example of the absolute file path method.

For that, I will firstly open the website of learnvern.

You can add the image from any website or server wherever you have seen that image.

Currently, I want to take the image from a server or from a website.

In that case, I will take it from the learnvern's website.

As you can see, this is the website of learnvern, the logo is placed here & I want to add this logo to my file.

So, if I directly want to add this logo from the website to my file, I will right-click & select the open image in the new tab.

Here I can see the image, as this image is a transparent background image that is why the background of this image is transparent, and its font is also white.

So, if I want to use this image in my file, I will copy the URL shown above and add it to my program.

Now, when I save it, as this image is transparent, we cannot see the image properly.

When I reloaded, we could not see anything on the screen but, the image is present here.

So, if I want to see the image.

I will change the background colour temporarily and show it again.

So, for a temporary purpose, we just need to change the background of the image.

We can also check it from the "inspect".

We have not yet learned the developer’s tool and how to utilize it.

But we can check it by giving it a CSS style.

So, I will write CSS related to that image tag and set the background colour black if I want to give the background colour temporarily.

I am writing temporary CSS here.

When we move to the CSS course, we will learn.

Why is this written here, how CSS is written, how it is applied in detail.

Currently, I just need to show this image, so I will change its background to black.

So, save and reload.

So, when I reloaded, I could see the image.

It was not showing because the font and the background both were white.

But when I applied a black background, I can see the image properly.

That was an example of how we add the image hosted on a server or a website into the program.

That was an example of the absolute file path.

In the same way, we saw the relative file path method when the image is saved in the system.

Let's move further

The second topic after the absolute and relative file path is the Iframes.

What is an iframe?

Let us say,

We use Iframes when we want to add a web page to an existing web page.

Usually,

The "iframe" is a separate or added portion that adds a web page, website or needs to add any YouTube video we use the iframe.

The syntax of the iframe is an iframe, source followed by the slash iframe.

Let me practically show how it's done.

I am removing the style and image tag as of now.

We need to add an iframe, so how do we do that?

The tag used for it is called iframe.

Inside the source, I need to write the name of the webpage or the website.

So currently, I am taking the example of learnvern's website.

So, let's say, this is our page & this is the learnvern's website.

So, I am copying the home page of the website & adding learnvern.com here.

Now,

I go to the program & see where it is being run and reload it.

Here, the frame is shown.

It is showing a window-like portion of the border.

So, within our webpage, a new portion has been added & this is the Iframe.

So, whatever we write inside the iframe it must ideally show in it.

Currently, the webpage cannot be enabled or embedded inside the iframe & the message "www.learnvern.com refused to connect" is shown; it means that we cannot embed the learnvern's website inside the iframe.

I repeat if you have written any website's name inside the iframe source and it is not showing it means that we cannot embed that website.

So, if this is not happening, we will take another example to show how it is done.

So, if we are not able to embed the website and it is not allowed from the website's server, you can use it anywhere else, in that case, we see this type of error.

That the site has refused to connect.

If we are not able to add a site.

Currently, I will show you by adding the same program into the iframe.

For example, the name of my program is program_1, I will write program_1.html.

I have added the current program as the source in the frame of the program.

As soon as I reload, we can see the iframe & we can see another portion in the frame that is the Iframe itself.

Because in this program, I have added an iframe that is why it is shown like that.

So, I will create another similar program and name it “program_2” or “iframe_program”.

And in this iframe program, I am not adding the iframe but, I will print a header "this is an iframe" here and save it.

The name of the program is iframe_program so, I will write this here.

Save and reload.

So, as I reloaded, this is my main program that is program_1 inside this program. I have added one more program that is saved on a similar location and named it iframe_program.

So, I have called out the iframe_program in this first program, and that is why the content is showing in this program.

That means the content of the other webpage or program is shown in the first program.

Now, we will see different properties of the iframe.

The first attribute is the src (source), which we have already learned.

The second attribute is width or height.

If we have to give width or height to the "iframe" we can use this attribute.

Currently, the default width and height are shown.

But, let us say, I want to give a height and width of 500 px to the iframe.

I will take width= 500 px and height= 500 px and reload.

As soon as I reloaded, it showed 500 widths and heights.

Next is the frame border.

As you can see, the default iframe border is shown.

But in case I want to update this border and add a thin or thick border.

I will add a frame border.

Let's say I take 10 px.

As you can see, when I reloaded, it is not showing it will not support px.

So again, I will reload.

When I save the frame border as zero, it gets disabled, when I take it as 1, it is enabled which means it is working on 0 and 1 or true /false.

That means,

When I am giving the frame border as 0, it is getting disabled & while giving 1, the frame border is appearing.

So, it is working on the basis whether we want to show the frame border or not.

And the last attribute is to allow full screen, we do not need to give it a value & it works as a keyword.

So, I write "allowfullscreen" here, save it and reload.

We will see the 500 pixels size.

Because we have allowed the full-screen mode, but along with that width, and height is also given.

If we provide "allowfullscreen", along with height and width.

The iframe will take the full-screen, but the height and width property will overwrite it because of which it will show according to the mentioned width and height.

So that was all about iframe, and its main attributes were height, width, frame border and full screen.

We can also add a program in the iframe, and second, we can also add an external site if the servers enable you to do so.

That was our today's session under which we learned file paths and iframe.

I hope you will try these two important topics yourself.

If you face any errors or difficulties while doing this, you can let us know on forum.learnvern.com.

We will solve your queries and revert to you.

The next topic is HTML heading, anchor and image tag.

Thank you, guys.