1 / 35

HTML

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>. 1. Requests html page (URL). 2. retrieves page. server.

bran
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. 1. Requests html page (URL) 2. retrieves page server client 3. sends page to client Files on server Apache Tomcat Server 4. browser interprets html tags & displays page Typical html Request/Response cycle

  3. HTML TAGS Spacing <br> Grouping Tags &nbsp; <p> paragraph <pre> pre-formatted <xmp> ignored Layout & Appearance <h1> Headings <font> Fontcontrol <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 &nbsp; 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 - http://www.w3.org/TR/REC-html40/sgml/entities.html#h-24.1

  6. Grouping Tags <p> paragraph - looks like paragraph <pre> pre-formatted - contents unchanged <xmp> ignored - Html tags are visible

  7. 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 = "http://www.google.com/images/hp0.gif"

  8. Tables <table> </table> <tr> </tr> <td> contents </td> <td> contents </td> <td> contents </td> <tr> </tr>

  9. 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. Interconnection <a href = --- hyperlink linked file is loaded when description is clicked hyperlinked file </a> <a href = "file.html" > Description of link file anywhere on Internet href = "http://www.google.com/index.html" file in another directory on same computer href = "../../Dir-A/Dir-B/another.html" ../ Dir-A ../ Dir-B Current-file another.html

  14. 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. Your name Hello <input type = text ... / > name used to refer to element input field Initial contents Your name <input type="text" name="charlie" size=30 value ="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 http://where.com/......abc.jsp ? v1=data-entered&v2=data-entered Query String Form-script.html

  21. <form Method = GET Action = "abc.jsp" name = "bert" > --- </form> In-line scripts <input name="v1" value = "none" onmouseover = "value = 'Hello' ; style.background='red' " onmouseout = "value = 'whoops' ; style.background='pink' " onfocus = "value= 'Bye' " onblur = "value = none' " /> 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. <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. <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. 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 assignment dynamic attribute assignment <select name= "tone" style=" background: 'yellow' " ; onchange= " alert( tone.value) style.background=tone.value " > <option value = "blue" > Blue </option> <option value = "tan" > Tan </option> <option value = "red" > Red </option> </select> set background to selected value see Menu01.html

  29. window URL location hyperlink value loaded <select name= "tone" onchange= " window.location = tone.value " > <option value = "http://www.google.com" > Google </option> <option value = "http://www.yahoo.com" > Yahoo </option> <option value = "http://www.dogpile.com" > Dogpile </option> </select> Hyperlink value see Menu04.html

  30. <form Method = GET Action = "abc.jsp" name = "bert" > <input name="v1" value = "Hello" /> <input name="v2" value = "" /> v2  v2 + v1 (onclick) <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. 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 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 severalpreset 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 img Redirect image menu How do you do this ?

More Related