论坛风格切换切换到宽版
发帖 回复
返回列表
12
  • 3847阅读
  • 39回复

[试帖] [复制链接]

 上一主题 下一主题
紫陌阡尘
新手上路
 
只看楼主 倒序阅读 0 发表于: 2006-03-29

 

 欢迎您！启步学代码。
（1）

（供初学HTML代码的朋友参考）

在网上经常见到很多精彩漂亮的网页和贴图。这些佳作都是用各种代码和软件编辑出来的。很想学一点，可是看教材头就晕，入门难呵！后来采用从简入手，边学边测试，才学到一点点东东。 没有专业知识，如何启步呢？只要你会电脑系统操作和26个英文字母就可以了。先看一遍HTML语言教材，看不懂也无关系，以后回来再学习。学本领，读书还是要的。


简略认识一下HTML代码。HTML是一种用来制作超文本文档的简单标记语言，与普通文档不同，它可以加入文字、图片、声音、动画、影视等内容，可以从一个文件跳转到另一个文件，与世界各地主机的文件连接，通过WWW浏览器显示出效果。它的特点是用一对小尖括弧（“< 和 >"）作为标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。而且大部份是成对的双标签，即首标签和尾标签。

可以用实际例子来理解标签的含义。我们要在页面上显示“我们的自由天空”七个红色隶书大字，就必须用下面文字设置代码。

<font style=font:60pt face=隶书 color=ff0000>
我们的自由天空</font>

显示结果：
我们的自由天空

 这组文字设置代码在我们的自由天空前面的是“始标签”，在我们的自由天空后面的是“尾标签”。始标签有一个标签名字和三个属性内容。尾标签在标签名字前加一斜杆即可，不用标记属性内容。对照说明：

<font style=font:60pt face=隶书 color=ff0000>
我们的自由天空
</font>

代码的第一行标签名 字号大小 什么字体 字的颜色
代码的第二行 文字内容
代码的第三行 尾标签

在“我们的自由天空”前面加一个移动始标签<marquee>，后面加一个尾标签</marquee>，这4个字就能移动了。
移动标签代码：
<marquee>我们的自由天空</marquee>。
只有名称，没有其他属性内容时，系统默认从右向左走。显示结果：

我们的自由天空。

增加移动标签的属性内容和属值，就能实现其他移动的方向和速度。例如为上面“网络世界”四个大字从左向右走编一组代码：

<marquee direction=right scrollamount=2>
<font style=font:60pt face=隶书 color=ff0000>我们的自由天空</font>
</marquee> 
 

我们的自由天空

代码的第一行是移动的始标签，内有标签名marquee和两个属性内容，即direction=right移动方向和scrollamount=2移动速度。
代码的第二行和第三行是一组有三个属性内容的文字设置标签。“始标签 ”和文字内容以及“尾标签”都套在移动标签内。
代码的第四行是移动标签的结尾标签。

记住：HTML标签是成对的，前面有一个始标签，后面必须有一个尾标签，不可多也不可少。 只有少数几个标签可以单独使用，如过行<br>代码就不用尾标签。

启步学习代码先从三个内容入手：
（一）文字设置或叫布局。
（二）表格（图框）设置。
（三）常用代码语句的应用。
 
 
 
编辑：源于网络
 
（待续）
 

 

!{UTD+|=N  
[此贴子已经被作者于2006-3-29 17:45:49编辑过]

回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
LePetitPrince
论坛版主
只看该作者 1 发表于: 2006-03-29

嗯

还真有些不熟

慢慢来了
回复
举报
紫陌阡尘
新手上路
只看该作者 2 发表于: 2006-03-29



童 话



忘了有多久
再没听到
你对我说你最爱的故事



我想了很久
我开始慌了
是不是我又做错了什么


你哭着对我说
童话里都是骗人的
我不可能是你的王子


也许你不会懂
从你说爱我以后
我的天空 星星都亮了


我愿变会变成童话里
你爱的那个天使
张开双手变成翅膀守护你



你要相信
相信我们会象童话故事里
幸福和快乐是结局



我会变会变成童话里
你爱的那个天使
一起写我们的结局


音乐:童话/光良

编缉：源于网络

P,xwSvO#M  
[此贴子已经被作者于2006-3-29 22:54:19编辑过]
回复
举报
紫陌阡尘
新手上路
只看该作者 3 发表于: 2006-03-29
　◇ 源 码 (注 释):

<html><head><!-- 标题(开始) --><title>童 话</title><!-- 标题(结束) --><!-- 音乐(开始) --><bgsound src="http://cry.shidabbs.com/web/css/bbsjc/images/tonghua.wma" loop=3><!-- 音乐(结束) --></head>
<!-- 内容(开始) --><body background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg8.jpg">
<!-- 背景表格(开始) --><TABLE align=center background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg5.jpg" border="1" cellPadding="0" cellSpacing="60" bordercolordark="#D66D31" bordercolorlight="#EF82BD" width="520"><TBODY><TR><TD align="center" width="100%" bgcolor="#Ffffff"><BR><!-- 分隔线1(开始) --><IMG src="http://cry.shidabbs.com/sc/set/white/0515/kos_line1.gif" width="343" height="77" border="0"><!-- 分隔线1(结束) --><BR><BR><!-- 主题文字(开始) --><FONT style="COLOR: #EF598C; FILTER: glow(color=#F7D75A); FONT-FAMILY: 华文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>童 话</B></FONT><!-- 主题文字(结束) --><!-- 分隔线2(开始) --><IMG src="http://cry.shidabbs.com/sc/set/white/0515/kos_line2.gif" width="240" height="54" border="0"><!-- 分隔线2(结束) --><br><br><!-- 图片边框表格(开始) --><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD> <!-- 图片1(开始) --><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic00.jpg" width="260" height="377" border="0"><!-- 图片1(结束) --></TD></TR></TBODY></TABLE> <!-- 图片边框表格(结束) --><br><!-- 文字1(开始) --><font face=宋体 size=2 color=#DE3C73>忘了有多久<br>再没听到<br>你对我说你最爱的故事</font> <!-- 文字1(结束) --><br><br><!-- 以下部分图片和文字为重复使用相同代码(只是更换了图片地址和文字) --><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic01.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73><br>我想了很久<br>我开始慌了<br>是不是我又做错了什么 </font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic02.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73>你哭着对我说<br>童话里都是骗人的<br>我不可能是你的王子</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic03.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73>也许你不会懂<br>从你说爱我以后<br>我的天空 星星都亮了</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic04.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73>我愿变会变成童话里<br>你爱的那个天使<br>张开双手变成翅膀守护你</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic05.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73><br>你要相信<br>相信我们会象童话故事里<br>幸福和快乐是结局 </font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic06.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋体 size=2 color=#DE3C73><br>我会变会变成童话里<br>你爱的那个天使<br>一起写我们的结局</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic07.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><!-- 图片和文字部分(结束) --><br><!-- 落款部分(开始) --><TABLE align=right width="302" height="189" border="0" cellPadding="0" cellSpacing="0"><TBODY><TR><TD align="left" width="100"><!-- 签名文字(开始) --><font face=宋体 size=2 color=#DE3C73>音乐:童话/光良<br><br>编缉:雪夜寒星<br><br></font> <!-- 签名文字(结束) --></TD><TD><!-- 底部装饰图(开始) --><IMG src="http://cry.shidabbs.com/sc/set/white/0515/kos_moon2.jpg" width="202" height="189" border="0"><!-- 底部装饰图(结束) --></TD></TR></TBODY></TABLE><!-- 落款部分(结束) -->
</TD></TR></TBODY></TABLE><!-- 背景表格(结束) -->
</BODY> <!-- 内容(结束) --></HTML>

　◇ 制 作 步 骤:

　◆ 1>准备工作: 先将做帖所需的图片和素材上传到有效空间(比如论坛),所需的文字用记事本保存到电脑文件夹中,以及音乐找到有效的连接地址.

　◆ 2>用记事本编写代码: 首先请大家直接复制上面源码注释部分的代码到发帖栏点击预览看看是什么效果？那么，大家按照注释改变相应的图片或者文字再预览看看有什么不同了(编写代码时注释部分可以不要）。编写相应的代码并不是叫你一个一个符号的打出来,大家可以直接复制图片、文字等相应的HTML格式语法套入自己所用的图片和文字就可以了。再在电脑中新建一个记事本用来编写代码,把编写好的代码保存为文件名.html或者文件名.htm格式，在电脑中可以直接点击该文件查看效果(在效果页面上点击右键选择查看源文件就可以打开该页面的源码记事本)。之所以让大家用记事本编辑代码是由于网页中ENTER的换行不会影响最终效果，把各段代码间格开来大家看起来比较清晰，也方便编辑，而且保存到电脑里作为备份以免因为失误造成丢失。注明：编写代码请用英文打字法（大小写不限），文字部分就转换为中文（智能ABC、五笔或其它）打字法。

　◆ 3>论坛发表帖子: 全选（Ctrl+A）记事本里的源码复制（Ctrl+C）,粘帖（Ctrl+V）到论坛的发帖栏里。再把所有的空行和空格删除，以保持所有的代码连在一起（也就是不能有因敲击Enter回车键而造成的断行或空行）。写上主题，预览查看效果，如果没有问题就可以发表了。

　◇ 源 码 解 析:（这里只是针对论坛做帖）

　◆ 1>背景
<body background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg8.jpg">内容部分</BODY>

<BODY> 常用参数解说：

background="bg1.gif"
设定背景墙纸。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。

bgcolor="#FFFFFF"
设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。

text="#000000"
用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text="black"



　◆ 2>表格

背景使用的表格:

<!-- 背景表格(开始) --><TABLE align=center background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg5.jpg" border="1" cellPadding="0" cellSpacing="60" bordercolordark="#D66D31" bordercolorlight="#EF82BD" width="520"><TBODY><TR><TD align="center" width="100%" bgcolor="#Ffffff">内容部分</TD></TR></TBODY></TABLE><!-- 背景表格(结束) -->

图片边框使用的表格:

<!-- 图片边框表格(开始) --><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD>内容部分</TD></TR></TBODY></TABLE><!-- 图片边框表格(结束) -->

落款部分使用的表格:

<!-- 落款部分(开始) --><TABLE align=right width="302" height="189" border="0" cellPadding="0" cellSpacing="0"><TBODY><TR><TD align="left" width="100">文字格</TD><TD>图片格</TD></TR></TBODY></TABLE>><!-- 落款部分(结束) -->

<TABLE>相关参数解说：

<TR>
指表格列数

<TD>
指表格行数

align="center"
表格的摆放位置（水平），可选值为： left, right, center

background="kos_bg5.jpg"
表格的背景，与 bgcolor 不要同用。可以在<td>中与<TABLE>中分别使用。

border="1"
表格边框厚度，不同浏览器有不同的内定值，故请指明。

cellpadding="0"
文字与格线的距离

cellspacing="60"
表格格线厚度

bordercolordark="#D66D31"
表格边框背光部分的颜色。（效果帖中背景边框粉红色线部分）

bordercolorlight="#EF82BD"
表格边框向光部分的颜色。（效果帖中背景边框桔红色部分）

width="520"
表格宽度，接受绝对值（如 80）及相对值（如 80%）。可以在<td>中与<TABLE>中分别使用。

bgcolor="#Ffffff"
表格底色，与 background 不要同用。可以在<td>中与<TABLE>中分别使用

bordercolor="#F7D75A"
表格边框颜色

注明：有些参数在<TABLE>与<TD>中可以同用，产生不同效果。



　◆ 3>文字

主题文字:

<!-- 主题文字(开始) --><FONT style="COLOR: #EF598C; FILTER: glow(color=#F7D75A); FONT-FAMILY: 华文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>童 话</B></FONT><!-- 主题文字(结束) -->

相关参数解说：

COLOR: #EF598C 文字颜色

FILTER: glow(color=#F7D75A) 发光颜色

FONT-FAMILY: 华文彩云 文字字体

FONT-SIZE: 40pt 文字大小

LINE-HEIGHT: 150% 区域母叨?lt;/p>

WIDTH: 100% 文字区域的宽度

注明：主题文字是用CSS滤镜实现的发光字效果与css语法和html语法的编写上有所区别，有关CSS滤镜效果将在以后的教程中作详细的说明。


<!-- 文字1(开始) --><font face=宋体 size=2 color=#DE3C73>忘了有多久<br>再没听到<br>你对我说你最爱的故事</font><!-- 文字1(结束) -->

<!-- 签名文字(开始) --><font face=宋体 size=2 color=#DE3C73>音乐:童话/光良<br><br>编缉:雪夜寒星<br><br></font><!-- 签名文字(结束) -->

相关参数解说：

face=宋体　字体

size=2　文字大小

color=#DE3C73　文字颜色


_k66Mkd#b  
[此贴子已经被作者于2006-3-29 23:24:27编辑过]
回复
举报
紫陌阡尘
新手上路
只看该作者 4 发表于: 2006-03-29
◆ 4>图片

实例中，分隔线、图片和装饰图都是应用的图片标签（废话，都是图片当然用图片标签），下面以内容图片做参照说明：

<!-- 图片1(开始) --><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic00.jpg" width="260" height="377" border="0"><!-- 图片1(结束) -->

相关参数解说：

src="pic00.jpg"　图片连接地址

width="260"　图片宽

height="377"　图片高



　◆ 5>音乐

<!-- 音乐(开始) --><bgsound src="http://cry.shidabbs.com/web/css/bbsjc/images/tonghua.wma" loop=3><!-- 音乐(结束) -->

<BGSOUND> 是用以插入背景音乐，但只适用於 IE，其参数设定不多。

相关参数解说：

src="your.mid"
设定 midi 档案及路径，可以是相对或绝对。

autostart=true
是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。

loop=infinite
是否自动反覆播放。LOOP=2 表示重复两次，Infinite 表示重复多次。



　◆ 6>总结

　　除以上所说明的代码以外实例还用到了一个排版标记<br>，该标记称为换行标记。作用：令字、画、表格等显示于下一行。

　　关与<!-- 以下部分图片和文字为重复使用相同代码(只是更换了图片地址和文字) -->注释部分，大家可以先编缉设定好一张图片和所配文字的代码，由于其它图片和文字所用到的效果相同，所以只用复制粘帖多次，把相应的图片和文字进行更换就可以了。

　◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆
回复
举报
紫陌阡尘
新手上路
只看该作者 5 发表于: 2006-03-30
[mp=300,45,true]http://www.tlaem.com/少儿音乐/小燕子.mp3[/mp]
回复
举报
紫陌阡尘
新手上路
只看该作者 6 发表于: 2006-03-30

回复
举报
紫陌阡尘
新手上路
只看该作者 7 发表于: 2006-04-01

 



T Eu'*>g  
[此贴子已经被作者于2006-4-1 14:38:31编辑过]
回复
举报
紫陌阡尘
新手上路
只看该作者 8 发表于: 2006-04-02
Incomplete 歌手：Backstreet Boys 专辑：Never Gone Empty spaces fill me up with holes Distant faces with no place left to go Without you within me I can’t find no rest Where I’m going is anybody’s guess I’ve tried to go on like I never knew you I’m awake but my world is half asleep I pray for this heart to be unbroken But without you all I’m going to be is incomplete music Voices tell me I should carry on But I am swimming in an ocean all alone Baby, my baby It’s written on your face You still wonder if we made a big mistake I’ve tried to go on like I never knew you I’m awake but my world is half asleep I pray for this heart to be unbroken But without you all I’m going to be is incomplete I don’t mean to drag it on, but I can’t seem to let you go I don’t wanna make you face this world alone I wanna let you go (alone) I’ve tried to go on like I never knew you I’m awake but my world is half asleep I pray for this heart to be unbroken But without you all I’m going to be is incomplete Incomplete [MP=200,50,false]http://file.vchinese.com/club/music1/2006-03-20/music276752_music4321.mp3[/MP] 点击下载 >ezi3Zx^  
[此贴子已经被作者于2006-4-2 8:34:14编辑过]
回复
举报
紫陌阡尘
新手上路
只看该作者 9 发表于: 2006-04-04

回复
举报
淡了红颜
荣誉会员
只看该作者 10 发表于: 2006-04-09

hg@ }@Wq\)  
[此贴子已经被作者于2006-4-16 21:29:47编辑过]
回复
举报
淡了红颜
荣誉会员
只看该作者 11 发表于: 2006-04-15



回复
举报
淡了红颜
荣誉会员
只看该作者 12 发表于: 2006-04-15


x3ERCqTR  
[此贴子已经被作者于2006-4-15 14:57:34编辑过]
回复
举报
花飞舞
精灵王
只看该作者 13 发表于: 2006-04-16
头大了。。。。
回复
举报
淡了红颜
荣誉会员
只看该作者 14 发表于: 2006-04-16



回复
举报
淡了红颜
荣誉会员
只看该作者 15 发表于: 2006-04-16



回复
举报
淡了红颜
荣誉会员
只看该作者 16 发表于: 2006-04-16



回复
举报
淡了红颜
荣誉会员
只看该作者 17 发表于: 2006-04-16

回复
举报
此间的少年
精灵王
只看该作者 18 发表于: 2006-04-16

好PP哇

[em02]
回复
举报
淡了红颜
荣誉会员
只看该作者 19 发表于: 2006-04-16

回复
举报
发帖 回复
返回列表
12
快速回复
限100 字节
 
上一个 下一个