1 / 20

Introduction to Web Design Lecture #1: Introduction to HTML/CSS

Introduction to Web Design Lecture #1: Introduction to HTML/CSS. Jont é Craighead & Cathy Zhang January 6th, 2009 Student Information Processing Board (SIPB). Overview. Editors HTML document structure CSS Web browsers. Text Editors. jEdit Notepad++ (Windows only)

cameron-adams
Download Presentation

Introduction to Web Design Lecture #1: Introduction to HTML/CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Web DesignLecture #1: Introduction to HTML/CSS • Jonté Craighead & Cathy Zhang • January 6th, 2009 • Student Information Processing Board (SIPB)

  2. Overview • Editors • HTML document structure • CSS • Web browsers

  3. Text Editors • jEdit • Notepad++ (Windows only) • Kate (Windows: partial) • gedit • Emacs • Vim

  4. Text Editors: jEdit

  5. Text Editors: Notepad++

  6. Text Editors: Kate

  7. Text Editors: gedit

  8. Text Editors: Emacs

  9. Text Editors: Vim

  10. WYSIWYG Editors • Dreamweaver • Microsoft Frontpage

  11. WYSIWYG Editors: Dreamweaver

  12. WYSIWYG Editors: Frontpage

  13. WYSIWYG Editors: Frontpage

  14. WYSIWYG Editors: Frontpage • Example: • sipb.mit.edu/iap/webdesign/examples/fir.html

  15. HTML Document Structure • Example: • sipb.mit.edu/iap/webdesign/examples/wmda.html

  16. HTML Document Structure • Reference: • http://www.w3schools.com/tags/default.asp

  17. 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

  18. HTML Document Structure • Document Types • .html/.htm • .xhtml • .php • .asp/.aspx • .do • .jsp/.jspx • .ssi • .cgi/.fcgi

  19. 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

  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

More Related