5 3 1 5 2 html head titletitle
- Slides: 44
5. 3. 1图片链接 <!--程序 5 -2 --> <html> <head> <title>建立图片链接</title> </head> <body> <center> <h 2>图片链接</h 2> <hr> <a href="www. baidu. com" target="_blank"><img src= "images/baidu_logo. gif" /></a> </center> </body> </html>
5. 3. 3电子邮件链接 <!--程序 5 -5 --> <html> <head> <title>发送邮件</title> </head> <body> <p> 这是邮件链接： <a href="mailto: xyz@gmail. com? cc=abc@yahoo. com. cn&subject =你好 &bcc=a@gmail. com&body=祝你度过快乐的一天！"> 联系我们</a> </p> </body> </html>
5. 3. 4 FTP链接 <!--程序 5 -6 --> <html> <head> <title>ftp链接</title> </head> <body> <p> 这是一个FTP链接： <a href= "ftp: //ftp. pku. edu. cn/" >北京大学FTP服务器 </a> </p> </body> </html>
5. 3. 4 FTP链接
5. 4图像映射 l 基本语法： <img src="URL" usemap="id/name"> <map name="name" id="id"> <area shape=" " coords=" " href="URL"> </map>
5. 4图像映射 <!--程序 5 -8 --> <html> <body> <p align="center"> <img src="images/chmap. jpg" width="650" height="538" border="0" usemap="#china. Map"/> <map name="china. Map"> <area shape="rect" coords="431, 288, 487, 324 " href="#zhengzhou" alt="郑州"> <area shape="circle" coords="497, 196, 14" href="#beijing" alt="北京"> <area shape="circle" coords="560, 327, 16" href="#shanghai" alt="上海"> <area shape="poly" coords="542, 110, 629, 130, 587, 169" href= "#changchun" alt="长春"> </map> </p>
5. 5小实例 <!--程序 5 -9 --> <html> <head> <title>班级网站</title> <link href="css/style. css" rel="stylesheet" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=gb 2312"> </head> <body> <table width="940" border="0" align="center" cellpadding="0" cellspacing="0" background="images/menu-bg. gif"> <tr> <td width="3"><img src="images/menu-bg-left. gif" width="3" height="40" /></td> <td width="199" align="center" valign="middle"></td> <td valign="middle" width="120" align="center"><a href="#" class="head"> <b>首页</b></a></td> <td class="menu. Space" width="3"></td> <td valign="middle" width="120" align="center"><a href="xinwen/news. html" class="head">班级新闻</a></td> <td class="menu. Space" width="3"></td> <td valign="middle" width="120" align="center"><a href="photo/photo 1. html" class="head">班级相册</a></td>
5. 5小实例 <td class="menu. Space" width="3"></td> <td valign="middle" width="120" align="center"><a href="gerenzhuye/student. html" class="head">个人主页</a></td> <td class="menu. Space" width="3"></td> <td valign="middle" width="120" align="center"><a href="liuyan/message. html" class="head">留言本</a></td> <td class="menu. Space" width="3"></td> <td valign="middle" width="120" align="center"><a href="benqishili/li. html" class="head"> 网页设计</a></td> <td class="menu. Space" width="3"></td> <td valign="middle" width="120" align="center"><a href="about/about. html" class="head"> 关于我们</a></td> <td width="3"><img src="images/menu-bg-right. gif" width="3" height="40" /></td> </tr> </table> </body> </html>
5. 5小实例 <!--程序 5 -10 --> <html> <head> <title>班级相册</title> </head> <style>. img_x { margin: 15 px; height: 80 px; width: 120 px; border: 1 px solid #8397 A 0; } </style> <body> <center> <h 2>图片链接</h 2> <HR> <table> <tr> <td align="center"> <a href="images/004. jpg" target="_blank">
5. 5小实例 <img src="images/004_s. jpg" width="400" height="545" border="0" class="img_x" alt ="点击图片查看大图"></a></td> <td align="center"> <a href="images/005. jpg" target="_blank"><img src="images/005_s. jpg" width ="600" height="404" border="0" class="img_x" alt="点击图片查看大图"></a></td> <td align="center"> <a href="images/006. jpg" target="_blank"><img src="images/006_s. jpg" width ="600" height="404" border="0" class="img_x" alt="点击图片查看大图"></a></td> </tr> </table> </center> </body> </html>
Company name WEB编程基础 w w w . h n u f e . e d u . c n