First of all, don’t rush to start! Make two mental preparations before doing anything. This is the most important thing for your learning process:
Learning takes time and must be done step by step;
There will be setbacks along the way.
But you're not alone, many of us are investing in learning and using web standards. There is an ever-expanding community to help you learn more easily, veterans who have had many difficulties learning techniques and techniques, and lucky latecomers (myself included) who will benefit from their sweat and tears.
When you finally become proficient in using web standards-based design methods (making those traditional table-based methods look eclipsed), looking back, you will be surprised that laying out pages with CSS is not that difficult. Oh, of course, if mainstream browsers had better support for some operations in the CSS2 specification, it might actually be easier to use.
Well, I seem to be a little off topic.
So, let’s get started right away with the actually useful information. First of all, go buy a copy of "Designing With Web Standards" (Note 1), don't think too much, just do it immediately. Already have one? Well, read it now and don’t let it gather dust. Every point I want to make is explained in detail in the book. The book is divided into two equal parts, a manifesto (why you should do what you do) and a tutorial (how you do it). This may be useful to you.
Now, the first thing is to establish an ideological system concept of XHTML, whether you choose HTML4.01 or A mind-numbing chore. ), all documents begin with selecting a DOCTYPE. Telling the browser what markup language your document uses will prevent unnecessary performance errors that would otherwise drive you crazy with poor page display results. For example: If I want to fly to Chicago, I must tell the travel agency where I want to go, otherwise I may fly to Vienna aimlessly. To display HTML or XHTML, you must first tell the browser that setting the DOCTYPE ensures that I reach the "destination".
Next goal: rigorously formatted logos. This is very easy to master. Quote all attributes (eg: <a href="link">); nest tags correctly; close all open tags (eg: <input type="text" />). Every logo or element needs to be closed.
Quick note: I don’t know when tags became elements. They have the same meaning but different ways of saying it. Whatever you call them, the correct name seems to be "elements" now, maybe it was that way in the beginning, I don't know and no one told me.
Regardless, every element must be closed correctly. If you use HTML4.01, you can ignore individual elements like <br>, <hr> and <input>. If you use XHTML, individual elements must also be closed, by adding a slash at the end, for example: <br> becomes into<br />.
Next, there is a somewhat confusing rule about XHTML attributes: all attributes must have a value, and if there is no value, the value itself is used. For example <input type="radio" checked="checked" />. In HTML4.01 the checked value is not required, but in XHTML it is required.
Finally, XHTML requires you to write all code in lowercase. HTML is not case-sensitive, but XHTML is, and it follows the rules of XML syntax.
That’s all about the logo changes! You already know it all! Take a deep breath, sip a beer, and relax. Because that's just the first step.
Section 2
Now, we start learning to write correct HTML/XHTMLL and validate them in the W3 organization's validator (validator). If you wrote it correctly, you will see a success message with yellow text on a blue background. Try liking this color/font combination, it will be your best friend.
Why is verification so important? Does it matter? Because poorly-written (random, imprecise) logos will bring complete unpredictability. The "life and death" of a page completely depends on the browser's error handling method. Although most browsers can also support the poorly-written logo well, this is an incorrect habit. Hi, what makes us accustomed to non-standards? The first reason is the browser war. In 1995, Microsoft was able to compete and gain market share from Netscape because IE handled web page errors exactly the same as Netscape.
Another perspective: Validation helps you find erroneous code and ensures that your pages behave more consistently. Verifying code is the first thing I do when debugging a layout, and I believe you are too.
OK, when you first verify your first site, you will probably have to endure seventy or eighty incredible error messages fed back. Unfortunately, while the checksum is helpful, it's not perfect and is only maintained by a few volunteers. The good news is that those errors are related. If you find that a </p> tag is missing and fix it, chances are the next 24 errors will be gone. In short, it may look like the verification result is bad, but it often isn't.
Now, you have passed the validation and your code is compliant. At this point, you adhere to a strict guideline but lack a full understanding of why you do it in the first place.
Section 3 The next step is to refactor the documentation you have created using well-formed markup, stripping away those presentation layer attributes that are increasingly listed as "deprecated" in recent DOCTYPEs, and placing them in in a separate file. This is the controversial "separation of performance and structure", which is why CSS is so important.
Here's an analogy: your text is content. The content is complete, but there is no hint of the content structure (such as spaces, sections, titles, lists, etc.). What you get is just a messy text, which is not easy to use at all. The structural layer is additional. Individual elements are added to the document to convey additional structural information to break up the messy text and make it more logical and organized. But those elements do not control the default appearance of the text. For example, you often find that the title on the first page is larger than the text font. This is not a function of the structure.
It's time for the "presentation layer" to appear. The representation is a formatting hint, which tells the title of the first page to be red, italicized, and the font size to be 150% of the body font. The presentation layer is an additional layer above the document structure layer. CSS belongs to the presentation layer, and it can transform documents into amazing forms through simple tags on the document - visit CSS Zen Garden to see examples.
So, what is the best way to separate performance from structure? Let's take a piece of traditional code to illustrate, which contains HTML elements or attributes used to provide presentation. It’s time to cut off those bgcolors and <center> tags. Let’s do a casual test:
In the following demo code, which presentation attributes and tags should be eliminated?
<center><h1><font face="Verdana">This is my first web site.</font></h1></center> <table border="0" cellpadding="0" cellspacing="0" > <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <td bgcolor="#ffffff" valign="top" align="center">< p>They're coming to take me away...</p></td>
Are you ready with your answer? OK, the correct result is listed below, which is clean structured code with no traces of performance:
<h1>This is my first web site.</h1> <table> <body> <td><p>They're coming to take me away...</p></td>
that's all? That's it.
Although this code does not explicitly conform to any one specification, the greater significance of this separation is that the correct elements are used. The use of table layout is a secondary issue. In the above example, the method of using tables is incorrect. From a long-term and prudent perspective, the <table> and <td> elements should be removed. Although their use is deprecated, tables are still very useful, and they can be used where appropriate - on tabularly arranged data.
Well, we’ve stripped the formatting off our pages, hooray! What else do you do now? That just leaves some ugly elements, text and lines in Times-New-Roman font. Not funny at all, where are the bright and beautiful pages we were promised?
Looking back at the Zen Garden example, do you see the cute design? How different do they look? The point is: underneath that beautiful design is the same XHTML that's just as boring as the unformatted document you just created. Isn’t that right?
In fact, boring and ugly has a good foundation. You may have noticed that this unformatted HTML looks as bad as the web in 1994. With a few exceptions, these elements are as old as the web itself, <h2> having been around since the days of the Mosaic browser.
The benefits certainly don't end there, with ease of use (for those special needs), built-in SEO, reduced bandwidth costs, and so on. Jeffrey Veen had already written "The Business Value of Web Standards" last year, and Roger Johansson also explained the techniques and benefits of standards-based design in his recent "Developing with Web Standards."
CSS is well supported by all major browsers today, and there are countless resources to help learn CSS syntax, CSS-based layout, and advanced techniques. I recommend a few good ones: westCiv offers an ongoing free CSS course that will help you get started and master quickly. Andrew Fernandez has built a huge list of CSS resources that will be helpful whether you are new to CSS or not. Eric Meyer has written a bundle of books that you can keep on your desk and consult at any time. These books include the case-based Eric Meyer on CSS and More Eric Meyer on CSS. The CSS reference book: "The Definitive Guide to CSS" published by O'Reilly Publishing House has been released for the second edition, and you'd better keep it on your desk. Also available are "The Designer's Edge" by Molly Holzschlag and "Designing CSS Web Pages" by Chris Schmitt.
Going into the details of applying CSS and building layouts would take too much time. I won’t say much more. The above is the advice I can give to designers who are starting to pay attention to web standards. Read through and share your thoughts and let's grow as a community. Many of us are actively promoting web standards. We have a global network. Take advantage of it.
Notes 1. "Designing With Web Standards" is a book written by Zeldman to promote web standards. The Chinese version has been introduced and released in May 2004. The book is titled "Website Reconstruction--Designing with Web Standards"