《课HTML语言一》PPT课件.ppt

第1课HTML语言简介 一 1 1课前导读1 2课堂教学1 2 1HTML基础1 2 2HTML入门 简单标记的认识与使用1 2 3段落和文字标记1 2 4建立超级链接1 2 5加入图片1 3上机练习1 4课后作业 1 1课前导读1 什么是HTML2 HTML的作用3 HTML的编辑环境4 专用的网页编辑器 1 什么是HTMLHTML是HyperTextMarkupLanguage 超文本标记语言 的缩写 它是构成Web页面 Page 的主要工具 是用来表示网上信息的符号标记语言 HTML是一种用于网页制作的排版语言 是Web最基本的构成元素 HTML并非一种编程语言 用HTML标记文档或给文档添加标记 使文档可在WWW上发布 用HTML准备的文档包含引用图形和格式标记 用Web浏览器可以查看这些HTML文档 用HTML的语法规则建立的文档可以运行在不同操作系统的平台上 因此 HTML文档属于纯文本文件 它能用任意的文本编写器书写 2 HTML的作用HTML语言作为一种网页编辑语言 易学易懂 能制作出精美的网页效果 其作用如下 格式化文本 如设置标题 字体 字号 颜色 设置文本的段落 对齐方式等 建立超链接 通过超链接检索在线的信息 只需用鼠标单击 就可以到达任何一处 创建列表 把信息用一种易读的方式表现出来 插入图像 使网页图文并茂 还可以设置图像的各种属性 如大小 边框 布局等 建立表格 表格为浏览者提供了快速找到需要信息的显示方式 还可以用表格来设定整个网页的布局 加入多媒体 可以在网页中加入音频 视频 动画 还能设定播放的时间和次数 交互式窗体 计数器等 为获取远程服务而设计窗体 可用于检索信息 定购产品等 HTML是最基本的网页制作语言 其他的专用网页编辑器 如FrontPage Dreamweaver等 都是以HTML为基础的 3 HTML的编辑环境HTML的编辑环境很简单 任何一台计算机都可以编辑网页 但要看到用户自己设计的网页效果 就需要安装一个浏览器 如InternetExplorer NetscapeNavigator等 因此 只要计算机能运行某个浏览器 就具备了网页制作的硬件环境 HTML要求的软件环境更为简单 任何文本编辑器都可以用来制作网页 包括记事本 写字板 Word WPS等编辑程序 不过在保存时 一定要用纯文本方式存盘 HTML文件的设计制作与一般程序设计语言之间最大的不同在于 HTML具有跨平台的处理能力 也就是说 只要有适当的浏览器 不管使用何种操作系统 都能阅读制作的HTML文件 4 专用的网页编辑器HTML作为最基本的网页编辑语言 能实现制作网页的各种效果 但是 它毕竟是一种代码 得记住一些标记 因此 为了使设计网页更加简单方便 有些公司和人员就设计了专用的网页编辑器 如MacromediaDreamweaver FrontPage等 FrontPage是较好的所见即所得的网页编辑工具 也是常用的网页编辑器 它对一个Web站点有很强的控制能力 可以统一Web站点内页面的外观和风格 它的Web管理功能也很强大 用户可以通过图形的方式观察和调整站点的结构 1 2课堂教学1 2 1HTML基础1 2 2HTML入门 简单标记的认识与使用1 2 3段落和文字标记1 2 4建立超级链接1 2 5加入图片 1 2 1HTML基础1 HTML文件的组成2 标记3 标记的属性4 HTML文件的基本结构 HTML文件是一种纯文本文件 可以通过浏览器读取HTML文件 并用浏览器内含的语法分析器来解读各种特殊标记 1 HTML文件的组成一个HTML文件可由下列3部分组成 标记 是HTML的基本元素 可以说一个HTML文件大部分都是由字符信息加上一些标记呈现出来的 也就是说 只要在HTML文件中适当的位置上加上所需标记 就可依照各标记所代表的意义实现各种特殊的功效 基本的标记可分为两种 单一标记 只要一个标记就能完成所要表示的功能 和成对标记 需要两个标记组合才能完成所需功能 文字与图形资料 是指要提供给浏览信息的人阅读的内容 WWW显示的图形一般都以独立文件的形式存在 如果要显示图形 图形文件要用其他程序建立 就必须用特殊的标记指向图形文件 统一资源定位器URL UniformResourceLocator 是WWW上文件的参照格式 浏览者在浏览器的地址处输入URL格式的内容 就可获取所指主机的主页 2 标记HTML文件由标记和被标记的内容组成 标记 tag 能产生所需的各种效果 就像一个排版程序 它将网页的内容排成理想的效果 这些标记名称大都为相应的英文单词首字母或缩写 如P表示Paragraph 段落 IMG为Image 图像 的缩写 很好记忆 各种标记的效果差别很大 但总的表示形式却大同小异 大多数成对出现 格式为 受标记影响的内容 说明 每个标记都用 大于号 围住 如 以表示这是HTML代码而非普通文本 注意 标记也有不用结尾的 称之为单标记 标记字母大小写皆可 没有限制 对同一段要标记的内容 可以用多个标记来共同作用 产生一定的效果 此时 各个标记间的顺序也是任意的 3 标记的属性标记只是规定这是什么信息 或是文本 或是图片 但怎样显示或控制这些信息 就需要在标记后面加上相关的属性来表示 每个标记有一系列的属性 标记要通过属性来制作出各种效果 格式为 受影响的内容例如字体标记 有属性size和color等 属性size表示文字的大小 属性color表示文字的颜色 表示为 属性示例 需要注意的是 并不是所有的标记都有属性 如换行标记就没有 根据需要可以用该标记的所有属性 也可以只用需要的几个属性 在使用时 属性之间没有顺序 多个属性之间用空格隔开 属性和标记一样 都不区分大小写 但为了阅读方便 本书用大写字母表示标记 小写字母表示属性 4 HTML文件的基本结构HTML文件是一种纯文本格式的文件 HTML文件包括头部 head 和主体 body 文件的基本结构为 网页的标题网页的内容 说明 HTML文件以开头 以结尾 表示这是网页的头部 用来说明文件命名和与文件本身的相关信息 可以包括网页的标题部分 表示网页的主体即正文部分 HTML语言并不要求在书写时缩进 但为了程序的易读性 建议网页设计制作者使标记的首尾对齐 内部的内容向右缩进几格 例1 1 简单的HTML文件 简单的HTML文件最简单的网页 图1 1例1 1的显示效果 1 2 2HTML入门1 HTML文档标记 2 HTML文件头标记 3 HTML文件标题标记 4 HTML文件主体标记 5 注释标记 1 HTML文档标记 HTML文档标记的格式为 HTML文档的内容HTML文档的标记 处于文档的最前面 表示HTML文档的开始 即浏览器从开始解释 直到遇到为止 每个HTML文件均以开始 以结束 2 HTML文件头标记 HEAD是英文 头 的意思 习惯上将HTML文档分为文件头和文件主体两个部分 文件主体是在Web浏览器窗口的用户区显示的内容 而文件头则用来规定该文档的标题 浏览器标题栏中的内容 和文档的一些属性 HTML文件头标记的格式为 头部的内容 说明 HTML文件的头部在文件标记之后 在开始标记和结束标记间定义 其内容可以是标题名 文本文件地址 创作信息等网页信息说明 对应于相应的标记 有标题标记 等 标记在HTML文件中不是必须的 如果没有 浏览器也会照常解读文件 3 HTML文件标题标记 HTML文件标题标记的格式为 标题名设定HTML文件标题的标记 在文件头部定义的标题内容不在浏览器窗口中显示 而是在浏览器的标题栏中显示 尽管头部定义的信息很多 但能在浏览器标题栏中显示的信息只有标题 4 HTML文件主体标记 HTML文件主体标记的格式为 文件主体说明 主体位于头部之后 以为开始标记 为结束标记 它定义了网页上显示的主要内容与显示格式 是整个网页的核心 网页中要真正显示的内容都包含在本标记中 有很多属性 这些属性用于设定网页的总体风格 可以定义页面的背景图像 背景颜色 文字颜色 超文本链接的颜色 其中常用的属性见表1 1 表1 1标记的属性 表1 1中 涉及颜色的属性 取值可以是英文颜色名 也可以用 引导的一个十六进制数代码来表示 见表1 2 如果颜色值用十六进制数代码 则颜色数比表1 2列出的数目多得多 表1 2颜色代码表 例1 2 使用网页的背景色 bgcolor 属性 可以设定整个网页的背景颜色 使用网页的文本色 text 属性 可以设定整个网页文字的颜色 这是主体之外的文本试试BODY标记的属性设置网页的背景色属性为 黄绿色 设置网页的文本色属性为 蓝色 显示效果如图1 2所示 图1 2使用网页的bgcolor属性 5 注释标记像很多程序语言一样 HTML文件也提供注解功能 浏览器会忽略此标记中的文字 可以是很多行 而不作显示 通常使用 注释 为文中的不同部分加上说明 以方便日后阅读和修改 注释标记的格式为 注释内容不局限于一行 长度也不受限制 即结束标识符不必与开始标识符在同一行上 1 2 3段落和文字标记1 标题文字标记2 文本文字标记3 设置字型4 强制换行 换段标记5 分区显示标记6 水平线7 特殊符号 在多数网页中 文档是核心内容 所以要经常设置文档的格式 设置文档的标记包括标题和文字的字体 字号 字型 颜色 段落格式 文本的布局等 1 标题文字标记这里的标题是指页面中文本的标题 而不是用 定义的网页标题 标题格式显示在浏览器窗口内 而不显示在浏览器的标题栏中 在页面中 标题是一段文字内容的核心 所以总是用加强的效果来表示 网页中的信息可以分为主要点 次要点 可以通过设置不同大小的标题 为文章增加条理 说明 属性n用来指定标题文字的大小 n可以取1 6的整数值 取1时文字最大 6时文字最小 属性align用来设置标题在页面中的对齐方式 取值有 left 左对齐 center 居中 或right 右对齐 标记缺省显示宋体字 标记会自动插入一个空行 在一个标题行中无法使用不同大小的字体 标题文字标记的格式为 标题文字 例1 3 使用标题标记设置标题内容的大小与对齐方式 设置标题第1级标题 H1 第2级标题 H2 第3级标题 H3 第4级标题 H4 居左 第5级标题 H5 居中 第6级标题 H6 居右 图1 3设置标题文字大小 浏览器的显示效果如图1 3所示 2 文本文字标记在网页中为了增强页面的层次 其中的文字可以用不同的大小 字体 字型 颜色 文本文字标记用来设定文字的字体 字号和颜色 其格式为 被设置的文字说明 标记的属性包括 size face color size属性用来设置文字的大小 数字的取值范围从1 7 size取1时最小 取7时最大 face属性用来设置字体 如黑体 宋体 楷体 GB2312 隶书 TimesNewRoman等 当文字为汉字时 格式中的 字体名 可以为 宋体 幼圆 隶书 楷体 GB2312 黑体 仿宋 GB2312等 当文字为英文时 字体名可以为TimesNewRoman等约50种字体 其实 这里的字体名字就是在Word的 字体 工具栏中显示的字体名 color属性用来设置文字颜色 其取值见表2 2 例2 4 使用标记的size属性设置文字的大小 face属性设置字体 color属性设置文字颜色 使用FONT标记设置文字的属性1号字青色2号字绿色3号幼圆桔黄色4号隶书深红色5号黑体黄绿色6号方正舒体水蓝色7号华文彩云淡紫色 在浏览器中的显示效果如图2 4所示 图1 4设置文本文字属性 说明 和标记都可以设置文字的大小 二者的区别见表1 3 表1 3与标记的区别 另外 当中的size取7时 文字比要大 标记中的text属性和标记中的color属性都可以设置文本的颜色 标记直接作用其后的文字 可在文件中多处设定 使网页中文字的颜色绚丽多彩 当与标记同时对文字颜色进行定义时 标记优先 3 设置字型字型就是文字的风格 如加粗 斜体 带下划线 上标 下标等 字型的控制标记见表1 4 表1 4设置各种字型的标记 例1 5 使用字型标记设置文字的风格 设置字型黑体斜体带下划线标准打印机字体带删除线下标上标大字体小字体 在浏览器中的显示效果如图1 5所示 4 强制换行 换段标记在HTML文档中 无法用多个回车 空格 Tab 键来调整文档段落的格式 要用HTML的标记来强制换行 分段 强制换行标记放在一行的末尾 可以使后面的文字 图片 表格等显示于下一行 而又不会在行与行之间留下空行 即强制文本换行 由于浏览器会自动忽略原始码中空白和换行的部分 这使成为最常用的标记之一 强制换行标记的格式为 文字说明 浏览器解释时 从该处换行 换行标记单独使用 可使页面清晰 整齐 段落标记定义一个新段落的开始 标记不但能使后面的文字换到下一行 还可以使两段之间多一空行 由于一段的结束意味着新一段的开始 所以使用也可省略结束标记 强制换段标记的格式为 说明 段落标记的属性align用来设置段落的对齐方式 其取值可以为left center或right 分别表示居左 居中 居右 缺省时默认为left 一个强制换段标记可以看作是两个强制换行标记 例1 6 换行与换段标记的使用 强制换行 换段标记的使用学生之家新学习窗口健康信箱聊天室来信 说明 HTML语言忽略多余的空格 最多只空一个空格 在需要空格的位置 可以用 插入一个空格 或者输入全角中文空格 用 PRE PRE 标记可以使在其中显示的内容包括回车换行 空格和跳格等 5 分区显示标记分区显示标记可以使文本块或一段文字在网页上左对齐 居中和右对齐 分区显示标记的格式为 文本或图像说明 属性align的取值分别为 left center和right 例1 7 分区显示标记的使用 分区显示标记的应用分区显示标记的应用居中center居中center居左left居左left居右right居右right 在浏览器中显示 6 水平线在页面中插入一条水平标尺线 可以使不同功能的文字分隔开 看起来整齐 明了 当浏览器执行HTML文件中的标记时 会在此处换行 并加入一条水平线段 线段的样式由标识的参数决定 水平线标记的格式为 说明 属性align设定横线放置的位置 可选择left 居左 right 居右 或center 居中 属性size设定线条粗细 以像素为单位 默认为2 属性width设定线段长度 可以是绝对值 以像素为单位 或相对值 相对于当前窗口的百分比 所谓绝对值 是指线段的长度是固定的 不随窗口尺寸的改变而改变 所谓相对值 是指长度相对于窗口的宽度而定 窗口的宽度改变时 线段的长度也随之增减 默认值为100 即始终填满当前窗口 属性color设定线条颜色 默认为黑色 可以采用颜色的名称 颜色可以用相应英文单词或以 引导的一个十六进制数代码来表示 见表2 2 属性noshade设定线条为平面显示 没有三维效果 若缺省则有阴影或立体效果 例1 8 水平线标记的使用 水平线段标记的应用水平线 在浏览器中的显示 浏览时 改变一下窗口的大小 可以看到线段的变化效果 7 特殊符号浏览器解释HTML文件时 是根据 来识别标记的 然后再确定这两个符号中的内容是否为HTML文件标记 若是则按其规则解读 所以 要在网页中显示 就要作为特殊字符 其他常用的特殊字符见表1 5 表1 5特殊替换字符 1 2 4建立超级链接1 热点标记2 创建指向其他页面的链接3 创建指向本页中的链接 超链接 Hyperlink 可以看作是一个 热点 它可以从当前Web页定义的位置跳转到其他位置 包括当前页的某个位置 Internet或本地硬盘或局域网上的其他文件 甚至跳转到声音 图片等多媒体文件 Web页中所包含的超链接的外观形式通常为彩色且带下划线的文字或图片 单击这些文本或图片 可跳转到相应位置 鼠标指针指向超链接的显示文本或图片时 将变成手形 超文本链接使用热点标记来定义 1 热点标记热点由标记定义 它在网页上建立超文本链接 通过单击一个词 句或图片 可从此处转到另一个链接资源 目标资源 这个目标资源有唯一的地址 URL 具有以上特点的词 句或图片就称为热点 标记的格式为 热点 说明 href为超文本引用 它的值为一个URL 是目标资源的有效地址 在书写URL时要注意 如果资源放在自己的服务器上 可以写相对路径 否则 应写绝对路径 href不能与name同时使用 name指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址 热点 target设定链接被按后结果所要显示的窗口 可选值为 blank parent self top 框架名称 其说明见表1 6 表1 6target属性的取值 2 创建指向其他页面的链接创建指向其他页面的链接 就是在当前页面与其他相关页面间建立超链接 无论目标文件与当前文件的目录关系如何 其格式为 热点根据目标文件与当前文件的目录关系 有4种写法 链接到同一目录内的网页文件 其格式为 热点目标文件名是链接所指向的文件 链接到下一级目录中的网页文件 其格式为 热点 链接到上一级目录中的网页文件 其格式为 热点其中 表示退到上一级目录中 链接到同级目录中的网页文件 其格式为 热点表示先退到上一级目录中 然后再进入到目标文件所在的目录 3 创建指向本页中的链接要在当前页面内实现超链接 需要定义两个标记 一个为超链接标记 另一个为书签标记 超链接标记的格式为 热点单击热点文本 将跳转到 记号名 开始的文本 书签就是用标记对该文本作一个记号 如果有多个链接 不同目标文本要设置不同的书签名 书签名在的name属性中定义 格式为 目标文本附近的字符串 例1 9 链接本页中的文本 学生之家欢迎来到 学生之家 新闻新闻 返回学习园地 返回健康信箱 返回 在浏览器中的显示 单击超链接 将跳转到页面的相应位置 1 2 5加入图片1 图片文件的格式2 设置网页的背景3 图片标记4 用图片作为超链接 1 图片文件的格式加入网页中的图片 通常使用GIF格式和JPEG格式 GIF格式文件最多只能显示256种颜色 这使得它很少用于存储照片 但是 存放图标 剪贴画和艺术线条等对颜色要求不高的图片 已经足够了 GIF格式图片的优点在于制作动画效果 JPEG格式文件可以拥有计算机所能提供的最多种颜色 适合存放高质量的彩色图片 照片 另外 JPEG格式文件采用压缩方式存储文件信息 相同的图片 所占空间比GIF文件小 所以下载时间较短 浏览速度较快 但是 JPEG格式的文件没有GIF格式文件的特殊效果 2 设置网页的背景网页的背景可以是某种颜色 也可以是图片 无论是图片 还是背景色 都通过标记的相应属性来设置 1 设置背景色利用色彩作背景 比较容易在颜色上协调 而且下载速度比采用图片作为背景快 网页缺省为白色 的bgcolor属性用于设置网页的背景色 格式为 其中 颜色值 可以为颜色的英文名或相应十六进制值 2