|
在网页和博客中添加代码
[原创:OK之家博客] 一、什么是代码 平时所说的代码就是HTML标记。HTML的英文全称是"Hypertext Markup Language",中文译为“超文本标记语言 ”。“超文本”就是指页面内可以包含图片，链接，甚至音乐，程序等非文字的元素。网页就是由HTML语言编写出来的。也就是平常所说的代码。 HTML标记是由括号 < > 所括住的指令所构成，由 < 开始标记 >和< / 结束标记 >构成。如<html>表示这是一个网页的开始，</html>表示此网页到此结束，在< html >和</ html >之间加上的代码就是标题栏的指令了；<body>表示正文，</body>是正文的结束；<center>是居中命令，</center>指居中的文字到此结束； HTML标记可用任何文本编辑器或网页专用编辑软件来编辑，输入<html> </html> <body> </body>，然后在<html> </html>之间输入标题栏的代码，在<body> </body>之间输入正文内容，只要在完成后以 .htm 或 .html 为文件后缀保存就成为一个网页了。 二、基本代码（各种代码可以任意组合） （一）表格代码说明： 1、表格代码： <table border="1" width="100%" > </table> 2、 行：</tr> </tr> 3、列：<td> </td> 4、宽：width="238" 高：height="68" 自行设计2行3列的表格： <table border="1" width="100%" height="356"> </tr> <td height="127" width="224"> </td><td height="127" width="50"> </td> <td height="127" width="319"> </td> </tr> </tr> <td height="300" width="224"> </td><td height="300" width="50"> </td> <td height="300" width="319"> </td> </tr> </table> 因为同一行的各列高度是一样的，所以每一行只要写一个高度其余的可以省略，变成： <table border="1" width="100%" height="356"> </tr> <td height="127" width="224"> </td><td width="50"> </td> <td width="319"> </td> </tr> </tr> <td height="300" width="224"> </td><td width="50"> </td> <td width="319"> </td> </tr> （二）文字代码说明（红色的文字二字是显现出来的文字内容,可以替换） 1、字体： <font face="华文行楷" >文字</font> 2、字号：<font size="7">文字</font> 3、字体顏色：<font color="#FF0000">文字</font> 或者直接写入顏色的英文单词，<font color="RED">文字</font> 两者的效果是一样的。 总的代码为： <font color="#FF0000" face="华文行楷" size="7">文字</font> 三、实战操作 1、用记事本编辑制作： 我设计的标题栏比较复杂，先不去管它，只看正文栏。 打开记事本，输入自行设计2行3列的表格的代码 <table border="1" width="100%" height="356"> </tr> <td height="127" width="224"> </td><td width="50"> </td> <td width="319"> </td> </tr> </tr> <td height="300" width="224"> </td><td width="50"> </td> <td width="319"> </td> </tr> 最后选择“文件”/“另存为”，在弹出的对话框中选择“所有类型”，给文件起一个扩展名为 .htm 的名字存盘。如名叫：index.htm 吧（index代表主页）。然后双击这个文件，浏览器自动打开，就能看到你制作的网页了。正文是一个插入的表格； 如果输入 <font color="#FF0000" face="华文行楷" size="7">文字</font> 浏览器看到的是红色的文字二字。 2、用网页专用编辑软件编辑 最简单的网页编辑软件是FrontPage 2003。 运行FrontPage 2003，在左下角提供设计模式、代码模式和预览，
设计模式就是所见所得模式，简单直观，专为不懂代码的人使用，点击代码，就进入代码编辑模式，二者效果是一样的。 在FrontPage 2003中的什么位置插入代码呢，很简单，只要在设计模式下将光标插入到准备插入的地方，再转入代码模式，光标的位置就是要插入代码的地方。 把刚才的代码输入到FrontPage 2003的代码编辑模式中，预览状态下的效果与记事本保存的网页是一样的。 3、再来看看在博客中添加代码 各个博客有所不同，拿网易博客日志举例说明如下： 1、博客要处于编辑状态，点击写日志； 2、网易博客也有所见所得和代码两种编辑模式。在左下角有如图按纽
显示HTML代码就是代码编辑模式，而隐藏HTML代码就是所见所得编辑模式，在显示HTML代码编辑模式下，将前面的代码输入进去，在预览状态下的效果也是一样的。 4、下面给你看一个我的网页的代码,效果如下图
标题栏是一个有跳动文字的动画，正文栏是前面讲的2行3列的表格，在第2行第2列中显示红色的文字二字： <html> <TABLE height=226 cellPadding=10 width=1024 align=center background=http://hiphotos.baidu.com/ok%D6%AE%BC%D2/pic/item/730a793d8751a1ec3c6d97de.jpg border=3 table="0"> <TBODY> <TR> <TD align="left"> <DIV align=center> </B> <p><FONT face=华康海报体W12(P) color=red size=50>
<MARQUEE direction=up behavior=alternate width=60 height=120>欢</MARQUEE><FONT color=yellow> <MARQUEE direction=up behavior=alternate width=60 height=80>迎</MARQUEE><FONT color=brown> <MARQUEE direction=up behavior=alternate width=60 height=120>光</MARQUEE><FONT color=White> <MARQUEE direction=up behavior=alternate width=60 height=80>临</MARQUEE><FONT color=blue> <MARQUEE direction=up behavior=alternate width=60 height=120>OK</MARQUEE><FONT color=yellow> <MARQUEE direction=up behavior=alternate width=60 height=80>之</MARQUEE><FONT color=orange> <MARQUEE direction=up behavior=alternate width=60 height=120>家</B></MARQUEE></FONT></FONT></FONT></FONT></FONT></FONT></FONT></p> </MARQUEE> </B></CENTER></MARQUEE></MARQUEE></FONT></CENTER> </EMBED></FONT></FONT></FONT></DIV></TD></TR></TBODY></TABLE> </html> <body> <table border="1" width="100%" height="356"> </tr> <td height="127" width="408"> </td><td width="121"> </td> <td width="397"> </td> </tr> </tr> <td height="300" width="408"> </td><td width="121"> <font color="#FF0000" face="华文行楷" size="7">文字</font> </td> <td width="397"> </td> </tr> </body> |
|
|
