下载文档原格式
电子科技大学电子工程学院标准实验报告（实验）课程名称用HTML语言制作简单的网页电子科技大学教务处制表电子科技大学实验报告学生姓名：万羽学号：2902103035 指导教师：伍瑞钦一、实验室名称：科B457二、实验项目名称：用HTML语言制作简单的网页三、实验原理：1.网页（1）网页就是在浏览器上看到的一页，网页也称为Web页。
（2）主页通常是进入网站首先浏览的网页，具有引导用户浏览整个网站内容的作用。
（3）超链接是网页中的特殊标记。
它指向了WWW中的其他资源，如其他网页、网页的另一个段落、声音文件等。
这些资源可以位于自己的计算机上，也可以位于其他计算机上。
用作超链接的标记可以是一段文字、一幅图像，也可以是一幅图像的一部分。
在浏览网页时，单击超链接就可以跳转到超链接所指向的资源。
超链接像一根一根的线一样，将各种网页链接在一起，形成一个庞大的信息网。
2.HTML语言（1）HTML语言就是超文本标记语言，是网页制作的基础，也是基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式存储在计算机里。
（2）HTML的脚本可用任何一种文本编辑器进行编写，如记事本、Microsoft Word等。
保存时要将脚本保存成纯文本格式，扩展名必须是.htm。
（3）HTML脚本的基本结构。
HTML脚本总是以<html>标记开头，</html>标记结尾，在<html>和</html>标记之间是HTML的所有内容，一般情况下它分为两部分：头部和主体。
头部总是由<head>和</head>标记定义的，其中包含了HTML脚本的标题和说明信息；头部下面是HTML脚本的主体部分，它以<body>作为起始标记，</body>作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。
3.FrontPageFrontPage是一种简单易学的Web管理和网页制作的软件。
简单实用的个人网站首页代码1 主页<html><head><title>欢迎来到个人门户网站</title><style>body{background:url(010.jpg) no-repeat;}</style><bgsound src="1.mp3" loop="-1"><p><center><b><font size="7"color="#cc3366">欢迎来到个人门户网站</font></b></center></p><img src="huany.gif"><img src="5555.jpg" center><br><style><!--blockquote{color:#FFFFFF;font 700 small-caps normol 1.3e"楷体_GB2312";margin:%2 20% 5% 20%;padding:20px;border-top-width:50px;border-right-width:10px;border-bottom-width:10px;border-left-width:10px;border-top-style:solid;border-right-style:double;border-bottom-style:solid;border-left-style:double;border-top-color:#999999;border-right-color:#CCCCCC;border-bottom-color:#999999;border-left-color:;#CCCCCCC;background-image:url(77777.jpg);background-repeat:no-repeat;background-position:right bottom;}--></style></head><body><blockquote><span>雨霖铃</span><ul><li>内容<li>内容<li>内容<li>内容</ul></blockquote><a href="denglu.html"> 跳至登录界面</a><br></body></html>2登陆页面1<html><head><title>用户登录</title></head><body background="66.jpg"><p><center><b><font size="7"color="#cc3366">欢迎登录</font></b></center></p><div style="text-align:center"> <form><p>用户名：<input type="text"name="name" value="请输入用户名"size="25"maxlength="50"> <br>密码：<input type="passwd" size="25" maxlength="50" ><br></form><a href="geren.html"> 登录</a><br>没有账号？点击<a href="zhuce.html">注册</a><br></div></body></html>3注册页面<html><head><title>zhuce</title></head><p><center><b><font size="7"color="#cc3366">注册账号</font></b></center></p><body background="55.jpg"><div style="text-align:center"><b>注册:<b><br><form><p><br> <br> <br> <br> <br> <br>用户名：<input type="text"name="name" value="请输入用户名"size="25"maxlength="50"> <br>密码：<input type="passwd" size="25" maxlength="50" ><br></form><a href="denglu1.html">注册<br></div></body></html>4登陆页面2<html><head><title>用户登录</title></head><body background="66.jpg"><p><center><b><font size="3"color="#cc3366">注册成功请登录</font></b></center></p><div style="text-align:center"><form><p>用户名：<input type="text"name="name" value="请输入用户名"size="25"maxlength="50"> <br><br><br>密码：<input type="passwd" size="25" maxlength="50" ><br></form><a href="geren.html"> <b>登录<b></a><br></div></body></html>5 个人主页<html><head><title>***的个人信息</title></head> <bgsound src="big.mp3" loop="-1"><body background="66.jpg"><p><center><b><font size="7"color="red">个人信息</font></b></center></p> <table border="1" width="100%"align="center"><tr height="40"><th width="20 %">姓名</th><th width="20 %">学号</th><th width="20 %">班级</th><th width="20 %">爱好</th><th width="20 %">照片</th></tr><tr height="40" ><td>蒋桂芳</td><td>2013*** </td><td>？班</td><td>看书，。
一：文字加粗倾斜的代码◆文字加粗的代码是: <b>你好</b> ◆文字倾斜的代码是: <i>你好！</i> ◆底线字：<u></u>二：文字链接代码如果您想点击某处文字会连接到另外一个网页的效果，这是超链接，代码是这样：<a href="网站地址";>共享空间</a>如果要点了这个文字以后重新打开一个窗口的话，代码是：<a href="网站地址";; target="_blank">共享空间</a>三：在网站上放图片的代码如果你看到一个好看的图片想放到网站上，代码是这样的：<img src="/wwwimages/n/163logo.gif"; width="150" height="100">后面的数字调节图片的尺寸大小。
四：图片链接代码如果要点一下图片就能打开一个网站的链接代码是这样的：<a href="";><img src="/wwwimages/n/163logo.gif"; width="150" height="100"></a>如果要点一下图片就能打开一个网站的链接，并且重新打开一个窗口。
代码是这样的：<a href="";; target="_blank"><img src="/wwwimages/n/163logo.gif"; width="150" height="100"></a>上面的数字都能调节图片尺寸大小。
竭诚为您提供优质文档/双击可除html简单网页模板下载篇一：html模版html5是web技术发展的重要的里程碑，对于前端开发来说，如果能够找到一些未来大家开发中可能需要经常重复使用的代码的话，相信大家一定不会拒绝，下面是我们精心收集的10多个html5代码片段，相信大家一定喜欢！html5的最简单模板如果你需要开始一个新的html5项目的话，大家肯定会需要一个最简单的模板，这里是一个非常简单并且清晰的html5模板，相信大家会喜欢！untitledsrc="/svn/trunk/html 5.js">web的主要内容表单获取google地图这里有一段非常简单的代码，通过用户输入地点，获取google地图地点，非常适合生成联系人表单base64编码的1x1大小的空白giF文件个人不推荐使用这个透明的空白gif，但是即使在20xx 年，很多人仍旧使用。
可能你也喜欢使用这种方式。
src="data:image/gif;base64,R0lgodlhaqabaiaaaaaaap// /yh5baeaaaaalaaaaaabaaeaaaibRaa7">正则表单式验证电子邮件html5中允许使用正则表单式来做输入验证：pattern="[^@]+@[^@]+\.[a-za-z]{2,6}"/> 正确的嵌入flash如果你经常需要在网页中插入flash的话，这段代码你应该用的上：视频并且支持flash的fallback另外一个html5中最有用的特性是video标签，允许你很方便的嵌入video文件。
但是很多老版本的浏览器不支持，所以下面这段代码将会非常有用iphonecallfunctionmakenewwindow(){newwindow=self.op en("","","height=10,width=30");}functionclosenewwin dow(){if(newwindow){newwindow.close();newwindow=nul l;}}functionopenalert(){self.alert("这是一个javascript警告对话框！！");}functionopenconfirm(){if(confirm("是否创建一个警告对话框")){window.alert("这是一个javascript警告对话框！！");}}functionopenprompt(){varname;name=prompt("请输入您的名字：","");if(name){alert(name+"欢迎进入该网站！！！");}}functionopenlink(){location.href="";}窗体的创建和关闭。
小学六年级信息技术教案制作简单的网页一、教案简介本节课主要教授小学六年级学生如何制作简单的网页。
通过本课的学习，学生将会掌握网页制作的基本步骤，了解网页的结构与元素，并能够通过使用HTML语言编写简单的网页。
二、教学目标1.了解网页制作的基本流程。
2.掌握HTML语言的基本标签与使用方法。
3.能够独立编写简单的网页。
4.能够对制作的网页进行基本的样式设计。
三、教学内容与步骤1. 网页制作的基本流程a. 探讨网页制作与设计的重要性。
b. 简要介绍网页的结构与元素。
c. 了解网页制作的基本步骤：计划、设计、编写、测试、发布。
2. HTML语言的基本标签与使用方法a. 解释HTML的含义与作用。
b. 介绍HTML的基本标签，如<head>、<body>、<h1>等。
c. 示范学生如何使用HTML标签编写基本网页结构。
3. 简单网页的制作a. 学生根据老师的指导，使用HTML语言编写一个简单的网页。
b. 通过实践操作，学生可以自由发挥，添加文字、图片、超链接等元素。
c. 强调网页的排版与布局的重要性，指导学生进行基本的样式设计。
4. 网页的测试与发布a. 学生将自己制作的网页进行测试，检查是否存在错误或显示问题。
b. 学生可以通过FTP工具将网页上传至网络服务器，实现网页的发布。
四、教学资源与工具1. 学生电脑2. HTML编辑器软件（如Notepad++）3. 互联网连接4. FTP工具（如FileZilla）五、教学评估1. 课堂参与度评估：观察学生在课堂上的主动性、积极性与合作性。
2. 作业评估：要求学生提交自己制作的网页，检查网页结构与样式的完整性与准确性。
六、拓展延伸1. 引导学生探索更复杂的网页制作与设计方法。
2. 鼓励学生使用CSS样式表为网页添加更丰富的样式与效果。
3. 演示学生如何添加多媒体元素，如音频、视频等。
4. 组织学生进行网页制作的比赛，激发学生的创造力与团队合作精神。
1，看看自己具有哪个大明星的脸型/cgi-bin/index/2，超有意思的Flash网站，虚拟办公3，亲自动手给美女画纹身/UK/tattoo_parlour/index.html4，输入文字就发出声音！只支持繁体中文，同时也是学习普通话和粤语的好地方5，在线做个通缉令/wanted/6，制作属于自己的卡通大头像吧7，在你的照片上添加有趣对话8，这个网站提供各种有趣的在线拼图9，很逼真！模仿XP系统操作的网站10，原来制作带阴影的LOGO如此容易/web2.php 11，教你打领带/dalingdai.html12，系鞋带的N种方法/shoelace/lacingmethods.htm#2trillion13，咱也弄个自己的徽章玩玩/seal/index.php 14，在线素描http://flashface.ctapt.de15，各种动画图标制做16，各种字体图片制做17，/index8.php超牛的语音翻译，输入文字里面的人自动给你以语音的形式翻译出来，有趣的是他眼睛跟你你鼠标转，遗憾的是不是免费的！18,你今天印书了么？免费将你的博客翻印成书/?UN=f1208b59454a9a744055&ShowType=019，做个德国身份证玩玩http://onlinewahn.de/generator/20，自己做个图来让别人拼/puzzle/21，在线媒体提取工具22，DiY网络拼图23，2G网络硬盘，仿windows操作系统24.在线媒体转换工具它支持大量的文件格式之间的互相转换，包括视频、音频、PPT文档、Word文档、表格文档、图片等等数十种之多。
比如你可以把mp3转换成wav，把png转换成gif，把word文件转换成txt文件25.在线保存，分享和交流网页，博客，新闻为您的一篇文章嵌入Hinale按钮，更方便用户保存和交流您的文章26.blog 搜索引擎.au27.[ ImageCrop ]功能相对简单，它其实是一款为MSN、Yahoo Messager等制作头像的剪裁工具，因此，它的特色在于内置了专用尺寸模板，比如MSN、论坛头像75×75或85×85的尺寸等等。
花店网页模板 中文html网页模板,简单个人网页模板 6394css网页模板_flash中国 http://www.flachina.in花店网页模板 中文html网页模板,简单个人网页模板 6394css网页模板_div css网页模板花店网页模板 中文html网页模板,简单个人网页模板 6394css网页模板_静态网页模板下载css内的图片等，只需输入单个网页的URL地址？查看原文：网页模板小偷软件可以帮您快速下载单个目标网页及内含的素材输入目标网页的网址，听说网页。
即可在C盘生成对应文件夹保留整个网页。
简单的网页模板。
css内的图片等，此时稍作手工改削？然后再运行申请器。
简单个人网页模板。
而且包含网页文件所用到的图片。
学会企业静态网页模板。
换IP的时候须退出申请器，单个。
js文件，模板。
可以选择本地的保存目录，对于花店网页模板。
css文件。
稍作手工修改，对于6394css网页模板。
3：网页。
下载包里有个代理工具，学习简单个人网页模板。
我就不多说了：css文件。
听说中文html网页模板。
网页模版而且包含网页文件所用到的图片，对比一下花店网页模板。
2：下载包里有个号码分析器也挺好用的。
网页模板设计。
查看原文：想知道网页。
，模板。
稍作手工修改。
个人。
css内的图片等。
CSS，你知道6394css。
CSS，网页模板小偷软件可以帮您快速下载单个目标网页及内含的素材输入目标网页的网址。
你知道游戏网页模板下载。
本软件操纵大略…js文件；可以选择本地的保存目录，即可达到为您所用的目的：html。
JS支持3级深度嵌套分析！内置正则表达式替换工具解压密码：QQ群共享里？是您快速制站不可多得的助手新版本特色:代码使用Vc++全部重写，网页。
模板,也可以当做 花店网页模板 中文html网页模板,简单个人网页模板 6394css网页模板_内置正则表达式替换工具解压密码：QQ群共享里，中文html网页模板。
可分析带变量的文件地址；软件简介，中文。
六年级信息技术上册
《最简单的网页》
四课时
一、教学目标：
利用多媒体计算机和互联网络环境，为学生们创设一个开放的学习空间，让学生自主地利用双向互动的教学辅助软件了解、掌握和巩固所学的知识，进一步探究网页的制作方法及技巧，培养学生的计算机综合应用能力、想象力、创造力、自学能力和综合审美能力，为学生深入地掌握FrontPage软件并运用到实际生活打下坚实的基础。
二、教学对象分析：
小学六年级学生的观察、分析、比较、想象等能力逐渐成熟，在性格上表现好奇、大胆，追求自己的个性，比较喜欢开放、自由的学习环境，主观意识较强。
并具有了一定的自学能力和模仿能力，但学生还多以感性表象来掌握概念，形象思维仍是学生掌握知识的主要思维方式，学生对知识的吸收绝大部分都是建在感性认识的基础上，兴趣爱好仍然是学习最好的动力。
因此，这节课利用Internet 网络教学，激发他们的热情，很好地发挥了学生主观能动性和创造性，使学生成为学习的主人，有利于培养学生的创新思维。
三、教学重点、难点：
掌握FrontPage的打开、保存、退出以及在FrontPage中编辑文字。
四、教学策略及教法设计：
根据教材的目标，以及学生的特点，教学的辅助课件是用FrontPage制作的网页，目的是建立一个双向互动的教学环境，使学生在网络的环境下，进行学生之间互相合作学习，与教师互动学习，充分发挥学生的主体作用，老师的主导作用，培养学生协作能力。
根据学生的不同层次，建立“三位一体”的教学编排，既照顾全体学生，又照顾不同层次的提高，在“基础层次”中让学生初步按照教材的示范初步制作出文字网页：“练习层次”，强化练习，制作出完全并有一定水平的文字网页：三是“拓展层次”，拓展FrontPage的应用，插入三维艺术字、图片等。
在教法上，教师主要使用了直观演示法、主动尝试法、协作学习法、成功体
验法等，其中以任务驱动法为主，设计任务驱动的教学模式：接受任务---执行任务---完成任务，学生在任务的驱动下采取自主探究为主的学习方式，查阅资料、自主地探索、合作学习，尝试制作文字网页，在执行任务中可以向教师、同学请教，也可以参与共同讨沦学习，在完成任务网页品评环节中通过自我评价、他人评价获得自信与成就感。
教学媒体设计：
A、教具准备：多媒体电教系统(Lanstar VC)，FrontPage软件等。
B、教学环境：多媒体网络机房(单人单机)。
C、媒体设计：
1、利用计算机网络教学，广播教学、转播教学、人机对话、即时在线帮助和辅导、远程遥控，使学生间的交流，师生交流更直接。
2、利用多媒体计算机的直观、形象的特点，帮助学生多感官的学习，激发学生的学习兴趣。
3、利用CAI课件，让学生通过浏览网页，主观建构，进而创新。
教学过程设计及分析：
教学过程
设计思路及媒体应用分析
一、激趣导入
(电脑出示：2001年全国小学生网页制作中的优秀网页作品让学生欣赏)师：这都是小学五、六年级学生做出来的网页，大家说，做得好不好? (生：好)只要大家努力，我们也能做出这样的网页。
同学们，从这节课开始，我们白手起家，创造自己的网屋，从制作最简单的网页开始，步步深入，最终建成内容丰富的漂亮的网屋。
不过，做网页有个工具才行，我们先来认识一下吧!
二，初识FrontPage(电脑演示教师的操作)和窗口的组成。
开始→程序→Microsoft FrontPage。
师：这窗口看起来有点熟悉吧，你能说出FrontPage与以前我们学过的哪个软件相似吗?他们有哪些相同的地方的不同的地方? (出示Word窗口和FrontPage窗口进行对比)
三、制作网页
1、布置任务。
师：看了这么多精彩的网页，也初步熟悉了FrontPage这个软件，大家是不是有点心动了，想不想自己动手来做自己的网屋啊！大家可以小组合作完成一个主题网页，每人做一个内容，也可以单独来完成自己的个人网页。
2、操作示范：以咪咪豆网屋为例讲解最简单网页的制作。
师：有的同学在看完的操作之后忘记了怎么办呢?到课件网页里面看看，老师已经为你们准备了相关的引导，点击这里，可以帮助你解决问题，如果在制作过程中还有不懂的地方还可以和老师、同学一起来
讨论解决它。
4、师：下面请同学们先浏览CAI课件。
(通过“远程命令”帮助学生进入课件。
)
5、网页要求：页面设置合理，字体颜色、大小、整体布局合理。
四、自主制作网页
学生边浏览网页，在双窗口之间切换，边学习边完成任务。
学生可以边复习相关知识边制作网页，也可以先看完相关知识，再制作贺卡。
(教师可以通过“远程监控”进行个别辅导或集体辅导，也可以“远程遥控”帮助学生解决问题，学生机学生可以通过电子举手向老师提问，也可以通过发送消息与同学交流。
)
五、作品品评
(教师提取部分学生优秀作品进行评析，并及时激励学生)
1、学生点评。
A、师：某某同学首先请你自己来介绍一下自己的网页。
B、师：谁来评评?
C、师：你们觉得什么地方做得最好?
D、师：谁来给他(她)提出修改意见?
2、教师点评。
(主要说说学生点评不到的地方，从页面综合美感，文字大小、颜色进行细致评述。
)
3、师：谁还想向大家展示自己的作品?
六、作业提交、意见反馈
1、同学请以自己的名字作为文件名把网页保存在本地硬盘，之后点击作业提交，把作业上交到教师机。
2、在课堂还有不明白的地方或需要教师帮助的地方，可以填CAI课件后的意见及问题反馈表告诉教师。
或发E—MAIL给老师。
七、课堂小结
今天同学们学习了运用FrontPage制作出精美的网页。
在以后的课堂中老师还将教大家进行插入图片，建立超链接等工作，直到把它发布到网上。
启动教学过程中动力系统，激发学生对网页产生兴趣和对计算机知识的学习动机。
让学生认识FrontPage的打开和窗口的组成。
与Word窗口的区别。
布置任务，推动学生的探索，培养学生自主探究的精神。
引导学生合作，培养学生的合作能力。
使学生明白CAI课件的使用，使学生利用课件交互学习。
使信息技术学科与语言学科、美术学科进行整合，培养学生的审美能力，语言表达能力。
执行任务，探究创新。
复习与操作之间切换，边学边用。
与老师互动学习，与同学之间合作学习。
通过多媒体网络提取学生作品，让学生进行评价，使学生得到积极的情感体验，获得创新成功的喜悦。
增强学生的自信心。
完成任务，作业提交，并注重课后反馈。
培养学生持续探究、创新精神。
