Sunday, June 5, 2011

Frame HTML Tutorial

STEP WISE FRAME TUTORIAL
With help of frame we can create multiple display areas.
body is replaced by <frameset>
Step1.create some HTML document 1st.
Document 1

<html>
<head>
<title>frame document 1</title>
</head>
<body>
 frame photoshop
</body>
</html>
save it as frame photoshop.html.
Document 2

<html>
<head>
<title>document 2</title>
</head>
<body>
frame coreldraw
</body>
</html>
save it as frame coreldraw.html
Document 3
<html>
<head>
<title>document 3</title>
</head>
<body>
frame max
</body>
</html>
save it as frame max.html
 Document 4<html>
<head>
<title>document 4</title>
</head>
<body>
frame indesign
</body>
</html>
save it as frame indesign.html

 Document 5
<html>
<head>
<title>document5</title>
</head>
<body>
frame illustator
</body>
</html>
save it as frame illustrator.html

ALL HTML DOCUMENTS AND INDEX HTML DOCUMENT SHOULD BE IN SAME FOLDER.
IMAGE FOLDER SONG FOLDER ALSO SHOULD BE IN SAME FOLDER.
NOW TRY THIS
EXAMPLE 1
<html>
<head>
<title>frame tutorial</title>
</head>
<frameset cols="150,*,2*">
<frame src="frame photoshop.html">
<frame src="frame max.html">
<frameset rows="50%,50%">
<frame src="frame coreldraw.html">
<frame src="frame indesign.html">
</frameset>
</frameset>
</html>
save it as index.html
PREVIEW-


EXAMPLE 2
 <html>
<head>
<title>frame tuitorial</title>
</head>
<frameset cols="80,*,2*">
<frameset rows="80,*,2*">
<frame src="frame photoshop.html">
<frame src="frame photoshop.html">
<frme src="frame photoshop.html">
</frameset>
<frame src="frame max.html">
<frameset rows="50%,50%">
<frame src="frame coreldraw.html">
<frame src="frame indesign.html">
</frameset>
</frameset>
</html>
save it as index html.


EXAMPLE 3
<html>
<head>
<title>frame tutorial</title>
</head>
<frameset cols="300,*">
<frameset rows="300,*">
<frame src ="image/logo.png"width=300 height=300 scrolling=no marginwidth=1 marginheight=1>
<frame src="frame photoshop.html">
</frameset>
<frame src="frame max.html">
</frameset>
</html>
save it as index html.
EXAMPLE 4
<html>
<head>
<title>frame tutorial</title>
</head>
<frameset cols="300,*" border=30 bordercolor=#ook66c">
<frameset rows="300,*">
<frame src ="image/logo.png"width=300 height=300 scrolling=no marginwidth=1 marginheight=1>
<frame src="frame photoshop.html">
</frameset>
<frame src="frame max.html">
</frameset>
</html>
Save it as index .html

 

 

No comments: