Extensible Hyper Text Markup Language XHTML Part 2

Extensible Hyper. Text Markup Language (XHTML) Part 2 Xingquan (Hill) Zhu xqzhu@cse. fau. edu XHTML 1

XHTML q What is a Markup Language? q Why Extensible HTML? v XHTML vs HTML q XHTML Rules q Basic XHTML Components v Headers v Links v Special Characters & Line Break v Images v Lists v Tables v Forms v Framesets XHTML 2

Tables q <Table border=“xx” align=“xx”> v <Caption> Caption v <tr> Table row • Align: left, right, center v <th> Table head • Align, valign: top, bottom v <td> Table data • Align, valign: top, bottom q The number of data items in each row should be the same: Table Example <th></th> or <td></td> empty item v Unless…. v XHTML 3

Rowspan & colspan q Span multiple rows or multiple columns v <tr> Span 3 columns <th colspan=“ 3”> This crosses three cols. </th> </tr> v <tr> span 2 rows <th rowspan=“ 2> This crosses two rows </th> </tr> Span Examples XHTML 4

Cellpadding & Cellspacing q Cellpadding v Spacing between the content of the table cell and the cell’s edge q Cellspacing v Spacing between adjacent cells Example XHTML 5

Form q Fill in and submit v Submitted form processed by the third party (e. g. server) v Requires “server-side” application program (later in course) v Specify display items and fields by name q A form can contain v Text area v Checkbox v Reset button v Hidden fields v … q Required attribute: action Form Example Simple Complex XHTML 6

Form: Action & Method q The action should be taken right after the user click the “submit” button v Action=“” Empty v Action=“/cgi-bin/formmail” Server side program v Action=“mailto: xxx@cse. fau. edu” v Action=“thankyou. html” q Method=“get” v Method=“post” v XHTML 7

Form: <Input> q Input attributes v Name, type, value q <label> The caption of your input </label> q Specify data types in the form v <input type=“hidden”> v <input type=“text”> v <input type=“password”> v <input type=“checkbox”> <input name=“prefer” type=“checkbox” value=“Coffee” /> <input name=“prefer” type=“checkbox” value=“Fry” /> <input name=“prefer” type=“checkbox” value=“Ice cream” /> XHTML 8

Form: <input> cont. q <input type=“radio”> <input name=“Contact” type=“radio” value=“Home” checked=“checked” /> <input name=“Contact” type=“radio” value=“Office” /> <input name=“Contact” type=“radio” value=“Others” /> q <input type=“button” value=“Click Me” Onclick=“Event” /> q <input type=“submit” value=“Submit your results” /> q <input type=“reset” value=“Clear your results” /> XHTML 9

Form: <Textarea> & <Select> q <textarea name=“comments” row=“ 4” cols=“ 30”></textarea> q <select name=“rating”> <option selected=“selected”> No. 1 </option> <option> No. 2 </option> <option> No. 3 </option> </select> XHTML 10

XHTML q What is a Markup Language? q Why Extensible HTML? v XHTML vs HTML q XHTML Rules q Basic XHTML Components v Headers v Links v Special Characters & Line Break v Images v Lists v Tables v Forms v Framesets XHTML 11

Frameset q Frames allow multiple XHTML documents to be displayed simultaneously q <frameset> inform the browser that the page contain frames Cols=“ 110, *” or cols=“ 20%, *”, so does rows v <frameset cols=“ 100, *”> <frame name=“leftframe” src=“nav. html”/> <frame name=“righframe” src=“content. html”/> </frameset> v q <noframes> <body> <p> this page contain frame </p> </body> </noframes> XHTML 12

Frameset Examples q Example 1 q Nested Frame <frameset cols=“ 110, *”> <frame name=“left” src=“nav. html” /> <frameset row=“ 200, *”> <frame name=“righttop” src=“ 1. html” /> <frame name=“rightbt” src=“ 2. html” /> </frameset> Example 2 target=“xx”, “_blank”, “_top”, “_self” XHTML 13

XHTML q What is a Markup Language? q Why Extensible HTML? v XHTML vs HTML q XHTML Rules q Basic XHTML Components v Headers v Links v Special Characters & Line Break v Images v Lists v Tables v Forms v Framesets XHTML 14

XHTML Rules q Required elements in an XHTML file? v doctype, html, head, title, and body q Major differences with HTML v Tag names must be in lowercase • XHTML is an application of XML, which is case sensitive v All XHTML elements must be closed v XHTML elements must be properly nested v XHTML documents must be well-formed • Elements in pairs • Self-contained elements • A nested element’s end tag must appear before the enclosing element’s end tag. • Nested in <html> • Elements in pairs & properly nested XHTML 15

An XHTML example file Xml declaration element q <? xml version = "1. 0" encoding = "utf-8"? > q <!-- greet. html A trivial document --> q <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 1//EN" q "http: //www. w 3. org/TR/xhtml 11/DTD/xhtml 11. dtd"> q <html xmlns = "http: //www. w 3. org/1999/xhtml"> q q q q <head> <title> Our first XHTML document </title> </head> <body> Root <p> Greetings from your Webmaster! </p> </body> </html> SGML DOCTYPE command element XHTML 16