“公益广告”模块代码注释

已经有好几位朋友问我的“公益广告”模块是怎么做的了，所以我把我的代码贴出来，并注上解释，你们可以通过解释，简单的写自己的代码。这个模块是采用































MSN Space的自定义HTML模块创建。自从上次MSN































Space升级了系统以来，这个模块的代码字符数限制从512B升到了2KB。2KB的代码足够写一个小小的网页了。

但是MSN Space很坏，上传到MSN Space相册里面的图片的URL的长度简直吓人。如：

http://tk.files.storage.msn.com/x1pxzZ39wV--_emPtX_aBZ74kFCleMZFqJhDb7U7
MCbsZm6jq-mjFrASnQDc77HvE8x4WkV6ucjLRCpI3jx3HOOakGMmj8wUqO9
GZqkwwAv9RkvBHRTaVpE7IOB65oQtaClguwstbBIPUg

这是我的相册里面的一张图片的URL。这样的URL用在HTML里面实在是浪费，所以推荐使用Flickr相册，图片可以自由引用，而且URL比较短，例如下面代码是我的一张图片在Flickr里的地址：

http://static.flickr.com/70/170115886_e711af3b55_o.png

是不是只有其1/3还不到啊。

好了现在开始解释我的代码。

说明：
1. 下面的代码非标准的HTML代码；
2. 部分HTML标签MSN会以“安全因素”而不被解释，例如，<object></object>，以及非标准网络协议：“callto:”（Skype），“ed2k://”（emule），“tencent://”（QQ直聊）；
3. 以下所有的引号均为英文引号，并且均可省略（style属性后面的引号最好不要省略）；
4. 注释使用红色斜体的字，注释符号为C++风格，而不是标准HTML注释，请在直接引用代码的时候予以删除；
5. 加入你已经在自定义HTML中添加了计数器，你可以在计数器代码后面添加一下代码；
6. 为了节省代码，可以把所有的title、alt属性都删除。

代码：

<div style="text-align:center;background-color:white">
// <div>是一个文字块的开始，下面会有另一个</div>结束这段文字块。块内的所有对象的风格(style)是，文字对齐：居中；背景色：白色
<br>
//<br>是回车符，下同。
<img src="http://www.creativecommons.cn/images/public/somerights.gif"><br>
<a href="http://creativecommons.cn/licenses/by-nd-nc/1.0/">署名-非商业用途-保持一致</a><br>
// <img>标签是没有闭标签</img>的。图片的源地址（src）是：“…”
//回车
//链接<a>指向的地址（href）是：“…”链接的文字是“署名-非商业用途-保持一致”
//回车
<hr width="90%">
//横线，长度是90%的块宽度，下同。
<a































href="http://www.spreadfirefox.com/?q=affiliates&id=0&t=78"><img































border=0 alt="Get Firefox!" title="Get Firefox!"































src="http://sfx-images.mozilla.org/affiliates/Buttons/120x60/get.gif"></a><br>
//































类似前面的。<img>标签中的border=0是为了去除图片作为链接的时候产生“蓝色边框”（类似于文字下的蓝色横线。）；alt是用于































标注在网络出现问题无法下载图片的时候出现的解释性文字；tltle是用于标注鼠标悬停出现的解释性文字，可以用于图片的简单解释。
<hr width="90%">
<a































href="http://fedoraproject.org/wiki/Distribution/Download" title="Get































Fedora Linux!"><img































src="http://ersaclarke.blog.edu.cn/UploadFiles/2006-4/426987774.jpg"































border=0></a><br>
<hr width="90%">
<a































href="http://www.ubuntu.com/download" title="Get Ubuntu































Linux!"><img































src="http://ersaclarke.blog.edu.cn/UploadFiles/2006-4/426760508.png"































border=0></a><br>
<hr width="90%">
// <a>标签中的title的作用于<img>标签中的title一致。其实上面这段代码中的title可以移动到<img>标签中。
<a































href="http://www.apple.com/getamac/" title="It's time to revolution































your desktop!"><img































src="http://static.flickr.com/70/170115886_e711af3b55_o.png"































border=0></a><br><hr width="90%">
</div>
//</div>文字块结束。你可以在自定义HTML中使用多个<div></div>包围的文字块。以实现不同的风格。

下面以一个例子说明代码的编写。

假如已经有了计数器或者其他有趣的东西的代码，想要添加创作公用的图标。可以这样写：

<div><!--计数器的代码……--></div>
<div style="text-align:center;background-color:white">
<hr width="90%">
<img src="http://www.creativecommons.cn/images/public/somerights.gif"><br>
<a href="http://creativecommons.cn/licenses/by-nd-nc/1.0/">署名-非商业用途-保持一致</a><br>
</div>

如果想让图片也成为文字链接的一个部分，可以这样修改：

<div style="text-align:center;background-color:white">
<hr width="90%">
<a href="http://creativecommons.cn/licenses/by-nd-nc/1.0/">
<img src="http://www.creativecommons.cn/images/public/somerights.gif" border=0><br>署名-非商业用途-保持一致</a><br>
</div>

说了一通，不知道你明白了没有呢？还是不明白的话，那你就随便找一本HTML的书来看看，不到半天就可以掌握几乎所有HTML的知识了。