Lecture 2 - Comm Lab: Web @ ITP

Communications Lab :: Web

Lecture 2: HTML and Forms

Don't Forget!

Check the class website for assignments, readings and announcements: ruxystaicut.com/itp

HTML Pages

What HTML tags did you find in the readings?

Present the page you made for Assignment #1.

Today's Class

• HTML Forms o What are they o How do you make themo How do you use them

• CSSo What is ito How do you use ito Box model

Forms

They are used everywhere. Login, email, search bar - these are just a few examples.

Forms - more examples

Forms

How do you create them? <form>    User input goes here</form>

Forms

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

Forms - Labels

<form>    <label>First Name: </label><input type="text" name="firstname" />    <br />    <label>Last Name: </label><input type="text" name="lastname" />    <br /></form>

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.

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>

Forms - Input submit button

<form>    <input type="submit" value="Submit form" /> </form>

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>

Forms

Forms: Demo!Let's make some

rectangles.

Why doesn't it do anything?

We need the server side!

Client and Server

Forms are both on the client and on the serverNote: you can remember the terms - "client" since the user is literally a client requesting the website and the "server" is serving it.

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.

Method: GET and POST

• GETo Used when asking for some data to be returned. o The parameters (the information from the inputs)

are sent through the URL• POST

o Used to send information that is more sensitive, like passwords. 

o It it generally used to send information, not to retrieve it.

o Parameters are not visible in the url

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.

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!

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.

CSS

  Adding styling to the HTML

CSS is on the Client

How do I add CSS?

There are three methods: • Inline • Embedded• External

Inline CSS

<p style="color: red">text</p>

Not recommended.

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!

External CSS

<html>  <head>    <link rel="stylesheet" href="styles.css">  </head>  <body> ... </body></html>                          The best way to include CSS!

CSS Selectors, Properties and ValuesSelectors - 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.

CSS Selectors

• HTML tag name• Class name• ID• Position in the document

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.

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>

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"

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.

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.

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.

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"

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 */

Properties

They go between the curly brackets with semicolons at the end of each • Font• Color• Background • Dimension• Border

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;}

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.

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 */

Font Shorthand

p {    font: italic 22px/26px Verdana, sans-serif;}

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.

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;

Dimensions

.blue-container {    height: 100px;    width: 500px;}

Border

Granular:p {    border-width: 1px;    border-color: #000;    border-style: solid;}

This is equivalent to its shorthand:p {    border: 1px solid #000;}

Trying out colors and styles

Two essential tools:• Chrome Developer Inspector

• View source

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.

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.

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.

Box Model

 • Used for layout• You can think of HTML elements as

boxes.

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.

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 */

Display

Inline : Stays on one line

Block :  Will form a block, similarly to a box.

            <div id="blue-container"> ... </div>

            #blue-container { display: block; }

Position

• fixed • absolute • relative  • static ( default)  • inherit

 #blue-container { position: absolute; top: 30px; left: 30px;} 

Alignment

.center { margin: 0 auto; width:780px; } .right { position:absolute; right:0px; width:300px; }

• top• right• left• bottom

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;

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.

Next Week...

• Introduction to Sinatra• Make a simple web server• Routes and Parameters