Download Module 6 Web Standards

ES 101 – Module 6
Web Standards
Gill Murrey
Analyst/Programmer
Division of Student Life
http://www.vanderbilt.edu/publicaffairs/webcomm/history/home1.htm
Web Browser Timeline
 First
browser for popular use was NCSA
Mosaic in March 1993.
 Graphics and forms introduced by NCSA
Mosaic 2.0 in January 1994.
 Netscape 1 appeared in December 1994.
 Internet Explorer 1 released in August
1995.
 http://www.blooberry.com/indexdot/history/
browsers.htm
The Browser Wars
 Web
standards came about because of a
battle for world domination -- called the
“browser wars.”
 The war started in 1997, though active
combat ended in early 2000.
 The combatants were Netscape Navigator
4 and Internet Explorer 4
The Browser Wars
 Netscape
and Internet Explorer both
wanted to be the “killer app” of the World
Wide Web.
 The battle was one to capture the greatest
market share of browser users.
 Netscape and IE devised one proprietary
feature after another
 http://gtresearchnews.gatech.edu/newsrel
ease/BROWSERS.html
Netscape vs. IE

Different document object models
 Differences in handling of HTML layout and
whitespace
 Different support for Cascading Style Sheets



Netscape was the first browser to support CSS, with
JavaScript-Based Style Sheets (JSSS)
When the W3C supported CSS, Netscape had to
scramble to switch from JSSS to CSS.
1 guy had 2 weeks to make the switch from JSSS to
CSS -- he got about 80% of the job done.
The Battle’s Fallout
 Web
developers had to use coding hacks
to have pages display correctly in
Netscape and IE
 Coders created different CSS documents
for each browser, and then used
JavaScript “sniffers” to detect which
browser was accessing the site.
 As browsers added more features, more
hacks and workarounds had to be added
Something Had to Give
 Code
was bloated and pages were
breaking
 Web designers spent hours coding
workarounds for specific browsers
 Visual editors like Dreamweaver and
FrontPage created code with a soup of
tricks that only worked in the browsers that
existed then.
 http://www.alistapart.com/articles/tohell/
Light at the End of the Tunnel
 Internet
Explorer 5.0 for Macintosh was
the first browser to try and correct the
browser wars problem


Implemented a standards-compliant rendering
engine AND an old, bugwards-compatible
rendering engine
Let the web developer choose which
rendering mode the browser would use to
display the document (with a doctype)
Are the Browser Wars Over?
 Netscape
6 and IE 6 for Windows adopted
a standards-compliant rendering engine
 Opera and Safari also support standards
 Sept. 2004 browser stats from the W3C:




69.5% IE 6
16.6% Mozilla
2.4% Opera and 1.4% Netscape 7
http://www.guardian.co.uk/online/story/0,3605,
1260994,00.html
Definition of Web Standards:
 Web
standards are a common base -- a
foundation for the World Wide Web so that
browsers and other software understand
the same basic vocabulary.
• -- Eric Meyer
The Actual Standards
 Structural
Languages: XHTML, XML
 Presentation Languages: Cascading Style
Sheets (CSS)
 Object Models: Document Object Model
(DOM)
 Scripting Languages: ECMAScript
(standard version of JavaScript)
 Additional Presentation Languages: Math
ML and Scalable Vector Graphics (SVG)
Benefits of Web Standards
 Ensures
the long-term usefulness of any
web document
 Simplifies coding, and makes it easier for
others to maintain your sites
 Sites are accessible to more people and
more types of Internet devices
 Your web document will function correctly
as browsers evolve and new devices
come to market.
A Web Standards Site Has:
 Semantically
correct markup that uses
HTML elements for their given purpose



For headings use code starting with <h1>
For paragraphs of text, use <p>
For lists, use list elements <ul><ol><dl>
A Web Standards Site Has:
 Valid
code that is checked against a formal
standard like the W3C’s Validator:
http://jigsaw.w3.org/css-validator/
 Peabody College’s newly launched
website coded to web standards
 http://peabody.vanderbilt.edu/
Tips to Create Valid Code
 Start
with the correct doctype
 Use a character set
 Close HTML elements
 Use “alt” tags for images
More Info on Doctypes
 The
document type declaration (doctype)
tells the validator which version of HTML
or XHTML you’re using.
 HTML 4.01 specifies 3 DTDs:



HTML 4.01 Strict DTD (no deprecated
elements and attributes included)
HTML 4.01 Transitional DTD (includes
deprecated elements and attributes)
HTML 4.01 Frameset DTD (like transitional
DTD but includes frames as well)
Doctype Modes
 Choose
the right doctype for your web
pages.
 http://www.alistapart.com/articles/doctype/
 Many of the major browsers have two
main layout modes:


Standards Mode: the layout engine attempts
to comply with W3C recommendations
Quirks Mode: the layout engine tries to mimic
old browsers
Example of Standards/Quirks
Rendered in standards mode
Rendered in quirks mode
Use a Character Set

Character sets determine how the bytes that
represent the text of your HTML document are
translated to readable characters.
 The document character set for HTML 4.0 is
Unicode. The code goes in the <head> section
of your HTML document.
 Example: <meta http-equiv=“Content-Type”
content=“text/html;charset=utf-8”>
 http://www.w3.org/International/O-charset
Close HTML Elements
 If
you open a <p> tag, close it with a </p>
tag when the paragraph ends.
 If you open an <li> tag, close it when that
bullet point ends by using </li>
 With HTML, you don’t close “empty” tags
like <br> and <hr> tags or <img>
 With XHTML, do the following for empty
tags:
<img src=“somepic.jpg” /> <br /> <hr />
Use “alt” Tags for Images
 Your
HTML won’t validate unless you have
an alt tag for every image
 The alt tag means “alternative description”
 Used for people with graphics turned off,
and those with visual impairments
 <img src=“gee.jpg” alt=“photo of
Chancellor Gordon Gee in front of Kirkland
Hall” />
HTML and XHTML
 HTML is
an evolving language, and new
tags are added all the time.
 The World Wide Web Consortium (W3C)
coordinates the efforts of standardizing
HTML.
 The W3C now calls the language XHTML.
 XHTML stands for Extensible HyperText
Markup Language
Versions of XHTML
Used when XHTML doesn’t have
any formatting tags like <font> and CSS
controls all presentation aspects.
 Transitional. Allows presentation tags.
 Frameset. Used for documents that
contain frames.
 Strict.
Why the Move to XHTML?

Put very simply, XHTML is perfectly coded
HTML
 Historically, HTML coding has been full of errors.
Browsers have repaired these errors -- but in
different ways. This means one web page can
look different in different browsers.
 Browsers are now moving to standardscompliant code -- where one web page will
display the same in any browser.
Converting HTML to XHTML
 Use
HTML Tidy to automatically transform
HTML to XHTML
 http://tidy.sourceforge.net/
 Or convert manually:


http://www.websitetips.com/info/xhtml/basics.s
html
http://www22.brinkster.com/beeandnee/techz
one/articles/htmltoxhtml.asp
Basics of HTML to XHTML
 All
markup is lowercase <p> not <P>
 Every tag has corresponding end tag
<p></p>. Empty tags, those without
corresponding end tags, are treated like
this: <br /> <hr />
 Every attribute must be in double quotes.
 Nesting must be correct


<p><strong>Text</p></strong> incorrect
<p><strong>Text</strong></p> correct
CSS and Web Standards
 Cascading
Style Sheets (CSS) lets you
separate presentation from HTML code.
With CSS, sites are:




More accessible to screen, print, readers
Easier to make site-wide changes -- change
the code in 1 CSS file, and thousands of web
pages are instantly changed.
Smaller in file size, and quicker to download
Leaner in code, and easier to code
Visual Examples of CSS
 http://www.maxdesign.com.au/presentatio
n/benefits/index08.htm
 http://www.csszengarden.com/
 http://www.microsoft.com/typography/css/g
allery/extract1.htm
How Do You Learn CSS?

HTML Writer’s Guild classes


http://www.hwg.org
Online tutorials



http://www.htmlhelp.com/reference/css/quicktutorial.html
http://www.w3.org/MarkUp/Guide/Style
http://webmonkey.wired.com/webmonkey/authoring/st
ylesheets/tutorials/tutorial1.html
Font Sizes with CSS
 This
is one tricky wicket!
 http://www.thenoodleincident.com/tutorials/
box_lesson/font/browser.html
Steps to Achieve Web
Standards
 Make



basic changes first:
Add a correct doctype to all pages
Add alt text to all images
Add meaningful page titles in your HTML file
Steps to Achieve Web
Standards
 Intermediate



changes:
Validate your code and correct errors
Use semantically correct code. This means
use a heading element for a heading
(<h1><h2><h3>). If you’re quoting a few lines,
use a <blockquote> element. These elements
provide meaning to your content, making
them semantically correct.
Replace font and color tags with CSS
Steps to Achieve Web
Standards
 Advanced


changes:
Use CSS for basic positioning (padding and
margins), but use overall tables for layout
Move toward full positioning with CSS, and
don’t use any tables for layout
Visual Editors
 Macromedia
is working with the Web
Standards Project to create a standardscompliant visual editor.
 Dreamweaver MX, released in May 2002,
incorporates many standards-compliant
and accessibility features.
 Dreamweaver MX produces valid markup
“out of the box” - inserting valid DTDs for
either XHTML or HTML versions.
Gotchas with Web Standards
 People
still use old browsers.
 Even with new browsers, there are
compatibility issues
 Vendors don’t want to abandon proprietary
implementations of nonstandard code
 There is a learning curve
Resources
 http://www.zeldman.com
 http://webstandards.org
 http://webstandardsgroup.org
 http://www.nypl.org/styleguide