发新帖  新投票  回帖 
15226个阅读者,156条回复 | 打印 | 订阅 | 收藏
秋光

发表时间:2005-11-23 10:13

[原创]欢迎您!启步学代码.



秋光 发表在 教程交流 华声论坛 http://bbs.voc.com.cn/forum-163-1.html












欢迎您!启步学代码。
(一)


(秋光习作 供初学HTML代码的朋友参考)



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

击点下面查看HTML语言教材。











洪恩电脑乐园 HTML 语言教程 HTML入门




先来学文字设置

文字设置三要素(三属值):

style=font:20pt 字的大小
color=navy 字的颜色
face=幼圆 那一种字体

文字设置的一组代码:

<font style=font:20pt face=隶书 color=fff000>锦绣中华</font>

显示效果如下:

锦绣中华

相同的文字设置代码,三要素改变了,
显示效果就不同。


<font style=font:40pt face=华文新魏 color=red>锦绣中华</font>

显示效果如下:

锦绣中华



<font style=font:80pt face=华文彩云 color=fff000>锦绣中华</font>

显示效果如下:

锦绣中华

你可以把(文字设置的一组代码)复制到记事本去,改为你喜欢的文字内容,让后用回复的方式试贴,粘贴时注意先选择[HTML]标签,同时把自动修正的钩去掉。





设置字体大小还有一种叫标题字体。

<h#> ... </h#> #=1, 2, 3, 4, 5, 6,

<h1>影画世界论坛</h1>



人间正道是沧桑


<h2>人间正道是沧桑</h2>



人间正道是沧桑


<h3>人间正道是沧桑</h3>



人间正道是沧桑


<h4>人间正道是沧桑</h4>



人间正道是沧桑


<h5>人间正道是沧桑</h5>



人间正道是沧桑

<h6>影画世界论坛</h6>



人间正道是沧桑

标题字体默认黑色宋体,
故只有字体大小的变化。





常用字体代码

宋体 黑体 楷体_GB2312 仿宋_GB2312 新宋体 幼圆 隶书

方正舒体 华文新魏 华文行楷 华文细黑 华文彩云 方正姚体

















常用颜色代码
















           
#FF0000 #FFFFf0 #0000F #008000 #FF00FF #000080
















           
#008000 #00FFFF #FFf000 #993333 #FFFF00 #000099
















           
#000066 #009933 #F00000 #FFCC00 #0099FF #33CCCC
















           
#FFCCFF #33CC33 #CC0000 #3333CC #9900CC #993333
















           
#993333 #006600 #FF9900 #00CCFF #66FF33 #003300










图文:网络
编辑:秋光













[此贴子已经被作者于2005-11-26 6:19:18编辑过]



 
秋光

回复时间:2005-11-23 13:09









欢迎您!启步学代码。
(二)


(秋光习作 供初学HTML代码的朋友参考)




  







文字编辑常用代码语句:


掌握HTML语法中的分隔标签非常有必要,娴熟地

应用分隔标签,能令帖子可读性强、外观整洁漂亮。



常用分隔标签有三种:

1,强行换行:<br>       


2,强行分段:<p>内容</p>


3,div,:div>内容</div>。


..................................



强行换行:<br>

<br>是独立使用的标签,没有终止符。


下面这首诗编辑时虽然有分行,



编辑时虽然有分行,但无用强行分行标签。

.......................................



<P align=center><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 14pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312 color=fff000>


《 望庐山瀑布》 李 白


日照香炉生紫烟,遥看瀑布挂前川。

飞流直下三千尺,疑是银河落九天。

</P></FONT>


..................................



显示效果是联成一片。




《 望庐山瀑布》 李 白
日照香炉生紫烟,遥看瀑布挂前川。
飞流直下三千尺,疑是银河落九天。



..........................................




编辑文本时,在要断行的地方加入分隔标签


<P align=center><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 14pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=楷体_GB2312 color=lime>


《 望庐山瀑布》 李 白<BR><BR>


日照香炉生紫烟,遥看瀑布挂前川。<BR>

飞流直下三千尺,疑是银河落九天。<BR>

</P></FONT>


......................................



显示效果:





《 望庐山瀑布》 李 白


日照香炉生紫烟,遥看瀑布挂前川。

飞流直下三千尺,疑是银河落九天。




.........................................




强行分段:<p>内容</p>

与换行不同,p用来强行分段,

它是成对出现的标签,

即以起始符<p>引导被修饰的段落,

以</p>结束该段。


段与段之间的距离相当于一个空行,

两个<br>也得到分段的效果


........................................




类似p标签的还有div

记作:<div>内容</div>成对出现的标签。

它同样可以达到分行分段的效果

但不是一个分段标签。



.......................................













图文:网络
编辑:秋光


<
/TD>







 
南风毓秀

回复时间:2005-11-23 15:53
学习了~~

 
anne

回复时间:2005-11-25 10:27
还有没,我想学背景,还有边框,
有时候用DREAMWEAVER作出来,
再复制粘贴到论坛上,
效果不一样,
什么原因啊!

上面的认真学习,
谢谢了!




----------------------------------------------
爱上海,
但更愿意远远地欣赏它!
 
秋光

回复时间:2005-11-25 15:33









欢迎您!启步学代码。
(三)


(游子习作 供初学HTML代码的朋友参考)




  









文字显示位置的控制



文字显示位置分别为:


水平方向(align),垂直方向(valign)

水平方向即左中右:

left(左对齐)

middle(居中)

RIGHT(右对齐)


垂直方向即靠顶和靠底.


top(靠顶)、bottom(靠底)等。










水平方向即左中右的代码:



<p align=left><font style=font:15pt face=黑体 color=fff000>向左对齐</font></P>


<p align=CENTER><font style=font:15pt face=黑体 color=fff000>表示居中</font></P>


<p align=RIGHT><font style=font:15pt face=黑体 color=fff000>向右对齐</font></P>



显示效果如下:





向左对齐



表示居中



向右对齐








垂直方向valign)靠顶的代码:



<P align=LEFT valign=top>居左靠顶</P>

<P align=center valign=top>居中靠顶</P>

<P align=RIGHT valign=top>居右靠顶</P>








垂直方向valign)靠底的代码:



<P align=LEFT valign=bottom>居左靠底</P>

<P align=center valign=bottom>居中靠底</P>

<P align=RIGHT valign=bottom>居右靠底</P>








文字(或图片)放置的地位,
还可以用空格(&nbsp;)和空行(BR)调整;

用代码编辑设置挂贴(外部定位)等办法。





图文:网络
编辑:游子









[此贴子已经被作者于2005-11-25 15:37:39编辑过]



 
秋光

回复时间:2005-11-25 15:44









欢迎您!启步学代码。(四)


(游子习作 供初学HTML代码的朋友参考)




移动属性的设置



<marquee>内容文字或图片</marquee>


上面是最简单的移动标签。把它复制粘贴发表结果如下:






内容文字或图片






移动属性值有几个内容:  



移动方向 <direction=#>  速度 <scrollamount=#>

方式 <bihavior=#>  循环 <loop=#>延时 <scrolldelay=#>




启步先学方向和速度。







移动方向


direction=left   从右向左移

direction=right   从左向右移

direction=down   从上向下移

direction=up   从下向上移







移动代码:



文字从右向左移





<marquee direction=left scrollAmount=2>
<font style=font:15pt face=黑体 color=fff000>文字从右向左移!</font></marquee>





显示效果:





文字从右向左移!








移动方向


文字从左向右移的代杩。


<marquee direction=right scrollAmount=2>
<font style=font:15pt face=黑体 color=fff000>文字从左向右移!!</font></marquee>





显示效果:



文字从左向右移!





移动方向


文字从上向下移的代码:。


<marquee direction=direction=down scrollAmount=2>
<font style=font:15pt face=黑体 color=fff000><CENTER>文字从上向下移!!</font></CENTER></marquee>





显示效果:



文字从上向下移!!








移动方向


文字从下向上移!的代码:。


<marquee direction=up scrollAmount=2>
<font style=font:15pt face=黑体 color=fff000><CENTER>文字从下向上移!!!</CENTER></font></marquee>





显示效果:



文字从下向上移!!








文字来回走代码:


<marquee behavior=alternate scrollAmount=8>
<font style=font:15pt face=黑体 color=fff000>文字来回走耶!!!</font></marquee>





显示效果:



文字来回走耶!!









移动速度 <scrollamount=#>



移动速度设置数值大就走得快。



<marquee direction=left scrollAmount=2> <font style=font:15pt face=黑体 color=fff000>scrollAmount=2移动速度设置数值小就走得慢!!</font></marquee>



scrollAmount=2移动速度设置数值小就走得慢!!




<marquee direction=left scrollAmount=8> <font style=font:15pt face=黑体 color=fff000>scrollAmount=8移动速度设置数值大就走得快!!</font></marquee>



scrollAmount=8移动速度设置数值大就走得快!!








文字上下移动代码:




<font size=5 face=隶书 color=lime>
<MARQUEE scrollAmount=5 direction=up behavior=alternate height=60><center>文字上下移动</center></marquee>





文字上下移动










欣赏文字图片走四方







 欣赏文字图片走四方







图文:网络
编辑:游子









 
宠儿
原创音画组

回复时间:2005-11-26 15:44
今天终于看到全貌了,电脑的问题一直看不全。谢谢秋光!

 
秋光

回复时间:2005-11-28 06:25
华声地线

 
小虾任逍遥

回复时间:2005-11-28 21:14

谢谢楼主!学习了


 
秋光

回复时间:2005-11-29 05:58

以下是引用小虾任逍遥在2005-11-28 21:14:00的发言:

谢谢楼主!学习了








谢谢楼主!学习了



 
秋光

回复时间:2005-11-29 05:59

谢谢楼主!学习了


 
秋光

回复时间:2005-11-30 09:39






欢迎您!启步学代码。


(秋光习作 供初学HTML代码的朋友参考)






学用代码贴特效美术字。



页面上一些漂亮的美术字,是用软件或代码做成的。

要用代码编辑美术字,必须弄懂较多的要关知识。先

借人家编成的来套用吧!





(一)


欢迎您来到网络世界。的代码:

<FONT style="FONT-SIZE: 30pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>欢迎您来到网络世界。。</B></FONT>



显示效果:



欢迎您来到网络世界。








(二)


漂亮的美贴!的代码:



<FONT style="FONT-SIZE: 40pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=黑体 size=6>漂亮的美贴!</FONT>


显示效果:



漂亮的美贴!






(三)

欢迎权重的代码:


<FONT style="FONT-SIZE: 60pt; FILTER: shadow(color=yellow); WIDTH: 100%; COLOR: navy; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">欢迎权重。</FONT>


显示效果:



欢迎权重。







(四)

江山如此多娇代码:



<FONT style="FONT-SIZE: 60pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书>江山如此多娇</FONT>




江山如此多娇









(五)

假如爱有天意代码:

<FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=#ffd700, strength=50); WIDTH: 500px">假如爱有天意</FONT></FONT>


假如爱有天意









(六)



谢谢!!欣赏!!代码:


<FONT size=6><FONT style="COLOR: red; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B><I>谢谢!!欣赏!!</I></B></FONT></FONT>


谢谢!!欣赏!!






(七)



走进新时代!代码:



<FONT style="FONT-SIZE: 72pt; FILTER: shadow(color=#DA70D6); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体"><B>走进新时代!</B></FONT>


走进新时代!








(八)



祝您生日快乐!代码:


<DIV style="FILTER: glow(color=#E4DC9B, strength=5); WIDTH: 700px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 68pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#e31c1b>祝您生日快乐!</FONT></DIV>



祝您生日快乐!







(九)



我爱美丽的大自然 代码:


<FONT color=#c4b77d>
<FONT style="FILTER: shadow(color=#FF0000); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 130%; FONT-FAMILY: 华文行楷; font-size:45pt">我爱美丽的大自然</FONT><DIV align=center>



 我爱美丽的大自然







(十)



保护生态环境代码:


<FONT style="COLOR: #f90b46; FILTER: shadow(color=#AF0530); FONT-FAMILY: 隶书; FONT-SIZE: 45pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>保护生态环境</B></FONT>




保护生态环境








(十一)



努力学习,争取进步。代码:


<FONT style="FONT-SIZE: 40pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>努力学习,争取进步。</B></FONT>


努力学习,争取进步。








(十二)



欢迎来到这里代码:


<FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷" size=6>欢迎来到这里!</FONT>


欢迎来到这里!








(十二)



做的太好了,谢谢!代码:


<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>做的太好了,谢谢!</B></FONT>


做的太好了,谢谢!







图文:网络
编辑:秋光









[此贴子已经被宠儿于2005-12-2 20:46:11编辑过]



 
anne

回复时间:2005-11-30 13:13
在更新中啊,
好东西,



[此贴子已经被作者于2005-11-30 13:13:29编辑过]






----------------------------------------------
爱上海,
但更愿意远远地欣赏它!
 
西蒙小子

回复时间:2005-11-30 13:47
我是新生特来报到,多多关照!




----------------------------------------------
我是新生,来此学习;
能者为师,祈求帮助。
 
西蒙小子

回复时间:2005-11-30 14:51
我来已申请,为何HTML代码还是不可用?






----------------------------------------------
我是新生,来此学习;
能者为师,祈求帮助。
 
梦幻☆夏雨

回复时间:2005-12-1 01:03
偶来学习了!```谢谢楼主~``!




----------------------------------------------



『B&P&优优美业』■专业护发护肤用品/美容产品/美发产品/

http://shop37109042.taobao.com/

QQ:11498955

电话:13513793108

QQ:11498955
 
伯爵士

回复时间:2005-12-4 16:30

试试.!

 
伯爵士

回复时间:2005-12-4 16:31
怎么发不出?

 
宠儿
原创音画组

回复时间:2005-12-5 13:24

以下是引用伯爵士在2005-12-4 16:31:00的发言:
怎么发不出?


你没有申请加入代码组才发不出代码帖,现在已经加你了,欢迎试帖。

 
周红强

回复时间:2005-12-6 20:00

我出力顶!




[此贴子已经被作者于2005-12-6 20:02:41编辑过]



 
发新帖 新投票
 回帖
查看积分策略说明快速回复主题
你的用户名: 密码:   免费注册(只要30秒)


启用 Html 代码
使用个人签名
(请您文明上网理性发言!并遵守相关规定
   



Processed in 0.064156 s, 8 q - 无图精简版,sitemap,