XHTML+CSS tutorial on the standard times of web design

css|xhtml| Standard | tutorials | design

Let us hurry up with the pace of the new era, together to understand the site standards bar.

First. Why to build a website standard

Most of us have a deep experience, and every time a major browser version is upgraded, the site we just built may become obsolete, and we need to upgrade or rebuild the site. For example, the 1996-1999 classic "Browser wars", in order to be compatible with Netscape and IE, the site had to write different code for both browsers. Similarly, whenever new network technologies and interactive devices emerge, we need to create a new version to support this new technology or device, such as WAP technology that supports mobile internet access. Similar problems abound: The Web code is bloated, the complexity of the waste of our large amount of bandwidth, for a browser of DHTML effects, shielding some potential customers, not easy to use code, people with disabilities can not browse the site and so on. This is a vicious circle, is a huge waste.

How do you solve these problems? People of insight have already begun to think and need to establish a universally agreed standard to end this disorder and chaos. Business Companies (Netscape, Microsoft, etc.) have also finally recognized the benefits of a unified standard, Therefore, under the organization of the w3c.org, the website standard began to be established (February 10, 1998 issued XML1.0 as the logo), and under the supervision of the website Standards Organization (webstandards.org) to promote implementation.

Simply put, the purpose of the website standard is to:

Provide the most benefits to the most users of the site
Ensure that any Web site document is available for long term
Simplify code and reduce construction costs
Make the site easier to use, adapt to more different users and more network devices
When a browser version is updated, or a new network interaction device appears, make sure that all applications continue to execute correctly.
For web design and developers, adherence to the Web site standard is the standard; for your site users, the site standard is the best experience.

The number of visitors ranked 4th in the world, China's 1th Sina website, also encountered the problem of nonstandard DHTML. In the latest release of the Netscape7 and Mozila1.6 browser, Sina home page of the floating ads all expired, cascading in the lower left corner of the page. Maybe the advertisers think it doesn't matter what the potential users are losing. (screenshot date April 12, 2004)


Second. What is a website standard

Web site standards are not a standard, but a set of standards. The Web page consists mainly of three parts: structure (Structure), performance (presentation) and behavior (Behavior). The corresponding standard is divided into three aspects: the structured standard language mainly includes XHTML and XML, the performance standard language mainly includes the CSS, the behavior standard mainly includes the object model (such as the ECMAScript), and so on. Most of these standards are drafted and published by the consortium, as well as standards developed by other standards organizations, such as the Association standard for ECMA (European Computer manufacturers ECMAScript). Let's take a quick look at these standards:

1. Structure Standard language

(1) XML

XML is shorthand for the extensible Markup Language (extensible Identification language). It is currently recommended to follow the XML1.0, a reference (WWW.W3.ORG/TR/2000/REC-XML-20001006) published by the Consortium on October 6, 2000. Like HTML, XML is also derived from SGML, but XML is a language that defines other languages. The original design of XML was designed to make up for the lack of HTML, to meet the need of network information release with powerful extensibility, and later to be used to transform and describe the network data. About the benefits of XML and Technical specification details here is not much to say, the internet has a lot of information, there are many books can refer to.

(2) XHTML

XHTML is the abbreviation for the extensible Hypertext Markup Language Extensible Identification language. Currently recommended to follow is the XML1.0 (reference HTTP://WWW.W3.ORG/TR/XHTML1) recommended by the consortium on January 26, 2000. XML is a powerful alternative to HTML, but it is too early to use XML directly in the face of thousands of existing sites. So, on the basis of HTML4.0, we extend it with the rules of XML, and get XHTML. Simply put, the purpose of creating XHTML is to implement the transition from HTML to XML.

2. Performance Standard language

CSS is the abbreviation for cascading style sheets cascading style sheets. Currently recommended to follow is the CSS2 (reference http://www.w3.org/TR/CSS2/) recommended by the consortium on May 12, 1998. The goal of creating CSS standards for the consortium is to replace HTML tabular layouts, frames, and other expressive languages with CSS. The combination of pure CSS layout and structured XHTML can help designers separate appearance and structure, making site access and maintenance easier.

3. Standards of Conduct

(1) DOM

DOM is an abbreviation of the Document Object model. Based on the http://www.w3.org/DOM/, Dom is an interface with browsers, platforms, and languages that allows you to access other standard components of a page. Simply understood, Dom solves the conflict between netscaped JavaScript and Microsoft JScript, giving web designers and developers a standard way to access data, scripts, and presentation layers in their sites.

(2) ECMAScript

ECMAScript is a standard scripting language (JAVASCRIPT) developed by ECMA (European Computer Manufacturers Association). Currently recommended to follow is ECMAScript 262 (Http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM).

third. The difference between a standard website and a traditional website

The traditional web site is just an extension of the print media, designed to ensure that it looks the same in 4-6 major browser versions. The usual characteristics are:

A table based layout.
The content is mixed with the way of expression. A typical example is the <font> label.
Junk code (nonstandard code).
Code that is not easy to use.
Code that is not semantically correct. For example <b> do not explain, you do not understand this is the meaning of font bold.
The website established by the standard of Web site is a wide range of communication tools that can accept all kinds of users and equipments. General features are:

A semantically correct identity. Even with labels that can express meaning. The guarantee code can be understood correctly in the text browser, PDAs, search engine.
Correct and valid code. The correct code is through the http://validator.w3.org/code checksum.
Code that is easy to use for both people and machines. Able to access a wide range of users and devices,
Separate the presentation layer and content with CSS. Make your code simpler, faster to download, and easier to bulk modify and customize your presentation.

Fourth. Benefits of using Web standards

Benefits to Web surfers:

File download and page display faster;
Content can be accessed by more users (including those with disabilities such as blindness, weak vision, color blindness);
Content can be accessed by a wider range of devices (including screen readers, handheld devices, search bots, printers, refrigerators, etc.)
Users can customize their performance interface through style selection
All pages can provide a version that is suitable for printing
Benefits to Site Owners:

Less code and components, easy to maintain
Lower bandwidth requirements (more concise code) and lower cost. For example: When ESPN.com uses CSS, it saves more than two megabytes (terabytes) of bandwidth per day.
more likely to be searched by search engines
Easy revision, no need to change page content
To provide a printed version without copying content
Improve the usability of the website. In the United States, there are strict legal provisions (Section 508) to constrain government websites to a certain degree of ease of use, and other countries have similar requirements.

   Fifth. How to improve your existing website

Most of our designers are still using a traditional form layout, a mix of performance and structure to build the site. Learning how to use XHTML+CSS requires a process that allows existing sites to conform to site standards and is unlikely to be one-step. The best approach is to step through the steps to achieve the goal of fully complying with the site standards. If you're new to the code, or you're not familiar with it, you can also use a standard editing tool, such as Dreamweaver MX 2004, which is currently the most sophisticated tool for supporting CSS standards.

1. Primary improvement

Add the correct DOCTYPE to the page

Many designers and developers do not know what is doctype,doctype. DOCTYPE is the shorthand for document type. It is mainly used to illustrate what kind of XHTML or HTML version you are using. The browser interprets the page code based on your DOCTYPE defined DTD (document type definition). So, if you don't pay attention to setting the wrong doctype, the result will be a surprise to you. The XHTML1.0 offers three kinds of doctype to choose from:

Transition Type (Transitional)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

Strict type (Strict)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Frame Type (Frameset)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

For our primary improvement, just use the transition type statement. It still can be compatible with your table layout, performance identification, etc., so that you do not feel too much change, difficult to grasp.

TIP: You do not bother to enter the above transition code, you can visit the homepage of the http://www.macromedia.com/website, and then look at the source code, the head area the same code copy paste on it.

Set a name space (Namespace)
Add the following code directly after the DOCTYPE declaration:


A namespace is a detailed Dtd,namespace declaration that collects the element type and attribute name to allow you to identify your namespace by an online address point. Just enter the code as you like.

Declare your code language.

All XHTML documents must declare the encoding language they use in order to be properly interpreted by the browser and validated by identity. The code is as follows:

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>

The coding language stated here is Simplified Chinese GB2312, which you can define as BIG5 if you need to make traditional content.

Write all the labels in lowercase letters
XML is sensitive to case, so XHTML is also different in capitalization. All XHTML elements and attributes must be named with lowercase. Otherwise, your document will be considered invalid by the verification of the consortium. For example, the following code is not correct:

<TITLE> Company Profile </TITLE>

The correct wording is:

<title> Company Profile </title>

The same,<p> are changed to <p>,<B> <b> and so on. This is a simple transition.

Add an alt attribute to a picture

Adds an alt attribute to all pictures. The ALT attribute specifies that when the picture cannot be displayed, it is displayed for alternate text, which is optional for normal users, but is essential for plain text browsers and users who use screen readers. Only by adding the ALT attribute will the code be passed by the correct checksum of the consortium. Note that we want to add a meaningful alt attribute, which is meaningless as follows:



The correct wording:



Quote all attribute values

In HTML, you may not need to enclose attribute values in quotes, but in XHTML they must be quoted.

Example: height= "100", but not height=100.

Turn off all the labels

In XHTML, each open label must be closed. Just like this:

<p> each open label must be closed. </p>

<b>html can accept a label that is not closed, XHTML is not allowed. </b>

This rule avoids the confusion and hassle of HTML. For example: If you do not close the image tag, in some browsers may appear CSS display problems. In this way you can make sure that the page is displayed as you designed it. What needs to be explained is that the empty label also closes, using a forward slash "/" at the end of the tag to close themselves. For example:

<br/>



After the above seven rules processing, the page basically conforms to the XHTML1.0 request. But we also need to check to see if it really fits the standard. We can use the consortium to provide free calibration services (http://validator.w3.org/). Change the error after discovering it. In the following list of resources we also provide additional validation services and a guide to the validation of the Web site, which can be used as a complement to the verification of the www. When you finally pass the XHTML validation, congratulations you have made a big step towards the site standard. It's not as hard as it's supposed to be!


   2. Intermediate Improvement

Then our improvement is mainly in the structure and performance of the separation, this step is not as easy as the first step to achieve, we need to change the concept, as well as the learning and application of CSS2 technology. But it takes a little time to learn any new knowledge, doesn't it? The trick is to learn while doing. If you've been using a table layout, you never used CSS, and you don't have to say goodbye to the table layout, you can use the stylesheet instead of the font label. The more you learn, the more you can do. Okay, let's take a look at what we need to do:

Defining the appearance of elements with CSS

We have developed the habit of writing the logo, when we want to use the
H1, H2, H3, H4, H5, h6{

Font-family: Song body, serif;

font-size:12px;

}

Replacing meaningless rubbish with structured elements

Many people may never know that HTML and XHTML elements are designed to express structures. Many of us are accustomed to using elements to control performance, not structure. For example, a section of the list might use the following identifier:

Sentences a <br/>

Sentence two <br/>

Sentence three <br/>

It would be better if we used an unordered list instead:

<ul>

<li> sentence one </li>

<li> sentence two </li>

<li> sentence three </li>

</ul>

You might say, "but <li> shows a dot, I don't want to use dots." In fact, CSS does not set what the elements look like, you can completely use CSS to turn off the dots.

Add an ID to each table and form, giving the table or form a unique, structured tag, such as

<table id= "Menu" >
 
Next, when you write a stylesheet, you can create a "menu" selector and associate a CSS rule that tells the table cell, text label, and all other elements how to display it. In this way, you do not need to include some extra, bandwidth, alignment, and background colors on each <td> label. With just one attached tag (the ID tag for "menu"), you can perform a special presentation layer for clean, compact code tags in a separate stylesheet.

Intermediate improvement Here we first list the main three points, but it contains a lot of content and knowledge, we need to gradually learn and master, until the final implementation of the full adoption of CSS and no table to achieve layout. Limited to this article is to guide the meaning of promotion, do not expand the details.

Finally, we specifically need to add the site's ease of use (accessibility) and interactive design improvements, usability and site standards are closely related to the standard, and the same as the site standards, are to make our site to accept more users access. The 1990 consortium established the Web Accessibility Initiative (WAI) to provide Web site builders with the means and strategies to achieve accessibility (http://www.w3.org/WAI/GL/). Improved usability and research interaction Design (the recommendation of the father of VB, Alan Cooper's about Face2.0) strategy can improve your development technology, broaden your horizons. Improve your value as a professional web designer to make you more competitive. This is exactly what every site owner and every designer or developer is trying to achieve.