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