1. 10/1/2015 ©2006 Scott Miller, University of Victoria 1 HTML: The sequel Forms JavaScript DHTML HTML Practical Tutorial Rev 2.0

2. 10/1/2015 ©2006 Scott Miller, University of Victoria 2 HTML Forms Forms are crucial when developing web applications that require interactive input from the user –HTML Forms contains elements such as buttons, text boxes, pop-ups, check boxes, etc. –Simple HTML construct using these elements for user input –Submits information via POST method as key-value pairs in body of request POST is better method to send data as GET has max of 256 characters

3. 10/1/2015 ©2006 Scott Miller, University of Victoria 3 Example - Forms Username: Password: Keep me logged in OK Me.com Webserver SMTP ForgotPWD.pl DB Login.pl CGI Select From Username Set accept cookie SMTP <form name=“login” method=“post” action=“http://www.me.com/cgi-bin/Login.pl”> Username: Password:

4. 10/1/2015 ©2006 Scott Miller, University of Victoria 4 Example - Form Request POST /cgi-bin/Login.pl HTTP/1.1 Content-Length: 42 Content-Type: url-encoded-form/UTF-8 Host: www.me.com User-Agent: Internet Explorer username=scott pwd=foo sbutton=MySpoonIsTooBig

5. 10/1/2015 ©2006 Scott Miller, University of Victoria 5 JavaScript Used for presentation (formatting), form validation, cookie creation, browser detection and more Parsed on the client side Scripting embedded inside tags –Tags can be embedded throughout web pages Used heavily for event handling

6. 10/1/2015 ©2006 Scott Miller, University of Victoria 6 JavaScript Main uses: –Form validation –Action driven content (mouse-overs) –Read/Write HTML elements Problems: –Horrible task of code mixed in with presentation – makes for a maintenance nightmare –Limited trust for client-side form validation –Can lead to security issues as well JavaScript ≠ Java

7. 10/1/2015 ©2006 Scott Miller, University of Victoria 7 JavaScript – Case Study Form Validation –Saves Bandwidth –Saves CPU time on web server (eases the load for other clients with more serious needs) Verifies the form(s) is completely and correctly filled out –E.g. Ensure phone number in format of (xxx)xxx- xxxx Verifies form on client side BEFORE bothering the web server Can use any client side scripting language to do this (JavaScript, VBScript, etc.)

8. 10/1/2015 ©2006 Scott Miller, University of Victoria 8 JavaScript – Case Study JavaScript can access all forms on a page via the “forms” array (which is a property of the “document” object –document.forms[0].elements.length –document.forms[0].username.value e.x. function verify() { alert(“Form Verified”) }

9. 10/1/2015 ©2006 Scott Miller, University of Victoria 9 JavaScript - Example function verify() { alert(“Form Verified”) } Example 1 Example 2

10. 10/1/2015 ©2006 Scott Miller, University of Victoria 10 JavaScript – More Cases Another example of JavaScript Places you’ll find JS –Client: embedded in HTML, inside Applets –Server: JSPs, Servlets (  CGI program generates JS) Country: Province/State: Canada B.C. Choose Constrains

11. 10/1/2015 ©2006 Scott Miller, University of Victoria 11 Dynamic HTML : DHTML DHTML is simply a term for HTML, CSS, and JavaScript all used together –HTML presentation, CSS formatting for presentation, JavaScript “dynamic content”. Not used for Dynamic Content (as in web applications: DB queries, user authentication, etc.), but for more interactive presentation –e.x. Separate pages for specific browsers, different content based on cookie settings for presentation, mouse-over/click events, etc.

12. 10/1/2015 ©2006 Scott Miller, University of Victoria 12 HTML Tutorial A Short Practical Overview of the Markup Language, Elements and Basic Tags Rev 2.0

13. 10/1/2015 ©2006 Scott Miller, University of Victoria 13 Review of Basic HTML Syntax There are 3 parts to an HTML tag –Start Tag –Contents –End Tag e.x. This is bold Tags denote the formatting of the text (contents) between the start and end tags Tags denote elements, such as forms, tables, etc. –Elements are objects within a web page Tags are all lowercase

14. 10/1/2015 ©2006 Scott Miller, University of Victoria 14 HTML Basics Like any language, comments are available to use and make your code more clear – –SSI and similar languages use comment blocks to enter their own code All HTML documents contain the following components: –, : entire document –, : head section; includes page title, scripting functions, meta information, CSS includes, etc. –, : bulk of the document; the viewable portion

15. 10/1/2015 ©2006 Scott Miller, University of Victoria 15 HTML Basics: Common Tags Common formatting tags – : Sets the title in the browser’s bar – : Sets text bold – : Sets text italic – : Displays as code –,,etc.: Display as (sub)header – : Paragraph – : Add a line break – : Adds a horizontal line

16. 10/1/2015 ©2006 Scott Miller, University of Victoria 16 HTML Basics: Attributes Many HTML elements have attributes to add additional formatting –e.g. Many HTML tags have 1 or more of these attributes, which makes them very hard to list –While building your own pages, any decent reference will list the attributes with each tag you use

17. 10/1/2015 ©2006 Scott Miller, University of Victoria 17 HTML Basics: Entities Certain characters cannot be written as literals (e.g. &), so these entities are denoted in another way –&lt = < –&amp = & –&gt = > –&quot = “ –&apos = ‘ –&nbsp = space (non-breaking space) –&divide = division sign –&copy = ©

18. 10/1/2015 ©2006 Scott Miller, University of Victoria 18 HTML Basics: Hyperlinking : Sets an anchor point Example: – text to display as this link : open link into a new window In-page anchors are used to link to references on the same page. They are usually used for TOC on large pages –e.x. Anchor

19. 10/1/2015 ©2006 Scott Miller, University of Victoria 19 HTML Basics: Frames Frames display SEPARATE PAGES in different defined areas of a single view –Good for menus, navigation –e.x.

20. 10/1/2015 ©2006 Scott Miller, University of Victoria 20 HTML Basics: Tables Tables are very easy to build in HTML – : defines a table – : defines a row – : defines a boundary for a column 100 200 300 400 500 600

21. 10/1/2015 ©2006 Scott Miller, University of Victoria 21 HTML Basics: Images General form to include an image: – If only a filename is present, the current directory is assumed Relative paths (src=“/images/1.gif”) are allowed –alt attribute writes alterative text if the picture is unavailable, or the browser can’t display images Images can be used to make image maps – These are images where different areas of the image link to different resources

22. 10/1/2015 ©2006 Scott Miller, University of Victoria 22 HTML Basics: Colour and Backgrounds Many elements in HTML can have colour defined –e.x. …= “#000000” …= “black” …= “rgb(0,0,0)” Background images can be added in much the same way –e.x. Note: although these colour and background tags work, most colour in any element (not just body) has been depreciated. All style is supposed to be done through Style Sheets

23. 10/1/2015 ©2006 Scott Miller, University of Victoria 23 Final Thoughts As mentioned, any formatting in the HTML web page itself will work, but proper coding style now dictates formatting should be done with Style Sheets Once you have become more comfortable with HTML, JavaScript, Style Sheets, and languages like SSI are very easy to pick up