Home >Web Front-end >CSS Tutorial >How to improve your existing website_CSS/HTML
Most of our designers are still using the traditional table layout, presentation and structure mixed together to build websites. Learning how to use XHTML+CSS requires a process, and making an existing website comply with website standards cannot be done in one step. The best approach is to proceed step by step and in stages to achieve the goal of fully complying with website standards. If you are a novice or not very familiar with code, you can also use standards-compliant editing tools, such as Dreamweaver MX 2004, which is currently the most complete tool that supports CSS standards.
1. Primary improvements
Add the correct DOCTYPE to the page
Many designers and developers don’t know what DOCTYPE is and what it is used for. DOCTYPE is the abbreviation of document type. Mainly used to indicate what version of XHTML or HTML you are using. The browser interprets the page code according to the DTD (Document Type Definition) defined by your DOCTYPE. So, if you accidentally set the wrong DOCTYPE, the results will surprise you. XHTML1.0 provides three DOCTYPE options:
(1) Transitional
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Strict
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) Frameset
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
For our primary improvement, we only need to use a transitional statement. It can still be compatible with your table layout, performance logos, etc., so that you won’t feel that the changes are too big and difficult to master.
Tip: If you are too lazy to enter the transition code above, you can visit the homepage of the http://www.macromedia.com/ website, then view the source code, and copy and paste the same code in the head area.
Set a namespace (Namespace)
Add the following code directly after the DOCTYPE statement:
A namespace is a detailed collection of element types and attribute names DTD, namespace declaration allows you to identify your namespace by pointing to an online address. Just enter the code as usual.
Declare your encoding language
In order to be correctly interpreted by browsers and pass markup validation, all XHTML documents must declare the encoding language they use. The code is as follows:
The coding language declared here is Simplified Chinese GB2312. If you need to produce Traditional Chinese content, you can define it as BIG5.
Write all tags in lowercase letters
XML is case-sensitive, so XHTML is also case-sensitive. All XHTML element and attribute names must be lowercase. Otherwise your document will be considered invalid by W3C validation. For example, the following code is incorrect:
is changed to
, is changed to , etc. This conversion step is simple.
Add alt attribute to images
Add alt attribute to all images. The alt attribute specifies that replacement text is displayed when the image cannot be displayed. This is dispensable for normal users, but it is crucial for text-only browsers and users using screen readers. Only when the alt attribute is added will the code pass the W3C correctness check. Note that we need to add meaningful alt attributes. Writing like the following is meaningless:
Correct writing:
Give Quote all attribute values
In HTML, you do not need to quote attribute values, but in XHTML, they must be quoted.
Example: style="max-width:90%", not height=100.
Close all tags
In XHTML, every open tag must be closed. Like this:
Every open tab must be closed.
HTML can accept unclosed tags, but XHTML cannot.text can be turned into a huge and bold text, and