WebDevelopersNotes logo

home-icon Home / HTML / HTML frame code tutorial – Frames part 3

HTML frame code tutorial – Frames part 3

HTML frame code tutorial - Frames part 3

Important attributes of <FRAMESET>

  • BORDER: Sets the border between frames. The value determines the thickness in pixels.
  • BORDERCOLOR: Sets the color of the border. Takes color names or hexadecimal color codes as value. Applicable only if FRAMEBORDER is set.
  • FRAMEBORDER: A ‘1’ or ‘yes’ value displays a border while ‘0’ or ‘no’ removes the border. The BORDERCOLOR attribute work only if this attribute is set to display a border. (Note: According to World Wide Web Consortium’s HTML 4.0 specification only ‘0’ or ‘1’ can be used as values. Though, Internet explorer accepts this, Netscape requires the values to be set either to ‘yes’ or ‘no’).
  • FRAMESPACING: Places some space between the edges of the frame and its contents. Value has to be specified in pixels and this attribute is recognized only by Internet Explorer.
  • COLS and ROWS: We’ve met COLS before. ROWS is similar and puts frames in horizontals rows instead of vertical columns. The values taken by these attributes can be a number (which determines the size in pixels) or percentages or wildcard *. We’ll back come to this shortly.

Let’s make another file which tests these attributes.

<HTML>
<HEAD><TITLE>My second framed page</TITLE>
</HEAD>
<FRAMESET ROWS="20%, 80%" FRAMEBORDER="NO" BORDER="3">

   <FRAME SRC="menu.html">
   <FRAME SRC="main.html">

</FRAMESET>
<NOFRAMES>
There is no frame support on your browser.
</NOFRAMES>
</HTML>

We’ll name this file frames2.html. You can have a look at it by clicking here.

So what did you make out?
The two frames have now been displayed horizontally, courtesy the ROWS attribute. BORDER is set to ‘3’ which makes a three pixel thick border. (The border is displayed even though FRAMEBORDER is set to ‘NO’. This is because the BORDER attribute is specified).
To make the border disappear, set the values for BORDER and FRAMEBORDER to 0 and NO, respectively.

What is the wildcard “techie” term I introduced before?

If you have ever worked in a DOS window or a Unix prompt, you know what a wildcard is. For people who don’t, here is the explanation.
A wildcard character matches any character or sequence of characters. So if you type DIR *.html at DOS prompt, you shall get a listing of all html files in that directory. A wildcard is not used in that sense in COLS and ROWS. Here it signifies “ rest of “.
So,
COLS=”200, *”
will tell the browser to allocate 200 pixels vertically for the first frame and the rest for the second frame.

Similarly,
ROWS=”10%, *”
will place the first frame in 10% of horizontal space and the rest will be occupied by the second frame.

You would also have noticed that wildcards can be used with both pixel and percentage values.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

In Japan, the term Sudoku is copyrighted. It was coined by Maki Kaji, president of Nikoli, a company that publishes puzzle books. The Japanese, however, still refer to the puzzle by it's original name - Number Place. Sudoku means digit-single in Japanese. By the way, Sudoku did not originate it Japan. The popular puzzle was invented by an American architect, Howard Garns and first published as Number Place in the May 1979 issue of Dell Pencil Puzzles and Word Games. In Japan, it was first published by the monthly Nikoli magazine. Sudoku gained worldwide popularity because of the efforts of Wayne Gould who not only convinced The Times UK to publish it but also developed a program that would churn out countless puzzles of specified difficulty. Gould was also responsible for taking Sudoku to the United States where it was published in several daily newspapers across the country. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy