xhtml part2
Post on 17-May-2015
663 Views
Preview:
TRANSCRIPT
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”
top related