9/9/15

To Lecture Notes

IT 231 -- 9/9/15

Course Prerequisites

IT231 and IT212 (or equivalent classes)
You should be familiar with HTML, CSS, and Ruby, and Ruby on Rails from IT 231.

Course Documents

Announcements, Table of Contents, Professor Information, Syllabus, Lecture Notes, Documents, Exam Info, Projects, Submit Homework

Course Overview

Topics: HTML5, CSS, ActiveRecord, Fat Models, Migrations, Routing, Authentication, Testing, AJAX, Deployment.
Projects: Create mini Instagram application, Final Project is a specialized Social Media and/or E-commerce website built using the tools and concepts covered in this class. You can work in groups of one or two on the Final Project.
Exam: There will be an early final exam two weeks befor the end of the quarter (no midterm). There will also be quizzes, which count for 10% of the course score: 5% for attendence, and 5% for content mastery.

Review Questions

List the HTML tags that you know. Ans: Here are some common tags.

html 
head title style link script meta
body h1 ... h7 img p div span 
br ol ul li 
table tr td th a img form input
textarea select
strong em pre sub sup

How does HTML5 differ from older versions of HTML?
Ans: A matching closing tag is no longer required for an HTML tag.
Combination start/end tags are no longer required.
Quotes are not needed for attribute values.
Tag names and attribute names are case insensitive.
New simpler validation tag:
```
<!DOCTYPE html>
```
The validation tag is important. It determines how the HTML page is rendered in the browser.

These older HTML tags are depreciated in HTML5:
```
font  center  frame  big  applet  s  u  type  width
These attributes are depreciated: align
bgcolor border cellpadding cellspacing type width (for table)
```
Why are CSS files called cascading style sheets?
Ans: Because multiple styles and stylesheets can be applied consecutively to a document. If more than one style is relevant: (a) the last style applies (b) the most specific style applies , e.g.: ( <p> is more specific than <body>).

List the CSS properties that you know. Ans:

font-family  font-size  font-weight  font-style color
background-color  text-indent  text-align vertical-align  
text-decoration  border  margin  padding width height
border-radius (replaces -moz-border-radius for Mozilla and
-webkit-border-radius for Chrome, Safari).  Abbreviations
are available for some properties, for example:
background {

List the HTML special symbols that you know.
Ans: Some of the most common special symbols are   < > &
Some web designers think that these special symbols are necessary for professional web pages:

Name HTML Appearence

Left Double Quote “ “

Right Double Quote ” ”

Left Single Quote ‘ ‘

Em Dash — —

En Dash – –

Here are links to tables of HTML special symbols:

www.chami.com/tips/internet/050798i.html
www.w3schools.com/tags/ref_entities.asp
www.w3schools.com/tags/ref_symbols.asp
Create a Rails project named TestStyle with a controller named Test and a view named page1. On page1, show a single paragraph that contains "This is a test." Set the font family to Verdana, the the font size to 300% larger than normal, and the font color to maroon. Use the usual three methods of setting the style: (a) inline style, (b) document-level style, and (c) external style.
Ans: See the Styles Example.

Name	HTML	Appearence
Left Double Quote	“	“
Right Double Quote	”	”
Left Single Quote	‘	‘
Em Dash	—	—
En Dash	–	–

Project 1

Look at Project 1.
Look at HTML Fonts and Extended HTML Colors for font and color suggestions.
Start finding the images and writing the image descriptions for your Project 1.