Iframes in HTML
Iframe
An HTML iframe is used to display a web page within a
web page.
HTML Iframe Syntax
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML
document
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
Exampl
e <iframe src="demo_iframe.htm" height="200" w
idth="300" title="Iframe Example"></iframe>
you can add the style attribute and use the CSS height and width properties
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Ifra
me Example"></iframe>
The HTML <head> Element
The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and
other meta information.
The HTML <head> element is a container for the following
elements: <title>, <style>, <meta>, <link>, <script>, and <base>
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web
page
•<header> - Defines a header for a document or a section
•<nav> - Defines a set of navigation links
•<section> - Defines a section in a document
•<article> - Defines an independent, self-contained content
•<aside> - Defines content aside from the content (like a sidebar)
•<footer> - Defines a footer for a document or a section
•<details> - Defines additional details that the user can open and
close on demand
•<summary> - Defines a heading for the <details> element
HTML Layout Techniques
There are four different techniques to create multicolumn layouts.
CSS framework
CSS float property
CSS flexbox
CSS grid
CSS Float Layout
It is common to do entire web layouts using the CSS float property. Float is
easy to learn <style>
*{
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead
of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
