网站建造教程之若何创立图象和链接?
日期:2022-03-23
作者:响应式网站设计公司
点击次数:819
上一节中,3个村民布列了自家的产物,这回, 个中第一个村民为了和其他村民相助,给产物加上了图片。图形化网页列表如代码1-3所示。
翻开记事本,输入以上代码,另存文件名为“img.htm"至桌面,双击“img.htm”文件,显现成效如图1.5所示。
提醒:此时是看不到图片的,赶忙上彀找几张冬瓜、西瓜、南瓜的图片,然后在桌面新建文件夹“images",将找到的图片放入“images’文件夹,重新翻开img.htm看看,就能看到了。
网站扶植代码分析:在网页中到场图片用
标签,在本例中,
标签有3个属性,属性之间用空格分开,个中“src"属性指定图片的径,"width"属性指定图片的宽度,"height"属性指定图片的高度。
自从第一个村民给冬瓜、西瓜、南瓜加上图片后,其他村民纷纭效仿,直到厥后每一小我的产物都越来越多时.一个页面就放不下统统的图片了。这时候,第兰个村民专心进修几天后,决议停滞改版,将原有的图片星散列表页,列表仅用于显现产物的称号和申明,称号上加链接,单击称号就能够看到图片。
第三个村民共有4个页面源代码。翻开记事本,输入代码1-4,另存文件名为“links.htm"至桌面。
翻开记事本,输入以下代码,另存文件名为"donggua.htm"至桌面。
翻开记事本,输入以下代码,另存文件名为“nangua.htm”至桌面。
都保留好后,回到桌面,双击"links.htm”文件,浏览器显现成效如图1.6所示。
页面内容中的冬瓜、西瓜和南瓜都有了颜色和下画线,这申明冬瓜、西瓜和南瓜别离都有一个链接,单击后会跳转到另外一个处所。单击随意率性一个链接,比喻冬瓜,浏览器跳转到“donggua.htm",到达"donggua.htm"后,还能够单击“前往列表”链接回到“links.htm", 如图11.7所示。