老杂毛博客
  青青子衿,悠悠我心。但为君故,沉吟至今。
博客首页 | 人生历程 | 编程开发 | 机关门  
  文章分类
 
博客首页 > 网络营销相关 > 文章正文

HTML基础教程第五讲,文字链接和图片链接

2011/4/21 21:11:13
 
        在上一讲中我们讲了如何来做一个好看的公告栏,也提供了很多好看的淘宝公告栏代码。都是用table拼装出来的,几个基本的属性也都讲解完了,表格的大小,背景颜色,背景图等等问题。

         其实最重要的就是做一个适当大小的表格,然后选择一个好看的图片做为背景图,这样就可以做出自己的好看公告栏来了,我们今天这篇文章主要介绍另外两个常用标记。首先我们来看一下他们所完成的功能:

一、如何为文字增加超级链接。

二、如何插入一张图片。

三、如何为图片增加超级链接。

      首先我们来讲解第一个问题。

一、如何为文字增加超级链接?

       我们在论坛发贴的时候如果增加链接只需要选中需要增加链接的文字,然后点击类似锁链一样的按钮,输入地址就可以达到这个目的了,但是有些编辑器是不给我们提供链接按钮功能的,这时候我们就需要自己来写代码做超级链接,我们先来看一个例子。

老杂毛的博客

代码:#lt;a href="http://www.laozamao.com" target="_blank"#gt;老杂毛的博客#lt;/a#gt;

通过上例我们可以得出来,链接是用a标记来表示的,我们在第一讲的时候讲过,标记一定要成对出现,所以有#lt;a#gt;的开头就应该有#lt;/a#gt;的结尾。

在a这个标记中有两个比较重要的属性“href”和"target",这两个属性非常重要,href是写需要跳转的地址,这里需要注意,地址一定要以http://开头,除非你是网站开发者,用相对路径,否则网址前一定要加http://,不然是不能链接过去的。

target属性的值常用的有两个,我们这里只说一个“_blank” 记住前面是有一个下划线的,如果我们在a标记里面写入了 target="_blank" 这说明我们希望这个链接在新窗口打开,如果让链接在本窗口打开的话,我们就不加这个属性就好了。

例如:

#lt;a href=“http://www.laozamao.com”#gt;天道博客#lt;/a#gt;

这样的链接就是在本窗口打开的。为了更能说明情况,我做两个这样的链接,大家可以点击一下看看:

新窗口打开的链接:老杂毛博客

本窗口打开的链接:老杂毛

二、如何插入一张图片

下面我们说一下如何插入一张图片:#lt;img src="地址" /#gt;

以上代码就是用来引用图片的,大家可以看到在标记的最后有一个/#gt; 而并没有#lt;/img#gt;这样的标记,是因为在html里有一些表现元素的标记可以直接这样结束,而不需要单独的结束标记,当然我们如果这样写的话也完全正确:#lt;img src="图片地址"#gt;#lt;/img#gt;,这样写也是完全可以的。

我们在很多编辑器里是可以自己上传图片的,也可以引用网络上的图片,如很多淘宝的店主就会引用其它网络相册上的图片。

而有的时候我们在引用图片的时候发现我们上传的图片尺寸过大,超出了屏幕的宽度, 这时候我们应该怎么办呢。在编辑器里我们可以用鼠标点击一下拖动四角就可以完成图片大小的设置,如果我们需要用代码设置的话请增加以下两个属性:width和height,这两个属性我们在table标记的学习中已经学习过了,width是宽度的意思,height是高度。如我现在把刚才的图片做一个大的。

此图片代码:#lt;IMG src="http://bbs.tv150.cn/TianDaoEdit/UploadFile/f796e620-18eb-4e78-81bf-4ae508b2b000.gif" width="230" height="230" /#gt;

可以看到我们增加了两个这样的属性:width="230" height="230"

当然也不是所有的图片都可以这样随意放大的,有些图片这样放大之后会失帧,随之就会变模糊看不清了。

三、如何为图片增加超级链接。

图片的插入方法我们知道了,链接的增加方法也知道了,那么为图片增加链接就很容易了,我们只需要把二者相结合,就可以解决这个问题,如:#lt;a href="链接地址" target="_blank"#gt;#lt;img src="图片地址" /#gt;#lt;/a#gt;

我现在要为这张图片增加一个链接,指向到我的个人博客里:

这是一个带链接的图片,点击可以到我的博客里,这时候我们发现一个问题,图片带了一个蓝框,如何才能把这个蓝框去掉呢,我们只需要在img标记里加上这样一个属性就可以了 border="0" 在table标记的学习中我们知道border是边框线的意思,我们让边框线等于零,意思就是说这个图片不显示边框线,所以就不会显示了。如:

这个图片也是带链接的,点击可以跳转到我的博客。

代码:#lt;A href="http://www.laozamao.com/" target=_blank#gt;#lt;IMG border=0 src=http://bbs.tv150.cn/TianDaoEdit/UploadFile/f796e620-18eb-4e78-81bf-4ae508b2b000.gif /#gt;#lt;/A#gt;

实际应用

        我们可以把一些热卖的产品做一些图片或写一些文字放到公告栏里,然后链接到我们的产品页面,这样会起到一个很好的宣传作用。

这是我在淘宝里随便找到的一个店铺公告:

按他这种写法,其实有很多地方可以加上链接,指向自己的产品页面。

这里的图片基本都是带链接的,我想应该是利用淘宝的编辑器编辑的吧,如果要做的更精美一些可以用ps自己简单的设计一下图片,然后再用dreamweaver好好排一下版,把代码直接粘贴到公告栏里就可以了。(老杂毛/文)

阅读: (1891)  评论(10)  
 
网友评论:
 
 1.2016/5/13 21:15:24 
 2.2016/8/9 7:21:03 
 3.2016/8/20 14:28:40 
 4.2016/11/16 17:05:11 
 5.2018/1/24 0:47:43 
 6.2018/2/8 2:25:37 
 7.2018/2/26 0:27:33 
 8.2018/3/14 17:28:59 
 9.2018/3/31 8:19:20 
 
相关文章:
 什么是微信公众帐号?
 怎样利用QQ群推广网店?
 如何寻找活跃的QQ群?
 网络广告的形式有哪些?
 淘宝站内搜索的一些排名靠前方法。
 什么是软文?怎样利用软文推广?
 网店推广之最准确定位客户的合作推广法
 简单的几句话可以总结我们成功的全过程
 网店推广之博客推广法
 网店推广之新浪博客免费广告推广法
 
 
     
联系作者: QQ: 657603425 Email: [email protected]
Copyright © 2007-2014 www.laozamao.com All Rights Reserved
京ICP备09002242号 北京海淀分局备案号:1101084842