1 HTML Frames
-
Upload
myron-copeland -
Category
Documents
-
view
223 -
download
12
Transcript of 1 HTML Frames
![Page 1: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/1.jpg)
1
HTML Frames
http://jjcweb.jjay.cuny.edu/ssengupta/
![Page 2: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/2.jpg)
Learning Objectives
Explore the uses of frames in a Web site
Display a document within a frame
Format the appearance of a frame
2
![Page 3: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/3.jpg)
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
![Page 4: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/4.jpg)
Remember!
The browser has to load multiple HTML files when working with frames
4
![Page 5: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/5.jpg)
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
![Page 6: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/6.jpg)
Planning Your Frames Layout
6
![Page 7: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/7.jpg)
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 frameo Web pages the frames display
7
![Page 8: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/8.jpg)
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
Frameset
![Page 9: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/9.jpg)
Simplest Layout Defined in Either Rows or Columns
9
![Page 10: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/10.jpg)
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> elemento The cols attribute creates a column of frameso The rows attribute creates a row of frames
10
![Page 11: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/11.jpg)
Creating a column frame layouto attribute name: colso attribute value: number of pixels | percentage
| *
<frameset cols=“column1 width%, column2 width%, *”>
11
cols attribute for <frameset>
![Page 12: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/12.jpg)
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
![Page 13: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/13.jpg)
use <frame> tag within o <frameset> & </frameset> tags
<frameset cols=“30%,*”>
<frame src=“abc.htm”>
<frame src=“xyz.htm”>
</frameset>
13
Define frame source
![Page 14: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/14.jpg)
Let’s create the first example
14
![Page 15: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/15.jpg)
Creating a row frame layouto attribute name: rowso attribute value: number of pixels | percentage
| *
<frameset rows=“row1 height%, row2 height%, *”>
15
rows attribute for <frameset>
![Page 16: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/16.jpg)
Creating a Nested frame structure
16
Combination of rows and cols
![Page 17: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/17.jpg)
Creating a Nested frame structure
17
<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.
![Page 18: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/18.jpg)
18
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>
![Page 19: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/19.jpg)
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
![Page 20: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/20.jpg)
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>
</html>
20
![Page 21: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/21.jpg)
Site Layout #1
21
streetsign logo here
John Jay Link
Class website Link
Some Description here
logo.html
link.htmlhome.html
index.html
![Page 22: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/22.jpg)
Site Layout #2
22
Some content here
Some content here
Some content here
Some content here
Some content
here
![Page 23: 1 HTML Frames](https://reader036.fdocuments.in/reader036/viewer/2022062322/56649efd5503460f94c114d0/html5/thumbnails/23.jpg)
Site Layout #3
23
Some content here
Some content here
Some content here
Some content here
Some content here