1 / 66

CSE 3345 - Graphical User Interfaces

CSE 3345 - Graphical User Interfaces. Chris Raley craley@smu.edu Lecture 2 – HTML + Forms. Giving more meaning to content. Professor X Kitty Pride Scott Summers. vs. <class> <teacher> Professor X </teacher> <students> <student age=“17”> Kitty Pride </student>

arella
Download Presentation

CSE 3345 - Graphical User Interfaces

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. CSE 3345 - Graphical User Interfaces Chris Raley craley@smu.edu Lecture 2 – HTML + Forms

  2. Giving more meaning to content Professor X Kitty Pride Scott Summers vs <class> <teacher>Professor X</teacher> <students> <student age=“17”>Kitty Pride</student> <student age=“16”>Scott Summers</student> </students> </class> CSE 3345

  3. Web UIs Generally consist of 3 parts • Structure • Presentation • Behavior CSE 3345

  4. 3 Parts of UI Structure Specifies what the different parts of the content are and how they are related Presentation How the content should be displayed Behavior How the content reacts and changes based on user interaction CSE 3345

  5. 3 Parts of UI Structure == HTML Presentation == CSS Behavior == Javascript CSE 3345

  6. Web Uis A different analogy • Nouns • Adjectives • Verbs “The big green ball bounces up and down.”

  7. Web Uis A different analogy • Nouns - HTML • Adjectives - CSS • Verbs - Javascript “The biggreenballbounces up and down.”

  8. Separation of content • Modern best practice says that each should be separate and only used for its intended purpose CSE 3345

  9. Why? • Flexibility • Re-usability • Ease of debugging • Cleaner code • Maintainability • Graceful Degradation CSE 3345

  10. Separation of Slides HTML CSS HTML UI Javascript

  11. HTML

  12. HTML Quick facts • HTML – Hyper Text Markup Language • Largely based on SGML • Created by Tim Berners-Lee at CERN CSE 3345

  13. What is HTML • The structure of a web page • The content which makes up a web page • A text-formatted language CSE 3345

  14. What HTML is NOT • A programming language • Presentation • Behavior CSE 3345

  15. Why use HTML • Gives developers the ability to add semantic meaning to their content. semantic- Relating to meaning in language or logic. CSE 3345

  16. Giving more meaning to content Professor X Kitty Pride Scott Summers vs <class> <teacher>Professor X</teacher> <students> <student age=“17”>Kitty Pride</student> <student age=“16”>Scott Summers</student> </students> </class> CSE 3345

  17. Why use HTML • Provides the foundation for users to skin their web pages with CSS and add logic with Javascript. CSE 3345

  18. HTML element review • <h1-h6> • <a> • <p> • <table>, <tr>, <th>, <td> • <img> • <div>, <span> • <form> • <input> CSE 3345

  19. Universal HTML Attributes • id – an unique identifier to the element • class – assigns one or more class names to the element CSE 3345

  20. id • Unique – only one CSE 3345

  21. class • Shared among many elements CSE 3345

  22. Adding Structure • Try to find an appropriate HTML element for your content. • Use <p> for text • Use <a> for links • The div and span element in conjunction with id and class attributes offer a generic method for adding structure to documents. CSE 3345

  23. Grouping Elements • Use <div> and <span> to generically organize or style content in your HTML document. <divid=“pbj”class=“directions”> <h2>How to make PB&J Sandwiches</h2> <ol> <li><spanclass=“step”>Step 1:</span> do this</li> </li><spanclass=“step”>Step 2:</span> do that</li> </ol> </div> CSE 3345

  24. DIV vs SPAN • Div is a block element • Span is an inline element Other than this, these elements provide no other presentational impact (Unless styled with CSS). See example explanation here. CSE 3345

  25. Why group elements? • Grouping elements helps structure your document when creating sections of content CSE 3345

  26. More specific elements for organizing content CSE 3345

  27. Bad HTML • <blink> - makes text blink • <marquee> - makes text scroll • <b> - makes text bold • <u> - makes text underlined • <font> - changes font family, color, and size • <i> - makes text italic • <center> - centers text • <big> -Makes text BIG • <small> - Makes text small Look here for more bad elements and attributes. CSE 3345

  28. HTML Doctype • A set of agreed upon rules for valid HTML elements and attributes. • You should always include a Doctype in your HTML documents! (Remember, the Doctypegoes before the root element.) • Useful for validating your HTML. CSE 3345

  29. HTML5 Doctype • We will be using the HTML5 Doctype for all HTML documents. • HTML5 Doctype Declaration • <!DOCTYPE HTML> CSE 3345

  30. Let’s Dive in <!DOCTYPE HTML> <html> <head><title>Let’s Dive in</title></head> <body> <div> <h1>What is HTML?</h1> <p>HTML is the root of web pages and the backbone of web user interfaces.</p> <strong>I love HTML</strong> </div> </body> </html> CSE 3345

  31. HTML Forms • A composition of controls that include buttons, checkboxes, text input, etc. that are used to capture user input.

  32. Form Example CSE 3345

  33. How a form works Tom’s computer Facebook server CSE 3345

  34. Form Controls • Types of controls: • Button • Checkbox • Radio button • Hidden Control • File Select • Text input • Menus • Others

  35. Form controls • Use the <input> element to create a control • Set the value of the type attribute to the desired control • Set the id and name attribute to use as a link between your form and the processing script. <input type=“button” />

  36. Buttons • Submit - When activated, it will submit a form for processing. • Reset - When activated, it will reset all controls to their initial value. • Push- Have no default behavior. Use these for client-side scripts.

  37. Button example <input type=“submit” value=“Process form”/> <input type=“reset” value=“Reset form”/> <input type=“button” value=“Push button”/>

  38. The “Log In” button is an example of a submit button. When the user presses the “Log In” button it will process the user information and try to log the user into facebook. CSE 3345

  39. Checkboxes • On/off switches that can be toggled by the user • A checkbox is “on” when the element’s checked attribute is true • Several checkboxes in a form can have the same name attribute. • This is used to select multiple values for the same property.

  40. Checkboxes • Multiple checkboxes that have the same name can be “on” • Only “on” checkboxes can be successful. • Only “on” values will be sent for server processing

  41. Checkbox Example <input type=“checkbox” name=“interests” value=“cooking”/> <input type=“checkbox” name=“interests” value=“eating”/> <input type=“checkbox” name=“interests” value=“coding”/>

  42. “Keep me logged in” is a checkbox. CSE 3345

  43. Radio Button • Similar to checkboxes except when several share the same nameattribute, they are mutually exclusive. • Browser behavior for any radio groups which don’t specify an “on” radio button is undefined.

  44. Radio Button Example <input type=“radio” name=“gender” value=“male” /> <input type=“radio” name=“gender” value=“female” />

  45. “Gender choice” is a radio box. CSE 3345

  46. Hidden • Allows developers to pass additional values from a form for processing in a subtle manner. • Useful for temporary, session-based, or state data. • Not visually rendered by browser • Still visible when inspecting html

  47. Hidden Example <input type="hidden" name="orderNumber" id="orderNumber" value="0024"

  48. File Select • Allows users to select files so that their contents may be submitted with the form. • Useful for uploading local files to a server • Use a hidden field with the name attribute set to MAX_FILE_SIZE to limit the file size that can be uploaded.

  49. File Select Example <input type="hidden" name="MAX_FILE_SIZE" value="500" /> <input type="file" name="uploadField" />

  50. Text Input • Textfield – a single line text input control • Textarea – a multiline text input control

More Related