xhtml1-1 extensible hypertext markup language (xhtml) part 2 xingquan (hill) zhu [email protected]
TRANSCRIPT
XHTML 1-2
XHTML What is a Markup Language? Why Extensible HTML?
XHTML vs HTML XHTML Rules Basic XHTML Components
Headers Links Special Characters & Line Break Images Lists Tables Forms Framesets
XHTML 1-3
Tables
<Table border=“xx” align=“xx”> <Caption> Caption <tr> Table row
• Align: left, right, center <th> Table head
• Align, valign: top, bottom <td> Table data
• Align, valign: top, bottom
The number of data items in each row should be the same: Table Example <th></th> or <td></td> empty item Unless….
XHTML 1-4
Rowspan & colspan
Span multiple rows or multiple columns <tr> Span 3 columns <th colspan=“3”> This crosses three cols.
</th> </tr> <tr> span 2 rows <th rowspan=“2> This crosses two rows
</th> </tr>
Span Examples
XHTML 1-5
Cellpadding & Cellspacing
Cellpadding Spacing between the content of the table
cell and the cell’s edge Cellspacing
Spacing between adjacent cells
Example
XHTML 1-6
Form Fill in and submit
Submitted form processed by the third party (e.g. server) Requires “server-side” application program (later in course) Specify display items and fields by name
A form can contain Text area Checkbox Reset button Hidden fields …
Required attribute: action
Form Example Simple Complex
XHTML 1-7
Form: Action & Method
The action should be taken right after the user click the “submit” buttonAction=“” EmptyAction=“/cgi-bin/formmail” Server
side programAction=“mailto:[email protected]”Action=“thankyou.html”
Method Method=“get” Method=“post”
XHTML 1-8
Form: <Input> Input attributes
Name, type, value <label> The caption of your input </label> Specify data types in the form
<input type=“hidden”><input type=“text”><input type=“password”><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 1-9
Form: <input> cont.
<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” />
<input type=“button” value=“Click Me” Onclick=“Event” />
<input type=“submit” value=“Submit your results” />
<input type=“reset” value=“Clear your results” />
XHTML 1-10
Form: <Textarea> & <Select>
<textarea name=“comments” row=“4” cols=“30”></textarea>
<select name=“rating”> <option selected=“selected”> No.1
</option> <option> No.2 </option> <option> No.3 </option> </select>
XHTML 1-11
XHTML What is a Markup Language? Why Extensible HTML?
XHTML vs HTML XHTML Rules Basic XHTML Components
Headers Links Special Characters & Line Break Images Lists Tables Forms Framesets
XHTML 1-12
Frameset
Frames allow multiple XHTML documents to be displayed simultaneously
<frameset> inform the browser that the page contain frames Cols=“110, *” or cols=“20%, *”, so does rows <frameset cols=“ 100, *”>
<frame name=“leftframe” src=“nav.html”/>
<frame name=“righframe” src=“content.html”/>
</frameset>
<noframes> <body> <p> this page contain frame </p>
</body> </noframes>
XHTML 1-13
Frameset ExamplesExample 1 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> </frameset>Example 2 target=“xx”, “_blank”, “_top”,
“_self”
XHTML 1-14
XHTML What is a Markup Language? Why Extensible HTML?
XHTML vs HTML XHTML Rules Basic XHTML Components
Headers Links Special Characters & Line Break Images Lists Tables Forms Framesets
XHTML 1-15
XHTML Rules
Required elements in an XHTML file? doctype, html, head, title, and body
Major differences with HTML Tag names must be in lowercase
• XHTML is an application of XML, which is case sensitive All XHTML elements must be closed
• Elements in pairs• Self-contained elements
XHTML elements must be properly nested • A nested element’s end tag must appear before the
enclosing element’s end tag. XHTML documents must be well-formed
• Nested in <html>• Elements in pairs & properly nested
XHTML 1-16
An XHTML example file <?xml version = "1.0" encoding = "utf-8"?> <!-- greet.html A trivial document --> <!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> <title> Our first XHTML document </title> </head> <body> <p> Greetings from your Webmaster! </p> </body> </html>
Xml declaration element
SGML DOCTYPE command
Root element