introduction to web design lecture #1: introduction to html/css jont é craighead & cathy zhang...
DESCRIPTION
Text Editors jEdit Notepad++ (Windows only) Kate (Windows: partial) gedit Emacs VimTRANSCRIPT
![Page 1: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/1.jpg)
Introduction to Web DesignLecture #1: Introduction to HTML/CSS
Jonté Craighead & Cathy Zhang
January 6th, 2009
Student Information Processing Board (SIPB)
![Page 2: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/2.jpg)
Overview Editors
HTML document structure
CSS
Web browsers
![Page 3: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/3.jpg)
Text Editors jEdit Notepad++ (Windows only)
Kate (Windows: partial)
gedit Emacs Vim
![Page 4: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/4.jpg)
Text Editors: jEdit
![Page 5: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/5.jpg)
Text Editors: Notepad++
![Page 6: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/6.jpg)
Text Editors: Kate
![Page 7: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/7.jpg)
Text Editors: gedit
![Page 8: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/8.jpg)
Text Editors: Emacs
![Page 9: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/9.jpg)
Text Editors: Vim
![Page 10: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/10.jpg)
WYSIWYG Editors Dreamweaver
Microsoft Frontpage
![Page 11: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/11.jpg)
WYSIWYG Editors: Dreamweaver
![Page 12: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/12.jpg)
WYSIWYG Editors: Frontpage
![Page 13: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/13.jpg)
WYSIWYG Editors: Frontpage
![Page 14: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/14.jpg)
WYSIWYG Editors: Frontpage
Example:
sipb.mit.edu/iap/webdesign/examples/fir.html
![Page 15: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/15.jpg)
HTML Document Structure
Example:
sipb.mit.edu/iap/webdesign/examples/wmda.html
![Page 16: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/16.jpg)
HTML Document Structure
Reference:
http://www.w3schools.com/tags/default.asp
![Page 17: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/17.jpg)
HTML Document Structure Tag/element nesting Attributes Indentation Use elements for their intended purpose
Tables for data, not layout Deprecated elements (new HTML tags or CSS) HTML comments
![Page 18: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/18.jpg)
HTML Document Structure Document Types
.html/.htm .xhtml .php .asp/.aspx .do .jsp/.jspx .ssi .cgi/.fcgi
![Page 19: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/19.jpg)
XHTML vs. HTML All tags must be in lower case All documents must have a doctype All documents must be properly formed All tags must be closed All attributes must be added properly The name attribute has changed Attributes cannot be shortened All tags must be properly nested
![Page 20: Introduction to Web Design Lecture #1: Introduction to HTML/CSS Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB)](https://reader036.vdocuments.mx/reader036/viewer/2022062302/5a4d1b297f8b9ab059998531/html5/thumbnails/20.jpg)
20
Other SIPB Classes
• Caffeinated Crash Course in PHP• Jan 12 07:30pm-10:30pm, 4-237
• Building Websites for Mobile Devices• Jan 19 07:30pm-09:30pm, 4-237
20