Introduction to Web Design - Massachusetts Institute of Technology
Transcript of Introduction to Web Design - Massachusetts Institute of Technology
![Page 1: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/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)
1
![Page 2: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/2.jpg)
Overview Editors
HTML document structure
CSS
Web browsers
2
![Page 3: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/3.jpg)
Text Editors jEdit Notepad++ (Windows only)
Kate (Windows: partial)
gedit Emacs Vim
3
![Page 4: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/4.jpg)
Text Editors: jEdit
4
![Page 5: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/5.jpg)
Text Editors: Notepad++
5
![Page 6: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/6.jpg)
Text Editors: Kate
6
![Page 7: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/7.jpg)
Text Editors: gedit
7
![Page 8: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/8.jpg)
Text Editors: Emacs
8
![Page 9: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/9.jpg)
Text Editors: Vim
9
![Page 10: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/10.jpg)
WYSIWYG Editors Dreamweaver
Microsoft Frontpage
10
![Page 11: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/11.jpg)
WYSIWYG Editors: Dreamweaver
11
![Page 12: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/12.jpg)
WYSIWYG Editors: Frontpage
12
![Page 13: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/13.jpg)
WYSIWYG Editors: Frontpage
13
![Page 14: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/14.jpg)
WYSIWYG Editors: Frontpage
Example:
sipb.mit.edu/iap/webdesign/examples/fir.html
14
![Page 15: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/15.jpg)
HTML Document Structure
Example:
sipb.mit.edu/iap/webdesign/examples/wmda.html
15
![Page 16: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/16.jpg)
HTML Document Structure
Reference:
http://www.w3schools.com/tags/default.asp
16
![Page 17: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/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
17
![Page 18: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/18.jpg)
HTML Document Structure Document Types
− .html/.htm− .xhtml− .php− .asp/.aspx− .do− .jsp/.jspx− .ssi− .cgi/.fcgi
18
![Page 19: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/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
19
![Page 20: Introduction to Web Design - Massachusetts Institute of Technology](https://reader035.fdocuments.in/reader035/viewer/2022071602/613d7689736caf36b75da02f/html5/thumbnails/20.jpg)
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
20