Designing Web Sites using HTML #1

CSU - DCE 0791 - Webmaster IDesign with HTML #1 - Fort Collins, CO

Copyright © XTR Systems, LLC

DesigningWeb Sites

using HTML#1

Instructor: Joseph DiVerdi, Ph.D.



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




• 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"




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



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



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



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



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



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



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



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?



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



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



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



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)

– <img src="anybrowser.gif">



Adding a Linked Image

• Add HTML to pages(s)– <a href="http://www.anybrowser.org">Use Any

Broswer</a>

• Add HTML to pages(s)– <a href="http://www.anybrowser.org"><img

src="anybrowser.gif"></a>

• Two lessions:– Link "off the server"

• This is only the beginning of a rich area of development

– Clickable image

Designing Web Sites using HTML #1

Documents

Transcript of Designing Web Sites using HTML #1