1. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Designing Web Sites using HTML #1 Instructor: Joseph DiVerdi, Ph.D.

2. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Hyper Text Markup Language A language for creating Web documents Defines syntax and placement of special embedded directions –tags –Not displayed –Instruct Browser how to render document –Create links to other documents Hypertext

3. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Hyper Text Markup Language HTML and all other Web-related standards –Under the authority of the W3C World Wide Web Consortium http://ww.w3c.org Standard influenced by browser publishers through selective support and proprietary tags –Netscape "Navigator" and "Communicator" –Microsoft "Internet Explorer"

4. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Hyper Text Markup Language HTML is not a design language HTML is a markup language HTML identifies the structure of a document The viewer's browser has instructions on how to display elements A given element might be displayed differently on different viewers' computers It is important to understand HTML so that designs can take its strengths and limitations into account.

5. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Development Tools Text-based editors Word processors or editors –Which know nothing about HTML tags –Only understand text editing Designer must enter all tags explicitly Word, NotePad, SimpleText, vi

6. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Development Tools HTML editors Word processors or editors –Which know something about HTML tags –Knowledge varies among programs –Supply tags automatically –Include HTML checkers Designer can add, modify, and delete tags directly HTML-Kit, BBEdit, Communicator, HomeSite

7. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Development Tools WYSIWYG editors Specialized Web page editors –Know plenty about HTML tags –Supply tags automatically Designer interacts with Web page canvases and objects using graphical interface Elements are placed and positioned directly on a page Program creates the necessary tags FrontPage, PageMill, Dreamweaver

8. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Development Tools Each has strengths and weaknesses In any case designer must learn HTML –WYSIWYGs create extra tags, proprietary tags, bad HTML... –Designer must make tweaks manually Considerations –price –speed to product –degree of control –learning curve Use HTML editors for this class

9. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Sooooooo Many Browsers... Windows and Macintosh Versions Netscape Navigator –1.0, 2.0, 3.0, 4.0, 6.0 (beta) Internet Explorer –1.0, 2.0, 3.0, 4.0, 5.0 AOL –2.7, 3.0 (Win95), 3.0 (Win3.0), 3.0 (Mac) Mosaic –1.0, 2.0, 3.0, 3.0b4

10. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Design Strategies Lowest Common Denominator –Use really old standard which “everyone” can use Current Approved Version –Use newest approved standard –Tell laggards to upgrade Previous Approved Version –Use one step older than approved standard Degrade Gracefully –Use (sophisticated ) techniques to hide newer features from older browsers

11. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Design Strategies Different Version Areas –Setup different areas for different browsers Detect Browser Type and Version –Deliver different pages for each one Favor a Specific Browser –Take sides and to hell with the rest of them Which is the best strategy?

12. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Design Strategies “Viewable With Any Browser” –http://www.anybrowser.org/campaign/ "Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days before the Web when you had very little chance of reading a document written on another computer, another word processor, or another network." –Tim Berners-Lee in Technology Review, July 1996

13. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Validation HTML Validation Services –http://validator.w3.org –http://www.websitegarage.com –http://www.netmechanic.com –http://www2.imagiware.com/RxHTML/ –HTML Validators on Yahoo All have free and for-fee testing facilities

14. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Validation Launch Browser Go to http://validator.w3.org Supply your page's URL, e.g., –http://linus.ulltra.com/~diverdi Select certain options, e.g., –Show source input –Show an outline of this document –Show parse tree

15. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Adding an Image Get the anybrowser image from XTR's site Get the W4 checked image from W3C's site Don't try to open them with a text editor Upload files to server Check file permissions Add HTML to page(s) –

16. CSU - DCE 0791 - Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Adding a Linked Image Add HTML to pages(s) – Use Any Broswer Add HTML to pages(s) – Two lessions: –Link "off the server" This is only the beginning of a rich area of development –Clickable image