24
Lesson 8
| Date post: | 03-Jan-2016 |
| Category: |
Documents |
| Upload: | darleen-gordon |
| View: | 222 times |
| Download: | 0 times |
Lesson 8
Dividing the screen horizontally
<HTML><HEAD><TITLE>Horizontal Frames</TITLE></HEAD>
<FRAMESET ROWS="25%,75%"><FRAME><FRAME></FRAMESET>
</HTML>
Dividing the screen vertically<HTML><HEAD><TITLE>Vertical Frames</TITLE></HEAD>
<FRAMESET COLS="20%,60%,20%"><FRAME><FRAME><FRAME></FRAMESET>
</HTML>
frames.htm<HTML><HEAD><TITLE>Horizontal Frames with Content</TITLE></HEAD>
<FRAMESET ROWS="25%,75%"><FRAME SRC="1.htm“ Name=“upper”><FRAME SRC="2.htm“ Name=“lower”></FRAMESET>
</HTML>
1.htm - Code
<HTML>
<HEAD>
<BODY>
<H1>This text is from 1.HTM</H1>
</BODY>
</HTML>
2.htm- Code
<HTML>
<HEAD>
<TITLE>Horizontal Frames with links</TITLE>
</HEAD>
<BODY>
<H1>This text is from 2.HTM</H1>
<H1><A HREF=“3.htm" TARGET="lower">This is a link to 3.HTM</A></H1>
</BODY>
</HTML>
3.htm - Code<HTML><HEAD><TITLE>Horizontal Frames</TITLE></HEAD><BODY><H1>This text is from 3.HTM</H1><H1><A HREF=“2.htm"
TARGET="lower">This is a link back to 2.HTM</A></H1>
</BODY></HTML>
Ready-made names for frames
• Target=“_self”
• Target=“_top”
• Target=“_blank”
Some frame attributes
• NORESIZE
• SCROLLING
• BORDER or FRAMEBORDER
Nesting frames<HTML><HEAD><TITLE>Nested Frames</TITLE></HEAD><FRAMESET ROWS="25%,75%"><FRAME SRC="1.htm" NAME="upper"> <FRAMESET COLS="50%,50%"> <FRAME SRC="2.htm" NAME="lower"> <FRAME SRC="3.htm" NAME="right"> </FRAMESET></FRAMESET></HTML>
Try Coding!
Images can be links, too
<HTML><HEAD><TITLE>Images Can Be Links, Too</TITLE></HEAD><BODY>Click this house <A HREF=“main.htm"><IMG SRC="home.gif"></A> to return to my home page.</BODY></HTML>
Image Maps
• An image map is a web page graphics with several defined ‘clickable’ areas
• Three steps• Determine coordinates of clickable regions • Use the <Map> and <Area> tags• Add a special version of the <IMG> tag
Finding Coordinates
<A href=“whatever”><Img src=“imagename” ISMAP></A>
A B C
0,0 199,0399,0 599,
0
199,99 399,99 599,99
<Map> and <Area> Tags
<Map Name=“Testmap”><Area shape=“Rect” coords=“0,0,199,99”
href=“a.htm”>
<Area shape=“Rect” coords=“199,0,399,99” href=“b.htm”>
<Area shape=“Rect” coords=“399,0,599,99” href=“c.htm”>
</Map>
Applying <image> Tag
<Img src=“coords.gif” usemap=“#Testmap”>
Shape Attribute
• Shape attribute also accepts values “Circle” and “Poly” (for a polygon)
