2.2 xhtml (cont.). motto yea, from the table of my memory i’ll wipe away all trivial fond records....
Post on 02-Jan-2016
216 Views
Preview:
TRANSCRIPT
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>
<meta> 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
<meta> Elements: Syntax
• Must occur within <head> element• Attribute name: the type of <meta> 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. <meta name="keywords" content="ics,uh,web">
– 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. <meta name="description" content="Learn web design in 60 seconds!">
top related