0% found this document useful (0 votes)
51 viewsLecture 10 - HTML Frames
HTML frames allow a browser window to be divided into multiple sections that can each load a separate HTML document. Frames are defined using the <frameset> tag, which divides the window into rows and columns containing <frame> tags specifying the source of each framed section. While frames were commonly used in early web design, they have disadvantages like inconsistent rendering across devices and issues with back/forward buttons. Inline frames or IFrames provide an alternative for embedding external content using the <iframe> tag within normal page flow.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
51 viewsLecture 10 - HTML Frames
HTML frames allow a browser window to be divided into multiple sections that can each load a separate HTML document. Frames are defined using the <frameset> tag, which divides the window into rows and columns containing <frame> tags specifying the source of each framed section. While frames were commonly used in early web design, they have disadvantages like inconsistent rendering across devices and issues with back/forward buttons. Inline frames or IFrames provide an alternative for embedding external content using the <iframe> tag within normal page flow.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
/ 67
HTML Frames
Dr. Fareed Ahmed Jokhio
HTML Frames
• HTML frames are used to divide your browser
window into multiple sections where each
section can load a separate HTML document.
• A collection of frames in the browser window
is known as a frameset.
• The window is divided into frames in a similar
way the tables are organized: into rows and
columns.
Disadvantages of Frames
• There are few drawbacks with using frames,
so it’s never recommended to use frames in
your webpages
• Some smaller devices cannot cope with
frames often because their screen is not big
enough to be divided up.
Disadvantages of Frames
• Sometimes your page will be displayed
differently on different computers due to
different screen resolution.
• The browser's back button might not work as
the user hopes.
• There are still few browsers that do not
support frame technology.
Creating Frames
• To use frames on a page we use <frameset>
tag instead of <body> tag.
• The <frameset> tag defines how to divide the
window into frames.
Creating Frames
• The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines
vertical frames.
• Each frame is indicated by <frame> tag and it
defines which HTML document shall open into
the frame.
Creating Frames
• <html>
• <head>
• <title>HTML Frames</title>
• </head>
• <frameset rows="25%,50%,25%">
• <frame name="left" src="/html/top_frame.html" />
• <frame name="center" src="/html/main_frame.html“ />
• <frame name="right“ src="/html/bottom_frame.htm" />
• <noframes>
• <body>
• Your browser does not support frames.
• </body>
• </noframes>
• </frameset>
• </html>
Creating Frames
Creating Frames
• Let's put above example as follows, here we
replaced rows attribute by cols.
• This will create all the three frames vertically:
Creating Frames
• <html>
• <head>
• <title>HTML Frames</title>
• </head>
• <frameset cols="25%,50%,25%">
• <frame name="left" src="/html/top_frame.htm" />
• <frame name="center" src="/html/main_frame.htm" />
• <frame name="right" src="/html/bottom_frame.htm" />
• <noframes>
• <body>
• Your browser does not support frames.
• </body>
• </noframes>
• </frameset>
• </html>
Creating Frames
The <frameset> Tag Attributes
• cols
• specifies how many columns are contained in
the frameset and the size of each column.
• You can specify the width of each column in
one of four ways:
The <frameset> Tag Attributes
• Absolute values in pixels.
• For example to create three vertical frames,
use cols="100, 500,100".
• A percentage of the browser window.
• For example to create three vertical frames,
use cols="10%, 80%,10%".
The <frameset> Tag Attributes
• Using a wildcard symbol.
• For example to create three vertical frames,
use cols="10%, *,10%".
• In this case wildcard takes remainder of the
window.
The <frameset> Tag Attributes
• As relative widths of the browser window.
• For example to create three vertical frames, use
cols="3*,2*,1*".
• This is an alternative to percentages.
• You can use relative widths of the browser
window.
• Here the window is divided into sixths: the first
column takes up half of the window, the second
takes one third, and the third takes one sixth.
The <frameset> Tag Attributes
• rows
• This attribute works just like the cols attribute
and takes the same values, but it is used to
specify the rows in the frameset.
The <frameset> Tag Attributes
• For example to create two horizontal frames,
use rows="10%, 90%".
• You can specify the height of each row in the
same way as explained above for columns.
The <frameset> Tag Attributes
• border
• This attribute specifies the width of the border
of each frame in pixels.
• For example border="5".
• A value of zero means no border.
The <frameset> Tag Attributes
• frameborder
• This attribute specifies whether a three-
dimensional border should be displayed
between frames.
• This attribute takes value either 1 (yes) or 0
(no).
• For example frameborder="0“ specifies no
border.
The <frameset> Tag Attributes
• framespacing
• This attribute specifies the amount of space
between frames in a frameset.
• This can take any integer value.
• For example framespacing="10" means there
should be 10 pixels spacing between each
frames.
The <frame> Tag Attributes
• src
• This attribute is used to give the file name that
should be loaded in the frame.
• Its value can be any URL.
• For example, src="/html/top_frame.htm" will
load an HTML file available in html directory.
The <frame> Tag Attributes
• name
• This attribute allows you to give a name to a frame.
• It is used to indicate which frame a document
should be loaded into.
• This is especially important when you want to
create links in one frame that load pages into
another frame, in which case the second frame
needs a name to identify itself as the target of the
link.
The <frame> Tag Attributes
• frameborder
• This attribute specifies whether or not the
borders of that frame are shown; it overrides
the value given in the frameborder attribute
on the <frameset> tag if one is given, and this
can take values either 1 (yes) or 0 (no).
The <frame> Tag Attributes
• marginwidth
• This attribute allows you to specify the width
of the space between the left and right of the
frame's borders and the frame's content.
• The value is given in pixels.
• For example marginwidth="10".
The <frame> Tag Attributes
• marginheight
• This attribute allows you to specify the height
of the space between the top and bottom of
the frame's borders and its contents.
• The value is given in pixels.
• For example marginheight="10".
The <frame> Tag Attributes
• noresize
• By default you can resize any frame by clicking
and dragging on the borders of a frame.
• The noresize attribute prevents a user from
being able to resize the frame.
• For example noresize="noresize".
The <frame> Tag Attributes
• scrolling
• This attribute controls the appearance of the
scrollbars that appear on the frame.
• This takes values either "yes", "no" or "auto".
• For example scrolling="no" means it should
not have scroll bars.
The <frame> Tag Attributes
• longdesc
• This attribute allows you to provide a link to
another page containing a long description of
the contents of the frame.
• For example longdesc="framedescription.htm"
Browser Support for Frames
• If a user is using any old browser or any
browser which does not support frames then
<noframes> element should be displayed to
the user.
Browser Support for Frames
• So you must place a <body> element inside
the <noframes> element because the
<frameset> element is supposed to replace
the <body> element, but if a browser does not
understand <frameset> element then it should
understand what is inside the <body> element
which is contained in a <noframes> element.
Frame's name and target attributes
• One of the most popular uses of frames is to
place navigation bars in one frame and then
load main pages into a separate frame.
• Let's see following example where a test.htm
file has following code:
Frame's name and target attributes
• <html>
• <head>
• <title>HTML Target Frames</title>
• </head>
• <frameset cols="200, *">
• <frame src="/html/menu.htm" name="menu_page" />
• <frame src="/html/main.htm" name="main_page" />
• <noframes>
• <body>
• Your browser does not support frames.
• </body>
• </noframes>
• </frameset>
• </html>
Frame's name and target attributes
• Here we have created two columns to fill with
two frames.
• The first frame is 200 pixels wide and will
contain the navigation menubar implemented
by menu.htm file.
• The second column fills in remaining space
and will contain the main part of the page and
it is implemented by main.htm file.
Frame's name and target attributes
• For all the three links available in menubar, we
have mentioned target frame as main_page,
so whenever you click any of the links in
menubar, available link will open in
main_page.
Frame's name and target attributes
• Following is the content of menu.htm file
• <html>
• <body bgcolor="#4a7d49">
• <a href="http://www.google.com" target="main_page">Google</a>
• <br /><br />
• <a href="http://www.microsoft.com"
target="main_page">Microsoft</a>
• <br /><br />
• <a href="http://news.bbc.co.uk" target="main_page">BBC News</a>
• </body>
• </html>
Frame's name and target attributes
• Following is the content of main.htm file:
• <html>
• <body bgcolor="#b5dcb3">
• <h3>This is main page and content from any
link will be displayed here.</h3>
• <p>So now click any link and see the result.</p>
• </body>
• </html>
Frame's name and target attributes
• When we load test.htm file, it produces
following result:
HTML IFrames
• You can define an inline frame with HTML tag
<iframe>. The <iframe> tag is not somehow
related to <frameset> tag, instead, it can
appear anywhere in your document.
• The <iframe> tag defines a rectangular region
within the document in which the browser can
display a separate document, including
scrollbars and borders.
HTML IFrames
• The src attribute is used to specify the URL of
the document that occupies the inline frame.
• Following is the example to show how to use
the <iframe>
HTML IFrames
• <html>
• <head>
• <title>HTML Iframes</title>
• </head>
• <body>
• <p>Document content goes here...</p>
• <iframe src="/html/menu.htm" width="555" height="200">
• Sorry your browser does not support inline frames.
• </iframe>
• <p>Document content also go here...</p>
• </body>
• </html>
HTML IFrames
• This will produce following result:
The <Iframe> Tag Attributes
• Most of the attributes of the <iframe> tag,
including name, class, frameborder, id,
longdesc, marginheight, marginwidth, name,
scrolling, style, and title behave exactly like the
corresponding attributes for the <frame> tag.
HTML Blocks
• All the HTML elements can be categorized into
two categories (a) Block Level Elements (b)
Inline Elements
Block Elements
• Block elements appear on the screen as if they
have a line break before and after them.
• For example the <p>, <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />,
<blockquote>, and <address> elements are all
block level elements.
• They all start on their own new line, and
anything that follows them appears on its own
new line.
Inline Elements
• Inline elements, on the other hand, can
appear within sentences and do not have to
appear on a new line of their own.
• The <b>, <i>, <u>, <em>, <strong>, <sup>,
<sub>, <big>, <small>, <li>, <ins>, <del>,
<code>, <cite>, <dfn>, <kbd>, and <var>
elements are all inline elements.
Grouping HTML Elements
• There are two important tags which we use
very frequently to group various other HTML
tags (i) <div> tag and (ii) <span> tag
The <div> tag
• This is the very important block level tag
which plays a big role in grouping various
other HTML tags and applying CSS on group of
elements.
• Even now <div> tag can be used to create
webpage layout where we define different
parts (Left, Right, Top etc.) of the page.
The <div> tag
• This tag does not provide any visual change on
the block but this has more meaning when it is
used with CSS.
The <div> tag
<html> <!-- Second group of tags -->
<head> <div style="color:green">
<title>HTML div Tag</title> <h4>This is second group</h4>
</head> <p>Following is a list of fruits</p>
<body> <ul>
<!-- First group of tags --> <li>Apple</li>
<div style="color:red"> <li>Banana</li>
<h4>This is first group</h4> <li>Mango</li>
<p>Following is a list of vegetables</p> <li>Strawberry</li>
<ul> </ul>
<li>Beetroot</li> </div>
<li>Ginger</li> </body>
<li>Potato</li> </html>
<li>Radish</li>
</ul>
</div>
The <div> tag
• This will produce following result:
The <span> tag
• The HTML <span> is an inline element and it
can be used to group inline elements in an
HTML document.
• This tag also does not provide any visual
change on the block but has more meaning
when it is used with CSS.
The <span> tag
• The difference between the <span> tag and
the <div> tag is that the <span> tag is used
with inline elements whereas the <div> tag is
used with block-level elements.
The <span> tag
• <html>
• <head>
• <title>HTML span Tag</title>
• </head>
• <body>
• <p>This is <span style="color:red">red</span> and this is
<span style="color:blue">green</
• span></p>
• </body>
• </html>
The <span> tag
• This will produce following result:
HTML Backgrounds
• By default, your webpage background is white
in color.
• You may not like it, but no worries. HTML
provides you following two good ways to
decorate your webpage background.
• Html Background with Colors
• Html Background with Images
Html Background with Colors
• The bgcolor attribute is used to control the
background of an HTML element, specifically
page body and table backgrounds.
• Following is the syntax to use bgcolor attribute
with any HTML tag.
• <tagname bgcolor="color_value"...>
Html Background with Colors
• This color_value can be given in any of the
following formats:
• <!-- Format 1 - Use color name -->
• <table bgcolor="lime" >
• <!-- Format 2 - Use hex value -->
• <table bgcolor="#f1f1f1" >
• <!-- Format 3 - Use color value in RGB terms -->
• <table bgcolor="rgb(0,0,120)" >
Html Background with Colors
• <html> • <tr><td>
• <head> • This background is sky blue
• <title>HTML Background Colors</title> • </td></tr>
• </head> • </table>
• <body> • <!-- Format 3 - Use color value in RGB
• <!-- Format 1 - Use color name --> terms -->
• <table bgcolor="yellow" width="100%"> • <table bgcolor="rgb(255,0,255)"
• <tr><td> width="100%">
• This background is yellow • <tr><td>
• </td></tr> • This background is green
• </table> • </td></tr>
• <!-- Format 2 - Use hex value --> • </table>
• <table bgcolor="#6666FF" • </body>
width="100%"> • </html>
Html Background with Colors
• This will produce following result:
Html Background with Images
• The background attribute can also be used to
control the background of an HTML element,
specifically page body and table backgrounds.
• You can specify an image to set background of
your HTML page or table.
• Following is the syntax to use background
attribute with any HTML tag.
Html Background with Images
• Note: The background attribute is deprecated
and it is recommended to use Style Sheet for
background setting.
• <tagname background="Image URL"...>
• The most frequently used image formats are
JPEG, GIF and PNG images.
Html Background with Images
• <html>
• <head>
• <title>HTML Background Images</title>
• </head>
• <body>
• <!-- Set table background -->
• <table background="/images/html.gif" width="100%" height="100">
• <tr><td>
• This background is filled up with HTML image.
• </td></tr>
• </table>
• </body>
• </html>
Html Background with Images
• This will produce following result:
Patterned & Transparent Backgrounds
• You might have seen many pattern or
transparent backgrounds on various websites.
• This simply can be achieved by using
patterned image or transparent image in the
background.
Patterned & Transparent Backgrounds
• It is suggested that while creating patterns or
transparent GIF or PNG images, use the
smallest dimensions possible even as small as
1x1 to avoid slow
• loading.
Patterned & Transparent Backgrounds
• <html>
• <head>
• <title>HTML Background Images</title>
• </head>
• <body>
• <!-- Set a table background using pattern -->
• <table background="/images/pattern1.gif" width="100%" height="100">
• <tr><td>
• This background is filled up with a pattern image.
• </td></tr>
• </table>
• <!-- Another example on table background using pattern -->
• <table background="/images/pattern2.gif" width="100%" height="100">
• <tr><td>
• This background is filled up with a pattern image.
• </td></tr>
• </table>
• </body>
• </html>
Patterned & Transparent Backgrounds
