Download presentation
Presentation is loading. Please wait.
1
The Department of Education Technology
教育技术系 The Department of Education Technology 要求：做笔记，随时交作业（16开的纸）
2
第一章 HTML基础 1.1 什么是HTML Web页的基本概念 HTML的工作原理 创建和测试Web页
3
1.2创建Web页 标记符基础 Web页的基本结构 设置页面属性 添加注释 显示特殊字符
4
Web页的基本概念 Internet与WWW 浏览器 网站 主页 URL
5
URL 网站 主页 Internet Uniform resource locator（统一资源定位器：网址）
网络 数据通信网 信息资源网 www服务（网页浏览服务）（World wide web） 位于相同或不同计算机（服务器）上的网页通过超链接组织在一起，形成象蜘蛛网一样的WWW系统。 Server (服务器） Browser(浏览器） 获取WWW服务的基础，它的基本功能就是对网页进行显示。 URL Uniform resource locator（统一资源定位器：网址） 网站 一系列逻辑上可以视为整体的页面 网站就是一个链接的页面集合。 主页 主页是网站中的一个特殊的页面，它是一个组织或个人在WWW上开始点的页面，这是大多数服务器默认的索引文件。主页的名称是固定的（index.htm或index.html ） 注意
6
网页 服务器
7
注意的问题 网站中必须有一个文件的名字是“index.htm”或”index.html”这是大多数服务器默认的索引文件，别人访问你的主页的时候，这个文件就是你的主页的大门。 网页文件的名称在服务器上是区分大小写的。 index.html INDEX.HTML
8
1.1.2HTML的工作原理 Html（Hyper Text Markup Language） Hypertext（超文本）
超文本标记语言 Hypertext（超文本） 文本中包含指向其他位置或文件的链接（Hyper link）通过这些链接使文档组织成了网状结构。 原理：通过使用标记符，告诉浏览器如何显示网页，即确定内容的显示格式，浏览器按顺序读取HTML文件，根据内容周围的HTML标记符解释和显示各种内容。 示例
9
网页实质就是纯文本文件 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>这是测试文件1</title> </head> <body> HTML文件就写在这里------ <h3 align=left>文本左对齐</h3 > <h3 align=center>文本居中对齐</h3 > <h3 align=right>文本右对齐</h3 > </body> </html> 可以用任何文本编辑器编辑HTML文件，例如：Word,WINDOWS系统自带的记事本，Ultra Edit 等，并且可以方便的使用Word,WINDOWS系统自带的IE对网页进行简单的测试。
10
创建Web页（启动记事本） 测试Web页（双击保存的文件） 网页编辑工具 HTML编辑器 Homesite Hotdog Pro等
所见即所得的编辑器Dreamwerver和Frontpage
11
1.2.1标记符基础 基本的HTML语法 1、标记符的结构 2、标记符的属性
标记符都用尖括号括起来，<标记符>内容</标记符> 例如：<H1>这里是标题文字格式</H1> 2、标记符的属性 对标记符作用的内容进行更详细的控制，放在开始标记符的尖括号里， <标记符（空格）属性=“属性的值” （空格）属性=“属性的值” >内容</标记符>例如： <FONT size=“1” color＝“green”>示例</FONT>
12
1.2.2 Web页的基本结构 一个Web页对应一个HTML文件，以.htm或.html为扩展名，包含的最基本的标记符有：
<HTML>和</HTML> 首部标记：<HEAD></HEAD> 正文标记：<BODY></BODY>
13
1.2.2 Web页的基本结构 1.Html标记 2.首部标记<head></head> Title 标记符
Meta 标记符 设置自动转址功能 <META http-equiv=“refresh” content=“10”; URL=title shi li.html> 示例 示例
14
1.2.2 Web页的基本结构 Bgsound标记符(只有开始没有结束标记符)<bgsound src=“**.mid” loop=“1”> Src属性：指定背景音乐的源文件 Loop属性：指定背景音乐重复的次数 示例 注:背景音乐的格式一般采用.wav . mid .mp3通常采用.mid格式
15
1.2.2 Web页的基本结构 3.正文标记符 <body></body>包括web页的具体内容,包括各种HTML对象，如：文字、图形、超链接等等。 无格式显示 预格式化标记符：<PRE></PRE> 示例
16
1.2.3设置页面属性 1.设置页面背景颜色： Bgcolor属性 ，代码如下： <body bgcolor=“black”>
下面有16种标准颜色供参考：
17
16种标准颜色可供选择 注： aqua也称cyan；fuchsia也称magenta 色彩名 十六进制值 Aqua(水蓝色) #00FFFF
Navy(藏青色) #000080 Black(黑色) #000000 Olive(茶青色) #808000 Blue(蓝色) #0000FF Purple(紫色) #800080 Fuchsia(樱桃色) #FF00FF Red(红色) #FF0000 Gray(灰色) #808080 Silver(银色) #C0C0C0 Green(绿色) #008000 Teal(茶色) #008080 Lime(石灰色) #00FF00 White(白色) #FFFFFF Maroon(褐红色) #800000 Yellow(黄色) #FFFF00 注： aqua也称cyan；fuchsia也称magenta
18
颜色设置的方法 直接使用颜色名称 例：<body bgcolor=“black”> 用格式#RRGGBB来表示颜色
通过指定颜色的红、绿、蓝含量来自定义一种颜色。 例： <body bgcolor=“#000000”>
19
1.2.3设置页面属性 2.设置页面背景图像 background 属性
格式：<body background=“网页背景图案的地址”> 3.设置背景图像水印效果 Bgproperties=“fixed”
20
1.2.3设置页面属性 4.设置文字和超链接的颜色 text：正文颜色 link (未被访问的超链接文字颜色)
vlink (已被访问过的超级链接颜色) alink(活动链接文字颜色:即当前选定的超级链接) 如果不设置浏览器就会采用默认的颜色: bgcolor白色;text黑色;link蓝色;vlink紫色;alink红色
21
1.2.4 添加注释 开始标记符<!—和结束标记符!-->构成 代码如下：
添加注释 开始标记符<!—和结束标记符!-->构成 代码如下： <!--本行内容为注释信息，不在显示器中显示!-->
22
1.2.5 显示特殊字符 以“&”开始以“；”结束 表示 或使用数字代码 例如： “<”表示为< &＃60；
显示特殊字符 以“&”开始以“；”结束 表示 或使用数字代码 例如： “<”表示为< &＃60； “>”表示为> &＃62； “&”表示为& &＃38； 例：<TOM &JERRY>is a popular VCD program 代码如何？
23
第一章 HTML基础 1.3发布Web页 创建本地站点 申请主页空间 用FTP上传网页
24
上传网页 FTP（文件传输协议） Leap FTP Cute FTP Front page 和Dream weaver
Similar presentations
