Clearly the page is divided into rows. The top row and the bottom row. The bottom row is then divided into two COLUMNS.
When you are writing HTML code for a frame, your first step is to decide whether you want to divide the page first into rows or first into columns. If you start off with rows, then the WHOLE of the page will be divided into the number of ROWS you choose, and THEN it will be divided into COLUMNS.
This page teaches you about frames and about dividing the frames' page into COLUMNS and ROWS. At the end of this page you should know what is meant by dividing the page into ROWS or COLUMNS.
|
The picture on the left represents a page
using frames with the dark lines separating the frames in the in the frame set. The top
frame extends across the page and the bottom two frames divide the page. Clearly the page is divided into rows. The top row and the bottom row. The bottom row is then divided into two COLUMNS. |
Now let's consider the next example.
 |
This page is divided into COLUMNS. There are two columns and the second column is divided into two ROWS. |
These pages look roughly the same, but there is a slight and obvious difference. Each page is created by dividing the page first into ROWS or first into COLUMNS.
 |
Below is the code for a frames page which divides the page into two rows (similar to the picture on the left): |
< html>< head>< title>New Page 4 < /title>< /head><!-- ####################### The page doesn't start with <body> tags because it is a frames page ####################### --> < frameset rows="90,*"><!-- ####################### We start with a frameset which divides the page into rows. rows="90,*" means that the first row is 90 pixels (You could use percentages, such as 15%) and the second row is what is left (*) of the page. The browser calculates this value for us. ####################### --> < frame src="MyTopPage.htm" /><!-- ####################### Above is the first frame which will hold a file MyTopPag.htm. Note that the "frame" tag has the " />" at the end because it does not have a close tag of its own. This is to make the code compatible with future browsers (as well as work in old ones) ####################### --> ####################### --> < frame src="MyBottomPage.htm" /><!-- ####################### The second frame holds the page MyBottomPage.htm ####################### --> < /frameset> |
Copy the above code and save it as an HTML file. Load it in your browser. The browser will say it cannot find the files MyTopPage.htm and MyBottomPage.htm. You will, however, be able to see that the frame divides the page into two rows. why don't you create two pages with the names MyTopPage.htm and MyBottomPage.htm and see how it works.
Try changing the values for the rows to see how they work.
 |
Now here is the code for a page divided into two columns (similar to the picture on the left): |
< html>< head>< title>New Page 4
</title> </head> <!-- ####################### The page doesn't start with <BODY> tags because it is a frames page ####################### --> <frameset cols="90,*"> <!-- ####################### We start with a frameset which divides the page into rows. rows="90,*" means that the first row is 90 pixels (You could use percentages, such as 15%) and the second row is what is left (*) of the page. The browser calculates this value for us. ####################### --> <frame src="MyLeftPage.htm" /> <!-- ####################### Above is the first frame which will hold a file MyLeftPag.htm. ####################### --> ####################### -->
<frame name="menu" target="main" src="MyRightPage.htm" /> <!-- ####################### The second frame holds the page MyRightPage.htm ####################### --> </frameset> |
Try out the code for this page and notice that the page is divided into two columns.
Now the purpose of this page is to learn that the first thing in making frames is to decide whether to divide the page into ROWS first or COLUMNS first. Actually, by now, you will be able to create pages divided into rows or in columns.
<frameset rows="25%,25%,*">
If you use the above code in the first example, you will get three rows on the page.
Here are two more examples:
| Page divided into Columns |
Page divided into rows. |
 |
 |
If you want a page divided into ROWS, then you would start with, for example:
<frameset rows="25%,*">
Or
<frameset rows="90,510">, for example, if you wanted to specify the size yourself.
And if you want a page divided into COLUMNS then you would start with for example:
<frameset cols="90,*">
The number of rows or columns you get depends on how many values you put in the rows or cols value. If you put two value in, then you get two columns or rows. If you put three in, you get three.
So now you can divide the frames page into rows or into columns. But how do you divide the rows into columns or the columns into rows, to get more complex patterns? The next page looks at the frame tag in more detail and the one after that will look at dividing rows into columns and columns into rows.
[HTML Tutorial][Framesets][Frames in Frameset][Columns in Rows]