HTML - Frames

Basic Web Structures

HTML - FRAMES

Frames are most typically used to have a menu in one frame, and content in another frame.

When someone clicks a link on the menu, that link is then opened in the content page.

Here is a classic example of a basic "index" frameset with a menu on the left and content on the right

WHAT ARE FRAMES

<html> <body> <frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </body> </html>

HTML CODE

frameset - The parent tag that defines the characteristics of this frames page. Individual frames are defined inside it.

frameset cols="#%, *" - The width that each frame will have. In the above example, we chose the menu (the 1st column) to be 30% of the total page and used a "*", which means the content (the 2nd column) will use the remaining width for itself (70%).

FRAME SET

frame src="" - The URL of the web page to load into the frame.

A good rule of thumb is to call the page which contains this frame information "index.html", as that is typically a site's main page.

FRAME SET

<html> <body> <frameset rows="20%,*"> <frame src="title.html"> <frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </frameset> </body> </html>

ADDING A BANNER OR TITLE FRAME

frameborder="#" - Determines whether there will be a border.

border="#"- Modifies the border width.

framespacing="#" -Modifies the border width, used by Internet Explorer.

FRAMEBORDER AND FRAMESPACING

Presenter

Presentation Notes

You've probably noticed those ugly gray lines that appear between the frames. It is possible to remove these and manipulate the spacing between frames with frameborder and framespacing. These attributes appear within the frameset tag. Note: Framespacing and border are the same attribute, but some browsers only recognize one or the other, so use both, with the same value, to be safe.

<frameset border="0" frameborder="0" framespacing="0" rows="20%,*"> <frame src="title.html"> <frameset border="0" frameborder="0" framespacing="0" cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </frameset>

GUESS THE OUTPUT

<html> <body> <frameset rows="20%,*"> <frame name="title" src="title.html"> <frameset cols="30%,*"> <frame name="menu" src="menu.html"> <name="content" src="content.html"> </frameset> </frameset> </body> </html>

FRAME NAME AND FRAME TARGET

<html> <head> <base target="content"> </head> <body>  </body> </html>

FRAME NAME AND FRAME TARGET

noresize - Determines whether the frames can be resized by the visitor or not. (values "true" and "false")

scrolling - Determines whether scrolling is allowed in the frame or not (values "true" and "false")

We set the scrolling for our content frame to "yes" to ensure our visitors will be able to scroll if the content goes off the screen.

We also set the scrolling for our title banner to no, because it does not make sense to have a scrollbar appear in the title frame.

NORESIZE AND SCROLLING

Attribute Description name Assigns a name to a frame. This is useful for loading contents into one frame from

another.

longdesc A long description - this can elaborate on a shorter description specified with the title attribute.

src Location of the frame contents (for example, the HTML page to be loaded into the frame).

noresize Specifies whether the frame is resizable or not (i.e. whether the user can resize the frame or not).

scrolling •Whether the frame should be scrollable or not (i.e. should scrollbars appear). Possible values:auto •yes •no

frameborder •Whether the frame should have a border or not. Possible values:1 (border) •0 (no border)

marginwidth Specifies the margin, in pixels, between the frame's contents and it's left and right margins.

marginheight Specifies the margin, in pixels, between the frame's contents and it's top and bottom margins.

QUICK FRAMING RECAP

QUICK RECAP

<html> <head> <title>Frameset page<title> </head> <frameset cols = "25%, *"> <noframes> <body>Your browser doesn't support frames. Therefore, this is the noframe version of the site.</body> </noframes> <frame src ="frame_example_left.html" /> <frame src ="frame_example_right.html" /> </frameset> </html>

HTML ENTITIES

¢ Cent ¢ ¢ £ English Pound £ £ ¤ Currency ¤ ¤ ¥ Yen ¥ ¥

® Registered Trademark ® ®

° Degree(s) ° ° ± Plus or Minus ± ±

¼ ¼ Fraction ¼ ¼

½ ½ Fraction ½ ½

¾ ¾ Fraction ¾ ¾

HTML - Frames

Documents

Transcript of HTML - Frames