How to View Particular Portion of a Web Page in iframe, Embed Inside HTML

What is Iframe?

Technically iframe or inline frame is an HTML document used to display a web page within another web page. The iframe is often used to show advertisement, content, etc from another source on an embedded page.

The Syntax for Iframe is-

Where URL is the location of another web page. This was the code of iframe to embed a full webpage into another webpage. But how to show only a particular page using an iframe. Below I have given you an explanation with examples how to cut some portion and show a specific area only using an iframe.

How to Embed a Specific Portion of a Area on a Webpage in iframe

Suppose We have taken a webpage Here to Show 4 blocks of a picture.Inthe bolow pics there are 4 blocks, we will show only some portions of it.

Demo URL

Setting the Height and Width of the Iframe

We will first set the height of the iframe. Say height is 450px and width is 500px. Then the code will be-

Remember the setting of height and width is just formatting the frame only. This will not show a particular portion of it.

Now come to the main point. Lets, First show only the  block 3 an block 4. We will have to changes in the previous iframe code to do that. We will add inline css border within the iframe.

Further to set the location of the iframe you can add a div on the iframe.

 

This is how to show a specific portion of a web page. You can change the inline css margin potion to change its potion and select a specific area.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

We are sorry that this post was not useful for you!

Let us improve this post!

Share this

One Response

  1. Praveen Kumar J

Leave a Reply

%d bloggers like this: