Frames allow you to embed another web page into a web page. Frames are represented by an iframe element . Let’s say we want to embed the google map of my location on a web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe elements</title>
</head>
<body>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d174325.6847869952!2d-117.98554710629422!3d35.13963017807711!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c22eedcd08654f%3A0xe7872c728569a31a!2sFremont%20Valley!5e0!3m2!1sen!2sus!4v1638732574945!5m2!1sen!2sus"
width="600" height="250"></iframe>
</body>
</html>
The element iframe does not contain any content. All its configuration is done using attributes:
- src: sets the full path to the loaded resource
- width: frame width
- height: frame height
It should be noted that not all sites can be opened in frames, since there may be restrictions on opening in frames on the web server side.