超文本标记语言HTML.ppt

第三章,超文本标记语言HTML,第三章 超文本标记语言HTML,学习目标：通过本章的学习，使学生对HTML有一个全面的了解，能够掌握HTML文件中常用标签的作用，可以阅读一般网页的源文件,并会用HTML中常见的标签命令编写简单的网页。 学习重点：掌握HTML文件中常用标签的作用。 学习难点：能够利用HTML编写制作网页 学习方式：讲授多媒体演示上机 学习时间：12课时,3.1 HTML基本结构,一、html简介 HTML (HyperText Markup Language) 超文本标记语言，是一种用来制作超文本文档的简单标记语言，用特殊标记(tag)来描述文档结构和表现形式。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。 HTML开发工具：记事本、FrontPage、Dreamweaver等。 HTML文件的扩展名：htm，html。,二、HTML的基本结构, 标题 文档主题，正文部分 ,三、HTML标签,1、单标签 例： 换行标签,2、双标签 内容 例： 一级标题,3、标签属性 例：,3.2 常用的HTML标签命令,一、BODY标签用来定义文档主体 语法格式： (其他页面元素) ,二、页面布局与文字设计,1、标题 2、换行 3、段落 4、水平线 5、文字的大小设置 6、文字的字体与样式,7、文字的颜色 8、位置控制 9、预格式化 10、字幕 11、列表 12、Html特殊字符,1、标题,语法格式： 标题内容 其中： x = 1、2、3、4、5、6 Align（对齐）属性包括left、center、right,实例,2、换行,语法格式： 文字内容 ,实例,3、段落,语法格式： 段落内容 其中： Align（对齐）属性包括left、center、right,实例,4、水平线,语法格式： ,实例,长度单位,像素(pixel)/百分比(%) 绝对长度： 相对长度：,5、文字的大小设置,语法格式： 文字内容 ,实例,6、文字的字体,实例, ,字体样式,练习：如何写出x的平方加y的平方？,x2+y2,7、文字颜色, ,16进制颜色代码：#RRGGBB 10进制RGB代码：RGB（RRR，GGG，BBB） 直接颜色名称：“Red”/“Blue”/“Silver”,实例,8、位置控制,ALIGN属性可以控制文字或图片的对齐方式 语法： #leftrightcenter,ALIGN属性也常常用在其它标签中，引起其内容位置的变动。 如： H1 ALIGN= center ,实例,9、预格式化标签,语法格式： 文字内容 ,实例,综合实例,10、字幕,语法： ,属性： bgcolor 背景颜色 direction 字幕滚动方向（down/up/left/right） height 字幕高度 width 字幕宽度 vspace 垂直空白 hspace 水平空白 scrolldelay 每次移动的时间间隔 scrollamount 每次移动的距离 behavior (= scroll, alternate, slide) loop 循环次数 align,11、列表,有序列表,无序列表, 小张 语文 数学 小王 ,定义性列表,定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。 第一项 叙述第一项的定义 第二项 叙述第二项的定义 第三项 叙述第三项的定义 ,实例,12、Html特殊字符,三、表格,表格的基本结构 定义表格 定义标题 定义表行 定义表头 定义表元(表格的具体数据),实例,第一季度,语法格式： ,1、表格的标题,设置标题位于表格上方： . 设置标题位于表格下方： . ,实例,2、表格的尺寸,3、边框尺寸, 定货单 苹果香蕉葡萄 200公斤200公斤100公斤 ,4、格间线宽度, 定货单 苹果香蕉葡萄 200公斤200公斤100公斤 ,5、内容与格线之间的宽度, 定货单 苹果香蕉葡萄 200公斤200公斤100公斤 ,6、表格内文字的对齐/布局,左右排列 居左居中居右 A B C ,6、表格内文字的对齐/布局,上下排列 上齐居中 下齐 A B C D ,7、跨多行、多列的表元,跨多列的表元 , 值班人员 星期一 星期二 星期三 李强张明王平 ,7、跨多行、多列的表元,跨多行的表元 , 值班人员 星期一星期二 星期三 李强张明王平 ,8、表格的颜色,可对整个表格填入底色，也可对任何一行、一个表元使用背景色。 表格的背景色彩 行的背景色彩 表元的背景色彩 或 ,综合实例,表格标题,四、文件间的链接,链接文字 HREF：定义这个链接所指的地方 通过点击“链接文字”可以到达指定的文件 温州大学,本地链接、URL链接、目录链接、邮件链接,语法格式： ,链接标签的Target属性, 链接文字 ,仅用于框架窗口,1、本地链接,本地链接:对同一台机器上的不同文件进行的连接称为本地链接 以绝对路径表示： 文件的链接 以相对路径表示： 文件的链接 链接上一目录中的文件： IP地址,2、URL链接,URL链接是指链接的文件在其它服务器上。 语法：协议名：/主机.域名路径文件名 如： 温州大学,3、目录链接,目录链接直接指到某文件上部、下部或是中央部分 制作方法是： （1）把某段落设置为链接位置，格式是： （2）在调用此链接部分的文件定义链接： 链接文字 如果是在一个文件内跳转，文件名可以省略不写。,实例,4、邮件链接, 联系我们 ,五、多媒体效果,1、插入图片 2、插入音乐 3、插入视频,1、插入图片,如：,语法格式： ,图像标签的Align属性,实例,图形按钮, 如： ,2、插入音乐,（1）点播音乐做链接 乐曲名,（2）自动载入音乐 ,实例,1、SRC=“FILENAME“：设定音乐文件的路径 2、AUTOSTART=TRUE/FALSE：是否要音乐文件传送完就自动播放，TRUE或1是要，FALSE或0是不要，默认为TRUE 3、LOOP=TRUE/FALSE：设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。 4、STARTIME=“分:秒”：设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20,5、VOLUME=0-100：设定音量的大小。如果没设定的话，就用系统的音量。 6、WIDTH HEIGHT：设定控制面板的大小 7、HIDDEN=TRUE：隐藏控制面板 8、CONTROLS=CONSOLE/SMALLCONSOLE：设定控制面板的样子,（3）IE中的背景音乐 #=循环数 例： ,3、插入视频,（1）链接一个视频文件 视频名称,（2）自动载入视频 ,实例,1、SRC=“FILENAME“：设定文件的路径 2、AUTOSTART=TRUE/FALSE：是否要文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE 3、LOOP=TRUE/FALSE：设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。 4、STARTIME=“分:秒”：设定开始播放时间，如20秒后播放写为STARTIME=00:20 5、VOLUME=0-100：设定音量的大小。如果没设定的话，就用系统的音量。 6、WIDTH HEIGHT：设定控制面板的大小,六、框架,Frames结构能将整个窗口分成几个独立的小窗口 每一个窗口可分别载入不同的文件 每个窗口可以相互沟通,框架语法,框架的嵌套,FrameSet标签,语法格式： ,FrameSet标签的属性,Rows、Cols属性,例： ,Rows、Cols属性,Rows=“ 100 , * ”,100,668,1024,Rows、Cols属性, 将100像素以外的窗口平均分配 将窗口分为三等份,Frame标签,语法格式： ,Frame标签的属性,各窗口间的相互操作,由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化。 为了完成各窗口之间的相互操作，我们必须为每一个窗口起一个名字, 例：,各窗口间的相互操作,定义了窗口名称，还应该有Target来配合使用，Target属性指定了所链接的文件出现在哪一窗口。Target的值可以是name定义的名称 也可以是以下四类值： 显示一个新窗口 _self 显示在同一个窗口 _parent 显示在Frameset的前一份文件的窗口 _top 显示在整个浏览器窗口,例如,七、表单,交互式表单的作用就是收集用户信息，将其提交到服务器，从而实现与客户的交互。,一个完整的表单包含两个部分： 在网页中进行描述的表单对象 应用程序，用于对客户输入的信息进行分析处理,表单体标签, ,例： ,表单体属性,1、名称 2、动作：输入一个URL地址或mailto地址，指明处理该表单数据的程序 3、方法：Post允许传送数据量大的的信息, Get只接收低于1K（约215个汉字）的信息。 post传输信息内容，get传输url值。,各种表单对象,文本框, 初始值 ,单行,单选按钮, 音乐 旅游 ,复选框, 语文 数学 ,按钮,列表框, 专科 本科 硕士 博士 ,跳转菜单, 第一单元 第二单元 第三单元 ,文件域,3.3 综合制作实例,使用表格进行页面布局,本章习题,根据下列要求在记事本中用HTML代码设计 一网页，并把后缀名改为.htm或.html结尾的网页。 1.htm 新建一个网页，网页标题保存为“主页” 1）文本超连接 连接到“表格”页面 2）图片超连接 插入一副图片连接到“图片”页面 3）邮件超连接 输入自己的邮箱进行连接,2.htm 新建一个网页，网页标题保存为“表格”。 1)在网页中插入6行2列的表格，背景颜色设为淡蓝色 2)把第1行的两列合并，然后再把第6行的两列合并，在合并后