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

CSU - DCE 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

CSU - DCE 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 Standard influenced by browser publishers through selective support and proprietary tags –Netscape "Navigator" and "Communicator" –Microsoft "Internet Explorer"

CSU - DCE 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.

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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?

CSU - DCE Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Design Strategies “Viewable With Any Browser” – "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

CSU - DCE Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Validation HTML Validation Services – – – – –HTML Validators on Yahoo All have free and for-fee testing facilities

CSU - DCE Webmaster I Design with HTML #1 - Fort Collins, CO Copyright © XTR Systems, LLC Validation Launch Browser Go to Supply your page's URL, e.g., – Select certain options, e.g., –Show source input –Show an outline of this document –Show parse tree

CSU - DCE 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) –

CSU - DCE 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