Lecture 2 - Comm Lab: Web @ ITP

Communications Lab :: Web Lecture 2: HTML and Forms

Don't Forget! ,[object Object]

HTML Pages ,[object Object],[object Object]

Today's Class ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Forms ,[object Object],[object Object],[object Object],[object Object],[object Object]

Forms - Input type text ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Forms - Labels ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Forms - Input type radio ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Forms - Input type checkbox ,[object Object],[object Object],[object Object],[object Object],[object Object]

Forms - Input submit button ,[object Object],[object Object],[object Object]

Forms - All together ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Forms: Demo! Let's make some rectangles.

Why doesn't it do anything? We need the server side!

Client and Server ,[object Object],[object Object],[object Object]

Why do we need the server? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Method: GET and POST ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

DIV and Span ,[object Object],[object Object],[object Object],[object Object]

DIV and Span ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS ,[object Object],[object Object],[object Object]

CSS ,[object Object],[object Object]

How do I add CSS? ,[object Object],[object Object],[object Object],[object Object],[object Object]

Inline CSS ,[object Object],[object Object]

Embedded CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

External CSS ,[object Object],[object Object],[object Object],[object Object]

CSS Selectors, Properties and Values ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS Selectors ,[object Object],[object Object],[object Object],[object Object]

HTML Tag Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Class and ID Attributes ,[object Object],[object Object],[object Object],[object Object]

IDs and Classes in CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Position Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Position Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Grouping Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Pseudo-classes ,[object Object],[object Object],[object Object],[object Object]

Properties ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Properties and Their Values ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Font Color ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Fonts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Font Shorthand ,[object Object],[object Object],[object Object]

Lengths, Units and Percentages ,[object Object],[object Object],[object Object],[object Object],[object Object]

Background ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Dimensions ,[object Object],[object Object],[object Object],[object Object]

Border ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Trying out colors and styles ,[object Object],[object Object],[object Object]

How Does the Style Cascade ? ,[object Object],[object Object],[object Object],[object Object]

How Does the Style Cascade ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Inheritance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Box Model ,[object Object],[object Object],[object Object]

Box Model ,[object Object],[object Object],[object Object],[object Object]

Margin and Padding ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Display ,[object Object],[object Object],[object Object],[object Object]

Position ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Alignment ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Floating ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Assignment for Next Week ,[object Object],[object Object],[object Object]

Next Week... ,[object Object],[object Object],[object Object]

Lecture 2 - Comm Lab: Web @ ITP

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Viewers also liked

Viewers also liked (8)

Similar to Lecture 2 - Comm Lab: Web @ ITP

Similar to Lecture 2 - Comm Lab: Web @ ITP (20)

Recently uploaded

Recently uploaded (20)

Lecture 2 - Comm Lab: Web @ ITP