Lecture 2 - Comm Lab: Web @ ITP

741 views
695 views

Published on

HTML Forms and CSS by Ruxy Staicut

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
741
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lecture 2 - Comm Lab: Web @ ITP

  1. 1. Communications Lab :: Web Lecture 2: HTML and Forms
  2. 2. Don't Forget! <ul><li>Check the class website for assignments, readings and announcements: ruxystaicut.com/itp </li></ul>
  3. 3. HTML Pages <ul><li>What HTML tags did you find in the readings? </li></ul><ul><li>Present the page you made for Assignment #1. </li></ul>
  4. 4. Today's Class <ul><ul><li>HTML Forms  </li></ul></ul><ul><ul><ul><li>What are they  </li></ul></ul></ul><ul><ul><ul><li>How do you make them </li></ul></ul></ul><ul><ul><ul><li>How do you use them </li></ul></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><ul><li>What is it </li></ul></ul></ul><ul><ul><ul><li>How do you use it </li></ul></ul></ul><ul><ul><ul><li>Box model </li></ul></ul></ul>
  5. 5. Forms They are used everywhere. Login, email, search bar - these are just a few examples.
  6. 6. Forms - more examples
  7. 7. Forms <ul><li>How do you create them? </li></ul><ul><li>  </li></ul><ul><li>< form > </li></ul><ul><li>    User input goes here </li></ul><ul><li></ form > </li></ul>
  8. 8. Forms
  9. 9. Forms - Input type text <ul><li>< form > </li></ul><ul><li>    First Name: < input type=&quot;text&quot; name=&quot;firstname&quot; /> </li></ul><ul><li>     <br /> </li></ul><ul><li>    Last Name: < input type=&quot;text&quot; name=&quot;lastname&quot; /> </li></ul><ul><li>     <br /> </li></ul><ul><li>< /form > </li></ul><ul><ul><li>NOTE: We use <br/> to create a new line </li></ul></ul>
  10. 10. Forms - Labels <ul><li>< form > </li></ul><ul><li>    < label >First Name: </ label >< input type=&quot;text&quot; name=&quot;firstname&quot; /> </li></ul><ul><li>     <br /> </li></ul><ul><li>    < label >Last Name: </ label >< input type=&quot;text&quot; name=&quot;lastname&quot; /> </li></ul><ul><li>     <br /> </li></ul><ul><li>< /form > </li></ul>
  11. 11. Forms - Input type radio <ul><li>< form >  </li></ul><ul><li>    < input type=&quot;radio&quot; name=&quot; gender &quot; value=&quot; male &quot; />Male<br /> </li></ul><ul><li>  </li></ul><ul><li>     < input type=&quot;radio&quot; name=&quot; gender &quot; value=&quot; female &quot; />Female<br/> </li></ul><ul><li>< /form > </li></ul><ul><li>  </li></ul><ul><li>Note: You can only select one element with radio inputs. </li></ul>
  12. 12. Forms - Input type checkbox <ul><li>< form > </li></ul><ul><li>     < input type=&quot;checkbox&quot; name=&quot; hair &quot; value=&quot; brown &quot; /> brown <br /> </li></ul><ul><li>    < input type=&quot;checkbox&quot;   name=&quot; hair &quot; value=&quot; blond &quot; /> blond <br/> </li></ul><ul><li>     < input type=&quot;checkbox&quot; name=&quot; hair &quot; value=&quot; black &quot; /> black <br/> </li></ul><ul><li></ form > </li></ul>
  13. 13. Forms - Input submit button <ul><li>< form > </li></ul><ul><li>     < input type=&quot;submit&quot; value=&quot; Submit form &quot; /> </li></ul><ul><li>  < /form > </li></ul>
  14. 14. Forms - All together <ul><li><form> </li></ul><ul><li>    First Name: < input type=&quot;text&quot; name=&quot;firstname&quot; /><br /> </li></ul><ul><li>    Last Name: < input type=&quot;text&quot; name=&quot;lastname&quot; /><br /> </li></ul><ul><li>  </li></ul><ul><li>    < input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;male&quot; />Male<br /> </li></ul><ul><li>    < input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;female&quot; />Female<br/> </li></ul><ul><li>  </li></ul><ul><li>     < input type=&quot;checkbox&quot; name=&quot;hair&quot; value=&quot;brown&quot; /> brown <br /> </li></ul><ul><li>     < input type=&quot;checkbox&quot; name=&quot;hair&quot; value=&quot;black&quot; /> black<br/> </li></ul><ul><li>     < input type=&quot;checkbox&quot; name=&quot;hair&quot; value=&quot;blond&quot; /> blond<br/> </li></ul><ul><li>  </li></ul><ul><li>     < input type=&quot;submit&quot; value=&quot;Submit form&quot; /><br/> </li></ul><ul><li></form> </li></ul>
  15. 15. Forms
  16. 16. Forms: Demo! Let's make some rectangles.
  17. 17. Why doesn't it do anything? We need the server side!
  18. 18. Client and Server <ul><li>Forms are both on the client and on the server </li></ul><ul><li>Note : you can remember the terms - &quot;client&quot; since the user is literally a client requesting the website and the &quot;server&quot; is serving it. </li></ul><ul><li>  </li></ul>
  19. 19. Why do we need the server? <ul><li>It takes the data from the inputs in the HTML and does something with it! </li></ul><ul><li>  </li></ul><ul><li><form action=&quot;http://itp.nyu.edu/~irs221/sinatra/example1/get_rectangle&quot; method=&quot;GET&quot; >  </li></ul><ul><li>... </li></ul><ul><li></form> </li></ul><ul><li>Let's add it to our example. </li></ul>
  20. 20. Method: GET and POST <ul><ul><li>GET </li></ul></ul><ul><ul><ul><li>Used when asking for some data to be returned.  </li></ul></ul></ul><ul><ul><ul><li>The parameters (the information from the inputs) are sent through the URL </li></ul></ul></ul><ul><ul><li>POST </li></ul></ul><ul><ul><ul><li>Used to send information that is more sensitive, like passwords.  </li></ul></ul></ul><ul><ul><ul><li>It it generally used to send information, not to retrieve it. </li></ul></ul></ul><ul><ul><ul><li>Parameters are not visible in the url </li></ul></ul></ul>
  21. 21. DIV and Span <ul><ul><li>Used when you don't have an HTML tag that's appropriate in terms of its meaning. </li></ul></ul><ul><ul><li>Div is for bigger contents as a block . Imagine having a line break before and after it (<br/>) </li></ul></ul><ul><ul><li>Span is for in-line contents (usually just a few words) </li></ul></ul><ul><ul><li>CSS and JavaScript use <div> and <span> heavily. </li></ul></ul>
  22. 22. DIV and Span <ul><li>< div > </li></ul><ul><li>    < p >A div can contain many elements.< /p > </li></ul><ul><li>    < p >All these elements can be nested inside a div.< /p > </li></ul><ul><li>    < p >However, when you use < span >this tag right here< /span > it is always the one that is nested inside another tag.< /p > </li></ul><ul><li></ div > </li></ul><ul><li>They don't do much yet, but wait until we see them working with CSS and JavaScript! </li></ul>
  23. 23. CSS <ul><ul><li>CSS stands for  Cascading Styles Sheets </li></ul></ul><ul><ul><li>We added content with HTML , now  CSS will add style  to the content and make it look better (less like the Internet in the 90's) </li></ul></ul><ul><ul><li>Solved a big problem : messy, long, hard to read HTML. Fonts and colors used to be done in HTML, as well as the layout (using tables, frames). Now, everything is separated into CSS. </li></ul></ul>
  24. 24. CSS <ul><li>  Adding styling to the HTML </li></ul><ul><li>  </li></ul>
  25. 25. CSS is on the Client
  26. 26. How do I add CSS? <ul><li>There are three methods: </li></ul><ul><li>  </li></ul><ul><ul><li>Inline </li></ul></ul><ul><ul><li>Embedded </li></ul></ul><ul><ul><li>External </li></ul></ul>
  27. 27. Inline CSS <ul><li><p style=&quot;color: red&quot; >text</p> </li></ul><ul><li>Not recommended. </li></ul>
  28. 28. Embedded CSS <ul><li><html>   <head>     <style type=&quot;text/css&quot;>         p { color: red; } </li></ul><ul><li>        a { font-family: Helvetica; }     </style>   </head> </li></ul><ul><li>  <body> </li></ul><ul><li>        <p> This text will be red. </p> </li></ul><ul><li>  </body> </li></ul><ul><li></html> </li></ul><ul><li>                                Better than inline CSS ! </li></ul>
  29. 29. External CSS <ul><li><html>   <head>     <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>   </head> </li></ul><ul><li>  <body> ... </body> </li></ul><ul><li></html> </li></ul><ul><li>                          The best way to include CSS! </li></ul>
  30. 30. CSS Selectors, Properties and Values <ul><li>Selectors - use can use HTML tags! </li></ul><ul><li>    p { } </li></ul><ul><li>Note: Pay attention to the brackets. </li></ul><ul><li>Properties - the style we want to affect. Example: color! </li></ul><ul><li>    p { color: } </li></ul><ul><li>Note: Pay attention to the colon after the property. </li></ul><ul><li>Value - the value we want to assign to a certain property </li></ul><ul><li>    p { color: blue; } </li></ul><ul><li>Note: Pay attention to the semicolon after the value. </li></ul>
  31. 31. CSS Selectors <ul><ul><li>HTML tag name </li></ul></ul><ul><ul><li>Class name </li></ul></ul><ul><ul><li>ID </li></ul></ul><ul><ul><li>Position in the document </li></ul></ul>
  32. 32. HTML Tag Selectors <ul><li>Access HTML tags with just the tag name : body </li></ul><ul><li>  </li></ul><ul><li>a { }          This will select all the link elements. </li></ul><ul><li>p { } </li></ul><ul><li>    Select all the paragraphs </li></ul><ul><li>form { } </li></ul><ul><li>    Select all the forms. </li></ul>
  33. 33. Class and ID Attributes <ul><ul><li>IDs are unique , make sure they are only used once in your entire HTML file. </li></ul></ul><ul><ul><li>Classes  is used in targeting  one or more elements </li></ul></ul><ul><li><div id =&quot; first-container &quot; class =&quot; blue-container &quot;>First blue container</div> </li></ul><ul><li><div id =&quot; second-container &quot; class =&quot; blue-container &quot;>Second blue container</div> </li></ul>
  34. 34. IDs and Classes in CSS <ul><ul><li>Access IDs with the hash tag: #ID </li></ul></ul><ul><ul><li>Access Classes with dot sign: .class </li></ul></ul><ul><li>    #first-container { } </li></ul><ul><li>        Selects the unique element with &quot;first-container&quot; ID </li></ul><ul><li>    #second-container { } </li></ul><ul><li>        Selects the unique element with &quot;second-container&quot; ID </li></ul><ul><li>    .blue-container { } </li></ul><ul><li>       Selects ALL elements with the class &quot;blue-container&quot; </li></ul>
  35. 35. Position Selectors <ul><li><div id=&quot;menu&quot;> </li></ul><ul><li>    <p class=&quot;header&quot;>...</p> </li></ul><ul><li>    <div class=&quot;header&quot;>...</div> </li></ul><ul><li>    <p class=&quot;summary&quot;>...</p> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul><ul><li>#menu p  </li></ul><ul><li>    Will select the first and third element within the menu. </li></ul>
  36. 36. Position Selectors <ul><li><div id=&quot;menu&quot;> </li></ul><ul><li>    <p class=&quot;header&quot;>...</p> </li></ul><ul><li>    <div class=&quot;header&quot;>...</div> </li></ul><ul><li>    <p class=&quot;summary&quot;>...</p> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul><ul><li>#menu .header </li></ul><ul><li>    Will select the first and second element within the menu. </li></ul><ul><li>    It is important to note the space between them. This means it will select the descendant of the #menu element. </li></ul>
  37. 37. Position Selectors <ul><li><div id=&quot;menu&quot;> </li></ul><ul><li>    <p class=&quot;header&quot;>...</p> </li></ul><ul><li>    <div class=&quot;header&quot;>...</div> </li></ul><ul><li>    <p class=&quot;summary&quot;>...</p> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul><ul><li>div.header </li></ul><ul><li>    Will select the second element, a div element which also has the &quot;header&quot; class. </li></ul>
  38. 38. Grouping Selectors <ul><li><div id=&quot;menu&quot;> </li></ul><ul><li>    <p class=&quot;header&quot;>...</p> </li></ul><ul><li>    <div class=&quot;header&quot;>...</div> </li></ul><ul><li>    <p class=&quot;summary&quot;>...</p> </li></ul><ul><li></div> </li></ul><ul><li>  </li></ul><ul><li>.header, .summary { } </li></ul><ul><li>    This will select all the elements which have the class &quot;header&quot; and all the elements that have the class &quot;summary&quot; </li></ul>
  39. 39. Pseudo-classes <ul><li>a :link {color:#FF0000;}      /* unvisited link */ </li></ul><ul><li>a :visited {color:#00FF00;}  /* visited link */ </li></ul><ul><li>a :hover {color:#FF00FF;}  /* mouse over link */ </li></ul><ul><li>a :active {color:#0000FF;}  /* selected link */ </li></ul>
  40. 40. Properties <ul><li>They go between the curly brackets with semicolons at the end of each </li></ul><ul><li>  </li></ul><ul><ul><li>Font </li></ul></ul><ul><ul><li>Color </li></ul></ul><ul><ul><li>Background </li></ul></ul><ul><ul><li>Dimension </li></ul></ul><ul><ul><li>Border </li></ul></ul>
  41. 41. Properties and Their Values <ul><li>p { </li></ul><ul><li>    border: 1px solid #000;  </li></ul><ul><li>    color: green; </li></ul><ul><li>    background-color: #FF3342; </li></ul><ul><li>    font-family: Helvetica, sans-serif; </li></ul><ul><li>    font-style: italic; </li></ul><ul><li>    font-weight: bold; </li></ul><ul><li>} </li></ul>
  42. 42. Font Color <ul><li>/* This is a comment, it's ignored by the browser.  */ </li></ul><ul><li># first-container { </li></ul><ul><li>     color: #BBAA55 ;  /* Colors can be HEX */ </li></ul><ul><li>    color: rgb(255, 0, 0); </li></ul><ul><li>} </li></ul><ul><li># second-container { </li></ul><ul><li>     color: red ; /* Colors can be red, green, blue, white, black etc */ } </li></ul><ul><li>Note: You can use the Digital Color Meter on Mac OS X if you don't have Photoshop. </li></ul>
  43. 43. Fonts <ul><li>font-family : Helvetica;  /* Specific */ </li></ul><ul><li>font-family: sans-serif; /* General */ </li></ul><ul><li>font-weight : bold; </li></ul><ul><li>font-size : 20px; </li></ul><ul><li>font-size: 1em;   /* 1em = current font size; relative */ </li></ul><ul><li>font-style : italic; </li></ul><ul><li>  </li></ul><ul><li>line-height : 22px;  /* The space between lines of text */ </li></ul>
  44. 44. Font Shorthand <ul><li>p { </li></ul><ul><li>    font: italic 22px/26px Verdana, sans-serif; </li></ul><ul><li>} </li></ul>
  45. 45. Lengths, Units and Percentages <ul><li>em </li></ul><ul><li>    is relative unit size. For example, font-size: 3em means three times the current font size. px  </li></ul><ul><li>     is the unit measured in pixels. This is an absolute size. Example: 30px. Make sure there is no space in between! pt </li></ul><ul><li>     is the unit for points. %  </li></ul><ul><li>     is the unit for percentages. This is relative . </li></ul>
  46. 46. Background <ul><li>. blue-container { </li></ul><ul><li>    background-color: blue ; </li></ul><ul><li>    background-image: url(images/background-tile.png) ; </li></ul><ul><li>    background-repeat: repeat-x ; </li></ul><ul><li>    background-position: right top ; </li></ul><ul><li>} </li></ul><ul><li>  </li></ul><ul><li>Shorthand: </li></ul><ul><li>     background: #ffffff url('template.png') no-repeat left top; </li></ul>
  47. 47. Dimensions <ul><li>. blue-container { </li></ul><ul><li>    height: 100px; </li></ul><ul><li>    width: 500px; </li></ul><ul><li>} </li></ul>
  48. 48. Border <ul><li>Granular: </li></ul><ul><li>p { </li></ul><ul><li>    border-width: 1px; </li></ul><ul><li>    border-color: #000; </li></ul><ul><li>    border-style: solid; </li></ul><ul><li>} </li></ul><ul><li>This is equivalent to its shorthand : </li></ul><ul><li>p { </li></ul><ul><li>    border: 1px solid #000; </li></ul><ul><li>} </li></ul>
  49. 49. Trying out colors and styles <ul><li>Two essential tools: </li></ul><ul><ul><li>Chrome Developer Inspector </li></ul></ul><ul><ul><li>View source </li></ul></ul>
  50. 50. How Does the Style Cascade ? <ul><li>When you write a CSS spreadsheet, the last CSS rule matters the most: </li></ul><ul><li>p { color: red; } </li></ul><ul><li>p { color: yellow; } </li></ul><ul><li>In this example, the paragraphs will end up yellow. </li></ul>
  51. 51. How Does the Style Cascade ? <ul><li><div id=&quot;menu&quot;> </li></ul><ul><li>    <p id=&quot;title&quot;> </li></ul><ul><li>        <span class=&quot;title&quot;>Title</span> </li></ul><ul><li>    </p> </li></ul><ul><li></div> </li></ul><ul><li>#menu #title span { }  <-- winner </li></ul><ul><li>#menu span { } </li></ul><ul><li>The specific tag matters more , even though it's not the last one. </li></ul>
  52. 52. Inheritance <ul><li>Elements can inherit styles from parent and ancestor elements. </li></ul><ul><li><body> </li></ul><ul><li>    <p id=&quot;main-contents&quot;> .... </p> </li></ul><ul><li></body> </li></ul><ul><li>body { color: blue; } </li></ul><ul><li>     The p element and all descendants of body will inherit blue text. NOTE: This is only for text-related properties. </li></ul>
  53. 53. Box Model <ul><li>  </li></ul><ul><ul><li>Used for layout </li></ul></ul><ul><ul><li>You can think of HTML elements as boxes. </li></ul></ul>
  54. 54. Box Model <ul><ul><li>Margin - The space on the outside of the border of the box. </li></ul></ul><ul><ul><li>Border - A border in the shape of a line or a dotted line that goes around the padding and content. It is affected by the background color of the box. </li></ul></ul><ul><ul><li>Padding - Creates space around the content. It is affected by the background color of the box </li></ul></ul><ul><ul><li>Content - The content of the box, this is where your text or other content appears. </li></ul></ul>
  55. 55. Margin and Padding <ul><li>Detailed: margin-top: 5px; padding-left: 30px; </li></ul><ul><li>Shorthand: </li></ul><ul><li>margin: 5px; /* Sets the margin to 5px all around */ </li></ul><ul><li>  </li></ul><ul><li>margin: 2em 1em; /* Sets top & bottom to 2em and left & tight to 1em */ </li></ul><ul><li>margin: 5px 10px 15px 20px; /* top = 5px, right = 10px, bottom = 15px, left = 20px. Always go clockwise starting at 12 o'clock */ </li></ul>
  56. 56. Display <ul><li>Inline : Stays on one line </li></ul><ul><li>Block :  Will form a block, similarly to a box. </li></ul><ul><li>             <div id=&quot;blue-container&quot;> ... </div> </li></ul><ul><li>             #blue-container { display: block; } </li></ul>
  57. 57. Position <ul><ul><li>fixed  </li></ul></ul><ul><ul><li>absolute  </li></ul></ul><ul><ul><li>relative   </li></ul></ul><ul><ul><li>static ( default)   </li></ul></ul><ul><ul><li>inherit </li></ul></ul><ul><li>  </li></ul><ul><li>#blue-container { position: absolute; top: 30px; left: 30px;} </li></ul><ul><li>  </li></ul>
  58. 58. Alignment <ul><li>.center { margin: 0 auto; width:780px; } </li></ul><ul><li>  </li></ul><ul><li>.right { position:absolute; right:0px; width:300px; } </li></ul><ul><ul><li>top </li></ul></ul><ul><ul><li>right </li></ul></ul><ul><ul><li>left </li></ul></ul><ul><ul><li>bottom </li></ul></ul>
  59. 59. Floating <ul><li>.img { position: relative; float: left; } /* Important to have relative positioning set, or to inherit it */ </li></ul><ul><li>  </li></ul><ul><ul><li>Images get pushed back horizontally, to the left or right </li></ul></ul><ul><ul><li>If you put a few floating elements next to each other, they will follow each other in the direction set. </li></ul></ul><ul><ul><li>Only applies to block elements </li></ul></ul><ul><ul><li>You can turn off float with clear: left; clear:right; clear:both; </li></ul></ul>
  60. 60. Assignment for Next Week <ul><ul><li>Check the assignments section on the website for the assignment handout. </li></ul></ul><ul><ul><li>The assignment is due next week.  </li></ul></ul><ul><ul><li>You can send the links to your homework from the assignment by email this week. </li></ul></ul>
  61. 61. Next Week... <ul><ul><li>Introduction to Sinatra </li></ul></ul><ul><ul><li>Make a simple web server </li></ul></ul><ul><ul><li>Routes and Parameters </li></ul></ul>

×