首页 > 代码库 > 使我们的网站更标准
使我们的网站更标准
原文链接感谢作者
原始版本: http://www.w3.org/QA/2002/04/Web-Quality
翻译: Shanghai.ws
声明:原始版本(英文版)是唯一的官方版本。中文(简体)版本是根据W3C网站上的文件翻译的,可能存在某些错误。翻译不保证译文完全准确。请您自己承担风险。
我的网站是标准的!你的呢?
状态
这篇文章是作为W3C质量保证利益集团工作产生的。请发送关于它的任何公众反馈到公共档案 邮件列表public-evangelist@w3.org或是发送私人反馈到karl@w3.org。作者感谢这些人,他们花费了时间来检查和构想。
此文章用多种语言翻译过了。
介绍
你会在这里找到简单、不难的技术和理念来提高你的网站质量,使你的网站有效。这个文档是献给HTML用户,基于Web应用程序工作的开发人员,还有Web管理者的。
大多数网络中的网站都不是有效的。我们可能会假想99%的网页有这种情况,但这是没有统计数据支持的。去做一项调查来证明情况确实如此,那应该会很有意思的。
为什么?
HTML和标准
常见评论
我听到许多关于这个主题的评论和嚷嚷。大多数都是由于缺乏对HTML验证是什么的认识及对它的理解。下面的是几个例子:
Steve,首席执行官,说:
如果我的网站按照标准来做了,它就会乏味,我还会失去我的客户。
符合W3C标准,你可以有非常令人兴奋地网站。创建一个网站,尊重标准与生成纯文本的网页没有任何关系。
目前W3C正在提议一系列非常酷的综合技术。你可以体验一个全面多媒体网站,采用了现有的W3C互相协作技术:使用了XHTML(结构化XML标记),CSS(样式表),SVG(2D矢量图形动画),还有SMIL(同步多媒体)。这些技术是基于不同网络市场不同角色的共识建立起来的。
Alan,技术总监,说:
我没有这个财力来关心我网站上的标准。这将花费太多!
标准的设计会简化网站代码维护,因为你不会有多个版本让不同的浏览器来选择。你的页面会有更长的寿命,并且不会依赖于模糊不清的技术。因此,事实上,网络标准的设计会花费的更少。
Dean,艺术总监,说:
如果我尊重标准,就会破坏我的创造力。
技术上的限制存在于任何艺术中,不管你是画画、雕刻或是设计网页。水彩或是油画都有它们自己的限制,但是这些技术并不能阻碍创造力,而是它们提供了创造表达的结构。
网络标准的创建将会开启一个技术的新世界,尤其是媒体、技术和读者的。这个领域还有很多的探索。我们仅仅开始探索基于标准多媒体体验的好处。
Claudia,平面设计师,说:
我不关心无障碍。残疾人士不在我的目标读者之中。
你会受益于无障碍设计。总人口的8%到10%是残疾人士。遵循无障碍准则(也就是网络标准)的网站更易于维护。你的网站流量将增加,更多种类的浏览器可以以访问到网站的内容。
一些国家通过法律来要求无障碍,比如澳大利亚(残疾歧视法咨询条例 3.1 版本 1999年5月),美国(第508章——基于网络内联网和互联网的信息和应用程序),还有欧洲,在一个类似的计划上运行(信息无障碍)。
Aminata,网络程序员,说:
我为什么要遵循标准?网络是一个自由的地方。
网络是一个自由的地方,由许多你不一定知道他们需求的用户分享使用的。该标准旨在考虑到所有潜在的读者。按照网络标准创建是一个对网络团体的挑战。你不会连接到任何公司或专有技术。你可以使用独立平台要求的技术。
Karl,网络开发人员,说:
我只是遵循书本的指示。
不幸的是,许多书本都教不好网络程序。当你创建一个网站,你应该检查你的标记的正确性。如果你是一个网络开发人员,要注意使用书本来开发你的应用程序和阅读你正试图实现的特别规范。
一些网站收集了好的材料帮助人们按照w3c标准来设计。在W3C的网站上,你可以找到一个越来越多的教程列表推广良好的实践。
W3C的有些人已经开发了自己使用的自由访问软件我们鼓励使用它们,在它们可以使用的时候。这些软件包实现了W3C技术。
Tim,会计师,说:
我的网络编辑器生成非有效标记。
许多创作工具都不能生成有效标记。有些嵌入了语法检查,其它的做得正确,还是许多没有生成有效标记。作为一个另外的解决办法,你需要使用HTML 验证器检查你的网页。同时,联系软件制造商(通过邮件、电话、信函)让他们知道结果。如果你要求他们的话,公司将会做正确的事。
Valérie,网络内容开发人员,说:
不是我的过错。是模板引擎设计的方法。(通常一个基于网络界面的系统)。
你是对的。通常不是你的过错。如果这是一个简单的表格,你从来没有用手编写过HTML,编写你界面的开发或是模网站的维护,直到问题解决。如果你不确定产生的内容是否合乎W3C标准,就使用HTML验证器来验证,再把报告提交给你的网络管理员,或是内容管理系统的负责人。
Ning,软件开发人员,说:
没有信息可以帮助我。我找到的所有资料都是英文的。
有人把文档和规范翻译成了其它的语言。W3C维护一个翻译列表。
HTML是一个标准的(XHTML也是!)
HTML在其发展过程中演变,有几个版本。所有版本都是标准,你可以选择适合你需求的一种。多数时候,最新的版本会是最好的选择,除非你的目标是一个特定的读者,或更旧的,破的浏览器。你选择的版本定义了你可以使用的元素和属性。
例如:在HTML 4.01里,你会找到允许你在页面里使用的元素列表和属性列表。你可以手动编辑你的页面,一种通常被称为“手工编码”或是“编写源”的方法。
HTML 4.01允许你你编写一个段落,并且给此段落编写一个描点标识符,像这样:
<p id="ref">This is a paragraph</p>
注意你嵌套你的元素的方式。有些元素不能被包含在其它元素里,还有一些属性只属于某些元素。
你可以在你的文档里编写的或是在你的软件里实现的元素,取决于HTML的版本。此表格包含了你可以使用的HTML的定义,或文档类型(DOCTYPEs):
版本 | DTD 列表 | 在文档里文档类型宣告 |
---|---|---|
HTML 2.0 | DTD | <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> |
HTML 3.2 | DTD | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> |
HTML 4.01 | Strict, Transitional, Frameset | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
XHTML 1.0 | Strict, Transitional, Frameset | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
XHTML 1.1 | DTD | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
如果你在文档的开头不使用文档类型之一,你就无法验证你的文档。当你手动编写文档时不要忘记它。
- HTML 创作工具
- 所有HTML创作工具必须提供一个文档类型,并根据此语言生成标记。
- HTML 模板
- 任何HTML 模板必须有一个文档类型。
- HTML 库或是模板引擎(服务端)
- 任何HTML 库或是模板引擎必须返回一个文档类型。
这里,你看到了一个XHTML 1.0的严格档模板的示例。
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /></head><body> ... Your HTML content here ...</body></html>
一个XHTML的严格模板是非常容易实现的。文档的修改和验证简单易懂。
验证文件
HTML 验证
一个HTML验证器针对宣告的文档类型简单的检查了文档的正确性。
如果你想要验证你最终的文档的有效性,当该文档显示在它的用户代理上了(例如,一个网络浏览器),你可以使用W3C HTML 验证器。此HTML验证器会返回一个针对选择的HTML文档的错误列表。如果你的文档没有错误,它会返回一条信息:没有找到错误!
。
如果你通过格式的帮助来编辑你的网站(你又没有在你的格式里编写HTML标记),你可以向你网站的网络管理员报告错误,要求固定HTML标记生成。
如果你手动创建你的网站,或是直接编排标记代码,验证器就会返回你页面的错误,简单的修正你的标记。HTML验证器给你错误所在行的编号。
HTML验证器提供发生错误行的编号,所以能够帮助你找到文档的问题所在。它从第一行开始,一行接一行的检查文件。这意味着在你文档开头的错误会导致你页面里接下去更多的错误。一个解决错误的好办法是,改正第一个显示的错误,然后重新验证你的页面。通常你会发现修复好一个文档前面的错误, 同时间也解决了一些错误。继续这样做,直到错误都修复,最后产生的文件就会是有效的了。
如果你使用一个HTML创作工具,而你的页面编辑之后仍不是有效的,请向软件开发人员或是公司报告。你应该能联系公司的技术支持人员。
- Amaya - 错误报告
- Dreamweaver - 错误报告
- FrontPage - 错误报告
- GoLive - 错误报告
- Homesite - 错误报告
- Netscape Composer - 错误报告
如果你是一个模板引擎、创建工具、或是内容管理系统的开发人员,使用HTML验证器来修复在你实现中的问题。你也可以把HTML验证器并入你的软件或是后端。HTML验证器的源代码是免费提供的。验证器每天都在加强,你也可以参与其发展。
注意:有些文档相对DTD是有效的,相对HTML规范也同样是不正确的。在不久的将来,我们将提出一个不是由HTML验证器检测到的可能的错误列表。
HTML 验证器列表
- W3C HTML 验证器
- WDG HTML 验证器
- Doctor HTML
验证链接
另一个不少网站存在的重要问题是URI的持久性。当你在你的文档里添加其它网站的链接时,你希望这些链接会保持稳定和持续性。这就意味着,你指出的信息点要一直存在,当别人在阅读你的网站,点击你给出来的链接,仍然还存在。你要检查,确保你给出的到其它网页上的链接或到你自己的网站上其它章节的链接都是没有任何错误的。对于这一目的开发出来的一个工具:W3C 链接检查。
Checklink生成链接报告。报告的长度取决于它取得和检查你页面里包含的所有链接的时间。为了检查链接,这个程序处理一个文档的HEAD HTTP请求。如果服务器配置错误,仅仅因为服务器不能给出HEAD,你就会得到一个错误的报告,即使链接是好的。在这种情况下,你应该写信件给网站的网络管理员,请他修复服务器配置。
Checking link http://webstandards.org/HEAD http://webstandards.org/ fetched in 0.1s
上面的是列表的一个例子。它给出了获取链接使用的时间。
在链接列表后,你会得到一个报告,是关于哪个链接是坏的或是已重定向的,哪个会帮助你修复错误链接的报告。
如果你想了解更多关于链接重要性的信息,我们邀请你访问此文档Cool URIs 不用改变
Tim Berners-Lee编写。
如果你,作为一个网络管理员,希望在你的网站上安装一个程序来帮助大家检查自己的网页,W3C 链接检查代码免费提供。
CSS 验证
自1996,层叠样式表(CSS)提供了一个以一种简洁又有效的方式把结构从样式中分离出来的方法。在过去的一年(2001年),许多用户代理(浏览器)实现了支持CSS 1和CSS 2。使用样式表帮助你在一个单一的地方维护关于你文档的所有信息。
在写这篇文章的日期,你可以在CSS 1和CSS 2中选择一个放到你的文档中。
使用样式表设计有很多好处,像降低你网站的设计成本和提高其互用性(你网站在许多不同的用户代理上的可读性)。使用表格和JavaScript为多个版本的用户代理设计你的网站,增加了初步建设成本的30%。
不要和FACE
属性使用FONT
元素。从一个国际化的角度来看,这被认为有害。如果你想要学习如何去掉你的字体元素,并采取样式表,我们鼓励你阅读Todd Fahrner的教程超出FONT标签:实用HTML文本样式。
由于通过W3C HTML验证服务和W3C CSS验证服务,你可以检查你样式表的有效性。你可以检查你的文档要求的外部样式表的有效性。如果你想要在你的网站上安装你自己的验证器,CSS验证器的源代码免费提供。
验证无障碍
制作一个网站是不足够的。大多数时候你不了解读者。访问你的网站的人有不同的材料,浏览器和/或特殊的残疾。有许多商业利益来做网页访问设计。不幸的是,很少可以直接验证你网页的无障碍性。一些工具,比如Bobby,能够帮助你,但是它们不是你无障碍性担忧的最终答案。你可能需要做一个你的内容的检查。无障碍网页倡议维护着源列表,会帮助你设计无障碍的网站。
一步一步提高质量的工具
通常大家不愿意去验证网站,因为无效页面的数目或是因为他们不知道从哪里开始。其实很容易,聪明点:小的,细心的,无障碍的,有规律的,模板化的。采用小的步骤会帮助你获得一个没有烦恼和灰心的有效网站。因此,积极思考,再找出解决的办法,这样会使得你的工作更简单,像使用一个模板引擎。
有一个能够帮助你得到一个更好的网站的工具列表。
HTML Tidy
Tidy起初是由Dave Raggett开发的。它可以帮助你使网页有效。有时候Tidy不能修复所有的错误。Tidy并不是一个编辑工具 - 他只能帮你解决问题。
Top invalid docs
有时候要知道你网站的哪些网页是无效的,是很难的。如果你运行一个会在你所有页面缓慢进行的脚本,你会得到一个巨幅的无效页面列表。
那么,如何解决?
在W3C,Gerald Oskoboiny为不超载网站网络管理员的网站开发了一个QA进步的工具。它发送一个最无效访问的前十名文档的报告,以提供通知让他们能够被改正。每周,网络管理员都会收到一个新的10个无效文档的报告。这个工具已经对公众发布了。你可以根据你的需要运用它。
Olivier Théreaux,W3C,开发了此工具的一个更便携和更可插拨的版本:LogValidator
这个工具需要网络服务器最后的记录和它通过有效性模块的处理。这些有效性模块检查最普遍文档的有效性的一个特定技术。默认的模板是HTML验证器,但是也提供其它的验证器。
所以,你能够修复你网页的拼写、是否包括元数据、是否连接都是有效的,等等。一个API 推荐会帮你按照你的需求创建新的模板。
感谢
感谢审查这篇文章的人:Ian Jacobs,Susan Lesch,Olivier Théreaux,Stephanie Troeth,Jeffrey Zeldman,还有public-evangelist mailing-list里的人。
如果没有审查和帮助我的技术作家Kim Nylander的参与,是不会有此篇文章的。
使我们的网站更标准