University of WashingtonComputing & Communications Standards-Based Web Publishing XHTML and CSS Rick Ells Senior Computer Specialist Computing & Communications.

Slides:



Advertisements
Similar presentations
Cascading Style Sheets
Advertisements

Cascading Style Sheets
Standards and Increasing Maintainability on Web- based Systems James Eaton SE4112/16/2006.
1 HTML Standards & Compliance. 2 Minimum Required HTML tags: (must go in this order!)
XHTML Basics.
1. Content – Collective term for all text, images, videos, etc. that you want to deliver to your audience. 2. Structure – How the content is placed on.
Benefits of Web Standards Daniel M. Frommelt University of Wisconsin - Platteville Copyright Daniel M. Frommelt, This work is the intellectual property.
XHTML & CSS 2 By Trevor Adams. Last week XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 3: XHTML Coding © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
History Leading to XHTML
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Tutorial 9 Working with XHTML
XHTML 16-Apr-17.
Creating Scalable, Flexible, Cross-browser Pages Rick Ells Communications Group UW Technnology.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Tutorial 9 Working with XHTML. XP Objectives Describe the history and theory of XHTML Understand the rules for creating valid XHTML documents Apply a.
Creating a Well-Formed Valid Document. 2 Objectives Introducing XHTML Creating a Well-Formed Document Creating a Valid Document Creating an XHTML Document.
Chapter 1 Understanding the Web Design Environment
Upgrading to XHTML DECO 3001 Tutorial 1 – Part 1 Presented by Ji Soo Yoon 19 February 2004 Slides adopted from
October 16, 2007HighEdWebDev2007 Single Source Website for Full Spectrum Access Rick Ells University of Washington
Introduction to XHTML Professor Stephen Kwan. 2 XHTML HTML StyleSheets XML CascadingStyleSheets(CSS) ExtensibleStylesheetLanguage(XSL) StructureFormatContent.
Introducing HTML & XHTML:. Goals  Understand hyperlinking  Understand how tags are formed and used.  Understand HTML as a markup language  Understand.
Creating and publishing accessible course materials Practical advise you can replicate.
Chapter 1 Variables in the Web Design Environment
Creating Web Pages with HTML
Creating a Simple Page: HTML Overview
School of Computing and Information Systems CS 371 Web Application Programming HTML The language of the Web.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Working with XHTML Creating a Well-Formed Valid Document.
XP Tutorial 9New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with XHTML Creating a Well-Formed Valid Document Tutorial 9.
XP The University of Akron Summit College Business Technology Department Computer Information Systems 2440: 140 Internet Tools Instructor: Enoch E. Damson.
Using Styles and Style Sheets for Design
Lesson 4: Using HTML5 Markup.  The distinguishing characteristics of HTML5 syntax  The new HTML5 sectioning elements  Adding support for HTML5 elements.
XHTML The Basics A brief history of HTML SGML (Standard Generalized Markup Language) Then came HTML Followed by the browser…and the great browser wars.
NetTech Solutions Working with Web Elements Lesson 6.
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.
Web page - A Web page is a simple text file that contains a set of HTML tags (code) that describe (to the browser) what should go on a web page. It may.
XHTML1 Building Document Structure Chapter 2. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML)
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
Introduction. Document Structure Overview  XML declaration (prolog)  Document type declaration  Root element (namespace)  Document header  Document.
3 XHTML.
XHTML Basics I450 Technology Seminar Copyright 2003, Matt Hottell.
Internet Web Publishing III. Intro to Cascading Style Sheets Patricia Roberts.
XP Tutorial 9 1 Working with XHTML. XP SGML 2 Standard Generalized Markup Language (SGML) A standard for specifying markup languages. Large, complex standard.
XHTML and CSS Session 1 Intro, (X)HTML, CSS, W3C, browsers, webpage, structure, tags, attributes, elements, web development process, basic XHTML elements.
XHTML By Trevor Adams. Topics Covered XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
ECA 228 Internet/Intranet Design I Intro to Markup.
1 Web Application Programming Presented by: Mehwish Shafiq.
1 Tutorial 11 Creating an XML Document Developing a Document for a Cooking Web Site.
Web Technologies Lecture 4 XML and XHTML. XML Extensible Markup Language Set of rules for encoding a document in a format readable – By humans, and –
Copyright © 2003 Pearson Education, Inc. Slide 1-1 Created by Cheryl M. Hughes The Web Wizard’s Guide to XHTML by Cheryl M. Hughes.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Basic Document Structure.
XP Tutorial 9New Perspectives on HTML and XHTML, Comprehensive 1 Working with XHTML Creating a Well-Formed Valid Document Tutorial 9.
Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible.
Cascading Style Sheets (CSS) EXPLORING COMPUTER SCIENCE – LESSON 3-5.
Introduction to XML Jussi Pohjolainen TAMK University of Applied Sciences.
CIS 228 The Internet 9/20/11 XHTML 1.0. “Quirks” Mode Today, all browsers support standards Compliant pages are displayed similarly There are multiple.
Tutorial 9 Working with XHTML. XP Objectives Describe the history and theory of XHTML Understand the rules for creating valid XHTML documents Apply a.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
Information Architecture 2 No Class Scheduled October 23 Primary Readings - Zeldman, J. (2003). Designing With Web Standards: Chapters 6-8Designing With.
Working with Cascading Style Sheets
Getting Started with CSS
CITA 330 Section 3 XHTML.
Tutorial 9 Working with XHTML
W3C Web standards and Recommendations
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

University of WashingtonComputing & Communications Standards-Based Web Publishing XHTML and CSS Rick Ells Senior Computer Specialist Computing & Communications University of Washington Seattle, Washington

University of WashingtonComputing & Communications Defining standards-based web design The World Wide Web Consortium (W3C), along with other groups and standards bodies, has established technologies for creating and interpreting web-based content. These technologies, which we call “web standards,” are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web. – The Web Standards ProjectW3CThe Web Standards Project

University of WashingtonComputing & Communications Which technologies? XHTML 1.0 XHTML 1.1 XML 1.0 CSS 1 CSS 2 CSS 3 DOM 1 DOM 2 ECMAScript 262 MathML 1.01 MathML 2.0 SVG 1.0 Web Standards Project Scope

University of WashingtonComputing & Communications A Little History

University of WashingtonComputing & Communications UW Projects UW Home site –Home Page: –UWIN: School of Public Health – C&C.Net –In development

University of WashingtonComputing & Communications Projects – UW Home UW Home Page and UWIN Page

University of WashingtonComputing & Communications Projects – UW Home Standard page templates Header Footer

University of WashingtonComputing & Communications Projects – UW Home HTML becomes almost trivial and much easier to get maintain CSS gets harder –Easier to reuse Flow is much better –Source can be in different order than on page More likely to be usable across wider range of browsers Frank Fujimoto Notes at

University of WashingtonComputing & Communications Projects – Public Health

University of WashingtonComputing & Communications Projects – Public Health Server load is sharply reduced –CSS is cached –HTML is much simpler DIVs compartmentalize content –DIVs can be in whatever order is needed XHTML/CSS avoids complicated tables hacks HTML much easier to work with Works decently with PDAs Dylan Wilbanks, webmaster

University of WashingtonComputing & Communications Projects – C&C.Net

University of WashingtonComputing & Communications Projects – C&C.Net Working with MS Visual Studio.Net 2003 –Authors already working in VS.Net2003 HTML 4.01 (IE 5.0 target schema) Author contributions are simple HTML, just drop in template Design still in flux, easy to change Authors tend to use external tools to work with HTML Rick Ells, webmaster

University of WashingtonComputing & Communications Converting to XHTML and CSS Proper DOCTYPE and namespace Declare your content type Write all tags in lowercase Quote all attribute values All attributes require values Close all tags Close “empty” tags with a space and a dash No double dashes within a comment Encode all < and & characters

University of WashingtonComputing & Communications Converting to XHTML and CSS Use the HTML logical model –The elements are based on a conceptual model of parts of a document –Work with the model elements, using as their conceptual role implies –Build quality content and content structure

University of WashingtonComputing & Communications Converting to XHTML and CSS

University of WashingtonComputing & Communications Converting to XHTML and CSS

University of WashingtonComputing & Communications Converting to XHTML and CSS Separate presentation from content and content structure –Use tables for tabling Minimize use of tables for layout –Control presentation as much as possible with CSS

University of WashingtonComputing & Communications Benefits Separation of roles –Content developer –Presentation designer Compatibility and portability of content, presentation –Content can be moved to new location, takes on appropriate look and feel Consistency in methods –Troubleshooting –Handing off projects to others –Lending a hand on others projects

University of WashingtonComputing & Communications Benefits Clear standards to test against –Powerful tools available to quickly get things up to standard More plastic –Can quickly rearrange presentation –Can show portions of content, or not, depending on need

University of WashingtonComputing & Communications Benefits Device independence –Accessibility User agents like well-formed validated code Easier to do appropriate alternative and labelling attributes –Foundation for future directions PDAs Cell phones Content Management Systems

University of WashingtonComputing & Communications Benefits Reduced load on server Site portability –Moving to a new OS is much less of a problem

University of WashingtonComputing & Communications Challenges A Few People Managing Many Pages Many People Managing a Few Pages

University of WashingtonComputing & Communications Challenges Skill inertia –Not ready to relearn HTML Web management balkanization –Top down standards setting not possible in many organizations

University of WashingtonComputing & Communications Challenges Non-standards compliant tools –MS Word –Old editors New tools with old methods –.Net Web Solution

University of WashingtonComputing & Communications Challenges Code mass –Tidy is awesome for fast cleanup –Tidy has a nice "convert to styles" feature –XHTML belongs to XML family Lots of powerful tools available, if it is well- formed

University of WashingtonComputing & Communications Challenges Conceptual confusion –CSS Box Model Cascading interactions Block and inline Floating –Hierarchical structure of HTML –Changes in going from HTML to standards HTML/CSS Converting presentation attributes to CSS styles –Changes in going from HTML to XHTML Transitional or Strict?

University of WashingtonComputing & Communications Challenges Inconsistencies among browsers –Width supposed to define width of element’s content area –Incomplete CSS2 support –The Little Shop of CSS Horrors – –CSS Bugs and Workarounds –

University of WashingtonComputing & Communications Getting Started Use logical markup Use styles instead of presentation attributes Experiment with style sheets, both in the page head and in separate files Use HTML-Kit or other editor that has a standards mode and that validates

University of WashingtonComputing & Communications Resources Standards –W3C – –Web Standards -

University of WashingtonComputing & Communications Resources Tools –Tidy – –W3C Validators HTML Validator – CSS Validator – –TopStyle – –StyleMaster – –HTML-Kit –

University of WashingtonComputing & Communications Resources Standards-based sites –New York Public Libraries Style GuideNew York Public Libraries Style Guide –MSNMSN –WiredWired –School of Public HealthSchool of Public Health

University of WashingtonComputing & Communications Resources WebDev Share PresentationsWebDev Share –Implementing Standards-Based Web Design Support Richard B. Ells, University of WashingtonImplementing Standards-Based Web Design Support –CSS How to for Beginners: Creating and using effective style sheets Michael Adams, University of Northern ColoradoCSS How to for Beginners: Creating and using effective style sheets –Cascading Style Sheets Paul Alford, Indiana UniversityCascading Style Sheets –CSS Benefits of Web Standards Daniel Frommelt & Sean Sieg, University of Wisconsin - PlattevilleCSS Benefits of Web Standards