Lesson 7

This chapter/section is all about splitting your page up into different sections. These sections are called frames and if used correctly and efficiently can greatly add to the effectiveness of your pages.

Frames are used to split the browser window into sections. Each section or frame is one HTML document and the layout is controlled by another document. The document, which controls the layout, does not contain a <body> instead it contains one or more <frameset> containers. Explorer View 10.1 shows the way that frames appear in Internet Explorer 4.

Explorer View 10.1 - click on the image to see a bigger and clearer version

The appearance of these frames is the default, you will learn later how to change such things as border thickness and colour. First, however, you must learn how to insert frames.

Notepad Viewer 10.1 displays the document, which displays as Explorer View 10.1. Firstly study it and see if you can figure out how the <frameset> and <frame> tags work. I will then explain them.

Notepad Viewer 10.1

<html>
<head>
<title>Frames</title>
</head>
<frameset rows="25%,75%">
<frame src="title.html">
<frameset cols="100,*">
<frame src="menu.html">
<frame src="main.html">
</frameset>
</frameset>
</html>

The <frameset> tag signals the start of a set of frames. A set of frames contains rows or columns or rows and columns.

this is

2 rows

this is

2 columns

this is	2 rows
and	2 columns

You can specify the sizes of rows and columns in different ways:

"70%, 30%"
"150, 600"
"*, 3*"

I will now explain the different types. Type i) specifies the size of the frame as a percentage of the browser window. Type ii) specifies the size of the frame in pixels. Type iii) specifies the size of the frame in proportional value. 3* is three times bigger than * which means that that frame will be 3 times bigger than the other.

Those are the three different types but they can also be combined:

absolute values are taken in to account first, percentages are then based on the whole window, proportional values are then measured from the remaining space

"20%, *, 2*"
"100, *"
"75, *,20%"

The combinations can become kind of tricky. I will explain now the results of the three combinations above.

the first column/row will measure 20% of the browser window, the next will be 1/3 of the remaining space and the third will take up the rest
the first column/row will measure 100 pixels and the next will take up the remainder
the first column/row will measure 75 pixels, the third will measure 20% of the entire browser window and the middle will fill the rest.

NOTE: WITH ROWS YOU ARE SPECIFYING THE HEIGHT AND WITH COLUMNS YOU ARE SPECIFYING THE WIDTH

To tell the browser that the frameset contains rows type:

<frameset rows= "100,*">

To tell the browser that the frameset contains columns type:

<frameset cols= "*,3*">

To tell the browser that the frameset contains rows and columns type:

<frameset rows= "100,*" cols= "*,3*>

<frame>

The frame tag has no end tag. There must be one frame tag for each frame. If there are two frames specified in the <frameset> tag then there must be two <frame> tags before the </frameset> tag.

The only required attribute of the <frame> tag is "src=". This is where you enter the URL of the HTML document that will fill that frame. Absolute or relative reference can be used.

To help explain this you should refer back to Notepad Viewer 10.1. In this document I presumed that" menu.html", "title.html" and "main.html" were in the same folder as "notepad10-1.html".

Notepad Viewer 10.2

This is a very basic frameset container, which has two rows. What if I wanted to separate the bottom row into two columns (Explorer View 10.1)? There are two ways to do this.

the same as in Notepad Viewer 10.1, nest a frameset container within the top one. This container will specify columns instead of rows.
Specify the URL of a HTML document that is split in two rows.

The first way is explained in Notepad Viewer 10.1 but I will try to make it clearer for those who do not understand.

Notepad Viewer 10.2 specifies two rows in the frameset tag. The first row is set to display the contents of "top.html". The second row is set to display the contents of "bottom.html". The first step in changing this document to the way we want is removing the tag <frame src= "bottom.html">. The second step is replacing it with:

<frameset cols= "20%,*>

<frame src= "bottomleft.html">

<frame src= "bottomright.html">

</frameset>

It’s as easy as that. To see the complete listing, go back to Notepad Viewer 10.1.

The second way is also quite easy. This time instead of removing "bottom.html" we edit it. Its source should read:

<html>

<frameset cols= "20%, *">

<frame src= "bottomleft.html">

<frame src= "bottomright.html">

</frameset>

</html>

Both ways will have the same result. It’s up to you which one you use.

You should now be able to create any combination of frames. Study this Notepad Viewer of very complicated frames. Try to sketch on a piece of paper what you think the finished page will look at. Then click on the anchor underneath to see if you were right.

Notepad Viewer 10.3- Complicated frames

Explorer View 10.2- result of Notepad Viewer 10.3

Although the above is not an ideal layout for a webpage it displays the flexibility of frames and the ways in which they can be used to lay out your page almost any way you want.

You can see above the way frames look when they have content (even if it is only one number). What would happen though if you specified either an unknown URL or no URL at all?

Explorer View 10.3 shows both of these. The top frame has no URL reference at all

i.e. <frame>

The bottom frame has an unknown URL

i.e. <frame src="unknown URL">

Explorer View 10.3 - click on the image to see a bigger and clearer version

This is the way they are presented in Internet Explorer 4, Internet Explorer 3 however displays just an empty grey box for an unknown URL. The frame with no URL will display the same in IE3 as in IE4.

attributes

So far the only attribute you know for the <frame> tag is "src=". I will firstly show you a <frame> tag with all of its attributes and then I will explain each of them to you.

<frame src= "main.html" marginheight=6 marginwidth=4 bordercolor=black scrolling=auto noresize>

marginheight………sets the internal top and bottom margins in pixels

marginwidth……….sets the internal left and right margins in pixels

bordercolor……….. sets the colour of the frames borders in rgb value or in one of the set colours

scrolling…………….can be set to yes, no, or auto. It gives information to the browser about using scrollbars with that frame, yes means there will be whether necessary or not, no means there won’t be even if they are necessary, auto is the default and means that there will be if they are necessary but not if the entire document will fit in the frame.

noresize…………….if this is set then the frame can not be resized by the viewer

The following is a <frameset> tag with all of its attributes.

<frameset rows= "*,*" cols= "*,*" border=4 frameborder=yes bordercolor=red>

border……………….sets the thickness of the borders in that frameset in pixels the default is 3

frameborder ………can be set to yes or no, if no is selected then the borders do not have a 3D effect and are just plain lines

bordercolor ………..is the same as it is in the <frame> tag except in this case it sets the colour for the entire frameset

NOTE: IF TWO TOUCHING FRAMES HAVE A DIFFERENT FRAME COLOUR THE DEFAULT COLOUR (USUALLY GREY) IS USED

To create borderless frames set "border=0" and "frameborder=no"

linking to another frame

Quite often you will have an anchor in one frame but want the page to open in another. This process can be made sound complicated but it is really quite simple.

i) name the frame

You can assign a name to a frame in the <frame> tag. Simply include the attribute "name=". There is only one restriction when assigning a name and that is that it cannot start with an underscore ("_").

ii) target that frame

To target an anchor to a different frame the anchor tag should look like this. <a href= "whatever.html" target= "theframename">. The only restriction you have when targeting a frame is that the frame must be visible when the anchor is clicked.

There are 4 other reserved implicit frame names. The following is a list of them and a description of what they do:

"_blank"	Opens the file/page in a new window
"_self" (default)	Opens the file/page in the same frame as the anchor
"_parent"	Opens the file/page in the full frameset window of that frame
"_top"	Opens the file/page in the full browser window

If you are careful and think ahead when defining your framesets you will be able to update different variations of frames. For example;

This is a picture of the original page, click on the image to see a bigger and clearer version:

The document that resulted in this page was called "work.html", this document was a frameset document and set two rows, the first row was to contain the file "title.html" and the second row was to contain the file "main.html". "Main.html" was itself a frameset document and it set two columns, the first contained the file "menu.html" and the second contained the file "body.html". "Body.html" was named "nestedframeset" and had two columns, the first contained the file, "info.html" and the second contained the file "guide.html".

The anchor in "menu.html" read:

clicking<a href= "newmaterial.html" target= "nested frameset">here</a>

Therefore when "here" was clicked, the two frames on the right, which make up "body.html" are replaced with "newmaterial.html". Look below if you do not fully understand, click on the image to see a bigger and clearer version

frameless glasses

Not all browsers however support frames so what will you do about that? You can use the <noframes> tag to either give a polite apology that they cannot see your pages or to provide alternative HTML code and give the unfortunate people a chance to see your pages. The <noframes> and </frames> tags signal the start and end of alternative html for browsers that do not support frames. There is no need for the <html>,<body>,</html> or </body> tags, but if you want to use the attributes of the <body> tag you must include it. Notepad Viewer 10.4 displays how to use the <noframes> tag.

Notepad Viewer 10.4

<html>
<frameset rows="*,3*">
<frame src="title.html>
<frame src="main.html>
</frameset>
<noframes>
I am sorry, your browser does not support frames and at the moment I do not have a version of my site without frames
</noframes>
</html>

When someone with a browser that does not support frames clicks on a link to your site they will get that polite message instead of your homepage.

EXTRA INFO.

This information is relevant to links but also to links between frames:

It is possible to link to a section of a document. Firstly you must name the section, just like you do when you want an internal link. Then you alter the anchor so as it looks like this:

<a href= "mypage.html#mysection">

When using frames you could use the anchor like this:

<a href= "mypage.html#mysection" target= "myframe">

next lesson home comment more downloads download this

HTML Builder- End of Lesson 7

It is important that you pay attention now. Major changes are about to happen to your HTML Builder. By adding frames we are going to completely change the structure of the page.

You will need two images to complete the html builder titanic_head.gif and proudm.gif. If you have downloaded this tutorial then you already have the files, if you haven't then you will have to download them now. Right-click on the links and choose "save target as..." or "save link as...", whichever appears (it will depend on your browser). Save the pictures in the same folder as your html builder file.

The next thing you must do is create the file "index.html" in the c:\html directory. The source should look like this.

Notepad Viewer- HTML Builder 7.1(index.html)

<html>

<head>

<title>I have now completed Lesson 7</title>

</head>

</frameset>

</html>

As you can see above we now require 3 more documents and here are the notepad viewers of each of them.

Notepad Viewer- HTML Builder 7.2 (title.html)

<html>

</body>

</html>

only set the leftmargin to 80 if your screen resolution is set to 800x600

Notepad Viewer- HTML Builder 7.3 (menu.html)

<html>

click

<a href="detailed.html" target="window">here</a>for a detailed contents.<p>

<a href="builder.html#lesson1" target="window">Lesson 1</a><br>

<a href="builder.html#lesson2" target="window">Lesson 2</a><br>

<a href="builder.html#lesson3" target="window">Lesson 3</a><br>

<a href="builder.html#lesson4" target="window">Lesson 4</a><br>

<a href="builder.html#lesson5" target="window">Lesson 5</a><br>

<a href="builder.html#lesson6" target="window">Lesson 6</a><br>

<a href="builder.html#lesson7" target="window">Lesson 7</a><br>

</body>

</html>

Notepad Viewer- HTML Builder 7.4 (imagemap.html)

<html>

</map>

</body>

</html>

You may have noticed a couple of links to the file "detailed.html". This is simply the menu that used to be at the top of the page. You will have to highlight everything between the <table> and </table> tags, cut it and paste it into a new file, add the <html> and <body> tags with the same attributes as "builder.html", update the links because they now lead to a different document and add the section for Lesson 7. When you are finished the source will be:

Notepad Viewer- HTML Builder 7.5 (detailed.html)

<html>

<head>

<title>I have now completed Lesson

</title>

</head>

<body topmargin=20 leftmargin=15 text=fuchsia link=navy vlink=blue alink=green background="nonexistent.jpg" bgcolor=

black

bgproperties=fixed>

<a name="top"><h1 align=center>HTML BUILDER</h1></a>

<tr>

</td>

<td>

<lh><big><b>What I learned from....</big><b><br>

<li><a href=

"builder.html#lesson1"

title="Paragraph about what I learned from Lesson 1">Lesson 1</a>

<li>start and end HTML tags

<li>head tag

<li>meta tag

<li>title tag

<li>body tag

<li>margins

<li>hidden text

</ul>

<li><a href=

"builder.html#lesson2"

title="Paragraph about what I learned from Lesson 2">Lesson 2</a>

<li>blockquote

<li>background colour or image

<li>all attributes of the body tag

<li>basefont and font tags

<li>paragraphs and line breaks

<li>physical formatting

<li>preformatted text

</ul>

<li><a href=

"builder.html#lesson3"

title="Paragraph about what I learned from Lesson 3">Lesson 3</a>

<li>inserting images

<li>aligning text with images

<li>all attributes of the img tag

</ul>

<li><a href=

"builder.html#lesson4"

title="Paragraph about what I learned from Lesson 4">Lesson 4</a>

<li>ordered lists

<li>unordered lists

<li>definition lists

<li>all attributes of these lists

<li>lists within lists

<li>personalising your lists using your own bullet

</ul>

<li><a href=

"builder.html#lesson5"

title="Paragraph about what I learned from Lesson 5">Lesson 5</a>

<li>creating tables

<li><i>all</i> attributes of the tags in a table

<li>inserting tables within tables

<li>inserting other HTML items within tables

<li>using the pre tag instead of a table

</ul>

<li><a href=

"builder.html#lesson6"

title="Paragraph about what I learned from Lesson 6">Lesson 6</a>

<li>linking to other documents

<li>inserting internal links

<li>linking to e-mail

<li>linking to other net resources

<li>linking to files

<li>absolute and relative reference

<li>imagemaps

</ul>

<li><a href="builder.html#lesson7" title="Paragraph about what I learned from Lesson 7">Lesson 7</a>

<ul type=circle>

<li>inserting frames

<li>customizing frames

<li>linking between frames

</ul>

</ol>

</td>

</tr>

</table>

</body>

</html>

You will also have to update the document "builder.html".

Notepad Viewer- HTML Builder 7.6

<html>

<head>

<title>I have now completed Lesson

</title>

</head>

<body topmargin=20 leftmargin=15 text=fuchsia link=navy vlink=blue alink=green background="nonexistent.jpg" bgcolor=

black

bgproperties=fixed>

<a name="lesson1"><h2>This is what I have learned from lesson 1.</h2></a><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<a href=

"detailed.html#top"

><i><font color=red>back to contents</i></a></font><p>

I know the very basics of writing HTML. I know that the start and end HTML tags are necessary in a HTML document. I know that the meta tag is used to give information to search engines, i.e. keywords and description<p>

I am able to assign a title to my documents (see taskbar above).<br> I know that all text and images etc. are to be included between the start and end body tags. I know two attributes of the start body tag, topmargin and leftmargin and I know that each of these is measured in pixels. I know how to insert hidden text in a HTML document for example there is hidden

text in between the words hidden and text in this sentence.

<a name="lesson2"><h2>This is what I have learned from lesson 2</h2></a><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<a href=

"detailed.html#top"

><i><font color=red>back to contents</i></a></font><p>

Most of what I learned in lesson two was about changing the look of my webpage. I have already made some changes to this page and I will tell you what they are in an indented paragraph.

<blockquote>As you can see I have added a background colour to the page and if I want I know how to add a tiled image. I have set all of the attributes in the body tag, most of them concern the colour of different text. I have added paragraphs and line breaks to the text. I have set the basefont tag and <font face="flexure","times new roman" size=+1 color=green>know how to use the font tag </font>.I have added horizontal lines and I have added headings. I have also added paragraphs and line breaks.</blockquote>

<pre>

I am able to

------------------

use preformatted text to make

it appear in the order

I want it to

</pre>

<p>I can format my text so as it is<br>

<i>in italics</i><br>

<u>underlined</u><br>

<strike>strike-through</strike><br>

<sup>superscript</sup>,

<sub>subscript</sub><br>

<small>small</small><br>

<b><u><i>or</i></b><sup><big> a</u></sup><tt><strike> combination</big></tt></strike></u>

<a name="lesson3"><h2>This is what I have learned from lesson 3</h2></a><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<a href=

"detailed.html#top"

><i><font color=red>back to contents</i></a></font><p>

This lesson was based on one chapter and the central topic was inserting images in HTML documents.<p>

I have already inserted .gif files on my page and now I will now show you some other things I know how to

do with images.<p>

This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom.<p>

This is only one line of text and appears center aligned <img src="picture.gif" align=center height=128 width=128 alt="this is text written in the alt attribute" vspace=10 hspace=10><p>

I know how to resize images using the width and height attributes. e.g.<img src="picture.gif" align=center height=60 width=160 alt="this is text written in the alt attribute" vspace=10 hspace=10>

<p>I understand all the attributes of the img tag and they have all been used for the images above.

<a name="lesson4"><h2>This is what I have learned from lesson 4</h2></a><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<a href=

"detailed.html#top"

><i><font color=red>back to contents</i></a></font><p>

This lesson was again based solely on one chapter. The Chapter concerned lists. I learned about ordered or numbered lists, unordered or bulleted lists and definition lists. I learned the different attributes of each of these, the main one being type. I learned how to insert lists within lists. I also learned about extra indentation and personalising unordered lists.

<p>I have now added a list of contents at the top of this page and when I learn more advanced things about HTML this list will appear in a different frame and will contain links to the different sections.

<a name="lesson5"><h2>This is what I have learned from lesson 5</h2></a><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<a href=

"detailed.html#top"

><i><font color=red>back to contents</i></a></font><p>

Lesson 5 was all about inserting tables in my HTML document. I learned that they can be used both for presenting information and as a layout tool.<p>

They can be used as a layout tool because it is now possible to include other HTML elements in them such as lists and images.<p>

I am now familiar with all of the attributes of the tags in a table. They include such things as border thickness and colour, background colour or tiled images and text alignment.<p>

You will see at the top of the page that I have added a tiled image to the side of the menu. To do this I created a table with one row and two cells. In the first I simply specified the image background and width and I placed the menu within the start and end tags of the second cell.

<a name="lesson6"><h2>This is what I have learned from lesson 6</h2></a><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<a href=

"detailed.html#top"

><i><font color=red>back to contents</i></a></font><p>

Lesson 6 was all about inserting anchors in html documents. By clicking on an anchor, whether it is hypertext or hypermedia the browser will load up the page specified in the URL reference. I can now create anchors to anything I want to link to, like e-mail, gopher and files. I can also insert anchors that when clicked on tell the browser to move down or up the current page, these are called internal links.<p>

I have added internal links to this page so as a contents menu is available at the top. By clicking on one of the links in the contents the page will scroll down to the paragraph I have written about that lesson.

<a name="lesson7"><h2>This is what I have learned from lesson 7</h2></a><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<hr size=3 width=75% color=lime align=left>

<a href="detailed.html#top"><i><font color=red>back to contents</i></a></font><p>

This lesson was all about splitting your page into frames. As you can see I have already done that with this page. This is the most dramatic change I have made to the builder to date and the entire structure of the page has been changed. When it is opened first of all the viewer sees 3 frames. The top one contains the title, the one on the left at the bottom has an "at a glance" menu and a link to the more detailed menu. I created the detailed menu during an earlier lesson, it used to be at the top of this page but it is now in a different window. The links which lead to it have been re-directed and so have the links from it to this document. The bottom right frame contains an imagemap when the page is opened and this contains two anchors. One of them leads to the top of this document and the other leads to the detailed menu. Everything I learned in this lesson has been put into practice updating the builder.

</body>

</html>

This page was designed for on a monitor set to 800x600 resolution. It is therefore best viewed with that resolution.

This is what it looks like on a monitor with resolution set to 800x600 .

Explorer View- HTML Builder 7 - click on the image for a bigger and clearer version

next lesson home comment more downloads download this

Information The official home-page where this document can be downloaded is http://www.geocities.com/SiliconValley/Network/4759/
This document (whole or part) is not to be used, plagiarised, or its' content attributed to any other author. Any quotes must be acknowledged to the author and the author must be informed of the quotation before it's publication. This is effective whether the quotation is being transmitted by electronic or any other means. The author of this document is Oisin Prendiville who can be contacted at html3.2@technologist.com