Chapter 4:- HTML Frames, Tables and List

by admin | April 09th 2012 | elearning, HTML & Internet | 2,811 Comments

HTML Frames

With frames, you can display more than one Web page in the same browser window. The intelligent use of frames can give your pages a cleaner look and make them easier to navigate. Dividing a page into frames is actually quite simple. The basic concept goes like this: Each frame is a regular, complete html document. If you wanted to divide your page into 2 side by side frames, then you would put one complete html document in the left frame and another complete html document in the right frame, in addition you need to write a third html document. This MASTER PAGE (I’m coining a new phrase here folks ) contains the <FRAMS> tags that specify what goes where. As a matter of fact, that’s its only function.

Frames

With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

The web developer must keep track of more HTML documents.

It is difficult to print the entire page.

The Frameset Tag

The <frameset> tag defines how to divide the window into frames

Each frameset defines a set of rows or columns

The values of the rows/columns indicate the amount of screen area each row/column will occupy.

The Frametag

The <frame> tag defines what HTML document to put into each frame

In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document “frame_a.htm” is put into the first column, and the HTML document “frame_b.htm” is put into the second column:

</frameset>

Note: The frameset column size value can also be set in pixels (cols=”200,500”), and one of the columns can be set to use the remaining space (cols=”25%,*”)

Basic Notes – Useful Tips

If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize=”noresize” to the <frame> tag.

Add the <noframes> tag for browsers that do not support frames.

Important: You cannot use the <body></body> tags together with the <frameset> </frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below.

Frame Tags

Tag	Description
<frameset>	Defines a set frames
<frame>	Defines a sub window (a frame)
<noframes>	Defines a noframe section for browsers that do not handle frames
<iframe>	Defines an inline sub window (frame)

First things first. For this tutorial we will need a few html documents. Fire up Notepad and copy the following to get you started.

<HTML>

<HEAD>

<TITLE>My Frame Page</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

We will give each document a name. In Table Tutor and Form Tutor we used guy’s names. I think its time to get some young ladies in here.

<HTML>

<HEAD>

<TITLE>My Frame Page </TITLE>

</HEAD>

<BODY>

Lisa

</BODY>

</HTML>

Create a new folder somewhere and save this as lisa.html.

Now make another html document.

<HTML>

<HEAD>

<TITLE> My Frame Page</TITLE>

</HEAD>

<BODY>

Terri

</BODY>

</HTML>

Save this in the same folder as terri.html.

Now do the same for Kim, Tina, Shannon, and Beth. Save them just like the others. You should now have a folder that contains 6 complete standalone html documents.

Ok, now the fun stuff…making your master page. Start with this.

<HTML>

<HEAD>

<TITLE> My Frame Page-The Master Page</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Remove the </BODY> tags. The master page doesn’t use them……

<HTML>

<HEAD>

<TITLE>My Frame Page-The Master Page</TITLE>

</HEAD>

</HRML>

…..it uses <FRAMEST> tags instead.

<HTML>

<HEAD>

<TITLE>My Frame Page-The Master Page</TITLE>

</HEAD>

</FRAMESET>

</HTML>

To keep things a little cleaner, I’m going to stop0 writing the <HTML>, <HEAD> and <TITLE> tags. Needless to say, keep them in your document.

</FRAMESET>

Now’s a good time to save it. Save it in your folder (with all the girls) as index.html. If you try to open it with your browser now it will be blank. All you have said so far is “This is my Master Page”.

Now let’s start defining just how things are going to look. Tell the browser to split the main window into 2 columns, each occupying 5% of the window.

</FRAMESET>

This will still be blank, we have one more thing to do before our ‘system is operational”.

We must tell the browser what to put in each frame.

</FRAMESET>

You are now the proud parent of a fully functional Framed page!

One last thing before we go on. Note that <FRAMESET> is a container tag, and <FRAME>is not. For those that don’t know what that means, a container tag has an opening <TAG> and a closing </TAG>.

With the form tag you can add to your web pages a guestbook, order forms, surveys, get feedback or whatever.

The basic construction of a html from is this…………

<FROM> begin a form

<INPIT> ask for information in one of several different ways…

<INPUT> …there can be as many input areas as you wish

</FORM> end a form

That’s html forms in a nutshell. You are now ready to make some forms! Now’s a good time to stress that if you want to learn how to make quality html documents, them you would be well served to take the time to teach yourself the tags. If you rely on the so-called “from wizards” in the “easy as pie html editors” out there, you will have greatly limited flexibility, and the end result may not be what you are trying to achieve. In my opinion the best html editors to use are text based editors. A few good ones that come to mind are listed here. These editors will make your html coding easier. They don’t attempt to do it for you.

Just like “follow the bouncing ball”, I want you to open up Notepad (Yes, Notepad!) and follow me. Copy and paste off this page the following to get you started:

<HTML>

<HEAD>

<TITLE> Joe’s the handsomest guy I know </TITLE>

</HEAD>

</BODY>

<FORM>

</FROM>

</BODY>

</HTML>

Next we must tell the browser where to send the data we gather and how to send it. There are two basic things you can do. 1) You can send the data to a CGI script for processing. The parsed data is then emailed to you. This is the preferred method, or 2) You can have the data emailed directly to you using the mailto action. This is simpler but less reliable.

For the sake of simplicity, we will start with the second method.

<HTML>

<HEAD>

<TITLE> Joe’s the handsomest guy I know </TITLE>

</HEAD>

<BODY>

</FROM>

</BODY>

</HTML>

The only thing you have to do is plug in your email address after mailto:

To send the data to more than one email address, separate them with commas… larry@3stooges.org,curly@3stooges.org,mo@3stooges.org

Now, I said that this method is simple, but not entirely reliable. For the time being, it is perfectly OK to use this method as you work through the tutorial. As you complete the lessons you can practice sending yourself information. For most people, under most circumstances, everything will be just fine. If you’d like, you can skip the rest of this lesson for now and dive right into making forms. After you learn a little about forms (or if you’re having trouble submitting them), definitely come back here and learn more about form processing.

Every so often, depending on the sender’s browser/email configuration, using the mailto action might just bring up an empty New Mail window instead of sending the form data. Sometimes (rarely) you’ll click on the button and nothing will happen. in this case you will not be able to even practice with the simpler mailto action. You will have to straight into using a CGI form handler to practice with.

Before we into that, there is one more thing about the mailto action that I want to mention. Sometimes, depending on the person sending the data, you will receive the data in a very strange format. Instead of something nice & neat like this……..

FORMNAME=New Entrant

NAME=R.U. Havinfun

ADDRESS=13`3 Mockingbird Lane

CITY=Beverly Hills

STATE=CA

The info comes back looking like this…..

FROMNAME=New+Entrant&NAME=R.U. +Havinfun&ADDRESS=1313

+Mockingbird+Lane&CTTY+Beverly+Hills&STATE=CA

HTML Tables

With HTML you can create tables.

Tables

Tables are defined with the <table>tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for “table data,” which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc

<tr>

</tr>

<tr>

</tr>

</table>

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 1, cell 2	row 2, cell 2

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any border sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute :< table border=”1”>

<TR>

</tr>

</table>

Headings in a table

Headings in table are defined with the <th> tag.

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

How it looks in a browser

Heading	Another Heading
row 1, cell 1	row 1, cell 1
row 1, cell 2	row 1, cell 2

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.<table border=”1”

<tr>

</tr>

<tr>

</tr>

</table>

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:

<tr>

</tr>

<tr>

</tr>

</table>

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1

Basic Notes – Useful Tips

The <thead>, <tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML.

Table Tags

Tag	description
<table>	Defines a table
<th>	Defines a table header
<tr>	Defines a table row
<td>	Defines a table cell
<caption>	Defines a table caption
<colgroup>	Defines groups of table column
<col>	Defines the attribute values for one or more columns in a table
<thead>	Defines a table head
<tbody>	Defines a table body
<tfoot>	Defines a table footer

HTML Lists

HTML supports ordered, unordered and definition lists.

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>

<li>Coffee</li>

M/ul>

Here is how it looks in a browser:

Coffee
Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, and. example:

<html>

<head>

<title>Example Unordered List with Image Bullets</title>

</head>

<body>

<p> <b>sphere</b></p>

<li>Vanilla<l/i>

<li>Chocolate</li>

<li>Strawberry</li>

</ul>

<li>Vanilla<l/i>

<li>Chocolate</li>

<li>Strawberry</li>

</ul>

</body>

</html>

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>

<li>Coffee<li>

</ol>

Here is how it looks in a browser:

Coffee

Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms.

A definition list starts with the <dl>tag. Each definition- list term starts with the <dt>tag. Each definition-list definition starts with the <dd> tag.

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</d>

<dd>White cold drink</dd>

</dl>

Here is how it looks in a browser:

Coffee

Black hot drink

Milk

White cold drink

Inside a definition-list definition (the<dd>tag) you can put paragraphs, line breaks, images, links, other lists, etc.

List Tags

Tag	Description
<ol>	Defines an ordered lilt
<ul>	Defines an unordered list
<li>	Defines a list item
<dl>	Defines a definition list
<dt>	Defines a definition term
<dd>	Defines a definition description
<dir>	Deprecated. Use <ul> instead
<menu>	Deprecated. Use <ul> instead

Examples of Lists:

<HTML>

<HEAD><TITLE>Lists</TITLE><HEAD>

<BODY>

// <B>Example on Unordered List</B> //

<UL TYPE=FILLROUND>

<LI>Sportstar

<LI>Business Week

<LI>Time

</UL>

// <B>Example on Ordered List</B> //

<OL TYPE=”I”START=4>

<LI>Sportstar

<LI>Business Week

<LI>Time

</OL>

// <B>Example on Definition List</B> //

<DL>

<DT>Sports Magazine<DD>Sportstar

<DT>Business Magazine<DD>Business Week

<DT>General Magazine<DD>Time

</DL>

</BODY>

</HTML>

Nested Lists

You can nest lists of the same or different types. For example, suppose you have a bulleted list and need a numbered list beneath one of the items, as shown:

? Send us a letter detailing the problem. But sure to include the following:

Your name
Your order number

Your contact information

A detailed description of the problem

In such a case, you would nest an ordered list inside an unordered one, as shown in the following code:

<!DOCTYPE HTML PUBLIC “_//W3C//DTD HTML 4.01//EN”

http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<title>Example Definition List </title>

</head>

<body>

<li>Send us a letter detailing the problem. Be sure to

Include the following :< /li>

<li>Your order number. </li>

<li>Your contact information. </li>

<li>A detailed description of the problem.</li>

</ol>

</ul>

</body>

</html>

The output of the code is shown in Figure

Figure: you can nest different types of lists within one another.

Note that the nested list does not span any open or close tags-it starts after the close tag of the parent’s item and before any other tags in the parent list. It is also formatted (indented) to make it easier to identify in the code. Using this method, you can nest any list within any other list.

Changing the Start Value of Ordered Lists

Previous versions of HTML allowed the use of the start attribute in the <ol> tag to control what number or letter the list began with. For example, the following code starts a list with the decimal number 12:

However, the start attribute of the <ol> tag was deprecated, and a replacement CSS style has yet to be defined. Although you can use the start attribute, your document will no longer validate against strict HTML.

If you find yourself needing consistent, yet flexible numbering, consider using the new CSS2 automatic counters and numbering feature. This feature user the content property along with the new counter-increment and counter-reset properties to provide a flexible yet powerful automatic counter function.

The following style code will define a counter and cause any <ol> list to begin with an item number of 12:

ol {counter-reset: list 11 :}

li {list-style-type: none ;}

li: before {

Content: counter (list, decimal)”.”;

counter-increment: list ;}

</style>

This code introduces quite a few CSS2 concepts-pseudo-elements, counters, and relates properties and methods. However, it isn’t as complex as it might first appear:?

The ol definition causes the counter (list) to be reset to 11 every time the <ol> tag is use-that is, at the beginning of every ordered list?
The li definition sets the list style type to none-the counter will display our number, if we left the list style type set to decimal, there would be an additional number with each item.?

The li: before definition does two things: 1) causes the counter to be displayed before the item (using the begin pseudo-element and the content property) along with a period and a space; 2) increments the counter. Note that the counter increment happens first, before the display. That is the reason you need to reset the counter to one lower than your desired start.

Using the preceding styles along with the following list code in a document results in a list with items numbered 12-15:

<ol>

</ol>

Counters are a new, powerful feature of CSS2.Unfortunately, at the time of this writing, only the Opera browser fully supports counters. However, the other browsers are sure to follow suit. You’ll find more information on counters and the content property in chapter 16. Tip The various list properties can all be defined without one property, list-style. The list-style property has the following syntax:

list-style: <list-style-type> <list-style-image>

<list-style-position>

You can use this one property to specify one, two, or all three list-style properties in one declaration. For example, to define an ordered list with lowercase letters and inside positioning, you could use the following tag:

See Chapters 16 and 17 for more information on styles.

Chapter 4:- HTML Frames, Tables and List

Navigation