1 / 16

Designing Web Sites using HTML #1

Designing Web 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

hallam
Download Presentation

Designing Web Sites using HTML #1

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. Designing Web Sites using HTML #1 Instructor: Joseph DiVerdi, Ph.D.

  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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">

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

More Related