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属性都删除。
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>结束这段文字块。块内的所有对象的风格(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%">
<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>
<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的知识了。
没有评论:
发表评论