Download presentation
Presentation is loading. Please wait.
1
动态网页制作 第1章 HTML语言1
2
教学目标 了解网页与网站技术的发展 掌握HTML语言结构、编辑方法以及语法规范 掌握标题标记<hx>的使用方法
掌握字符格式化标记<font>的使用方法 《动态网页制作》——HTML基础
3
教学目标(续) 掌握分段与换行标记<p>和<br>的使用方法
掌握区块标记<div>和<span>的使用方法 掌握水平线标记<hr>的使用方法 《动态网页制作》——HTML基础
4
互联网 有关互联网的概念 互联网起源 互联网构成 互联网工作原理 《动态网页制作》——HTML基础
5
有关概念 互联网 由多个计算机网络相互连接而成的网络 计算机网络 两台或者两台以上的计算机互相连接 《动态网页制作》——HTML基础
6
网站 是网页的集合，使用浏览器通过域名(网址)访问。 网页 是构成网站的基本元素，依据HTML规则。 《动态网页制作》——HTML基础
7
网页与网站技术的发展 第一阶段——静态文档 第二阶段——动态网页 第三阶段——Web2.0时代 《动态网页制作》——HTML基础
8
第一阶段——静态文档 特点 实现了资源共享 用户通过终端Web浏览器访问Internet上各个Web站点(网站)
每个Web站点由多个Web页(网页)构成 每个Web页都是HTML编写的 实现了资源共享 《动态网页制作》——HTML基础
9
不足 无法实现各种动态的交互功能 无法支持后台数据库 无法有效的对站点信息进行及时的更新 无法实现动态显示效果
《动态网页制作》——HTML基础
10
第二阶段——动态网页 特点 动态网页以数据库技术为基础，可以大大降低网站维护的工作量；
采用动态网页技术可以实现更多的功能，如用户登录、在线调查、订单管理等等； 动态网页不是独立的网页文件，只有用户请求时服务器才生成一个完整的网页 《动态网页制作》——HTML基础
11
第三阶段——Web2.0时代 应用核心 Blog——博客/网志：是一个网站，可以在其中快速发布想法、与他人交流；
RSS——站点摘要：是站点之间共享内容的一种技术，用于新闻按顺序排列 WIKI——百科全书：是多人协作的写作工具，由多人（包括发布者）维护。 《动态网页制作》——HTML基础
12
HTML语言结构 <html> 文件开始标记 <head> 文件头开始标记 … </head> 文件头结束标记 <body> 文件开始标记 </body> 文件结束标记 </html> 文件结束标记 《动态网页制作》——HTML基础
13
例题1.1 使用Windows系统中的记事本工具(Notepad)编写 注意开发过程和保存方法 开始程序附件记事本
英文输入状态下编写代码 保存时应注意后缀名 《动态网页制作》——HTML基础
14
程序代码 <html> <head> </head> <body> Hello world!
15
尚未保存 空格 《动态网页制作》——HTML基础
16
保存方式 后缀名 保存类型 《动态网页制作》——HTML基础
17
title标记 是标题标记 用于说明页面名称 显示在标题栏中 《动态网页制作》——HTML基础
18
meta标记 元信息标记 用来定义页面信息的名称、关键字、作者等 对用户来说是不可见的 头部内容中可以有多个meta元素 meta属性两种
name http-equiv 《动态网页制作》——HTML基础
19
metaname 主要用于描述网页，以便于搜索引擎查找、分类 重要取值 keywords-----页面关键字
description-----页面描述 generator------编辑工具 author------作者信息 《动态网页制作》——HTML基础
20
metahttp-equiv 辅助浏览器精确显示网页内容 重要取值 Expires：设定网页的到期时间
Pragma ：禁止从本地机缓存中访问页面 Refresh：自动刷新并指向新页面 Set-Cookie：网页过期后cookie被删除 Content-Type：设定页面使用的字符集 《动态网页制作》——HTML基础
21
body标记 网页的主体 常用到的属性 以<body>开始，以</body>结束 bgcolor
background text 《动态网页制作》——HTML基础
22
例题1.2 使用NotePad编写一个网页程序，运行结果是网页文档区背景色为黄色，文本为绿色。 《动态网页制作》——HTML基础
23
程序代码 <html> <head> </head>
<body bgcolor=“yellow” text=“green”> Hello world! </body> </html> 《动态网页制作》——HTML基础
24
运行结果 《动态网页制作》——HTML基础
25
网页常用颜色 名称 英文颜色名 十六进制代码 黑色 black #000000 蓝色 blue #0000FF 棕色 brown
#A52A2A 灰色 gray #808080 绿色 green #00FF00 橘黄色 orange #FFA500 粉红色 pink #FFC0CB 红色 red #FF0000 白色 white #FFFFFF 黄色 yellow #FFFF00 《动态网页制作》——HTML基础
26
例题1.3 使用NotePad编写一个网页程序，运行结果是网页文档区显示背景图片。 《动态网页制作》——HTML基础
27
程序代码 <html> <head> </head>
<body backgroud=“img\bg.jpg”text=“red”> Hello world! </body> </html> 《动态网页制作》——HTML基础
28
运行结果 《动态网页制作》——HTML基础
29
<hx>标记 标题是按级别区分的，不同的标题级别有对应的标记 x的取值为1~6 默认显示宋体字 使用align设置对齐方式
《动态网页制作》——HTML基础
30
例题1.4 使用EditPlus编写一个网页程序，运行结果是网页文档区显示1到6级标题式文字 《动态网页制作》——HTML基础
31
程序代码 <html> <body> <h1>第1级标题(h1)</h1> <h2>第2级标题(h2)</h2> <h3>第3级标题(h3)</h3> <h4 align="left">第4级标题(h4)(居左)</h4> <h5 align="center">第5级标题(h5)(居中)</h5> <h6 align="right">第6级标题(h6)(居右)</h6> </html> 《动态网页制作》——HTML基础
32
EditPlus的使用 先运行EditPlus 选择菜单File New HTML Page 修改或者在需要处添加代码 保存，输入文件名
33
EditPlus效果图 《动态网页制作》——HTML基础
34
运行结果 《动态网页制作》——HTML基础
35
<font>标记 在网页中设置字体、字号和颜色 face:设置字体 size:设置字号，7号最大，1号最小 color:设置颜色
《动态网页制作》——HTML基础
36
例题1.5 使用EditPlus编写一个网页程序，运行结果是网页文档区显示设置了字体、字号和颜色的文本 《动态网页制作》——HTML基础
37
程序代码 <BODY> <h1>设置文字的属性</h1> <font size=7 face="黑体" color=blue>这是黑体7号 蓝色</font><br> <font size=1 color=#00FFFF>这是1号字 青色</font><br> <font size=2 color=green>这是2号字 绿色</font><br> <font size=3 color=#FF0000>这是3号字 红色</font><br> <font size=-1 face="隶书" >这是隶书-1号字</font><br> <font size=+2 face="楷体" >这是楷体+2号字</font><br> </BODY> 《动态网页制作》——HTML基础
38
运行结果 -1和+2基于3号字 《动态网页制作》——HTML基础
39
归纳与补充 <font>与<hx>区别
<font>中的color属性与<body>中text属性关系 网页颜色 《动态网页制作》——HTML基础
40
<font>与<hx>区别
标记 对象 用法 取值 加粗 <font> 一段文字 <font size=x>文字<font> 1-7 否 <hx> 标题 <hx>文字<hx> 1-6 是 《动态网页制作》——HTML基础
41
font颜色与text颜色 都可以设置文本颜色 <font>可以在文件中多处设定 同时使用时，<font>标记优先
《动态网页制作》——HTML基础
42
<p>和<br>标记
分段标记和换行标记的效果不同 空格标记使用 《动态网页制作》——HTML基础
43
例题1.6 使用EditPlus编写一个网页程序，运行结果是网页的文本有分段、换行和多个空格效果 《动态网页制作》——HTML基础
44
程序代码 <BODY> <p> 第1段</P> <p> 第2段<br> 仍然为第2段，但已经换行。<br> 这一行是四个空格的效果</P> <p> 第3段</P> </BODY> 《动态网页制作》——HTML基础
45
运行结果 《动态网页制作》——HTML基础
46
归纳与补充 多个<p>标记不能产生多个空行 多个<br>标记可以长生多个空行
<p>标记可以使用align属性 《动态网页制作》——HTML基础
47
<div>标记和<span>标记
多个段落可形成一个区域 一行文字中的某几个字符可形成一个区域 《动态网页制作》——HTML基础
48
例题1.7 使用EditPlus编写一个网页程序，运行结果是网页的文本有区域效果 《动态网页制作》——HTML基础
49
程序代码 <BODY> <p align=center>第1段，居中对齐</p> <div align=right> <p>第2段，居右对齐</p> <p align=left>第3段，居左对齐</p> </div> <p>第4段<span><font size=6>特殊</font></span>字体 </p> </BODY> 《动态网页制作》——HTML基础
50
运行结果 《动态网页制作》——HTML基础
51
归纳与补充 <div>标记中可以设置align属性 <span>标记用于在行内控制特定内容显示
《动态网页制作》——HTML基础
52
<hr>标记 网页中可以插入水平线 对水平线进行格式设置 《动态网页制作》——HTML基础
53
例题1.8 使用EditPlus编写一个网页程序，运行结果是网页中产生多种水平线效果 《动态网页制作》——HTML基础
54
程序代码 <BODY bgcolor="#FFCC99"> 下面的是默认水平线<hr> 下面的是左对齐，宽度为220，高度为6像素的水平线 <hr align=left size=6 width=220> 下面的是浏览器宽度的80%，蓝色水平线 <hr width=80% color=blue> 下面的水平线没有立体效果 <hr size=6 noshade> </BODY> 《动态网页制作》——HTML基础
55
运行结果 《动态网页制作》——HTML基础
56
归纳与补充 宽度可以是像素，也可以是百分比 color属性设置颜色 size属性设置高度 《动态网页制作》——HTML基础
57
特殊字符标记 特殊字符 键盘无法直接输入的符号，如×，© HTML中已定义为关键字的符号，如<,>
数学符号、希腊字符、各种箭头记号、科技符号以及形状 《动态网页制作》——HTML基础
58
常用字符一览表 字符形式 含义 代码 空格 “ 引号 " < 左尖括号 > 右尖括号 © 版权符号
× 乘号 × ™ 商标符号 ™ 《动态网页制作》——HTML基础
59
用特殊符号而不用图片的好处 是基于字符显示，下载更快 可以随意改变大小 很容易就能改变颜色 《动态网页制作》——HTML基础
60
小结 HTML文件的基本结构 <body>的常用的属性 <font>的常用属性
<p>和<br>的使用 特殊字符的输入 《动态网页制作》——HTML基础
61
课后作业 主教材P54上机练习题5 本课程所演示的教学用例上机操作 《动态网页制作》——HTML基础
Similar presentations
