Introduction to The Web Standards Curriculum

An introduction to a course designed to give anyone a solid grounding in web design/development, no matter who they are—it is completely free to use, accessible, and assumes no previous knowledge.

Mills, Chris. Opera (2008). Articles>Web Design>Standards

The History of the Internet and the Web, and the Evolution of Web Standards

a brief overview of the creation of the Internet, the World Wide Web, and the "web standards" that this entire series focuses upon. I think it is useful and interesting to understand how we got to where we are, but it will be short enough so you don’t get overwhelmed, and can get into the details nice and quickly.

Francis, Mark Norman. Opera (2008). Articles>Web Design>Standards>History

How Does the Internet Work?

This article covers the underlying technologies that power the World Wide Web: Hypertext Markup Language (HTML); Hypertext Transfer Protocol (HTTP); Domain Name System (DNS); Web servers and web browsers; Static and dynamic content.

Lane, Jonathan. Opera (2008). Articles>Information Design>Online

The Web Standards Model: HTML, CSS and JavaScript

You can accomplish content, styling and layout just using HTML—font elements for style and HTML tables for layout, so why should I bother with this XHTML/CSS stuff? Here are the most compelling reasons for using CSS and HTML over outdated methods.

Lane, Jonathan. Opera (2008). Articles>Web Design>Standards

Web Standards – A Beautiful Dream, But What's the Reality?

Web standards allow for interoperability between all web browsers, on every operating system, and even on every electronic device available. But is that really reality? The really simple answer is no; while that’s an ideal situation, that is far from reality.

Lane, Jonathan. Opera (2008). Articles>Web Design>Standards

Information Architecture - Planning Out a Web Site

This article is going to look at the early stages of planning out a web site, and a discipline that is commonly referred to as Information architecture, or IA. This involves thinking about who your target audience will be, what information and services they need from a web site, and how you should structure it to provide that for them.

Lane, Jonathan. Opera (2008). Articles>Web Design>Information Design

What Does a Good Web Page Need?

Starts to examine different pages, thinking about what items should appear on them, and considering issues such as consistency, usability, and accessibility.

Francis, Mark Norman. Opera (2008). Articles>Web Design>Assessment

Colour Theory

In this article, I’ll cover colour basics and three simple colour schemes so that you can feel confident about choosing colours for your site. I’ll follow up this article with another piece on how to simplify these colour choices. After all, it’s more fun to enjoy the compliments on your Web site design than it is to sweat over the colour choices.

Goin, Linda. Opera (2008). Design>Web Design>Graphic Design>Color

Building Up a Site Wireframe

Every web designer should know and understand a Web site’s parameters before lifting a finger to start designing the site. In this article, you will learn the basics required to start designing business Web sites. While this information is useful if you want to build sites for others, it can also serve as a checklist article for sites you want to build for yourself.

Goin, Linda. Opera (2008). Articles>Web Design>Document Design>Information Design

Colour Schemes and Design Mockups

After a web designer presents a site’s architecture, or wireframe, to a client for approval, the next step is to determine the look and feel of the site through colour and graphics. In this article, I’ll demonstrate how I keep this process as simple as possible, both for myself and for the client.

Goin, Linda. Opera (2008). Design>Web Design>Graphic Design>Color

Typography on the Web

In this article I’ll look at exactly why typography is limited on the web (compared to print design) and present some tips to follow for good web typography, along with an example web page that demonstrates some of these tips. Don’t worry if you don’t understand the CSS and HTML code at this stage—the point here is to make you think about design. While you are going through the article, it might be an idea to have a pen(cil) and paper by your side so you can start to sketch ideas about text layout.

Haine, Paul. Opera (2008). Articles>Web Design>Typography

The Basics of HTML

In this article you will learn the basics of HTML—what it is, what it does, its history in brief, and what the structure of an HTML document looks like.

Francis, Mark Norman. Opera (2008). Articles>Web Design>HTML>XHTML

The HTML HEAD Element

This article deals with a part of the HTML document that does not get the attention it deserves: the markup that goes inside the head element. By the end of this tutorial you’ll have learnt about the different parts of this section and what they all do, including the doctype, title element, keywords and description (which are handled by meta elements).

Heilmann, Christian. Opera (2008). Articles>Web Design>HTML>Metadata

Choosing the Right Doctype for Your HTML Documents

In this article I will look at the doctype in a lot more detail, showing what it does and how it helps you validate your HTML, how to choose a doctype for your document, and the XML declaration, which you’ll rarely need, but will sometimes come across.

Johansson, Roger. Opera (2008). Articles>Web Design>HTML>Metadata

Marking Up Textual Content in HTML

In this article I will take you through the basics of using HTML to describe the meaning of the content within the body of your document.We will look at general structural elements such as headings and paragraphs and embedding quotes and code. After that we will look at inline content, such as short quotes and emphasis, and finish with a quick examination of old-fashioned presentational content.

Francis, Mark Norman. Opera (2008). Articles>Web Design>Information Design>HTML

Introduction to WAI ARIA

This article is for those who are new to ARIA. You need an understanding of HTML and the potential difficulties that people with disabilities can face using the Web. It is useful to be familiar with some Rich Internet Applications from a user's perspectiveAfter reading this article, you'll understand what ARIA is for, how to integrate it into your sites, and how you can use it now to make even the simplest of sites more accessible.

Lemon, Gez. Opera (2008). Articles>Web Design>Accessibility>Flash

Accessible Context-Sensitive Help with Unobtrusive DOM Scripting

This article demonstrates two methods of calling context-sensitive help in a web form: the Field Help Method and Form Help Method, in which unobtrusive DOM/JavaScript is employed to achieve the desired result. It also serves to illustrate the separation of the Structure and Behavior layers of a web page. Graceful degradation is employed to make sure that the help information is accessible if JavaScript is disabled or not available in a user agent.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Standards>Help

Building Accessible Static Navigation with CSS

When building a navigation menu for a web site, steps should be taken to ensure that it is accessible, and degrades gracefully in older browsers with lesser CSS support. In this article we will explore one such implementation. The navigation menu you see in this example is built with valid, semantic HTML and CSS - no JavaScript is involved, as I felt this was unnecessary. The static (non-expanding/collapsing) nature of the example suits a web site comprised of twenty or less target pages.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Accessibility>CSS

Replacing NOSCRIPT with Accessible, Unobtrusive DOM/JavaScript

Modern user agents with JavaScript enabled will hide content contained within NOSCRIPT, and reveal it when JavaScript is disabled. User agents that do not support JavaScript will display the content within it. User agents with partial/antiquated JavaScript capabilities however interpret the element correctly and do not show the content, but when JavaScript is disabled also do not show the content - it never gets seen. This has an impact on the accessibility of the content. If your writing is targeted at modern, standards-based, compliant, and fully capable JavaScript user agents, employing the NOSCRIPT element is no problem. If the user agents among your audience are unpredictable, however, replacing the NOSCRIPT element with another mechanism becomes significant. This article looks at one such solution.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Accessibility>JavaScript

Creating Accessible Data Tables

This article demonstrates how to code accessible data tables in (X)HTML, enabling visually impaired users who employ assistive technologies to interpret the table data. Two views of a tabular data table are presented and discussed.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Accessibility>Standards

Automatic Numbering With CSS Counters

When writing documents, it is often useful to number sections and have a table of contents. You can number these by hand, directly in the markup, but this can be time consuming if the order changes and you have to edit all the numbers. CSS2.1 gives us a automated way to generate numbers using CSS counters, and this article will walk you through how to use them.

Storey, David. Opera (2008). Articles>Web Design>CSS

Zebra Striping Tables with CSS3

With the advent of CSS3’s nth-child selector, we are able to target multiple elements in a document by creating a "counter" that skips over specified children in the document tree. This allows us, specifically, to style only the odd or even rows of a table. This article details how to use nth-child sucessfully.

Schmitt, Christopher. Opera (2008). Articles>Web Design>CSS

XHTML Voice in Style

This article builds upon topics in the XHTML Voice by Example article. A knowledge of CSS is also assumed.

Axelsson, Jonny. Opera (2008). Articles>Web Design>Accessibility>Voice

Getting to Know Voice

From a different world than the traditional browsing world comes a range of techniques that allows a developer to code for speech behaviours much easier than previously possible. Opera has early support for this. W3C is working on standards for combining speech and the ordinary graphical user interface.

Axelsson, Jonny. Opera (2008). Articles>Web Design>Accessibility>Voice

JavaScript Badges Powered by JSONP and Microformats

Using a bit of JavaScript, a nifty way of making remote web service calls (JSONP) and a few microformats, I can display information from one service somewhere else, leaving me with only one place to update it. In this article you're going to create a JavaScript badge that can be added to any site and which will display relationship data from a service which exposes it

Rushgrove, Gareth. Opera (2008). Articles>Web Design>Metadata>JavaScript