Presentation is loading. Please wait.

Presentation is loading. Please wait.

动态网页制作 第1章 HTML语言1.

Similar presentations


Presentation on theme: "动态网页制作 第1章 HTML语言1."— Presentation transcript:

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 metaname 主要用于描述网页,以便于搜索引擎查找、分类 重要取值 keywords-----页面关键字
description-----页面描述 generator------编辑工具 author------作者信息 《动态网页制作》——HTML基础

20 metahttp-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基础


Download ppt "动态网页制作 第1章 HTML语言1."

Similar presentations


Ads by Google