Download presentation
Presentation is loading. Please wait.
1
HTML Markup language - controls appearance and content of a document <html> </html> Javascripts <head> </head> <script> </script> Various HTML tags <body> </body> <img /> <form> </form>
2
Apache Tomcat Server Typical html Request/Response cycle
1. Requests html page (URL) server Apache Tomcat Server client 2. retrieves page Files on server 3. sends page to client 4. browser interprets html tags & displays page
3
HTML TAGS Spacing <br> Grouping Tags <p> paragraph <pre> pre-formatted <xmp> ignored Layout & Appearance <h1> Headings <font> Font control <table> precise layout Content <img src = --- image Interconnection <a href = hyperlink
4
Communication tags <form> </form> Forms <input type = text > <input type = submit > <input type = button > <textarea > </textarea>
5
Spacing <br> Forces content to skip to next line Blanks and new lines are squeezed to one blank by browser * - create blanks with this symbol Block elements start on new line tables, headings Inline elements Stay on same line text, images Character entities -
6
Grouping Tags <p> paragraph - looks like paragraph <pre> pre-formatted - contents unchanged <xmp> ignored - Html tags are visible
7
Image dimension in pixels
Image Tag attributes image file Image dimension in pixels <img src = "us.gif" width = 100 height = 80 style = "float:left" /> Style attribute "property:value" - - left justifies image & floats text around image Space image is in parent directory src = "..\us.gif" image on Internet src = "
8
Tables <table> </table> <tr> </tr> <td> contents </td> <tr> </tr>
9
Aligns table in browser Attribute value pairs Border's color
Table attributes Border size in pixels Aligns table in browser Attribute value pairs Border's color <table border = 3 bordercolor = "red" align = "center' width = 70% style="font-size:15" bgcolor = "tan" > Table as percent of browser Style attribute "property:value" - affects text background color for table
10
table cells can contain anything
Including other tables <td> <img src="montana.gif" /> </td> font tag can also control text in cells <td> <font > size=40 color="blue" bye </font> </td>
11
Attribute Precedence Rules
Rule applies to entire table overrides table rule in this row <table style="font-size:15" > <tr style="font-size:100" > </tr> overrides row rule in this cell <td style="font-size:55" > Cat </td> <td> </td> governed by row <tr> </tr> governed by table
12
Text Appearance: <font attribute & values > --- </font>
Cascading Style Sheets (CSS) are preferred way to control styles and fonts. Deprecated * <font > size=40 color="blue" bye </font> "0000FF" "#00 00 FF Red-Green-Blue [RGB] Representation Pairs of hexadecimal digits: 0 - F red green blue font tag NOT supported in XHTML
13
<a href = --- hyperlink
Interconnection <a href = hyperlink linked file is loaded when description is clicked hyperlinked file <a href = "file.html" > Description of link </a> file anywhere on Internet href = " file in another directory on same computer href = "../../Dir-A/Dir-B/another.html" ../ Dir-A ../ Dir-B Current-file another.html
14
Triggers transmission of data to server
User enters data. HTML Forms Browser sends data to server. Server program processes data. Form Input fields name age Triggers transmission of data to server submit
15
Communication tags <form> </form> Forms <input type = text /> <input type = submit /> <input type = button /> <textarea > </textarea>
16
name used to refer to element
<input type = text / > name used to refer to element input field Initial contents Your name <input type="text" name="charlie" size=30 value ="Hello" /> Your name Hello <input type = password / >
17
<input type = submit ... / >
Label on button Triggers transmission of field data to server <input type = "submit" value = "Buy our stuff" /> type = button No transmission to server – but can trigger script
18
<textarea attr = val >
contents </textarea> Dimensions of text area <textarea Element can be referred to by name rows=10 cols=36 static font assignment name="bert" Static font color style="font-size:25" style="color:'red' " background color style="background:'lime' '" > style=property:value Contents go here. </textarea>
19
<form attr = val > --- </form>
attribute=value pairs go here <form Method = GET Action = "abc.jsp" name = "bert" > <input name="v1" type="text" /> <textarea name="v2" > </textarea> <input type = submit /> </form>
20
<form Method = GET Action = "abc.jsp" name = "bert" > <input name="v1" type="text" /> <textarea name="v2" > </textarea> <input type = submit /> </form> Query string sent to server on submit ? v1=data-entered&v2=data-entered Query String Form-script.html
21
/> In-line scripts <form > Method Action = "bert" = GET
= "abc.jsp" name <input name="v1" value = "none" onmouseover = "value = 'Hello' ; style.background='red' " onmouseout = "value = 'whoops' ; style.background='pink' " onfocus = "value= 'Bye' " onblur = "value = none' " /> </form> --- cursor selects input field v1 Enclosed in " " Separated by ; Multiple event conditions when de-select v1 This can be done for other tags too. Form-script.html
22
Javascript object oriented notation
dynamic style event-condition = " " style . property = value ; style . property = value static style style = "property : value ; property : value " HTML notation Single quotes
23
document .bert .v1 .value <form Method = GET Action = "abc.jsp"
name = "bert" > <input name="v1" /> <textarea name="v2" > </textarea> <input type = submit /> </form> Referring to elements with Qualified Names USA Jersey Newark NJIT ... Refer to v1 as: document .bert .v1 .value Html document object Name of parent element (form) where v1 Lives Name of variable Value entered in field v1
24
/> "document .bert .v1 .value = 'Bye' " <form Method = GET
Action = "abc.jsp" name = "bert" > <input name="v1" value = "Hello" /> --- </form> Make event on another tag change this value Event-condition=action <img src ="us.gif" onmouseover = "document .bert .v1 .value = 'Bye' " /> mouseover on image changes v1's value refers to v1's value changes v1 to 'Bye' v1's qualified name Enclosed in " " Using Qualified Names combine01.html
25
- one of 3 possible values
Menu variable name - one of 3 possible values <select name = "tone" > <option value = "blue" > Blue </option> <option value = "tan" > Tan </option> <option value = "red" > Red </option> </select> see Menu00.html
26
Event triggered - when different option selected
Action: pops-up tone's value <select name= "tone" onchange= "alert ( tone.value)" > <option value = "blue" > Blue </option> <option value = "tan" > Tan </option> <option value = "red" > Red </option> </select> Menu actions value of selected color
27
Subtle syntax differences
HTML Javascript style="background:'tan' "style.background='tan' style="font-size:28 "style.fontSize=28 style="color:'tan' "style.color='tan'
28
; Menu actions static attribute assignment dynamic attribute
<select name= "tone" style=" background: 'yellow' " ; onchange= " alert( tone.value) style.background=tone.value " > <option value = "blue" > Blue </option> <option value = "tan" > Tan </option> This example implies tone.value is a valid color – although as far as the option tag is concerned it could be any string. The color could be given in RGB notation too – like '#3355FF' - not case-sensitive even though js is in general <option value = "red" > Red </option> </select> set background to selected value see Menu01.html
29
hyperlink value loaded
window URL location hyperlink value loaded <select name= "tone" onchange= " window.location = tone.value " > <option value = " > Google </option> <option value = " > Yahoo </option> <option value = " > Dogpile </option> </select> The hyperlinks here have to be supplied in the full form etc - at least so it seemed when I tested it. Hyperlink value see Menu04.html
30
/> /> v2 v2 + v1 (onclick) <form > Method Action
= "bert" = GET = "abc.jsp" name /> name="v1" value = "Hello" <input /> name="v2" value = "" <input <input type = button* value="press" onclick= " document.bert.v2.value = document.bert.v2.value + ' ' + document.bert.v1.value" /> </form> concatenated with v1's value v2's current value and stored in v2 A submit would reset fields. combine01.html
31
Event-condition = "action"
Changing HTML attributes Event-condition = "action" To redirect <img src document .imageTagName .src = new source file To reset field's value document .formName .fieldName .value = new value To reset style's value document .formName .fieldName .style .background = 'red' attribute property value To reset Menu option style document .formName .menuName .options[selectedIndex] .style .background = '...'
32
Event Sequence: table alert
Event Precedence Rules Event Sequence: table alert <table onclick="alert ('Table')" > Event Sequence: row, table alert <tr onclick="alert ('Row')" > <td onclick="alert ('Cell')" > ... </td> <td> </td> </tr> Event Sequence: cell, row, table alert <tr> ...</tr> </table> Note – include large cellspacing & cellpadding to reveal effects. See Table-event-priority.html
33
Select one of the preset values
Radio buttons <form> <br> <input type=radio name="v1" value ="Hello" /> Greet <br> <input type=radio name="v1" value ="Goodbye" checked /> Leave <br> <input type=submit value ="press" /> </form> Sends selected value v1 radioButtons.html
34
select several preset values
Checkboxes <form> <br> <input type=checkbox name="v1" value ="L1" /> Milk <br> <input type=checkbox name="v2" value ="L2" checked /> Eggs <br> <input type=checkbox /> name="v3" value ="L3" Cheese <br> <input type=submit /> </form> multiple variables sent checkboxForm.html
35
images dir images dir Alaska.gif Alabama.gif etc x.html menu x.html
Menu event Alaska Alabama Arkansas Given a directory with an html page x.html and a subdirectory images that contains GIF images. The images have names as shown on the slide. The x.html page has an img tag and a menu that has the names of states – whose GIF images for Their state flags are in the images directory. On an onchange event, the current image src for the image tag is redirected to the selected flag. img Redirect image menu How do you do this ?
Similar presentations
