计算机网络编程实验.ppt

《计算机网络编程实验.ppt》由会员分享，可在线阅读，更多相关《计算机网络编程实验.ppt（103页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、计算机网络编程实验崔玉珍目录HTML的概念及编写方法HTML网页文件命名及HTML文件结构HTML文件的基本组成元素属性HTML基本结构的有关元素和元素属性元素及元素属性文字标签属性文字布局、对齐与分区显示目录HTML文字与段落格式控制超级链接及及图片控制表格及表单标记 网页中的框架移动文字及多媒体页面实验内容实验内容理解HTML的概念、编写方法，网页文件命名及文件结构，熟悉HTML文件的基本组成元素属性，文字表达元素、文字标签、文字布局、对齐与分区显示，文字与段落格式控制；超级链接及图片控制；表格及表单标记；网页中的框架；移动文字及多媒体页面等元素制作个人主页，文件命名为姓名，学号，个人兴趣

2、爱好表单：明星、影视、音乐、运动、游戏、数码、美食、书籍、其它；每类爱好至少四项使用框架、文字、及多媒体及超链接技术包含图片或相册标签实验报告提交：邮件附件：117185282 ,6.20,周一HTML概念HTML（Hyper Text Markup Language 超文本标识语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。HTML文档的编写方法1.手工直接编写记事本等，存成.htm.html格式2.使用可视化HTML编 辑 器Frontpage、Dreamweaver等3.由Web 服务器（或称HTTP 服务器）一 方实时动态地生成。网页文件命名1

3、.*.htm或*.html2.无空格3.无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字4.区分大小写5.首页文件名默认为：index.htm 或 index.htmlHTML 文件结构.元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML 文件结构-(Document Structures)HTML HTML 文件的正文文件的正文文件的正文文件的正文 第一张网页（01.htm）my first page This is my f

4、irst homepage!基本组成部分HTML元素属性HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。基本组成部分HTML注释HTML文档可以插入注释。注释内容不会在浏览器窗口显示HTML注释的格式为：例：12.htm第二张网页（02.htm）my first page This is my first homepage!HTML基本结构的有关元素和元素属性1/5HEAD元素1 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。元素定义HT

5、ML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。HTML基本结构的有关元素和元素属性2/5HEAD元素2元素 元素下面可以插入很多很有用的元素属性。下面介绍四种：用来标记搜索引擎在搜索你的页面时所取出的关键词。HTML基本结构的有关元素和元素属性3/5HEAD元素3元素 用来标记文档的作者。HTML基本结构的有关元素和元素属性4/5HEAD元素4元素 用来标记你的页面的解码方式。HTML基本结构的有关元素和元素属性5/5HEAD元素5元素 用来自动刷新网页练习（03.htm）编写一个网页，要求3秒钟后自动跳转到山东建筑大学的网站。my first page 三秒钟后本网页将自动跳转到山

6、东建筑大学首页 元素及元素属性1元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。元素及元素属性2元素中有下列元素属性：(1)bgcolorbgcolor属性标志HTML文档的背景颜色。如：bgcolor=#CCFFCC。例：04.htmHTML对颜色的控制HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。16 进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”红色Red=”#f

7、f0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”常见颜色的代码元素及元素属性3元素中有下列元素属性：(2)backgroundbackground属性标志HTML文档的背景图片。如：background=“images/bg.gif。可以使用的图片格式为GIF，JPG例：05.htm、06.htm元素及元素属性4元素中有下列元素属性：(3)bgproperties=fixedbgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。

8、例：07.htm和08.htm对比元素及元素属性5元素中有下列元素属性：(4)texttext属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。例：09.htm元素及元素属性6元素中有下列元素属性：(5)超级链接颜色link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。例：10.htm元素及元素属性7元素中有下列元素属性：(6)leftmargin和topmargin设置网页主体内容距离网页顶端和左端的距离如：leftmargin=20 topmargin=30“例：11.htm文字标签属性1文

9、字属性标记1.文字颜色 指定颜色 .#=RRGGBB 16 进制数码例：w1.htm2.文字字体.#=客户端可获得的字体w2.htm文字标签属性3文字属性标记3.文字大小.#=1,2,3,4,5,6,7 or+#,-#例：w3.htm.文字标题.#=1,2,3,4,5,6例：w4.htm文字布局文字布局行的控制 段(Paragraph)(可以看作是空行)空白占位符 例：w5.htmHTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。元素不是成对出现的。例：w6.htm不

10、换行 w7.htm文字的对齐与分区显示.(n=1,2,3,4,5,6).(#=left,center,right)例：w13.htm.(#=left,center,right)例：w14.htmHTMLHTML文字与段落格式控制文字与段落格式控制 倾斜文本 粗体文本 下划线文本 删除线文本 例：w8.htm、w9.htm、w10.htm、w11.htm(综合练习)3.HTML段落与分行控制居中-元素元素是一个独立的使所标记的字符居中的元素。它的作用与使用元素里的align=“center”类似例如：居中段落w15.htm3.HTML段落与分行控制标尺线：设定线宽：设定线长：设定对齐方式#=le

11、ft,right ：设定线的颜色例：w16.htm3.HTML的段落与分行控制无序列表元素1列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。3.HTML的段落与分行控制无序列表元素2无序列表是由和元素定义的:sports food drink friends 例：w17.htm3.HTML的段落与分行控制无序列表元素3无序列表的默认符号是圆点。元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle（圆圈）、square（方块）例：w18.htm3.HTML的段落与分

12、行控制有序列表元素1有序列表由和定义:sports drink friends例：w17.htm3.HTML的段落与分行控制有序列表元素2元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C作为列表的编号例：w19.htm元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义元素的start属性例：w20.htm4.超级链接普通超级链接1超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。4.超级链接普通超级链接2超级链接是用锚元

13、素定义的 在元素下，有元素属性href,href的属性值为一个URL地址如：指向学院的超级链接 如：普通超级链接例：w21.htm4.超级链接E-mail超级链接 超级链接可以指向E-mail地址如：指向E-mail地址的超级链接例：w22.htm4.超级链接新开链接窗口开一个新的(浏览器)窗口(Target Window).例：w26.htm4.超级链接去除下划线去掉超级连接的下划线：style=“text-decoration:none”例：w25.htm4.超级链接其他超级链接 WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用，如：Ftp等。实际上mailto

14、也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接;指向其他Internet应用的超级链接不是我们掌握的重点。4.超级链接锚点(书签)1 指向本页面锚点aa的超级链接例：w23.htm指向23页面的锚点top的超级链接例：w24.htm练习：手写代码实现链接（新开窗口与Email）、背景、文字颜色、字体、换行、页面标题。练习：w27.htmHTML对图片的控制-1基本语法:引用图片必须用元素标志。元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址例：w28.htmHTML对图片的控制-2所谓图

15、片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。定义图片替代文本的方法是：例：w28.htmHTML对图片的控制-3图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是：width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。例：w29.htmHTML对图片的控制-4图片的边框我们可以为一幅图片加一个边框以突出显示：border的属性值为象素数例：w30.htmHTML对图片的控制-5图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是：例：w31.htmH

16、TML对图片的控制-6图片的对齐方式定义图片的垂直对齐方式：对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。例：w32.htmHTML对图片的控制-7定义图片与左、右的文本之间的间距图片在显示时，与左右的文本之间可以有一定的间距 Hspace(horizontal)定义水平间距；Vspace(vertical)定义垂直间距。单位都是象素数.例：w33.htmHTML对图片的控制-8图象的超级链接 图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：所以，所谓超级链接实际上就是用元素标志一个图象的引用;例：w34.htmHTM

17、L对图片的控制-9图象映射所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。HTML对图片的控制-10图象映射（只要求理解标记含义）图象映射由定义。有一个基本属性是name。Name给图象映射命名，这个命名将会被元素用usemap属性引用。所以，图象上的图象映射实际上是对定义的映射的一个引用。在定义图象映射时，可以定义三种形状的映射：circle(圆形)、rect(矩形rectangle)、poly(多边形)HTML对图片的控制-11图象映射实例（35.htm）一月二月三月120

18、010001500单元格（用单元格（用来表来表示，每个单示，每个单元格可以有元格可以有背景颜色和背景颜色和背景图片）背景图片）表格（用表格（用来表来表示，表格可以有背景颜示，表格可以有背景颜色、背景图片）色、背景图片）表格边框表格边框每一行可以用每一行可以用来表示，来表示，单元格放在行单元格放在行中，每行可以中，每行可以有很多的单元有很多的单元格。格。表头（用表头（用来来表示，表头是特表示，表头是特殊的单元格，其殊的单元格，其中的文字加进去中的文字加进去之后默认是居中之后默认是居中并且加粗）并且加粗）表格(TABLE)标记-1 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格

19、。元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。表格(TABLE)标记-2表格的基本结构定义表格定义表头定义表行定义单元格例：t2.htm表格(TABLE)标记-3表格的属性 1width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细例t3.htm、t4.htm、t5.htm

20、表格(TABLE)标记-2表格的属性 14、bgcolor属性：指定表格或某一个单元格的背景颜色。5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。例：t7.htm表格(TABLE)标记-3表格的属性 26、bordercolor属性：指定表格或某一个单元格的边框颜色。例：t8.htm7、Bordercolorlight属性：亮边框的颜色8、Bordercolordark属性：暗边框的颜色例：t9.htm表格(TABLE)标记-3表格的属性 29、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。例：t10.htm表格(TABLE

21、)标记-3表格的属性 210、cellspacing属性：单元格间距。例：t11.htm11、cellpadding属性：单元格边距。例：t12.htm表格(TABLE)标记-4单元格属性1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：top：顶端对齐；middle：居中对齐；bottom：底端对齐;Baseline：相对于基线对齐;例：t13.htm表格(TABLE)标记-5单元格属性2、Colspan：属性值表示当前单元格跨越几列例：t14.htm3、Rowspan：属性值表示当前单元格跨越几行例：t16.htm表格(TABLE)标记

22、-6行属性1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包top：顶端对齐；middle：居中对齐；bottom：底端对齐。Baseline：相对于基线对齐。表格(TABLE)标记-7行属性2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素表格进阶表格的嵌套在 之间插入表格，实现表格嵌套例：t17.htm表格的作用一般只是控制文本和图像的显示，而不显示表格的边框例：t18.htm综合案例表格的综合使用例：t19.htm表单(FORM)标记HT

23、ML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。表单(FORM)标记表单是网页上的一个特定区域。这个区域是由一对元素定义的。元素action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。表单(FORM)标记表单的基本语法:.*=GET有数据量限制，POST无以上限制,以文件形式传输例：f22.htm表单(F

24、ORM)标记2.文本框?文本框的名字*text,password*默认值*长度?最大输入字符数例f20.htm表单(FORM)标记3.文本域.例：f20.htm表单(FORM)标记4.按钮包括普通按钮、重置按钮和提交按钮例：f21.htm表单(FORM)标记5.复选框(Checkbox)在一个表单里的所有多选框可以有一个或多个被选中。例f25.htm表单(FORM)标记6.单选框(RadioButton)一个表单里的所有变量名相同的单选框只能够有一个被选中。各个选项的name必须一样才能达到预期效果例：f26.htm注意f262.htm的写法是错误的表单(FORM)标记7.下拉列表基本语法说明

25、说明2 例：f28.htm表单(FORM)标记7.下拉列表（2）列表框的长度（3）允许多选例：f29.htm、f30.htm表单(FORM)标记8.图象域例：f31.htm表单(FORM)标记综合练习（*）实现留言簿要求：背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取消按钮，内容以mail形式提交。网页中的框架制作框架页面的步骤：1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接，在子框架中设定链接。注意：框架页面是不含标签的网页中的框架1.基本语法您的浏览器不支持框架，请考虑升级您的浏览器

26、！网页中的框架定义框架的基本语法框架由一对定义有两个属性：rows和colsRows定义上下分割的框架的大小；cols定义左右分割的框架的大小；在定义大小时，rows和cols可以使用相对大小或以百分比为单位。网页中的框架各窗口的尺寸设置 横排多个窗口 排列方式：ABC例：fr02.htm网页中的框架各窗口的尺寸设置 纵向排列多个窗口 排列方式：A B C例：fr01.htm网页中的框架COLS&ROWS：纵横排列多个窗口 排列方式：BAC例：fr14.htm网页中的框架框架边框的颜色bordercolor=ff0000“例：fr03.htm各窗口边框的设置 frameborder=#=yes

27、,no/1,0例：04.htm框架边框的宽度framespacing=10 例：fr04.htm网页中的框架的属性name：定义该框架的名字。这个名字可以被一些网页元素引用，如被元素引用。例：fr06.htm、fr07.htmSrc：在本框架里显示网页的URL。Target：目标框架,引用的是目标框架的名字。网页中的框架1.在当前框架中打开超链接页面默认就是在当前框架页中打开,也可以采用Target=“_self”2.在指定框架中打开超级链接页面Target=“name”3.新开窗口打开链接页面Target=“_blank”4.跳出整个框架集Target=“_parent”网页中的框架的属性S

28、crolling：是否显示滚动条。yes,no,auto例：fr08.htm、fr09.htmNoresize：框架在浏览器里不可以被调整大小。例：fr10.htm、fr11.htm网页中的框架内含窗口.#=初始页面的 URL#=框架名称(Frame Name)例：fr15.htm会移动的文字1.基本语法.例：fr16.htm2.文字移动属性(1)方向：direction=#=left,right,up,down例：fr17.htm会移动的文字2、文字移动属性(2)方式：behavior=#=scroll(循环),slide(只走一次),alternate(来回走)例：fr18.htm(3)循

29、环:loop=#=次数；若未指定则循环不止(infinite)例：fr19.htm会移动的文字2、文字移动属性(4)速度:scrollamount=#例：fr20.htm(5)延时:scrolldelay=#例：fr21.htm会移动的文字3、其他属性(1)底色:bgcolor=#=RRGGBB 16 进制颜色代码例：fr22.htm(2)面积:height=#width=#例：fr23.htm(3)空白:hspace=#vspace=#例：fr24.htm多媒体页面用嵌入多媒体对象 基本语法#=URL注：1.使用 标记之前，需要安装插件才可以；2.对于不同的plugin，其embed属性也不同。例：fr25.htm(Flash动画)例：m26.htm(rmi音乐文件)例：m27.htm(avi动画)例：m28.htm(mpeg影像文件)多媒体页面（*）嵌入背景音乐#=WAV 文件的 URL#=循环数例m29.htm(WAV背景音乐)多媒体页面（*）特殊标记元素Object元素用来包含图像、动态图像、Java小程序。元素用以替换更具体的和元素，以及和元素。例 m30.htm