Scribd
Upload
58 views7 pages

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 HTML <head> element, its purpose for metadata, and lists various HTML layout elements such as <header>, <nav>, and <footer>. Additionally, it discusses techniques for creating multicolumn layouts using CSS, including the float property and responsive design considerations.

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 PDF, TXT or read online on Scribd
58 views7 pages

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 HTML <head> element, its purpose for metadata, and lists various HTML layout elements such as <header>, <nav>, and <footer>. Additionally, it discusses techniques for creating multicolumn layouts using CSS, including the float property and responsive design considerations.

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 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.
Example
<iframe src="demo_iframe.htm" height="200" width=
"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="Iframe
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