HTML Frames

HTML Frames

HTML Frames. Quite annoying and quite useful. All depends on the web designer.

Caution: Google may not like you.
Well, that title might be a little dramatic, but nonetheless, it is true. Search engine spiders may skip frame and iframe content. Consider whether or not search engine placement is important to you before using them. An iframe might be okay to insert polls or ads, but important content could be missed by crawlers if placed in an iframe.

Here's how to write them:

IMPORTANT: Don't use a body tag with framesets or some browsers will not display the frames.

<frameset cols="250,*,200" border=10 frameborder=1>


<frameset rows="33%,100,*">
<frame name=topleft src=/myleft.shtml marginwidth=75 marginheight=50 noresize scrolling=yes>
<frame name=middleleft src=/menu/index.shtml>
<frame name=bottomleft src=/images/logo.gif>
</frameset>


<frameset rows="100,5*,3*">
<frame name=topright src=/home.shtml>
<frame name=middleright src=http://google.com/>
<frame name=bottomright src=/nav.html>
</frameset>


<frame name=wayright src=/pages/profile.shtml>

</frameset>

Overview

---We wrap a frameset tag around the whole thing and we define our columns first with the cols attribute.
---Inside of the initial frameset tag, we define each column. In our first and second columns we needed rows, so we created a frameset for each.
---We didn't need rows for our third column, so we just wrote a frame tag.

Details

<frameset cols="250,*,200" border=10 frameborder=1>
---The first frameset tag defines our columns in the cols attribute.
------Separate column sizes with commas.
------Specify sizes using pixels, percentage, or an asterisk.
------Asterisk means: unspecified - "whatever remains".
------ADVANCED - cols="100,5*,3*" A number and an asterisk means: "this-many-parts of the remaining". Like cooking, five parts water to three parts sugar.
---Other attributes for the first frameset are:
------border (in pixels)
------frameborder - 1 means on - 0 means off

<frameset rows="33%,100,*">
---In our first and second columns we use more frameset tags so we can have rows.
-----The rows attribute works exactly the same as the cols attribute.

<frame name=topleft src=/myleft.shtml marginwidth=75 marginheight=50 noresize scrolling=yes>
---We then write our frame tags. One for each row.
---Attributes for frames are:
-----name - identifies the frame so we can target links to load there.
-----src - the url that we want loaded. Relative or full URL.
-----marginwidth - the distance in pixels from the side of the frame.
-----marginheight - the distance in pixels from the top of the frame.
-----noresize - if this is placed in the frame tag, the frame will not be resizable by the user.
-----scrolling - used to place scrollbars. Values are yes, no, auto.

<frame name=wayright src=/pages/profile.shtml>
---Our third and last column doesn't need rows so we just use a frame tag.

Inline frames, or iframes, are very easy to write. Iframes can be inserted anywhere on an HTML page, so the rule about not using the HTML body tag does not apply here.

Here's how to write an iframe:

<iframe name=heya src=/good.shtml frameborder=1 marginwidth=10 marginheight=0 scrolling=auto align=vertical height=400 width=400>
</iframe>

Most of the attributes for an iframe are the same as regular frames and framesets. A new attribute, align is available with iframes.
-remember, frameborder can be 1 for on, 0 for off.
-scrolling - yes, no, or auto
-align- vertical or horizontal

NOTE: The HTML iframe tag has an opening AND closing tag. Don't forget it :)

Resources:
HTML Tutorials
Title Tag in HTML

The Classic BareBones Guide to HTML
W3C's Official HTML 4.01 documentation

Tags in HTML
Color Chart in HTML
HTML Codes

Previous Article: HTML Color Chart

Next Article: Make Text Bold Using HTML

Head First HTML with CSS & XHTML Eric Freeman, Elis... New $26.39	Pro CSS and HTML Design Patterns Michael Bowers New $29.69	jQuery in Action Bear Bibeault, Yeh... New $26.39
CSS David McFarland New $23.09	HTML, XHTML, and CSS, Sixth Edition ... Elizabeth Castro New $23.09	Dreamweaver CS3 David McFarland New $29.69
Struts 2 in Action Don Brown, Chad Da... New $29.69	Build Your Own Website The Right Way... Ian Lloyd New $19.77	Dojo Matthew A. Russell... New $26.39

Privacy Information