2.2 xhtml (cont.). motto yea, from the table of my memory i’ll wipe away all trivial fond records....

2.2 XHTML (cont.)

Motto

Yea, from the table of my memoryI’ll wipe away all trivial fond records.

—William Shakespeare

Internal Links

• To link within the same document – supply the target element with an id attribute

• e.g. <p id="part2">…</p>

– make a link using an <a> element whose href attribute's value is the target id

– use the syntax: #id• e.g. <a href="#part2">See Part 2</a>

– works also with target in another page• e.g. <a href="http://www.x.org/Intro.htm#part3">See Part 3 of Introduction</a>

Special Characters

• Entity references for special characters or characters that cannot be rendered otherwise– form: &code;– used within regular text

• The code can be:– Word abbreviations (starts with &)– Numbers

• Decimal (starts with &#)• Hexadecimal (starts with &#x)

• Example: & character represented by:– ö (word: o-umlaut = ö)– 0 (decimal)– / (hexadecimal)

Useful Entities

• < less than: <• needed because < starts a tag

• & ampersand: &• needed because & starts an entity

• > greater than: >• nonbreaking space• © copyright: ©

Entities: Example

• <html …><head> <title>Entities</title></head><body> <h1>Entities</h1> <p>less than: <</p> <p>ampersand: &</p> <p>greater than: ></p> <p>copyright: ©</p> <p>nonbreaking space: </p></body></html>

Line Break

• <br /> element (and tag) – continues text on next line– no vertical space in between lines

• unlike <p />

Horizontal Rule

• <hr /> element (and tag) – is endered as a horizontal line– inserts a line break above and below the line– used to separate sections of contents

Sub- and Superscript

• <sub> element– text inside appears as subscript– used for indices, etc.

• <sup> element– text inside appears as superscript– used for exponents, etc.

Miscellaneous Tags: Example• <html …><head>

<title>Tags</title></head><body>

<h1>Tags</h1>

<p>one line<br /> another one<br /> and a third one</p> <hr /> <p>a<sub>index</sub></p> <p>x<sup>exp</sup></p></body></html>

Lists

• List elements: <ul> and <ol>– create a list where each item is rendered on

separate line (single spaced)– a bullet preceeds items of unordered list <ul>– items of ordered list <ol> are numbered

• List item element <li> – surrounds contents of a list item

• Lists can be nested

Lists: Example• <html …><head>

<title>Web</title></head><body> <h1>Web To Da Max</h1> <ul> <li>Applications <ol> <li>Mail</li> <li>Search engines</li> <li>Tools</li></ol></li> <li>Shopping</li> <li>Learning <ul> <li>ICS 415 </li> <ol> <li>XHTML</li> <li>JavaScript</li> <li>Ajax</li></ol> <li>Wiki</li></ul></li> <li>Entertainment</li> </ul></body></html>

Tables

• <table> element – defines a table with rows– used often for layout purposes– attributes

• width• border: thickness in pixels, 0 means no border

• cellpadding: empty space inside cells

• cellspacing: area inside border

• summary: summarizes the table’s contents – used by text-to-speech to make the table accessible

– element <caption> describes the table’s content• text inside is rendered above the table

Table: Parts

• A table can have three distinct sections 1. Head: <thead> element

• table titles• Column headers

– (one) <tr> (table row) element with <th> elements for each column

2. Body: <tbody> element• regular table rows

1. <tr> (table row) element with <td> elements for each cell

– Foot: <tfoot> element• footnotes• above <tbody> section in the code, but displays at the

bottom of the table

Table: Example• <html …><head>

<title>Web</title></head><body> <h1>Table</h1> <table border = "1" width = "200" cellpadding = "4" cellspacing = "0" summary = "A table with resources' prices"> <caption><strong>Price of Knowledge</strong> </caption> <thead> <tr> <th>Item</th> <th>Price</th></tr></thead> <tfoot> <tr> <th>Total</th> <th>$498</th></tr></tfoot> <tbody> <tr> <td>Laptop</td> <td>$299</td></tr> <tr> <td>Textbook</td> <td>$199</td></tr></tbody> </table></body></html>

Merging Table Cells

• A data cell can span several rows or columns– attribute rowspan

– number of rows the cell occupies

– attribute colspan • number of columns the cell occupies

• Any <th> or <td> data cell can have these attributes

Forms

• Used to collect information from users• Contain visible interactive components

– buttons, text fields, pull-down menus, etc.– not a very rich collection– inconsistent and akward elements

• May also contain nonvisual components– "hidden inputs"– used for data to be sent to the server, but is of

no concern to the user

Forms: Syntax

• <form> element – attribute method

• specifies how the form’s data is sent to the server

– attribute action: • URL of the script where the form data will be sent

– <label> element • labels an element nested inside it• form of the label: the text• terse, but descriptive info about its purpose

Forms: <input> Elements• <input> element

– name attribute: identifies component for the server– it's type attribute determines which interactive component it is– type="text": a text field

• size attribute: width of the field (the number of visible characters)• maxlength attribute (optional): maximum number of characters user can type in

– type="password": a text field that shows only bullets when user types– type="checkbox": a check box– type="radio": a radio button

• watch out: all radio buttons in the same group must have the same name attribute!

– value attribute:• for checkbox and radio: value to send to the server if selected

– type="submit": a button labeled "Submit"• sends the data entered in the form to the web server

– type="reset": a button labeled "Clear"• erases all the information the user entered• never use this!

Forms: Other Elements

• <textarea> element• text area with scrollbar

• attributes rows and cols determine the size

• cols is in number of characters

• <select> element • drop-down list of <option> element choices

• one of the <option> choices can be selected– it has selected="selected" attribute

Forms: Example<html …><head>

<title>Rating</title>

</head><body>

<h2>Rate Us!</h2>

<form method="post" action="">

<p><label>Name

<input type="text" name="name" /></label></p>

<p><label>Password

<input type="password" name="password" /></label></p>

<p><strong>Things you liked:</strong><br />

<input type="checkbox" name value="design">Design

<input type="checkbox" name value="usability">Ease of Use</p>

<p><strong>How did you find us?</strong><br />

<input type="radio" name value="foundus">On the Web

<input type="radio" name value="foundus">Another way</p>

<p>Rate us:

<select name="rating">

<option>Great!</option>

<option selected="selected">Repeat 415!</option></select></p>

<p><label>Comments:<br />

<textarea name = "comments"

rows = "3" cols = "25">Type here.</textarea></label></p>

</form>

</body></html>

2.2 xhtml (cont.). motto yea, from the table of my memory i’ll wipe away all trivial fond records....

Documents