OK之家

原创心得仅供交流欢迎交友

日志

关于我

dyzyb

本人是一个电脑网络爱好者,为了自娱自乐,也为了同有心人交流心得,特制作了这个博客,希望能抛砖引玉.更希望能得到大家的帮助,请常来看看,多多指教.

文章分类

在网页和博客中添加代码

2007-03-11 17:05:42| 分类：博客网页技巧 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

在网页和博客中添加代码

[原创:OK之家博客]

http://dyzyb.xinwen365.net/

http://dyzyb001.blog.163.com/

一、什么是代码

平时所说的代码就是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>

2、行：</tr> </tr>

3、列：<td>　</td>

4、宽：width="238"

高：height="68"

自行设计2行3列的表格：

</tr> <td height="127" width="224">　</td><td height="127" width="50">　</td>

</tr>

</tr> <td height="300" width="224">　</td><td height="300" width="50">　</td>

</tr>

</table>

因为同一行的各列高度是一样的，所以每一行只要写一个高度其余的可以省略，变成：

</tr> <td height="127" width="224">　</td><td width="50">　</td>

</tr>

</tr> <td height="300" width="224">　</td><td width="50">　</td>

</tr>

（二）文字代码说明（红色的文字二字是显现出来的文字内容,可以替换）

1、字体：

2、字号：<font size="7">文字</font>

3、字体顏色：<font color="#FF0000">文字</font>

或者直接写入顏色的英文单词，<font color="RED">文字</font>

两者的效果是一样的。

总的代码为：

三、实战操作

1、用记事本编辑制作：

我设计的标题栏比较复杂，先不去管它，只看正文栏。

打开记事本，输入自行设计2行3列的表格的代码

</tr> <td height="127" width="224">　</td><td width="50">　</td>

</tr>

</tr> <td height="300" width="224">　</td><td width="50">　</td>

</tr>

最后选择“文件”/“另存为”，在弹出的对话框中选择“所有类型”，给文件起一个扩展名为 .htm 的名字存盘。如名叫：index.htm 吧（index代表主页）。然后双击这个文件，浏览器自动打开，就能看到你制作的网页了。正文是一个插入的表格；

如果输入

浏览器看到的是红色的文字二字。

2、用网页专用编辑软件编辑

最简单的网页编辑软件是FrontPage 2003。

运行FrontPage 2003，在左下角提供设计模式、代码模式和预览，

设计模式就是所见所得模式，简单直观，专为不懂代码的人使用，点击代码，就进入代码编辑模式，二者效果是一样的。

在FrontPage 2003中的什么位置插入代码呢，很简单，只要在设计模式下将光标插入到准备插入的地方，再转入代码模式，光标的位置就是要插入代码的地方。

把刚才的代码输入到FrontPage 2003的代码编辑模式中，预览状态下的效果与记事本保存的网页是一样的。

3、再来看看在博客中添加代码

各个博客有所不同，拿网易博客日志举例说明如下：

1、博客要处于编辑状态，点击写日志；

2、网易博客也有所见所得和代码两种编辑模式。在左下角有如图按纽

显示HTML代码就是代码编辑模式，而隐藏HTML代码就是所见所得编辑模式，在显示HTML代码编辑模式下，将前面的代码输入进去，在预览状态下的效果也是一样的。

4、下面给你看一个我的网页的代码,效果如下图

标题栏是一个有跳动文字的动画，正文栏是前面讲的2行3列的表格，在第2行第2列中显示红色的文字二字：

<html>

<TBODY>

<TR>

</B>

</MARQUEE>

</B></CENTER></MARQUEE></MARQUEE></FONT></CENTER>

</EMBED></FONT></FONT></FONT></DIV></TD></TR></TBODY></TABLE>

</html>

<body>

</tr> <td height="127" width="408">　</td><td width="121">　</td>

</tr>

</tr> <td height="300" width="408">　</td><td width="121">　<font color="#FF0000" face="华文行楷" size="7">文字</font>

</td>

</tr>

</body>

评论这张

转发至微博

阅读(1467)| 评论(4)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_085071082087081065086082074065086083087075084082083',
              blogTitle:'在网页和博客中添加代码',
              blogAbstract:'<A rel=\"nofollow\" href=\"http://dyzyb.xinwen365.net/\"  \></A\>    <P\>    </P\>      <A rel=\"nofollow\" href=\"http://dyzyb.xinwen365.net/\"  \><IMG src=\"http://img.blog.163.com/photo/ArYsX9EW-GoBCvDQYn1wdw==/2898347835189764349.jpg\"  border=\"0\" \></A\>   <P\>                            <STRONG\><FONT color=\"#ff0000\" size=\"5\" \>在网页和博客中添加代码</FONT\></STRONG\></P\>  <P style=\"TEXT-INDENT: 2em;\"  align=\"center\" \><FONT color=\"#0000ff\" \> <B\>[</B\><B\>原创:OK之家博客]</B\></FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  align=\"center\" \><B\><A rel=\"nofollow\" href=\"http://dyzyb.xinwen365.net/\"  \><FONT color=\"#0000ff\" \>http://dyzyb.xinwen365.net/</FONT\></A\></B\></P\>  <P style=\"TEXT-INDENT: 2em;\"  align=\"center\" \><B\></B\></P\>',
              blogTag:'',
              blogUrl:'blog/static/2256804520072115542570',
              isPublished:1,
              istop:false,
              type:0,
              modifyTime:1316916861428,
              publishTime:1173603942570,
              permalink:'blog/static/2256804520072115542570',
              commentCount:4,
              mainCommentCount:4,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'本人是一个电脑网络爱好者,为了自娱自乐,也为了同有心人交流心得,特制作了这个博客,希望能抛砖引玉.更希望能得到大家的帮助,请常来看看,多多指教.',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/2256804520072115542570">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

OK之家

导航

日志

在网页和博客中添加代码

历史上的今天

最近读者

热度

评论

页脚