Site hosted by Angelfire.com: Build your free website today!
 

html frames tutorial

This html frames tutorial contains almost everything you need to know about frames and the entire tutorial is condensed into one page

use this template
to get started (opens a new window)

how frames work

in this example there is a 'navigation panel' on the left and a main page on the right.
to achieve this we need three pages.
The first page contains the the code for building the frame
a second page loads into the 'nav panel' on the left and a third page is loaded into the larger area on the right

this is the code for the main frameset
copy and paste it to your notepad or whatever text editor you use and save it as test.html


the first 'frame src' (frame source) is named 'nav' and the page 'nav.html' loads into it

the second 'frame src' is named 'main' and the page 'main.html' loads into it

this is the code for 'nav.html'
copy it and save it as nav.html


this is the code for 'main.html'
copy it and save it as main.html

linking to pages in the frame

the whole point of having a 'nav panel' is that links to other pages can be put there, but if we put a normal link in the nav panel the new page will load in the in the smaller panel

to make a link work properly and load the new page in the larger frame on the right we have to make a slight adjustment to our links

the frame source tags have names, the second frame source tag is called 'main'
<FRAME SRC="main.html" NAME="main">
to load a page into the main frame panel from the nav panel, all we have to do is add
target="main" to our links
<A HREF="nextpage.html" TARGET="main">next page</A>

change the frame size

the frameset in the example makes the nav panel 160 pixels wide
the frameset makes the main page stretch to fill the rest of the screen because instead of declaring an absolute size in pixels a * is used
<FRAMESET COLS="160,*">

we could also set the size of the frames as a percentage if we wish
<FRAMESET COLS="20%,80%">

frameset attributes

we can customize the frameset with a few attributes

we can set the border and bordercolor
<FRAMESET COLS="160,*" border="0"> (no border)
<FRAMESET COLS="160,*" border="20"> (border of 20 pixels)
<FRAMESET COLS="160,*" border="10" bordercolor="#FF0000">

we can set the scrollbars
<FRAME SRC="nav.html" scrolling="no"> (no scrollbars)
<FRAME SRC="main.html" scrolling="yes"> (scrollbars on)
by setting scrolling to auto, scrollbars only appear if they are required.
<FRAME SRC="main.html" scrolling="auto">

we can stop users resizing the frame
<FRAME SRC="main.html" NORESIZE>

the noframes tag

Although older browsers that do not have a frames capability are rapidly being replaced we can include a <noframes> tag for the unfortunate few that cannot use frames.
anything included between the noframes tag can be seen by users that do not have frames ability.
it is common to see a phrase like 'sorry you need a frames capable browser to use this website' but a link to the document in the navigation frame would be less exclusive.
Also, because the frameset will probably be your index.html it will be beneficial to have plenty of text content between the noframes tags, thats if you don't want your homepage description in search engine results to look something like this example...
my page about share dealing
sorry you need a frames capable browser to veiw this site



more frames templates

pick a template, click on one of the images to see the frameset and get the code
(each opens in a new window)

html tutorial


home
html tutorial css tutorial javascript webmaster articles
html tutorial