上一节中，3个群众排序了自己的商品，这次, 在其中第一个群众为了更好地和别的群众市场竞争，给商品再加上了照片。图形界面网页页面目录如编码1-3所显示。

开启文本文档，键入之上编码，另存文件夹名称为“img.htm"至桌面上，双击鼠标“img.htm”文档，显示信息結果如图所示1.5所显示。

提醒：这时是看不见照片的，赶快网上找多张东瓜、甜瓜、南瓜的图片，随后在桌面上新建文件夹“images"，将寻找的照片放进“images’文件夹名称，再次开启img.htm看一下，就能看到了。

网站建设编码剖析：在网页页面中添加照片用<img>标识，在本例中，<img>标识有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所显示。