Download presentation
Presentation is loading. Please wait.
1
Server-Side Application and Data Management IT IS 3105 (Spring 2010)
Lecture 5 HTML Review
2
HTML and XHTML A quick review
3
HTML or XHTML For this course XHTML Overall major differences:
Concentrate on HTML XHTML Use XML rules DTD defines the HTML rules Overall major differences: All XHTML elements must have end elements All elements are lower case All attributes must be quoted
4
Overall structure
5
Typical HTML Source Document
<head> <title> N005 - Page Title </title> … </head> <body> </body> </html> Page direction goes here Page content goes here
6
<head> “Required” Contains optional information for the page
Typical tags in head: <title> Definitely use!!!! Give each page a unique identifier <script> Mainly JavaScript <style> Can be used to create powerful formatting <base> <link> <meta>
7
<body> Contains: Content Formatting Text Images etc… Paragraphs
Tables Headings
8
Common Head Elements
9
<title> Optional Give each page a unique title
Regardless – use it!!! Give each page a unique title Use as a development aid Refer to in the documentation Use as a debug aid Know exactly which page is malfunctioning Use as a maintenance aid Users can tell you exactly on which page they are having a problem Ex: <title> N005 - Page Title </title> N005 Unique identifier for the page Not too complex, make it easy to reference Question: should the identifier be the same as the file name? Why or why not? Page Title Human friendly description of the page function Need not be unique
10
Common Body Elements
11
html tags From w3schools:
<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <head> <h1> - <h6> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var
12
w3c World Wide Web Consortium (W3C) HTML 4.01 specification
HTML 4.01 specification Elements documentation
13
events Event Description onclick Script to be run on a mouse click
ondblclick Script to be run on a mouse double-click onload Script to be run when a document load onmousedown Script to be run when mouse button is pressed onmousemove Script to be run when mouse pointer moves onmouseout Script to be run when mouse pointer moves out of an element onmouseover Script to be run when mouse pointer moves over an element onmouseup Script to be run when mouse button is released onkeydown Script to be run when a key is pressed onkeypress Script to be run when a key is pressed and released onkeyup Script to be run when a key is released onunload Script to be run when a document unload
14
more events Attribute Description onblur
Script to be run when an element loses focus onchange Script to be run when an element change onfocus Script to be run when an element gets focus onreset Script to be run when a form is reset onselect Script to be run when an element is selected onsubmit Script to be run when a form is submitted
15
most useful tags Arbitrary List:
<!--> <a> <applet> <b> <big> <body> <br> <button> <center> <col> <colgroup> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <head> <h1> - <h6> <hr> <html> <i> <img> <input> <li> <link> <map> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <script> <select> <small> <span> <strong> <style> <table> <td> <textarea> <th> <title> <tr> <ul>
16
Forms
17
Forms Gather data Guidelines: Passes to another program
Use only 1 or 2 forms per web page Group common data in one form
18
<input> types Data gatherers button checkbox file hidden image
password radio reset submit text
19
Input types Text boxes: Radio buttons:
<input type=“text” name=“aname”> Data in box is always text Numbers are read as the character equivalents Radio buttons: <input type="radio" name="sex" value="Male"> Male<br> <input type="radio" name="sex" value="Female"> Female<br> All buttons in a group have the same name Only one may be selected at a time May pre-select
20
Input types Checkbox: <input type=“checkbox" name=“box1”> Box1<br> <input type=“checkbox" name=“box2”> Box2<br> <input type=“checkbox" name=“box3” checked> Box3<br> Can be multiply checked Each box has a unique name Can be pre-checked
21
Pop-ups Select Options to: Preselect item(s) Control dropdown
<select name="sodaMenu"> <option value="Coke is #1"> Coke</option> <option value="Pepsi rocks"> Pepsi</option> <option value="Sprite's clear" selected="selected"> Sprite </option> <option value="Beer is best"> Beer</option> </select> Options to: Preselect item(s) Can enforce single selection or allow multiple selections Control dropdown Single element showing Multiple elements showing
22
hidden Data is retained on the Web page
Data does not show on the Web page Convenient way to pass data from one Web page to another <input type="hidden" name=“testRange“ value=“50"> Creates a hidden value with the name testRange and has a value of “50”. Note: that is a character string 5+0 Questions: How is this done practically? Is this hidden value safe from viewing?
23
<form action=…>
Specifies where to send the form data when a form is submitted Gathered from the <input> tags Submit button activates JavaScript can activate submission document.aform.submit() Use with appropriate METHOD Example: <FORM ACTION=“myPHPprogram.php" METHOD=POST> <INPUT TYPE=submit NAME=submiter VALUE=“GO"> <INPUT TYPE=text NAME=tbox1 VALUE=“change me"> </FORM>
Similar presentations
