Week 8, How to improve the existing web site!

Nowadays, many web designers keep using traditional table layout or mixed content and layout. However, if developer needs to separate the content and layout, such as using XHTML and CSS, that may spend long time to learn it. Modify the existing web site to fit the web standard is not easy. The best way is step by step to finish each stage. Thus fulfill the web standard by modify the website.

• Adding correct DOCTYPE tags (DOCYYPE is document type, it explains what version of XHTML or HTML. The browser will base on the Document Type Definition (DTD) to interpret the code. It has 3 DOCTYPE, transitional, strict and frameset.
• Set up a namespace (directing declare after the DOCTYPE. ＜html xmlns=http://www.w3.org/1999/xhtml"＞It is the detail of DTD and allow a online address to identify the namespace.)
• Declare web site character encoding (it can let the browser knows which encoder to interpret. For example, Western is ISO-8859-1, Traditional Chinese is BIG5, Simplified Chinese is GB2312.)
• All tags are using lower case (XML is very sensitive about the letter that all XHTML must use lower case. Otherwise, W3C will verify the code invalid. such as ＜TITLE＞ change to ＜title＞)
• The image add alt attribute (alt is very useful because when the image can't display or using screen reader. That can easier understand by the user. For instance, ＜img src="logo_unc_120x30.gif" alt="company logo，click here will back the front page"＞)
• All attribute value add double quote (this is the web standard of the XHTML, such as height="100")
• When using XHTML, Close all of the tags (this rule can avoid mess of HTML code. For example, ＜p＞close the tags＜/p＞. In something single tag such as ＜br＞ change to ＜br /＞)
• Using CSS to define the layout (when we want to make font bigger, we use ＜h1＞ or add a point in front of the text, we will use ＜li＞. In fact, we use CSS that can easy to change the difference font size or font color. (For example, h1, h2, h3, h4, h5, h6{ font-family: Tahoma, serif; font-size: 12px; } )
• Using CSS to replace the HTML presentation (We use the structure code such as

＜li＞sentence 1＜/li＞＜li＞sentence 2＜/li＞＜li＞sentence 3＜/li＞

to replace the miscellaneous code

sentence 1＜br /＞sentence 2＜br /＞sentence 3＜br /＞.

• Each table and form named “id” for identification (For example, ＜table id=”menu”＞, we create id call menu, and we connect to a CSS style sheet. That represents how to show the forms, tags and other component. Therefore, we no need to spend each ＜td＞ to show the height, width, background or alignment etc… Using tag menu of id. We can use CSS style sheet clear to separate the layout and content.

The advantage of Web standard

• Convenient for developer to maintain or redesign website
• Guideline for develop to speed up the develop time
• Standard represent the best practice of the industry
• Convenient for screen reader

Reference site:

http://www.w3.org/MarkUp/
http://www.w3.org/TR/CSS21/