Sie sind auf Seite 1von 31

CGS 3066: XHTML 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).
o

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.

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

How it looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Border Attribute
If you do not specify a border attribute, the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, use the border attribute as in the previous example. To display a table with no borders, remove the border attribute or set the border="0". Older browsers will include a border unless it is explicitely set to zero.

<table> <tr> <td>100</td> <td>200</td>

<td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>

100 200 300 400 500 600

Headers and Footers


A table may identify a header, body, and footer section; these section designation are optional. The header section is defined with the <thead> tag. The browser typically renders the header row in a bold font and centers the text. Also, if the table is printed such that the table splits across multiple sheets of paper, the header row will repeat at the top of each page. Similarly, the footer section is defined with the <tfoot>. Note that, when defining header, body and footer section, the header is defined first, followed by the footer, and then the body section. Also note that the cells within the header section are typically defined with the <th> tag rather than the <td> tag. The <th> tag also is commonly used in the footer section as well. The <th> tag is referred to as table header tag.
<table border="1"> <thead> <th>Item</th> <th>Price Per Item</th> </thead> <tfoot> <td>Total</td> <td>$480</td> </tfoot> <tbody> <tr> <td>Cd Burner</td> <td>$300</td> </tr> <tr> <td>Comp. Motherboard</td> <td>$180</td> </tr>

<tr> <th>Total</th> <td>$480</td> </tr> </tbody> </table>

How it looks in a browser: Item Total Cd Burner Price Per Item $480 $300

Comp. Motherboard $180

Caption
<table border="6"> <caption>My Table</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>

How it looks in a browser: My Table 100 200 300 400 500 600

Cells that span more than one row/column


<h4>Cell that spans two columns:</h4>

<table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2" valign="top">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>

Cell that spans two columns


Name Telephone

Bill Gates 555 77 854 555 77 855

Cell that spans two rows


First Name: Bill Gates Telephone: 555 77 854 555 77 855 Note that the valign attribute sets the vertical alignment of the text within a cell.

Tags inside a table


<table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table>

This cell contains a table: This is a paragraph A B This is another paragraph C D This cell contains a list apples bananas

HELLO

pineapples

Cellpadding and Cellspacing


<h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

Without cellpadding:
First Row

Second Row

With cellpadding:
First Second Row Row

<h4>With cellspacing:</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td>

<td>Row</td> </tr> </table>

With cellspacing:
First Second Row Row

Table Width

we can specify a table width that is consumed from the total width of the screen. The attribute width has a value that is either % or in pixels.

<table border="1" width="400"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

First Second

Row Row

CGS 3066: XHTML Forms


Forms are used to collect user input. They provide a base level of interactivity with the user. A form is an area that can contain form elements. Form elements are allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag.


<form> <input /> <input /> </form>

Input

The most used form tag is the <input /> tag. The type of input is specified with the type attribute.

The most commonly used input types are explained below.

Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form> <p>First name: <input type="text" name="firstname" /> <br /> <p>Last name: <input type="text" name="lastname" /> </p> </form>

How it looks in a browser: First name: Last name:

Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.

Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form> <p> <input type="radio" name="fan of" value="seminole" /> Seminoles Fan <br /> <input type="radio" name="fan of" value="gator" /> Gators Fan </p> </form>

How it looks in a browser: Seminoles Fan Gators Fan Note that only one option can be chosen.

Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
<form> <p> <input type="checkbox" name="transportationType" value="bike"/> I have a bike <br /> <input type="checkbox" name="transportationType" value="car"/> I have a car </p> </form>

How it looks in a browser: I have a bike I have a car

Examples:
<form> <p>You drive: <select name="cars"> <option value="volvo">Volvo </option> <option value="saab">Saab </option> <option value="chevy">chevy </option> <option value="ford">ford </option> </select> </p> </form>

You drive:

<form> <p> You drive: <select name="cars"> <option value="volvo">Volvo </option> <option value="saab">Saab </option> <option value="chevy" selected="selected"> chevy </option> <option value="ford">ford </option> </select> </p> </form>

You Drive:

Textarea
<form><p> <input type="hidden" name="recipient" value="searles@cs.fsu.edu.com" />

Email: <input name="email" type="text" /><br /> Name: <input name="name" type="text" /><br /> Subject: <input name="subject" type="text" /><br /> Message:<br /> <textarea name="message" rows="15" cols="40"> </textarea> <br /> <input type="submit" value="send mail"/> </p></form>

Email: Name: Subject: Message:

send mail

Button
<form> <input type="button" value="Click Me"> </form>

Fieldset around data


<fieldset> <legend>Health information:</legend>

<form> Height <input type="text" size="3" /> Weight <input type="text" size="3" /> </form> </fieldset> <p> If there is no border around the input form, your browser is too old. </p>

Health information: Height Weight

If there is no border around the input form, your browser is too old.

Option group
<select> <p> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup> </p> </select>

The Action Attribute and the Submit Button


When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

<form action="script.pl" method="get"> <p> Username:

<input type="text" name="user" /> <input type="submit" value="Submit" /> </p> </form>

How it looks in a browser: Username:


Submit

If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "script.pl". That page will show you the received input.

How Information Is Sent


The method attribute specifies how the information will be sent to wherever it's going. method="POST" or method="GET" Which you use depends on how the destination program or function wants to receive the information.

Sending With Method GET


method="GET" is used if you want to send information somewhere via a browser URL. Here is an example: http://domain.com/something.cgi?color=red&shape=round

In the above URL, the part after the question mark is information sent to something.cgi, which is often a script. Multiple information chunks are separated with an ampersand. The GET method can send only a limited amount of information.
o

The limitation depends on the server where the current web page is on and the server where the information is sent to. The limitation can be as little as 256 bytes but is often 1k or more. Another limitation of the GET method is that the information being sent is visible in the browser's address bar. In some cases this is of no consequence. In others, it is unacceptable.

o o

Some CGI programs are written to accept information via the GET or the POST method, some to accept only the GET method.

Sending With Method POST

method="POST" is the most common method used to send information from a form to an information processing program or function. it is used when sending form information to JavaScript functions. Most CGI programs are written to accept information with the POST method, some to accept only the POST method. The POST method can send much more information than the typical GET method.
o

Currently, most browsers and servers limit the amount of POST information to about 32k.

With POST, the information is not sent via the URL. The sending is invisible to the site visitor.

CGS 3066: XHTML Forms: Action Page As discussed in the Forms: Creating page page, the action attribute of the form tag specifies the page that will receive the form data submitted by the user. There are many different methods to handle the form data; some of these use of PHP, ASP, ColdFusion, or Perl. What is common to all is that they are server-side technologies (recall that HTML is client-side, where the client is typically the web browser). We will discuss how to use PHP to handle form data; this document is tailored explicitely to help you do just that. A (very) brief discussion of PHP:

It is a server-side scripting language A PHP-page must have a "php" file extension. I.e., actionPage.php PHP-code is processed by a web server; therefore, you must post, and view, PHP pages on a web server. If you view a PHP page locally (i.e., double-click on a PHP page that is saved on your local machine), it will not render the PHP portions of the page. PHP blocks are delineated within a file by <?php code here ?>. A PHP file may have many, one, or no PHP blocks. These PHP blocks are processed by the server and the blocks are not seen by the end user. PHP statements are terminated with a semi-colon; failure to include a semi-colon at the end of a PHP statement is a syntax error and will cause your page to behave erratically. A PHP file also may have HTML code (and usually does). See a PHP-based template document. Additional details are available and we will return to PHP later in the semester.

A minimal PHP block is below. Try creating a file with just the PHP block; then view the page in a browser. The code will output the word hello to the browser window. Notice that if you view the source code, in the browser, you do not see the PHP block but rather see the output of the PHP block (in this case, the word hello)

<?php echo "hello"; ?>

To create an PHP-based action page to handle form data


Start with a blank PHP document. Use the PHP-block below to output the value associated with a given form element. For submitted form information to be displayed by the action page, it is imperative that the action page reference whatever form element names are used within the form. For example, for an action page containing the PHP-block (below) to output something, a form would have to be submitted to it that contained a form element whose name was "formelementname".

<?php echo $_REQUEST['formelementname']; ?>

Put the PHP-block whereever you want its output to appear (ususally somewhere in the body section). See examples below.

Example 1
Suppose you have a simple form, such as the one below:
<form action="processform.php" method="get"> <p>Full name: <input type="text" name="fullname" /></p> <p><input type="submit" name="submit" value="submit me!!" /> </p> </form>

The form in a browser: Full name:


submit me!!

The action page could look something like this (the PHP blocks are in red):
<?php print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" /> <title>CGS3066: Internet Technology</title> </head> <body> <p>The information that you submitted:</p> <p>Full name: <?php echo $_REQUEST['fullname']; ?></p> </body> </html>

Notice the two PHP blocks. The first outputs the standard XML Prolog. The second outputs the contents of the variable named, "$_REQUEST['fullname']". Notice that the form contained a form element (in this case, the text box), whose name was "fullname". For submitted form information to be displayed by the action page, it is imperative that the action page reference whatever form element names are used within the form.

Example 2
Example 2 is similar, but adds a select menu, radio buttons, and use of the post method.

Select menu: notice that although "chocolate" is not the first item in the list, it is initially selected by virtue of the selected="selected" attribute within its option tag. Radio buttons: recall that radio buttons are usually included, in a form, to allow the user to pick one (and only one) item from a set. I.e., yes or no. To accomplish this, the value of the name attribute must be the same for all radio buttons in the set. In the example, the radio buttons use "student" as their name. Post method: notice that when you submit the form, the URL, of the action page, does not include the submitted from information. For our purposes, that is the major distinction between the post and the get method. The PHP code, however, is fundamentally the same.

<form action="processform2.php" method="post"> <table width="80%" border="0" cellspacing="0" cellpadding="3"> <tr> <td style="text-align: right">First name:</td> <td><input type="text" name="fname" /></td> </tr> <tr> <td style="text-align: right">Last

name:</td> /></td>

<td><input type="text" name="lname"

</tr> <tr> <td style="text-align: right">What is you favorite ice cream?</td> <td><input type="text" name="icecream" /> </td> </tr> <tr> <td style="text-align: right">Are you a FSU student?</td> <td><input type="radio" name="student" value="Yeah"/> Yes | <input type="radio" name="student" value="Nope"/> No </td> </tr> <tr> <td style="text-align: right"><select name="icecream"> <option value="vanilla">vanilla</option> <option value="chocolate" selected="selected">chocolate</option> <option value="walnut">walnut</option> <option value="mint">mint</option> <option value="rainbow sherbert">rainbow sherbert</option> </select></td> <td><input type="reset" name="reset" value="reset me!!" /></td> </tr> </table> </form>

The form in a browser: First name: Last name: Which is you favorite ice cream? Are you a FSU student?
submit me!!

Yes |
reset me!!

No

The action page could look something like the following.


Notice that there is a multi-line PHP block to output the first and last name. In particular, notice that each PHP statement ends with a semi-colon. Notice that the echo command is used to output a space (the space that appears between the outputted first and last names). Notice that the echo command also is used to output HTML; the HTML is then rendered, just as it normally is, in the browser.

<?php print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" /> <title>CGS3066: Internet Technology</title> </head> <body> <p>The information that you submitted:</p> <ul> <?php echo "<li>First and last name: "; echo $_REQUEST['fname']; echo " "; echo $_REQUEST['lname'] echo "</li>"; ?> <li>When asked if you were a FSU student, you said, "<?php echo $_REQUEST['student'] ?>"! </li> <li>Apparently, your favorite ice cream is <?php echo $_REQUEST['icecream']?></li> </ul> </body> </html>

Example 3
Illustrates retrieval of information passed via checkboxes

Checkboxes, recall, are different than the other form elements in that they can pass several values within one named variable. Also recall that, in order to accomplish this, all checkboxes in the set must use the same name (but should have different values).

In PHP, in order for the checkboxes to be collected under a single name (interests[] in this instance), the name must be structured as a PHP array. The brackets ( [ ] ) in PHP designate that the variable name is that of an array.

<form action="processform3.php" method="post"> <p>Which of the following interests you? (check all that apply):<br /> <input type="checkbox" name="interest[]" value="xhtml"/> XHTML&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="checkbox" name="interest[]" value="javascript"/> JavaScript &nbsp;&nbsp;&nbsp;&nbsp; <input type="checkbox" name="interest[]" value="php"/> PHP &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="checkbox" name="interest[]" value="Flash"/> Flash <br /> <br /> <input type="submit" name="submit" value="submit interests!!" /> <br /> </p> </form>

The form in a browser: Which of the following interests you? (check all that apply): XHTML
submit interests!!

JavaScript

PHP

Flash

The action page could look something like the following.

Notice the first echo statment is different. Because the checkboxes are captured as an array, the 'implode' function is used to extract the information out of the array. The implode function takes 2 parameters: the delimiter to be used to separate the outputted array values (in this case ', '), and the name of the array itself (in this case, $_REQUEST['interest']). Notice that the second PHP-block contains some new code as well. It uses a if-then construct to output the values of the array - if there are any - and prints an error message otherwise.

The if (condition) { statementsA; } else { statementsB;} evaluates the condition. If it is true, then it executes statementsA; otherwise, it executes statementsB. The function isset(var) returns true if var has a value and false otherwise. Note that isset(var) is appropriate for radio buttons and checkboxes. For other form elements, the empty string "" is passed as its value (even though the empty string is nothing, the computer sees it as a value). For other form elements, use ( $_REQUEST['var'] != "" ) as the conditional expression. This returns true if the variable contains a string other than the empty string (i.e., any letter, word, or number).

<?php print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" /> <title>CGS3066: Internet Technology</title> </head> <body> <p>The information that you submitted:</p> <ul> <li>Your interests: <?php echo implode(', ', $_REQUEST['interest']); ?> </li> <li>Your interests : <?php if (isset($_REQUEST['interest'])) { echo implode(', ', $_REQUEST['interest']); } else { echo "No interests selected! Don't you like Internet technologies??????"; } ?> <ul> <li>Here a PHP if-then statement is being used; if the user submitted something, then dispaly it; otherwise, display an appropriate message. To see this, resubmit the form but do not check any of the boxes. </li> </ul> </li> </ul>

</body> </html>

CGS 3066: XHTML Image Maps


Image maps allow many links to be created inside of a single image The clickable (linked) areas in an image map are referred to as hotspots Image maps are very effective for menu navigation on a website Sample XHTML image map

Source Code for the above Image Map <map id="pic"> <area href="../../../" shape="rect" coords="1,1,255,64" alt="CGS 3066 Homepage" /> <area href="http://www.fsu.edu" shape="circle" coords="128,128,32" alt="FSU" /> <area href="../" shape="rect" coords="1,196,100,255" alt="Lectures" /> <area href="../assignments" shape="rect" coords="128,196,255,255" alt="Assignments" /> </map> <img src="map6.png" width="256" height="256" alt="Image Map Example" usemap="#pic" />

In order to use an image map, first declare map using the <map> tag The <map> tag requires an id attribute:
o o

The id parameter is a unique identifier for the image map itself In the example above, we use "pic" as the id

Inside the <map> tag, the hotspots are defined Hotspots are defined using <area> tags:

The <area /> tag itself is an empty tag, so a backslash, before the end of the tag, is added to close it The <area /> tag uses several parameters href paremeter: href parameter works the same as the href parameter in an anchor; it is used to specify the URL of the link shape parameter

o o

The shape parameter can have the following values: "rect" | "circle" | "poly" The shape affects the way in which we must specify the coordinates of the hotspot

coord parameter: it specifies the coordinates of the hotspot

Image coordinates are specified starting from the top-left corner of the image The X-coordinates increase as you go from left to right The Y-coordinates increase as you go from top to bottom The values for the coord parameter are different depending on the shape If shape="rect" then the coordinates are specified as top-left corner X,Y, followed by bottom-right corner X,Y In the above example, we see that for the course homepage link the coords="1,1,255,64" so this means that the hotspot starts at the top-left of the image, and extends 64 pixels down and all the way across the image If shape="circle" then the coordinates are specified as the circle center X,Y, followed by the radius in pixels If shape="poly" then the coordinates are specified as a list of X,Y coordinates of the points of a polygon (very similar looking to the rectangle, but you need at least 3 points to make it work properly)

alt parameter: it provides alternative text for the hotspot; works similarly as it did within an <img /> tag

In order to make use of an image map, add an additional parameter called usemap within the <img /> tag
o o

The value for the parameter should be the id from the <map> tag The example image map uses usemap="#pic"

XHTML 1.1 does not permit use of a # sign within the usemap value. However, most browsers require the # symbol in order for the browser to use the image map. Therefore, do not use the XHTML 1.1. DTD with pages containing image maps. Instead, use the XHTML 1.0 Transitional DTD.

CGS 3066: meta Tags


The <meta /> element provides meta-information about your page, such as descriptions and keywords for search engines and refresh rates. The tag can only be placed between the <head> </head>

Examples
Define keywords for search engines: <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" /> Define content-type of your page: <meta http-equiv="Content-Type" content="text/html" /> Define a description of your web page: <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" /> Define the last revision of your page: <meta name="revised" content="Kyle Griffen, 6/10/03" /> Refresh page every 5 seconds: <meta http-equiv="refresh" content="5; url=http://www.cs.fsu.edu" />

Required Attributes
Attribute content Value Description some_text Defines meta information to be associated with http-equiv or name

Optional Attributes
Attribute Value Description http-equiv content-type Connects the content attribute to an HTTP header expires refresh Page-Enter set-cookie name author description keywords generator revised others some_text Connects the content attribute to a name

scheme

Defines a format to be used to interpret the value of the content attribute

Examples of page transitions


Fade in: <meta http-equiv="Page-Enter" content="blendtrans(duration=2.0)"> Square in: <meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=0)"> Square out: <meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=1)"> Circle in: <meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=2)"> Circle out: <meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=3)"> To get more transition effects, just change the value number of transition up to 23.

CGS 3066: Frames


Frames are a method of separating the various parts of a page Each individual frame is usually a separate webpage The layout for the frame page is also a separate webpage Here is a sample page that makes use of nested frames: Frames Page

XHTML Source code for the Framed Page <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!-- CGS 3066 Website --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Sample Frames Page</title> </head> <!-- Notice the use of frameset instead of body The cols="100,*" means a 100 pixel left column, and everything else for the right column. We can also use % --> <frameset cols="100,*"> <!-- Declare the left frame -->

XHTML Source code for the Framed Page <frame name="leftframe" src="frameleft6.html" /> <!-- Nested frameset with 200 pixel top frame --> <frameset rows="200,*"> <frame name="righttopframe" src="framerighttop6.html" /> <frame name="rightbotframe" src="framerightbot6.html" /> </frameset> <!-- Displayed if browser can't display frames , it must be enclosed within <frameset> tags. To add anything, you must declare <body> tag --> <noframes> <body>This page uses frames, but your browser does not support them.</body> </noframes> </frameset> </html> Note that we must use a different DTD for specifying the actual frames. This is visible in the second line of the code

Frames are similar to tables in that they are based on rows and columns. However frames only use one at a time. You can still use both if you nest them. It is important to notice that the <body> tag has a different role within a frameset. It is used, exclusively, within the <noframes> tag. The Frameset DTD uses a <frameset> tag to provide the structure of the frameset i.e., how many rows and columns are in the frameset.
o o

The <frameset> tag requires either a cols or rows parameter The cols or rows parameter takes a list of values specifying the width (in pixels or %) of that particular frame It is possible to specify to the browser to use the remaining space for the frame by using the value * (star) in the list In the above example, we create a 100 pixel left column, and use the remaining space for the right column Further in the example, the nested <frameset> creates a 200 pixel top frame and uses the remaining space for the bottom frame

Inside of a <frameset> block, we need to specify the actual information for a given <frame>
o

The <frame> tag requires a name parameter so that the frame can later be referenced by links The <frame> tag also uses a src parameter to specify the content of the frame (usually as an html file) Framed pages should use the Transitional DTD as can be seen on the sample pages In the above example, we use the line <frame name="leftframe" src="frameleft6.html" /> to specify the left frame of the page as the contents of frameleft6.html It is important to notice the <noframes> tag, which is required to let browsers that don't support frames know that the page uses frames Usually websites will have frames and noframes versions of their site, and so the <noframes> tag will enclose a link to the simpler page In order to make navigation within frames easier, we can now specify to a link whether or not to change just a single frame, or the entire page In order to adjust hyperlinks for frames, we need to learn about the target parameter

The target parameter can be passed either the name of a frame or one of the following special names: "_self" | "_top" | "_blank" | "_parent" If the value "_self" is passed, then the link will replace the current frame in focus If the value "_top" is passed, then the link will replace the entire page, getting rid of all the other frames If the value "_blank" is passed, then the link will open a new browser window with the chosen page To see examples of these types of linking, take a look at the sample frames page as well as the pages it is made up of: frameleft6.htm | framerighttop6.htm | framerightbot6.htm Finally, "_parent" is used in the situation where a frameset file is nested inside another frameset file. A link in one of the inner frameset documents which uses "_parent" will load the new document where the inner frameset file had been. Example of _parent

<frameset> attributes. Note that their are many optional attributes; those in green are more often used.
o

border (optional)

This attribute has been deprecated in favor of style sheets. Sets the width of the border, in pixels. The default width is 1 pixel. It sets the border around the frame with borders turned on. This attribute is not part of the XHTML specification, and you should use style sheets instead. <frameset border="2">

bordercolor (optional)

Sets the color of the border using hexadecimal codes or named colors. This attribute is not part of the XHTML specification, and you should use style sheets instead. <frameset bordercolor="#000CCC">

class (optional)

(CSS enabled) Format the contents of the element according to the style class. <frameset class="brightFrame"> where brightFrame is a defined class

cols

Determines the number and size of the columns in the frameset. Define the size in percentages, pixels, or use an asterix (*) to use the current available space. <frameset cols="30%,*,30"> frameset with 3 columns; column 1 is 30% of frameset width, column 2 is total width - col1 - col3, and column 3 is 30 pixels

frameborder (optional)

Defines whether there should be a visual separator between the frames. 1 yes, there is (the default). 0 - no there is not. Netscape 4 and below uses words "yes" and "no" rather than numbers.

framespacing (optional)

(Internet Explorer) Adds additional space, in pixels, between all the frames. This attribute is not part of the XHTML specification, and you should use style sheets instead. <frameset framespacing="10">

id (optional)

(CSS enabled) Format the contents of the tag according to the style id. Note: IDs must be unique within a document.

onload (optional)

(JavaScript enabled) The onload event occurs when the user agent finishes loading a window or all frames within a FRAMESET.

onunload (optional)

(JavaScript enabled) The onload event occurs when the user agent removes a document from a window or frame.

rows

Determines the number and size of the rows in the frameset. define the size in percentages, pixels, or use an asterisk (*) to use the current available space. <frameset rows="30%,*,30"> frameset with 3 rows; row 1 is 30% of frameset height, row 2 is total height - row1 - row3, and row 3 is 30 pixels

scrolling (optional)

Defines the state of the scrollbar on the frame. There are three options: on - scrollbars appear, off - scrollbars never appear, and auto (the default) scrollbars appear as they are needed. <frameset scrolling="off">

style (optional)

(CSS enabled) Formats the contents of the element according to the listed style. <frameset style="list style attributes here"> <frameset style="background-color: #CCC000; border-width: 1; borderstyle: solid; border-color: #000000">

title (optional)

Specifies a title about the element. The value can be any string, enclosed in quotation marks. Some browsers will display this information when the mouse pointer hovers over the element, others display the information in the right-click menu.

Das könnte Ihnen auch gefallen