CNIT 132 Intermediate HTML and CSS

CRN 32485, Sec 501 (3 units)

Instructor: Hans Yip

Week	Date	Lecture Notes	Homeworks	Samples
1	1/15/2014	Course Overview Course Overview	Install SSH client Web Design (Chapter 1)	Access Hills Account
2	1/22/2014	HTML5 HTML 1 favicon tooltip	Murach's (Chapter 1, 2, 3) Web Design (Chapter 2) Homework #1	HTML5 sample HTML5 Template FTP
3	1/29/2014	Web Design and Deploy HTML 2 Publish a webpage Unix/Linux commands Unix/Linux Commands Unix/Linux Editor Commands	Murach's (chapter 17, 18) Web Design (Chapter 3, 12)
4	2/5/2014	CSS3 CSS 1 CSS 2 In class samples HTML5 CSS Pseudo Classes HTML5 CSS Rules HTML5 without shiv HTML5 with shiv HTML5 with JavaScript shiv HTML5 CSS3 colors HTML5 CSS3 Type Id Class HTML5 CSS3 Relational Selectors HTML5 CSS3 attribute selectors HTML5 CSS3 pseudo-class HTML5 CSS3 important rule HTML5 CSS1 CSS2 HTML5 CSS3 text shadow HTML5 CSS3 float HTML5 CSS3 border HTML5 CSS3 background HTML5 CSS3 floating sidebar HTML5 CSS3 2-column fixed width HTML5 CSS3 2-column liquid width HTML5 CSS3 2-column fixed aside liquid section HTML5 CSS3 3-Column fixed width	Murach's (chapter 4, 5, 6) Web Design (Chapter 4, 6) Homework #2	CSS1 CSS1 Basic CSS1 border Style CSS1 border width CSS1 border color CSS1 border CSS1 margin CSS1 padding CSS1 classification CSS1 display properties CSS1 list-type properties CSS1 font properties CSS1 text properties CSS2 css2 position css2 pseudo-class css2 pseudo-class menu css2 outline (IE & Netscape do not support Outline) CSS review
5	2/12/2014	Lists and Links	Murach's (chapter 7) Web Design (Chapter 7) Homework #3	Lists and Links Samples HTML5 CSS3 Lists HTML5 CSS3 Description List HTML5 CSS3 List Style HTML5 CSS3 Links HTML5 CSS3 Navigation HTML5 CSS3 navigation 2 HTML5 CSS3 Link to same page
6	2/19/2014	Images Graphics In Class Samples: Image alignment html5 figure element Image thumbnail Image rollover Text rollover Image Map	Murach's (chapter 8) Web Design (Chapter 5) Homework #4	Background Samples background 1 background 2 background 3 background 4 background 5
7	2/26/2014	Tables HTML tables In Class Samples: HTML table HTML CSS table HTML CSS header footer table HTML5 CSS3 table HTML5 CSS3 table wrap/nowrap	Murach's (chapter 9) Web Design (Chapter 9) Homework #5	HTML Table Samples HTML Tables 1 HTML Tables 2
8	3/5/2014	FORMs HTML Forms	Murach's (chapter 10) Web Design (Chapter 10) Homework #6	HTML Form sample HTML Form Data Validation HTML5 Data Validation HTML5 Data Validation with Regular Expression
*	3/12/2014	Mid-term
9	3/19/2014	Audio/Video HTML Multimedia Audio/Video samples Audio Samples Video Samples	Murach's (chapter 11) Web Design (Chapter 11) Homework #7	Multimedia Samples Audio Media Video Media MS Media Player Shockwave Flash Quick Time Player Google Reader Player Yahoo! video Player Embed YouTube Files Media Player + QuickTime
10	3/26/2014	DHTML DHTML	Homework #8	DHTML Samples CSS Style Attributes DHTML Visibility HTML CSS only HTML CSS DHTML Enlarge Text 1 Enlarge Image Moving Objects All DHTML Page Change bgcolor Text innerHTML OnMouseMove OnMouseMove2 Onload/OnUnload Text Tooltip Typewriter Message Enlarge Text Blinking Header Shaking Link DHTML Menu All Menus HTML/CSS Menu JavaScript Menu DHTML Menu Scrolling Text Scrolling Content Scrolling Content 2
*	4/2/2014	Spring Recess (No Class)
11	4/9/2014	JavaScript Introduction to JavaScript JavaScript for non-programmer JavaScript download The JavaScriptSource A1 JavaScripts Windyweb JavaScripts Wsabstract	Murach's (chapter 13) Homework #9	JavaScript Samples JavaScript Template JavaScript Form Editing JsvaScript others JsvaScript Edit Phone Calculator Car Payment Frame and JavaScript
12	4/16/2014	jQuery 1 jQuery jQuery sample jQuery Carousel jQuery Carousel Hans Modified version jQuery UI sample jQuery UI Accordion jQuery UI Auto Completion jQuery UI Pop up Dialog Box jQuery In Class samples Without jQuery With jQuery	Murach's (chapter 14)	Selecting Page Element by ID Selecting a Set of Elements Selecting Elements by Style Running Code When a Page is Ready Selecting the First of a Set of Elements Showing and Hiding Page Elements Selecting One of a Set of Elements Creating Visual Effects Creating New HTML Elements Looping over Elements in a Wrapped Set Reading Attribute Values Setting Attribute Values Rewriting Elements HTML Rewriting Elements Text Appending COntent to Elements Moving Page Elements Inserting Elements Editing the Value Attribute Binding an Event Handler to an Event Getting Mouse Coordinates Binding Event Handlers using Shortcuts Capturing Hover Events Change Background Color
13	4/23/2014	jQuery 2 jQuery Mobile View with your mobile device jQuery Mobile viewport jQuery Mobile One Web Page jQuery Mobile - mobile web site jQuery Mobile dialog transition jQuery Mobile buttons jQuery Mobile Navigation bar jQuery Mobile apply themes jQuery Mobile Collapsible blocks jQuery Mobile Accordion	Murach's (chapter 15) Web Design (Chapter 8) In Class samples HTML5 CSS3 without jQuery Mobile HTML5 CSS3 jQuery Mobile web site HTML5 CSS3 jQuery Mobile Collapsible HTML5 CSS3 jQuery Mobile Accordion	iPhone Apps with HTML, CSS, and JavaScript (jQuery) http://fog.ccsf.edu/~hyip/index.html iphone.css iphone.js.txt http://fog.ccsf.edu/~hyip/iphone_app/happi/index.html
14	4/30/2014	Introduction to CGI CGI Turorial CGI - Perl CGI Perl Perl Tutorial 1 Perl Tutorial 2 Perl Tutorial 3	Homework #10 In Class samples All CGI samples All CGI samples - ksh	CGI - Perl samples Perl form sample Perl script sample
15	5/7/2014	CGI - PHP PHP Tutorial 1 PHP Tutorial 2 Free PHP download PHP Junkyard Hotscripts	Contact Me web page Contact Me php	CGI Examples (all) CGI Samples Perl form Perl CGI program Unix Korn shell form Unix Korn Shell Script PHP form PHP Script
16	5/14/2014	Final Exam (Part 1)		Final Exam (Part 2) - due next week (There are two questions, only need to answer one.)
*	5/21/2014	Final Exam (Part 2) Final Project due today		All assignments due today

Contact me: hyip@ccsf.edu