XHTML ReviewPart 2

Instructor: Nancy Lee

Course Objectives

To be able to create tables with rows and columns of data.

To be able to control table formatting

To be able to create and use forms

To be able to create and use image maps to aid in Web-page navigation

To be able to make Web pages accessible to search engines using <meta> tags

To be able to use the frameset element to display multiple Web pages in a single browser window.

Introduction

Using tables to present information on web page

Forms to gather data

Basic XHTML Tables

Used to organize data into rows and columns table1.html element <table> </table>

defines a table attributes

border• no border= “0”

width summary

• used by speech synthesizers

Basic XHTML Tables

element <caption> </caption> accessibility element in XHTML describes table contents

Basic XHTML Tables

Table has three parts Head

Body

foot

Basic XHTML Tables

Table has three parts head

column names <thead> </thead> element <tr></tr> element

• Defines rows <th></th>

• Defines header column

Basic XHTML Tables

Table has three parts head body

<tbody> </tbody> element <tr></tr>

• Rows <td> </td>

• columns

Basic XHTML Tables

Table has three parts head body foot

Contains totals and footnotes <tfoot></tfoot>

• Defines foot of table <tr></tr> <th></th> element

Intermediate XHTML Tables and Formatting

Elements required to build more complex tables table2.html <colgroup> </colgroup> element

Groups and formats columns <col> </col> element

Attributes• Align• Span

Value how many columns the <col> formats• colspan• rowspan• valign

“top” “middle” “bottom”

Basic XHTML Forms

Used to collect data from user.

Used to collect data from user.

XHTML uses HTTP (Hypertext Transfer Protocol).

Basic XHTML Forms

Used to collect data from user XHTML uses HTTP (Hypertext Transfer Protocol) Example program sends the form data to the Web

Server which passes the form to a CGI (Common Gateway Interface) Written in Perl, C or some other language Submit will cause error as server is not

configuredWe will do that later in ASP.NET

Basic XHTML Forms

Used to collect data from user XHTML uses HTTP (Hypertext Transfer Protocol) Example program sends the form data to the Web

Server which passes the form to a CGI (Common Gateway Interface) Written in Perl, C or some other language Submit will cause error as server is not configured

We will do that later in ASP.NET Forms can contain visual and non visual components

Hidden inputs Store data in documents specified

Basic XHTML Forms

<form> </form> element Attributes

method• Specifies how form’s data is sent to the Web server• Value “post” appends form data to the browser request

Contains the protocol Requested sources URL Scripts in the web server will process the data

• Value “get” appends for data directly to the end of the URL• We will discuss these in detail later

action • specifies the URL of a script on the Web server• Most ISPs have a formmail script

Basic XHTML Forms

<input /> element Attributes

type • value

“hidden” used by web server script “text” “submit” button sends form to server “reset” resets all the components in form

name • identifies element to script• value is used by server to process input

size • sets the length of the component

maxlength• sets the maximum number of characters

Basic XHTML Forms

<label></label> element is used to label the form components.

More Complex XHTML Forms

Add some components to the basic form to enhance it. form2.html adds some new components

<textarea> </textarea> Attributes

• rows• cols

More Complex XHTML Forms

<input /> type

• “password” fills text box with “*”, sends info to server• “checkbox”

Assigned individually Groups with same name Must have different value so server can identify

them.

More Complex XHTML Forms

<input /> Form3.html

“radio” radio button Only one in a group can be selected at a given time Attribute checked=”checked” sets default selection Name must be the same for all radio buttons in a

group

More Complex XHTML Forms

<select> </select> element• Dropdown list from which to select item• Attributes

name <option></option>

• Attributes selected = “selected” sets the default option

Internal Linking

Enables user to jump between locations in the same document.

Useful for long documents Eliminates scrolling links.html use id = “name” in a text element to create hyperlink

destination Use <a href =”#linkname”>directions </a> href = “filename.html#id”

links to an anchor on another page

Creating and Using Image Maps

Image maps create hyperlink spots on an image called “hotspots.”

picture.html

current browsers do not support XHTML 1.1, so use XHTML 1.0 Transitional note <!DOCTYPE…

Creating and Using Image Maps

picture.html

<map> </map> element image map definition Attribute

• id = “mapname”

Creating and Using Image Maps

picture.html

<area /> element defines the hotspot Attributes

• href specifies hyperlink• shape specifies the shape

rect rectangular shape poly polygon shape circle circle shape

• alt text to be displayed on mouseover• coords the coordinates in pixels

Creating and Using Image Maps

picture.html

<img /> element add attribute usemap = “mapname”