Download Mastering the Internet and HTML

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
page
7
page
8
page
9
page
10
page
11
page
12
page
13
page
14
page
15
page
16
page
17
page
18
page
19
page
20
page
21
page
22
page
23
Document related concepts
no text concepts found
Transcript 
HTML Frames
http://jjcweb.jjay.cuny.edu/ssengupta/
1
Learning Objectives

Explore the uses of frames in a Web site

Display a document within a frame

Format the appearance of a frame
2
What is a frame?

Frames are sections of the browser window capable of displaying
the contents of multiple webpages in a single Web page display
3
Remember!

The browser has to load multiple HTML files
when working with frames
4
Planning Your Frames first

Before you start creating your frames, plan their
appearance and how they are to be used:
1.
How do you want the frames placed on the Web page?
2.
What is the size of each frame?
3.
What information will be displayed in each frame?
4.
What Web pages will users first see when they access the
site?
5
Planning Your Frames Layout
6
Frameset


A frameset describes the frame layout
The <frameset> element is used to store the
definitions of the various frames in the file.
These definitions will typically include:
o Size and location of the frame
o Web pages the frames display
7
Frameset



What is the tag used for frameset?
<frameset>…</frameset>
example
<html>
<head>
<title>Learning Frames</title>
</head>
<frameset>
define layout and frames here
</frameset>
</html>
8
Simplest Layout Defined in Either Rows or Columns
9
Frames in columns or rows


You must choose to layout your frames in
either columns or rows
To create a frame layout, you will use the
cols and rows attributes of the <frameset>
element
o The cols attribute creates a column of frames
o The rows attribute creates a row of frames
10
cols attribute for <frameset>

Creating a column frame layout
o attribute name: cols
o attribute value: number of pixels | percentage | *
<frameset cols=“column1 width%, column2 width%, *”>
11
Content of frames
So, now we have created the frame layout
 But the frames are not yet visible!!


So, what goes inside the frames?
HTML files!!!
12
Define frame source

use <frame> tag within
o <frameset> & </frameset> tags
<frameset cols=“30%,*”>
<frame src=“abc.htm”>
<frame src=“xyz.htm”>
</frameset>
13
Let’s create the first example
14
rows attribute for <frameset>

Creating a row frame layout
o attribute name: rows
o attribute value: number of pixels | percentage | *
<frameset rows=“row1 height%, row2 height%, *”>
15
Creating a Nested frame structure
Combination of rows and cols
16
Creating a Nested frame structure
<html>
<head>
<title> Learning Frames </title>
</head>
<frameset rows="30%, *">
<frame src="header.htm">
<!– nested frameset -->
<frameset cols="30%, *">
<frame src=“links.htm">
<frame src=“home.htm">
</frameset>
</frameset>
</html>
Remember correct nesting of the structures are ABSOLUTELY
important here.
17
Nesting framesets

nesting one pair of <frameset> tags in
another
<frameset rows=“30%,*”>
<frame src=“heading.html”>
<frameset cols=“30%,*”>
<frame src=“body_left.html”>
<frame src=“body_right.html”>
</frameset>
</frameset>
18
Using the <noframes> Element




Use the <noframes> element to allow your Web site to be
viewable using browsers that do or do not support frames
When a browser that supports frames processes this code, it
ignores everything within the <noframes> elements and
concentrates solely on the code within the <frameset>
elements
When a browser that doesn’t support frames processes this
code, it doesn’t know what to do with the <frameset> and
<noframes> elements, so it ignores them
When you use the <noframes> element, you must include
<body> elements, this way, both types of browsers are
supported within a single HTML file
19
The <noframes> Syntax

The syntax for the <noframes> element is:
<html>
<head>
<title>title</title>
</head>
<frameset>
frames
<noframes>
<body>
<p>This page uses frames, but your browser
doesn't support them.</p>
</body>
</noframes>
</frameset>
20
</html>
Site Layout #1
index.html
streetsign
logo here
logo.html
Some Description here
John Jay Link
Class website Link
link.html
home.html
21
Site Layout #2
Some content here
Some content here
Some content here
Some
content
here
Some content here
22
Site Layout #3
Some content here
Some content here
Some content
here
Some content here
Some content here
23
Related documents