Web Standards Coding

• Benefits of Web Standards Coding– Variety of user agents• Same marked up content can be read by browser,

smartphones, screen readers etc.

– Performance• File size is smaller – exclude presentational mark-up

– Cross Browser Compatibility– Separation of Content and Presentation

From Stylin’ with CSS by Charles Wyke-Smith Second Edition

Web Standards Coding

• Benefits of Web Standards Coding (cont)– Build more fluid pages• Easier to change number of list items etc.

– Validation tools• Use HTML, CSS, XHTML validators

– Streamline production• Allow teams of people to work on project• Each team member knows rules for content and design

– Accessibility

Standards Organizations

• List of Standards Organizations– http://www.webstandards.org/learn/external/orgs/

– The Web Standards Project– http://www.webstandards.org/learn/articles• Founded in 1998, The Web Standards Project (WaSP) fights

for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web. We work with browser companies, authoring tool makers, and our peers to deliver the true power of standards to this medium.

Standards Organizations• W3C - http://www.webstandards.org/learn/faq/#p21

– The World Wide Web Consortium (W3C) is an international industry consortium dedicated to “leading the Web to its full potential“. It’s led by Tim Berners-Lee, the inventor of the Web. Founded in 1994, the W3C has more than 450 member organizations – including Microsoft, America Online (parent company of Netscape Communications), Apple Inc., Adobe, Sun Microsystems, and a variety of other hardware and software manufacturers, content providers, academic institutions, and telecommunications companies. The Consortium is hosted by three research institutions – MIT in the US, INRIA in Europe, and Keio University in Japan.

Standards Organizations• What are the W3C Standards related to web design ?

-- HTML 5 - – HyperText Markup Language–HTML 4.01 – HyperText Markup Language–XML 1.0 – Extensible Markup Language–XHTML 1.0, 1.1, and Modularization–CSS – Cascading Style Sheets–DOM 1 – Document Object Model Level 1

• W3C HTML Working Group–http://www.w3.org/html/wg/–HTML 5

• http://dev.w3.org/html5/spec/Overview.html

Standards Organizations

• The European Computer Manufacturers Association (ECMA) is an organization officially founded in 1961 in order to meet the need for standardizing computer operational formats, including programming languages and input/output codes.– ECMAScript (standardized JavaScript)

HTML Tutorials• History of HTML

– http://www.w3.org/People/Raggett/book4/ch02.html– http://www.yourhtmlsource.com/starthere/historyofhtml.html

• HTML Tutorial– http://htmldog.com/guides/htmlbeginner/

• HTML Templates– http://www.webmonkey.com/templates/ -document structure– http://www.webstandards.org/learn/reference/templates/ - doctypes

– HTML 5 Overview• http://www.webmonkey.com/tutorial/Building_Web_Pages_With_HTML_5• http://www.alistapart.com/articles/previewofhtml5

• HTML Simulator– Use HTML simulator to see implementation:– http://www.practiceboard.com/

Doctypes Templates• Templates for Doctypes– http://www.webstandards.org/learn/reference/templates

/• HTML 4.01 Templates• HTML 4.01 Transitional Document• HTML 4.01 Strict Document• HTML 4.01 Frameset• XHTML 1.0 and 1.1 Templates• XHTML 1.0 Transitional Document• XHTML 1.0 Strict Document• XHTML 1.0 Frameset• XHTML 1.1 Document

Coding Environment• Text Editor – Notepad, Notepad++ or your choice• Dreamweaver, Photoshop and Adobe Products• Firefox and add-ons– Firefox

http://www.mozilla.com/en-US/firefox/personal.html– Firebug http://getfirebug.com/– FireFTP http://fireftp.mozdev.org/– SourceChart

https://addons.mozilla.org/en-US/firefox/addon/655/– Web Developer

https://addons.mozilla.org/en-US/firefox/addon/60/

HTML/CSS Validators

• Run your code through the W3C validator.– Subjective

• Pay attention to the errors but, it is not necessary to correct all of them

• Be sensible: if your page has over 100 errors then it is not a good page

• If your page has six errors and you know why they are occurring then it may be acceptable

• http://validator.w3.org/

Absolute/Relative Linking• Absolute and Relative Linking

– http://www.motive.co.nz/glossary/linking.php– Absolute

• Uses a fully qualified URL:– http://www.sis.pitt.edu/~perkoski/is1052/images/dog.jpg– Ok, don’t click there is no dog this is just an example.

– Relative• The destination href is relative to the source document

– If source document is in 1052 directory (folder)– href=“/images/dog.jpg”

• Can move up directories by using .. So, if source document lives in images then files living in is1052 can be referenced by href=“../filename”

– Use relative linking for documents on your machine and absolute linking for documents outside

Resources

• Comprehensive List of resources– http://www.alvit.de/handbook/• Massive list of web development tools

– Cheat sheets are particularly helpful• http://www.addedbytes.com/cheat-sheets/css-cheat-

sheet/

Homeworks• All homeworks will be posted on your webpage for the class at

www.pitt.edu/~username/1052– Create a file called index.html and place it in this directory

• All homeworks are due in one week at the start of the class.• Your homework page should be:

– Neat– Well organized– Easily understood– Have your NAME

• All homeworks will reference the homework number and possibly title.

• Example: www.sis.pitt.edu/~perkoski/is1052/Homeworks/template.html