2.2 XHTML (cont.)

Motto Yea, from the table of my memory I’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. … –make a link using an element whose href attribute's value is the target id –use the syntax: #id e.g. See Part 2 –works also with target in another page e.g. See Part 3 of Introduction

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 Entities Entities less than: < ampersand: & greater than: > copyright: © nonbreaking space:

Line Break element (and tag) –continues text on next line –no vertical space in between lines unlike

Horizontal Rule 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 element –text inside appears as subscript –used for indices, etc. element –text inside appears as superscript –used for exponents, etc.

Miscellaneous Tags: Example Tags one line another one and a third one a index x exp

Lists List elements: and –create a list where each item is rendered on separate line (single spaced) –a bullet preceeds items of unordered list –items of ordered list are numbered List item element –surrounds contents of a list item Lists can be nested

Lists: Example Web Web To Da Max Applications Mail Search engines Tools Shopping Learning ICS 415 XHTML JavaScript Ajax Wiki Entertainment

Tables 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 describes the table’s content text inside is rendered above the table

Table: Parts A table can have three distinct sections 1.Head: element table titles Column headers –(one) (table row) element with elements for each column 2.Body: element regular table rows – (table row) element with elements for each cell 3.Foot: element footnotes above section in the code, but displays at the bottom of the table

Table: Example Web Table Price of Knowledge Item Price Total $498 Laptop $299 Textbook $199

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 or 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 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 – element labels an element nested inside it form of the label: the text terse, but descriptive info about its purpose

Forms: Elements 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 element text area with scrollbar attributes rows and cols determine the size cols is in number of characters element drop-down list of element choices one of the choices can be selected –it has selected="selected" attribute

Forms: Example Rating Rate Us! Name Password Things you liked: Design Ease of Use How did you find us? On the Web Another way Rate us: Great! Repeat 415! Comments: <textarea name = "comments" rows = "3" cols = "25">Type here.

Elements Supply information about the page –invisible to the user –search engines use it you want your pages listed first, right? –used for semantic web

Elements: Syntax Must occur within element Attribute name : the type of element – name="keywords" attribute content is a list of keywords that describe the page (categories or content) search engines match this with search terms e.g. – name="description" attribute content is a (typically three- to four-line) description of the page in sentence form, used by search engines to catalog your site. They may display this text as part of the search result e.g.