项目HTML语言.ppt
《项目HTML语言.ppt》由会员分享,可在线阅读,更多相关《项目HTML语言.ppt(63页珍藏版)》请在三一文库上搜索。
1、项目3 HTML语言,2,任务5 表单标记,任务4 超链接标记,任务3 表格标记,任务2 页面排版标记,任务1 认识HTML语言,项目3 HTML语言,3,任务分析 该任务通过一个简单的网页实例来认识HTML文件的基本结构和HTML语言的基本语法。网页背景颜色为深红色,文本颜色为白色。,任务1 认识HTML语言,4,一什么是HTML语言,HTML(Hyper Text Markup Language,超文本标记语言)是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档,通常它的扩展名为“.html”或“.htm”。,任务1 认识HTML语言,5,二HTML基本语法
2、,任务1 认识HTML语言,1单标记 单独使用就可以表达语意的标记。 语法: 如,换行标记 。,2双标记 双标记必需成对出现,由“始标记”和“尾标记”两部分 组成。“尾标记”是在“始标记”前加一个斜杠(/)。 语法: 如,段落标记 ,6,二HTML基本语法,任务1 认识HTML语言,为了使呈现的页面更加美观,除了使用标记,还可以使用标记的属性对 标记之间的内容进行修饰, 其语法为: 如,,7,二HTML基本语法,任务1 认识HTML语言,头部,主体,HTML文档,HTML文档通常由包含在 标记和 标记之间的头部和正文两大 部分构成,基本结构如图:,8,二HTML基本语法,任务1 认识HTML语
3、言,表示文档的开头和结尾,在文档的最外层,文档中的所有 信息都是都包含在这一对标签中。,是html文档的头部,这一对标签中的内容用于说明网页 文件的标题()和其他公共的属性,是不显示在浏览器窗口中的。,这对标记之间的内容是浏览器窗口中显示的内容。,9,二HTML基本语法,任务1 认识HTML语言,标记对应网页的主体部分,其标记属性就是页面的属性。 如bgcolor、background、text等。 bgcolor=“颜色“ 设置文档背景色 background=“图像文件的路径/图像文件的名字“ 设置文档背景图像文件 text=“颜色“ 设置文档文字默认颜色,10,三. 任务实施,任务1 认
4、识HTML语言,2打开Windows记事本程序。输入如下HTML语句:,1使用“我的电脑”或“资源管理器”在我们已经创建的example站点(mwmw文件夹), 创建一个新文件夹,命名为exam。,11,三. 任务实施,任务1 认识HTML语言,4打开mwmw文件夹中的exam文件夹,双击ex01.html网页文件,在浏览器中可以 观察到其效果。,3保存此文件到exam文件夹中,命名为ex01.html。,12,任务1 认识HTML语言,网页的预览效果,返回,13,任务分析 该任务结合“优秀员工评比的通知”网页,介绍页面标记的使用方法。,任务2 页面排版标记,14,一标题标记,任务2 页面排版
5、标记,常用属性:align,用于定义标题的对齐方式, 默认值为“左对齐”,属性值如表所示。,15,二版面格式标记,任务2 页面排版标记,1说明标记 格式: 作用:为文档加上说明,但是不显示在网页页面中。,2段落标记 格式:或者 作用:使标记后的内容另起一段,并加一个空白行。 常用属性:align,用于定义段落的对齐方式。 (取值方式如上表 ),3换行标记 格式: 作用:使标记后的内容换一行显示,但是不换段落。,16,二版面格式标记,任务2 页面排版标记,4字体标记 格式: 作用:设置标记间内容的字体、大小、颜色等格式。 常用属性:如表所示。,17,二版面格式标记,任务2 页面排版标记,5字体修
6、饰标记 作用:设置标记间内容的粗体、斜体、下划线等特殊效果,,18,二版面格式标记,任务2 页面排版标记,6文本居中对齐标记 格式: 作用:设置居中对齐方式。 功能与等标记中的属性align=“center“相同。,19,二版面格式标记,任务2 页面排版标记,7水平线标记 格式: 作用:在文档中插入一根水平线。 常用属性:如表所示。,20,二版面格式标记,任务2 页面排版标记,8特殊符号 作用:在文档中显示特殊符号。 各种特殊符号的字符名称如表所示。,21,三项目符号标记,任务2 页面排版标记,有序列表:它的主要标记有和 。其中,标记 放在外层,标记放在内层用于区分 每个列表项。列表效果如图所
7、示。,22,三项目符号标记,任务2 页面排版标记,无序列表:即项目符号,它的主要标记有 和。其中,标记放在外 层,标记放在内层用于区分每个列表项。 列表效果如图所示。,23,三项目符号标记,任务2 页面排版标记,24,四图像标记,任务2 页面排版标记,25,五. 任务实施,任务2 页面排版标记,1运行Dreamweaver CS3,打开站点example。,2新建一个文件夹article,在此文件夹中新建一个空白的网页文件 notice.html。切换到代码视图。,3删除其中原有的语句,输入语句。,4认识并分析网页文件中所使用的标记及其属性。,5保存此网页文件,并浏览。,26,任务2 页面排版
8、标记,网页的预览效果,返回,27,任务分析 任务2中的通知网页结构过于单调,在网页中增加一些相关元素后就会有较好的显示效果。为了使得这些增加的内容和原先的通知内容有机结合、统一布局,使用表格是一种可取的方法。,任务3 表格标记,28,一几种表格标记,任务3 表格标记,1表格标记 格式: 作用:标志表格的开始和结束。 常用属性:如表所示。,29,一几种表格标记,任务3 表格标记,2表格标题标记 格式: 作用:用于设置表格的标题,该标记可省略。,30,一几种表格标记,任务3 表格标记,3行标记 格式: 作用:表格中的一行。 常用属性:如表所示。,31,一几种表格标记,任务3 表格标记,4单元格标记
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 项目 HTML 语言
链接地址:https://www.31doc.com/p-3378152.html