Scribd
Upload
7 views

Iframes in HTML

The document provides an overview of HTML iframes, including their syntax and how to set height and width. It also explains the purpose of the <head> element in HTML and lists various layout elements such as <header>, <nav>, and <footer>. Additionally, it discusses techniques for creating multicolumn layouts using CSS, including float, flexbox, and grid methods.

Uploaded by

Anees Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

Iframes in HTML

The document provides an overview of HTML iframes, including their syntax and how to set height and width. It also explains the purpose of the <head> element in HTML and lists various layout elements such as <header>, <nav>, and <footer>. Additionally, it discusses techniques for creating multicolumn layouts using CSS, including float, flexbox, and grid methods.

Uploaded by

Anees Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

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>

You might also like