DEV Community

Charity Parks
Charity Parks

Posted on

HTML <iframes>

HTML cuts a window out into your webpage where you can insert other pages for viewing. The word iframe stands for inline frame.

Great example of this is if you want to add Google Maps to your webpage. So maybe you are working on a webpage for a store and you want your viewers to be able to see where your store is on a map and also get directions on how to get to your store. You can create an element.

An element will need attributes:

src - this specifies the url of the page that you want shown inside that window
height - this attribute specifies the height of the iframe (in pixels)
width - this specifies the width of the iframe (in pixels)

Your code will look something like this:

<iframe

src="https://www.google.com/maps/place/Kings+Island/@ 39.3451798,-84.271331,17z/data=!3m1!4b1!4m5!3m4!1s0x88405801b48c9003:0x64f9f426e5e19765!8m2!3d39.3451798!4d-84.2691423"

height="350"
width="450"

This will add the google map page showing the location of King's Island in Mason, Ohio as a window inside of your webpage. There are so many possibilities with . TRY IT!

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay