CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6

Size: px

Start display at page:

Download "CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6"

Randall Porter
5 years ago
Views:

1 CS 350 COMPUTER/HUMAN INTERACTION Lecture 6

2 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r ~hwang/cs350/pizza1. Load index.html and pizza.css into a text editor Browse to /cs350/pizza1/ 2

3 Outline HTML5 HTML CSS JavaScript - next class References: HW3S, HNTU, CSW3 3

4 HTML5 HTML5 is the proposed standardization of basic web technology, currently in 3 rd draft Integrates previous technologies and defines clean distinction of roles H(yper) T(ext) M(arkup) L(anguage): structural semantics C(ascading) S(tyle) S(heets): presentation JavaScript: dynamic behavior Interactions are done by manipulating the styling of document structures 4

5 HTML The HTML portion basically is the union of HTML4 and XHTML, so syntax is fairly lax. Most of the deprecated tags and attributes are related to presentation that is now handled by CSS. The HTML5 standard for HTML is mostly supported by most major browsers (Chrome, Opera, Firefox, Edge, Safari). 5

6 HTML Tags Tags define structural elements Most tags are pairs, <tag>...</tag>, and must be properly nested, but some are self-closing, <tag /> Tags can have attributes that provide information. E.g. the URL for a link. <a href="url">link to URL</a> 6

7 HTML Document All documents have following format: <!DOCTYPE html> <html> <head>   </head> <body>  </body> </html> 7

8 HTML Meta-Data Tags The meta-data includes <title></title> <link rel="..." type="..." href="..." /> E.g. favicon symbol, square image in browser heading and tabs, see HICO reference for details <link rel="icon" type="image/png href="pizza-icon.png" /> <style></style> <script></script> 8

9 HTML Body Tags HTML5 introduced structural elements to better identify document contents, especially for accessibility software. <header>, <footer>, <nav>, <section>, <label>,... Removed presentation elements <font>, <center>, <tt>,... Removed presentation attributes align, background, cellpadding,... 9

10 HTML Body Tags Here are some common tags that are used to structure document content. <h1></h1> for major headings <h2></h2> to <h6></h6> for subheadings <p></p> for paragraphs <ul></ul> for unordered (bulleted) lists <ol></ol> for ordered (numbered) lists <li></li> for list items <img src="..." /> for images <a href="..."></a> for links (anchors) See reference HTRF for complete list 10

11 HTML Body Tags Here are some tags for grouping items: <div></div> for structural grouping <span></span> mostly used for style grouping <table></table> for tables <tr></tr> for table rows <th></th> for table headings <td></td> for table data Use <table> only for actual tables, not for organizing content into presentation order. 11

12 HTML Body Tags There are a few mostly presentation tags leftover from earlier HTML versions: <strong></strong> heavy emphasis, usually bold text <em></em> emphasis, usually italic text <code></code> usually fixed-width text <br /> for newlines <hr /> for horizontal rule (line) 12

13 HTML Forms Basic HTML interaction element <form action="url" method="post">  </form> where URL is the location of the CGI script to run when the form is submitted. (More on CGI next week.) 13

14 Form Elements: Input <input /> has a type attribute One line of text input <input type="text" name="name" size="65" /> Submit button <input type="submit" value="submit" /> name is associated with the input value value is text label for button type inputs 14

15 Form Elements: Input HTML5 added <input> types that restrict format of text input , url, tel, time, number,... HTML5 added <input> attributes required, autofocus, placeholder, pattern,... E.g. address input <input type=" " name=" " 15

16 Form Elements: Radio Buttons, Check Boxes Radio buttons <input type="radio" name="size" value="small" />Small <input type="radio" name="size" value="large" checked="checked" />Large Check boxes <input type="checkbox name="toppings[]" value="pepperoni" />Pepperoni name attribute ties the elements together 16

17 Form Elements: Select Boxes Pull-down menu <select name="size"> <option value="large" selected="selected">large</option> </select> Multi-selection <select name="toppings[]" multiple="multiple">  </select> 17

18 Form Elements: Textarea <textarea> element is used to process multi-line text input: <textarea cols="80" rows="3" name="address">  </textarea> 18

19 CSS Stylesheets Global CSS rules (e.g. for an entire website) are stored in stylesheet files with extension.css They are associated with a webpage using the <link> tag in the <head> section. <link rel="stylesheet" href="pizza.css"> where href gives URL of the stylesheet file. 19

20 CSS Rules: Elements CSS rule is a collection of property values property: value1 value2...; Element rule - applied to all instances of <tag> <h1> { margin: 0px; padding: 5px; color: orange; background-color: purple } 20

21 CSS Rules: Classes Class rule - names a type of styling. May be applied to multiple tags on a page. Starts with '.'.alert { color: red; } Applied using class attribute <h1 class="alert">in AN EMERGENCY</h1> 21

22 CSS Rules: Ids Id rule - names a unique styling. May be applied only to one tag on a page. Starts with '#' #wrapper { position: relative; background-color: #FDF5E6; } Applied using id attribute <div id="wrapper">...</div> 22

23 Style Tag & Style Attribute CSS rules local to a single page are declared using the <style> tag in the <head> section. <style>.intro { font-style: italic; } </style> CSS rules local to an individual element are declared using the style attribute in the tag. <span style="color: red; font-style: italic;">...</span> 23

24 CSS Cascading Most (but not all) styling cascades from outer (parent) elements to inner (child) elements unless overridden by child element styling. Styling rules cascade from global stylesheet to <style> tag in <head> section to style attribute of an individual tag. Closest styling applies. Also cascades from tags to classes to ids. 24

25 CSS Properties: Spacing See reference CSRF for complete property list Styling properties for spacing margin: w x y z for space between elements padding: w x y z for space around contents within an element values are for top, right, bottom, left, or use margin-top, padding-right, etc. values in length units px (pixels), pt (points), cm, in, etc., or % (percentage of enclosing element) values may be negative 25

26 CSS Properties: Appearance Styling properties for appearance border: width style color default width is medium, also thin, thick, length units default style is none, also dotted, dashed, solid, double default color is element color, can be any defined HTML color name, hexidecimal RGB code, or rgb(red,green,blue) with decimal arguments color for foreground (text) color background-* for setting background properties 26

27 CSS Properties: Text & Font Text and font properties text-align for horizontal alignment. Default is left for most browsers. Also right, center, justify font-family for text font. Can be family name like "Times New Roman" or generic name like sans-serif font-size for size of font. Default is medium. Also small, large, etc., or fixed length units, or % of parent font size font-style for style of font. Default is normal. Also italic, oblique font-weight for weight of font. Default is normal. Also bold, bolder, lighter 27

28 CSS Properties: Layout Some layout styling properties: display for controlling individual element layout Default depends on element. E.g. <span> is inline, <p> is block float for arranging elements relative to each other Default is none, i.e., element is rendered as placed in the text. Also left, right. Usually used with <div>. clear for making elements start after floating elements Default is none, i.e., elements may float on both sides. Also left, right, both 28

29 In-class Exercise Experiment with adding content to the PPP webpage. E.g., add more size or topping choices, or other information fields to the order form. Experiment with changing different styling properties, adding new CSS classes and ids. 29

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web