Prof. Jenna Spevack | Teaching Site

Web Design: AD550

COURSE CALENDAR | WEEK 02 CLASS OUTLINE | Homework

  1. OVERVIEW of WEEK 01
  2. What are Web Standards?
    • "Web standards are intended to be a common base...a foundation for the world wide web so that browsers and other software understand the same basic vocabulary" -- Eric Meyer
    • "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. Designing and building with these standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of Internet devices. Sites developed along these lines will continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market."-- Web Standards Project
  3. The actual Web Standards are called "The Standard 4":
    • Structural Language: Extensible Hypertext Markup Language (XHTML 1.0)
    • Presentational Language: Cascading Style Sheets (CSS Level 1 and 2)
    • Object Model: Document Object Model (DOM)
    • Scripting Language: ECMAScript 262 (the standard version of JavaScript)
  4. Benefits and reasons to learn and use web standards
    A site that has been built to web standards generally will be:
    • Less bandwidth intense
    • Future-proof
    • Extensible (designed to easily allow the addition of new features at a later date)
    • Easier to maintain
    • Compatible with newer browsers
    • Accessible (how easy something is for everybody to use, regardless of impairment or disability.)
  5. The Basic Steps to a Standards-Compliant web site
    • Step 1: use the correct doctype - "Many developers still don't realize that newer browsers look for a DOCTYPE at the top of each page, and will change the way they behave in response to it. Without the correct DOCTYPE, browsers can take your standards-compliant page and render it all wrong."
    • Step 2: validate your code - "Validators check the syntax of your HTML and CSS to make sure it is correct, and let you know about any errors or ambiguities. It's up to you to figure out how to fix the errors, but usually the mistakes are fairly obvious."
    • Step 3: move presentation tags into CSS - "The ultimate aim for a website is to separate presentation (colours, fonts, layout, positioning) from content. This is achieved using CSS (Cascading Style Sheets)."
  6. The Separation of Struture from Presentation

    • Structure encompasses the necessary components of a document plus the logical marking up of the content in that document. We use XHTML for structure.

    • Presentation is the way the content is styled. Usually, presentation refers to visual styles. We use CSS for presentation.
    • Start your website with meaningful, logical Structure (XHMTL), make sure your code validates, and then add your Presentation (CSS).
    • If you build a house, you wouldn't paint the walls before you've installed the electric, plumbing, insulation and drywall, would you?
  7. The Application of Meaning: Semantic Markup
    • It isn't just about taking away the presentation from HTML, the application of meaning means specific HTML tags should be used when appropriate.
    • The tags surrounding the content of a document should describe what that content is and/or what it's for.
    • For example, heading tags like, <h1>, <h2>, etc. should be used for headings, paragraph tags for paragraphs, list tags for lists. (more info)
    • If you build a house, you wouldn't put in something that looks like a door, but is really a wall that's painted to look like a door, would you?
  8. The Rules of XHTML
    • Logical Structure
    • The Document Tree
  9. Portfolio Site: home page
    • The home page of a site should always be named index. This allows for shorter URLs, as users can "chop off" the file name and still get to the page (e.g. jennaspevack.com defaults to jennaspevack.com/index.html).
    • Using the page we started last week, create the front page of your portfolio website. The purpose of this site will be to showcase your design and/or production work in a professional manner.
    • Follow the HTMLDog Beginner Tutorial and use these basic XHMTL tags to create your index page: html, head, title, body, h1-h6, p, ul or ol, li, a
    • When complete your home page (index.html) should look something like this.
    • Use the W3C validator or the validator in Dreamweaver to check your page for errors.

Homework | Week 2

For next class: