The road to Web standards

Web|web Standard Preface by the author

This afternoon, a friend of mine asked me what advice I had for an old web designer who wanted to learn about web standards.

I would like to post my email reply here for more people to see will be a good example. My reply is: There is a comprehensive, informal, wordy guide for all who have heard of web standards and want to use web standards without knowing where to start.

　　Body

First of all, don't rush to start! Make 2 mental preparations before doing anything, which is the most important thing for your learning process:

1. Learning takes time, it needs to be gradual;
2. The progress of the process will encounter setbacks.

But you are not alone, and many of us are investing in learning and using web standards. There is an expanding group to help you learn more easily, veteran in the process of learning skills and skills encountered many difficulties, lucky later (including myself) will benefit from their sweat and tears.

When in the end, you can skillfully use a web-based design approach (making those traditional tabular methods look bleak), looking back, you'll be amazed at how CSS layout pages are not so difficult. Oh, of course, if the mainstream browsers can support some of the operations in the CSS2 specification, it may actually be easier to use.

Well, I seem to digress a bit.

So, let's get to the real useful information right away. First of all, to buy a "Designing with WEB Standards" (Chinese version has been introduced), do not think, do it at once. It's already there? Well, read it now, and don't let it fill with dust. Every point I want to say has been explained in detail in the book. The book is divided into an average of two parts, a manifesto (why you should do it) and a tutorial (how you do It). This is useful to you.

Now, the first thing to do is to establish an XHTML concept of ideology, whether you choose HTML4.01 or XHTML 1.0 Strict (There are many reasons to choose either of them, now you can ignore them, not later, unless you're ready to do a numbing chore.) ), all documents start with a DOCTYPE selection. Tell the browser what markup language your document uses to prevent unwanted performance errors, or bad page displays that can make you crazy. For example, if I want to fly to Chicago, I have to tell the travel agency where I'm going, otherwise I might fly to Vienna without a purpose. To display HTML or XHTML, you must first tell the browser that setting DOCTYPE will ensure that I get to the "destination".

Next goal: Rigorous format identification. It's very easy to master. Enclose all attributes in quotes (for example: <a href= "link" >), proper nesting identity, and close all open identities (for example: <input type= "text"/>). Each identity or element needs to be closed.

Quick comments: Don't know when, the logo (tags) into the element (elements), they are the same meaning, different statements. No matter what you call them, the correct salutation now seems to be "elemental," perhaps at first, and I don't know and no one told me.

In any case, each element must be properly closed. If you use HTML4.01, you may not consider individual elements like <br>,

Next, there is a somewhat confusing rule about XHTML attributes: All attributes must have a value, and if there is no value, use it itself. For example <input type= "Radio" checked= "checked"/>. Checked is not required in HTML4.01, but it is required in XHTML.

Finally, XHTML requires that you write all the code in lowercase, HTML is case-insensitive, but XHTML distinguishes it from the XML syntax rules.

The above is all about the change of logo! You already know it! Take a deep breath, sip a beer, and relax. Because that's just the first step.

　　Section II

Now we begin to learn to write the correct HTML/XHTMLL and validate them in the W3 of the Organization's validators (validator). If you write correctly, you will see a successful message with a blue background and a yellow word. Try to like this color/font combination, it will be your best friend.

Why is verification so important? What does it matter? Because the Poorly-written (random, imprecise) logo will bring complete unpredictability. The "Life and Death" of the page depends entirely on the way the browser handles errors, although most browsers can support the Poorly-written identity well, but that's not the right habit. Hey, what makes us so used to non-standard? The first reason is the browser wars, where Microsoft was able to compete in the market from Netscape in 1995 because IE did the wrong thing with Netscape.

Another idea is that validation helps you find the wrong code and make sure your page is more consistent. The checksum code is the first thing that I debug the layout, I believe you too.

OK, when you first check your first site, you'll probably have to endure the seventy or eighty incredible error messages that are back in the loop. Unfortunately, although the calibration has helpful information, it's not perfect, it's just maintained by some volunteers. The good news is that those errors are related, and if you find that a </p> tag is missing and fixed, it's likely that the next 24 bugs will be gone. In short, it looks like the checksum is bad, but it's often not.

Now that you have passed the checksum, your code is also compliant. At this point, you stick to a strict guideline, but there is a lack of comprehensive understanding of why you should do this first.

　　Section III

The next step is to refactor the document that you have created with a good format (well-formed) identity, and peel away the properties of the presentation layer that is being used by more and more recent doctype as "disapproved", placing them in a separate file. This is the controversial "performance and structure of separation," which is why CSS is the reason people attach importance to.

For example: your text is content. The content is complete, but there is no hint of any content structure (such as spaces, sections, headings, lists, etc.), all you get is a messy text that is completely bad. The structure layer is extra, adding individual elements to the document to convey additional structural information to break the clutter of text, making it more logical and organized. But those elements do not control the default appearance of text. For example, you often find that the title of the first page is larger than the text font, which is not a function of the structure.

It's time for the "presentation layer" to appear. The presentation is a formatted hint that tells the first page that the title is red, italic, and the font size is 150% of the body font. The presentation layer is the extra layer above the document structure layer. CSS belongs to the presentation layer, it can be a simple document on the tag, the document into an amazing form-can access the CSS Zen Garden see examples.

So what is the best way to detach from a structure? We take a traditional code to illustrate that contains HTML elements or attributes to provide performance. It's time to chop off those bgcolors and <center> tags, and we'll have a test in the hall:

In the following demo code, which attributes and tags should be eliminated for performance?

<center>

Are you ready for your answer? Well, the correct results are listed below, and this is a clean, unstructured code with no trace of expression:

That's it? That's it.

Although this code does not explicitly conform to any of the specifications, the greater meaning of this separation is the use of the correct elements. Using a table layout is a secondary issue, in the example above, the use of table method is incorrect, in the long-term, cautious perspective should remove the <table> and <td> elements. Although tables are not supported, tables are still very useful, and they can be used in the right place-table-lined data.

Well, we've stripped the format from our page, hooray! What else do you do now? There are only some ugly elements left, times-new-roman the text and lines of the font. Not at all interesting, where is the lively and beautiful page we promised?

Looking back at the example of Zen garden, did you see the lovely design? How different do they look? The point is: the same XHTML underneath those beautiful designs is as tedious as the document you just unformatted. Isn't that right?

In fact, boredom and ugliness have a good foundation, and you may have noticed that this unformatted HTML looks as bad as the 1994-year web. With a few exceptions, these elements are as old as the web itself,

The benefits, of course, are not limited to ease of use (satisfying those special needs), built-in search engine optimization, reduced bandwidth costs, and so on. Jeffrey Veen has written "The commercial value of Web standards" last year, and Roger Johansson has also explained the technology and benefits of standards-based design in his recent "use of Web Standard development".

CSS has been well supported by all major browsers today, with countless resources to help you learn CSS syntax, CSS based layouts, and advanced techniques. I recommend a few better: WESTCIV provides an ongoing free CSS course that will help you get started and quickly mastered. Andrew Fernandez has built a huge list of CSS resources that will help you, whether you're a novice or not. Eric Meyer has written a bundle of books that you can check out at your desk. These books include a case based "Eric Meyer on CSS" more Eric Meyer on CSS. O ' Reilly Publishing CSS Reference book: "The CSS authoritative guide" has been released in the 2nd edition, you'd better put it on the table. There are also Molly Holzschlag's "The Designer ' Edge" and Chris Schmitt's "Designing CSS Web Pages."

It will take too much time to delve into the details of CSS and build the layout. I will not say more. That's the advice I can give to designers who start paying attention to web standards. Read through and share your experiences, let's grow as a group, many of us are actively promoting the development of web standards, we have a global network, make the most of it.