HTML The sequel Forms Java Script DHTML Practical
- Slides: 23
HTML: The sequel Forms Java. Script DHTML Practical Tutorial Rev 2. 0 © 2006 Scott Miller, University of Victoria 1 11/25/2020
HTML Forms l 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 l © 2006 POST is better method to send data as GET has max of 256 characters Scott Miller, University of Victoria 2 11/25/2020
Example - Forms SMTP Forgot. PWD. pl Username: Password: Keep me logged in OK CGI Me. com Webserver Select From Username DB CGI <form name=“login” method=“post” Login. pl action=“http: //www. me. com/cgi-bin/Login. pl”> Set accept cookie Username: <input type=“text” name=username> Password: <input type=“password” name=pwd> <input type=“submit” value=“My. Spoon. Is. Too. Big” name=“sbutton”> </form> © 2006 Scott Miller, University of Victoria 3 11/25/2020
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 <blank line> username=scott pwd=foo sbutton=My. Spoon. Is. Too. Big © 2006 Scott Miller, University of Victoria 4 11/25/2020
Java. Script Used for presentation (formatting), form validation, cookie creation, browser detection and more l Parsed on the client side l Scripting embedded inside <script></script> tags l – Tags can be embedded throughout web pages l Used heavily for event handling © 2006 Scott Miller, University of Victoria 5 11/25/2020
Java. Script l Main uses: – Form validation – Action driven content (mouse-overs) – Read/Write HTML elements l 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 l Java. Script ≠ Java © 2006 Scott Miller, University of Victoria 6 11/25/2020
Java. Script – Case Study l Form Validation – Saves Bandwidth – Saves CPU time on web server (eases the load for other clients with more serious needs) l Verifies the form(s) is completely and correctly filled out – E. g. Ensure phone number in format of (xxx)xxx-xxxx l l Verifies form on client side BEFORE bothering the web server Can use any client side scripting language to do this (Java. Script, VBScript, etc. ) © 2006 Scott Miller, University of Victoria 7 11/25/2020
Java. Script – Case Study l Java. Script 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 l e. x. <script type = “text/javascript”> function verify() { alert(“Form Verified”) } </script> © 2006 Scott Miller, University of Victoria 8 11/25/2020
Java. Script - Example <html> <head> <script type=“text/javascript”> function verify() { alert(“Form Verified”) } </script> </head> <body> <form> <input type=“button” onclick=“verify()” value=“Click me”> </form> </body> </html> © 2006 Scott Miller, University of Victoria Example 1 Example 2 9 11/25/2020
Java. Script – More Cases l Another example of Java. Script Country: Province/State: l Canada B. C. Choose Constrains Places you’ll find JS – Client: embedded in HTML, inside Applets – Server: JSPs, Servlets ( CGI program generates JS) © 2006 Scott Miller, University of Victoria 10 11/25/2020
Dynamic HTML : DHTML l DHTML is simply a term for HTML, CSS, and Java. Script all used together – HTML presentation, CSS formatting for presentation, Java. Script “dynamic content”. l 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. © 2006 Scott Miller, University of Victoria 11 11/25/2020
HTML Tutorial A Short Practical Overview of the Markup Language, Elements and Basic Tags Rev 2. 0 © 2006 Scott Miller, University of Victoria 12 11/25/2020
Review of Basic HTML Syntax l There are 3 parts to an HTML tag – Start Tag – Contents – End Tag l l l e. x. <strong>This is bold</strong> 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 l Tags are all lowercase © 2006 Scott Miller, University of Victoria 13 11/25/2020
HTML Basics l Like any language, comments are available to use and make your code more clear – <!-- {comment goes here} --> – SSI and similar languages use comment blocks to enter their own code l All HTML documents contain the following components: – <html>, </html>: entire document – <head>, </head>: head section; includes page title, scripting functions, meta information, CSS includes, etc. – <body>, </body>: bulk of the document; the viewable portion © 2006 Scott Miller, University of Victoria 14 11/25/2020
HTML Basics: Common Tags l Common formatting tags – – – – © 2006 <title>: Sets the title in the browser’s bar <strong>: Sets text bold <em>: Sets text italic <code>: Displays as code <h 1>, <h 2>, etc. : Display as (sub)header <p></p>: Paragraph : Add a line break <hr>: Adds a horizontal line Scott Miller, University of Victoria 15 11/25/2020
HTML Basics: Attributes l Many HTML elements have attributes to additional formatting – e. g. <body bgcolor=“#ffffff”> – e. g. <table border=“ 1”> l 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 © 2006 Scott Miller, University of Victoria 16 11/25/2020
HTML Basics: Entities l Certain characters cannot be written as literals (e. g. &), so these entities are denoted in another way – – – – © 2006 < = < & = & > = > " = “ &apos = ‘   = space (non-breaking space) ÷ = division sign © = © Scott Miller, University of Victoria 17 11/25/2020
HTML Basics: Hyperlinking l l <a>: Sets an anchor point Example: – <a href=“http: //location/page. html”> text to display as this link </a> l l <a href=“page” target=“_blank”>: 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. <a name=“this. Is. Anchor”>Anchor</a> <a href=“#this. Is. Anchor”> © 2006 Scott Miller, University of Victoria 18 11/25/2020
HTML Basics: Frames l Frames display SEPARATE PAGES in different defined areas of a single view – Good for menus, navigation – e. x. <frameset rows="25%, 75%"> <frame src=“ 1 frame. html"> <frameset cols="25%, 75%"> <frame src=“ 2 frame. html"> <frame src=“ 3 frame. html"> </frameset> © 2006 Scott Miller, University of Victoria 19 11/25/2020
HTML Basics: Tables l Tables are very easy to build in HTML – <table>: defines a table – <tr>: defines a row – <td>: defines a boundary for a column <table border="1"> <tr> <td>100</td><td>200</td><td>300</td> </tr><tr> <td>400</td><td>500</td><td>600</td> </tr></table> © 2006 Scott Miller, University of Victoria 20 11/25/2020
HTML Basics: Images l General form to include an image: – <img src=“url”> l l 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 l Images can be used to make image maps – These are images where different areas of the image link to different resources © 2006 Scott Miller, University of Victoria 21 11/25/2020
HTML Basics: Colour and Backgrounds l Many elements in HTML can have colour defined – e. x. <body bgcolor=“…”> l l …= “#000000” …= “black” …= “rgb(0, 0, 0)” Background images can be added in much the same way – e. x. <body background=“bg. jpg”> l 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 © 2006 Scott Miller, University of Victoria 22 11/25/2020
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 l Once you have become more comfortable with HTML, Java. Script, Style Sheets, and languages like SSI are very easy to pick up l © 2006 Scott Miller, University of Victoria 23 11/25/2020