静态网页制作PPT课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
每种颜色的最小值是0（十六进制：#00）。最大值 是255（十六进制：#FF）。
红色 #FF0000 绿色 #00FF00 黄色 #FFFF00
Pspad软件
演示pspad使用
本课内容结束
请准备9月25日上实验课 地点：综合楼C303、C302机房 上机名单贴在门上
实验内容：WEB服务器的安装
例子:
空格 左尖括号< < 等等
Q3-6 静态网页制作(HTML)
超链接(锚和href属性)
<a> (锚标签) <a href=“”>网易</a>
target属性 name属性 (给锚命名,在一个页面内部跳转) href=“url#锚名称” href=“mailto:aaa@” 电子邮件链接
Q3-5 什么是HTML文件
应该注意的细节
小写标签(尽管HTML不严格限制大小写),下一代 xhtml规定要严格限制使用小写标签
扩展名推荐使用.html 推荐使用纯文本编辑器来学习HTML(pspad) 推荐使用IE和firefox两种浏览器来调试网页,这样
可以获得更强的网页效果兼容性
SUCCESS
THANK YOU
2019/8/14
Q3-2 WWW如何工作?
Q3-2 WWW如何工作?
INTERNET 信息服务 WWW
想象一下我们是如 何接受互联网的服 务的？
软件 Browser
Q3-2 WWW如何工作?
超链接(Hyper Link)
Hyperlink
Q3-2 WWW如何工作?
关键词 keywords
网页(web page)*** Web 服务器(web server)*** Web 客户端(web client)*** 浏览器(Browser)**** 超链接(Hyper Link)****
基本的HTML标签
在网页上，文章经常由标题和段落组成 标题 <h1>一级标题</h1> <hx> x:1~6 段落 <p></p> 换行符 <br> 水平线 <hr> HTML注释 <!– 这是一个注释 -->
空格(HTML 会裁掉文本中所有的空格。任何数量的空格都被按一 个空格计数。另外，在 HTML 中，一个空行也被当作一个空格。)
Firefox
Q3-2 WWW如何工作?
续 浏览器简介
浏览器（Browser）
浏览器是一个把在互联网上找到的文本文档（和其 它类型的文件）翻译（编译）成网页。 网页可以 包含图形、音频、视频、文本等。
浏览器是一个非常普通的应用软件，就象字处理程 序一样（如Microsoft理工大学 现代教育技术中心
主要内容
WWW(World Wide Web)
WWW如何工作 浏览器如何读取并显示页面 WWW标准由谁制定
网页制作
什么是HTML文件 静态网页制作(学习HTML基本语法)
Q3-2 WWW如何工作?
SUCCESS
THANK YOU
2019/8/14
Q3-5 什么是HTML文件
HTML演示
使用windows记事本编写简单的HTML文件
例子解释:HTML 文件中的第一个标签是 <html>。这个标签 告诉浏览器这是HTML文件的开始点。文件中最后一个标签是 </html>。表示这是HTML文件的结束点。位于 <head> 标签 和 </head>标签之间的文本是头信息。头信息不会显示在浏 览器窗口中。<title>标签中的文本是文件的标题。标题会 显示在浏览器的标题栏。<body>标签中的文本是将被浏览器 显示出来的文本。<b>和</b>标签中的文本将以粗体显示。
每个HTML元素都有一个元素名（比如 body、p、br） 开始标签是被尖括号包围的元素名 结束标签是被尖括号包围的斜杠和元素名 元素内容位于开始标签和结束标签之间 某些 HTML 元素可以没有内容 某些 HTML 元素可以没有结束标签<br><hr>
Q3-6 静态网页制作(HTML)
协议 | 名|
主机地址或域名 | 路径名 | 文件
Q3-3 浏览器如何读取并显示页面
浏览器如何显示页面？
所有的网页都含有其如何被显示的标签(tag) 浏览器通过阅读这些标签来决定如何显示页面 最常用的标记规则称为 HTML 用于段落的 HTML 标签类似这样：<p> 在 HTML 中像这样定义段落：<p>This is a
Q3-6 静态网页制作(HTML)
列表
无序列表是一个项目的列表，此列项目使用粗体圆 点（典型的小黑圆圈）进行标记
无序列表始于 <ul> 标签。每个列表项始于 <li> 标签
有序列表也是一列项目，列表项目使用数字进行标 记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签
Q3-3 浏览器如何读取并显示页面
浏览器如何读取页面?
浏览器可通过向服务器发送HTTP请求(request)来 表明自己想要获取哪一个页面(类似于到图书馆借 书)
请求是一个URL的标准 HTTP 请求
例如:
/somepath/page.htm
Web 信息存储于被称为网页(webpage)的文档中 网页是存储于被称为Web 服务器(web server)的计算机
上 读取网页的计算机称为Web 客户端(web client) Web 客户端通过称为浏览器(Browser)的程序来查看网
页 主要的浏览器有 Internet Explorer 和 Mozilla
Q3-5 什么是HTML文件
关键词 keywords
超文本标记语言(HTML)***** 标签(tag)**** <html> <head> <title> <body> <b>
Q3-6 静态网页制作(HTML)
HTML 标签（tag）
HTML 标签是用来标记 HTML 元素(element)的 HTML 标签被 < 和 > 符号包围 绝大部分HTML 标签是成对出现的。例如 <b> 和
Paragraph</p> <b>粗体</b>
Q3-3 浏览器如何读取并显示页面
关键词 keywords
HTTP请求(request)** URL**** 超文本标记语言 HTML ***** 标记(tag)****
Q3-4 WWW标准由谁制定
WWW标准并不是完全由厂商制定的 WWW的规则制定主体是W3C W3C 指的是万维网联盟（World Wide Web
Q3-6 静态网页制作(HTML)
网页中插入图片
<img src=“URL” alt=“替换文本” /> 图片是非常占用网页空间的，在实际设计中应该谨
慎使用图片
Q3-6 静态网页制作(HTML)
颜色
HTML中，颜色由一个十六进制符号来定义，这个符 号由红色、绿色和蓝色的值组成（RGB）。
Consortium） W3C将各种规范订立为WWW标准 最核心的WWW标准是HTML、CSS、XML 最新的HTML标准是XHTML 1.0
Q3-4 WWW标准由谁制定
W3C 指万维网联盟（World Wide Web Consortium）
W3C 创建于1994年10月 W3C 由Tim Berners-Lee创建 W3C 是一个会员组织 W3C 的工作是对web进行标准化 W3C 创建并维护 WWW 标准 W3C 标准被称为 W3C 推荐（W3C
Q3-6 静态网页制作(HTML)
HTML属性
<body bgcolor="yellow"> <h1 align="center"> 属性名和属性值 属性值要是用引号(单引号或者双引号)
Q3-6 静态网页制作(HTML)
Q3-6 静态网页制作(HTML)
字符实体
一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏 览器正确地显示这些字符，我们必须在 HTML 源码 中插入字符实体。
</b>, 也有单个标签 例如<br> 位于起始标签和终止标签之间的文本是元素的内容 HTML 标签对大小写不敏感，<b> 和 <B> 的作用的
相同的，但是推荐使用小写标签
Q3-6 静态网页制作(HTML)
HTML元素（element）
<b>此文本是粗体的。</b> 这就是一个HTML元素，HTML文 件就是由HTML元素组成的，就像组装汽车一样。
Recommendations）
分界页面
接下来学习制作静态网页 推荐一个重要网站
Q3-5 什么是HTML文件
HTML(Hypertext Markup Language)指超文本标 记语言
HTML文件是包含一些标签(tag)的文本文件 这些标签告诉WEB浏览器如何显示页面 HTML文件使用htm或者html作为文件扩展名 HTML文件可以通过简单的文本编辑器来创建。
Q3-2 WWW如何工作?
续 浏览器简介
常见的浏览器软件 Internet Explorer（IE浏览器,它随着微软公司 windows操作系统销售 是目前用户数量最多的浏览器软 件） Netscape（早期浏览器之一 2008.3停止开发） Opera（在移动终端发展的较好） Firefox（Mozilla公司产品 免费 吸引了大量用户） Google Chrome谷歌浏览器（2008年最新推出 google）
红色 #FF0000 绿色 #00FF00 黄色 #FFFF00
Pspad软件
演示pspad使用
本课内容结束
请准备9月25日上实验课 地点：综合楼C303、C302机房 上机名单贴在门上
实验内容：WEB服务器的安装
例子:
空格 左尖括号< < 等等
Q3-6 静态网页制作(HTML)
超链接(锚和href属性)
<a> (锚标签) <a href=“”>网易</a>
target属性 name属性 (给锚命名,在一个页面内部跳转) href=“url#锚名称” href=“mailto:aaa@” 电子邮件链接
Q3-5 什么是HTML文件
应该注意的细节
小写标签(尽管HTML不严格限制大小写),下一代 xhtml规定要严格限制使用小写标签
扩展名推荐使用.html 推荐使用纯文本编辑器来学习HTML(pspad) 推荐使用IE和firefox两种浏览器来调试网页,这样
可以获得更强的网页效果兼容性
SUCCESS
THANK YOU
2019/8/14
Q3-2 WWW如何工作?
Q3-2 WWW如何工作?
INTERNET 信息服务 WWW
想象一下我们是如 何接受互联网的服 务的？
软件 Browser
Q3-2 WWW如何工作?
超链接(Hyper Link)
Hyperlink
Q3-2 WWW如何工作?
关键词 keywords
网页(web page)*** Web 服务器(web server)*** Web 客户端(web client)*** 浏览器(Browser)**** 超链接(Hyper Link)****
基本的HTML标签
在网页上，文章经常由标题和段落组成 标题 <h1>一级标题</h1> <hx> x:1~6 段落 <p></p> 换行符 <br> 水平线 <hr> HTML注释 <!– 这是一个注释 -->
空格(HTML 会裁掉文本中所有的空格。任何数量的空格都被按一 个空格计数。另外，在 HTML 中，一个空行也被当作一个空格。)
Firefox
Q3-2 WWW如何工作?
续 浏览器简介
浏览器（Browser）
浏览器是一个把在互联网上找到的文本文档（和其 它类型的文件）翻译（编译）成网页。 网页可以 包含图形、音频、视频、文本等。
浏览器是一个非常普通的应用软件，就象字处理程 序一样（如Microsoft理工大学 现代教育技术中心
主要内容
WWW(World Wide Web)
WWW如何工作 浏览器如何读取并显示页面 WWW标准由谁制定
网页制作
什么是HTML文件 静态网页制作(学习HTML基本语法)
Q3-2 WWW如何工作?
SUCCESS
THANK YOU
2019/8/14
Q3-5 什么是HTML文件
HTML演示
使用windows记事本编写简单的HTML文件
例子解释:HTML 文件中的第一个标签是 <html>。这个标签 告诉浏览器这是HTML文件的开始点。文件中最后一个标签是 </html>。表示这是HTML文件的结束点。位于 <head> 标签 和 </head>标签之间的文本是头信息。头信息不会显示在浏 览器窗口中。<title>标签中的文本是文件的标题。标题会 显示在浏览器的标题栏。<body>标签中的文本是将被浏览器 显示出来的文本。<b>和</b>标签中的文本将以粗体显示。
每个HTML元素都有一个元素名（比如 body、p、br） 开始标签是被尖括号包围的元素名 结束标签是被尖括号包围的斜杠和元素名 元素内容位于开始标签和结束标签之间 某些 HTML 元素可以没有内容 某些 HTML 元素可以没有结束标签<br><hr>
Q3-6 静态网页制作(HTML)
协议 | 名|
主机地址或域名 | 路径名 | 文件
Q3-3 浏览器如何读取并显示页面
浏览器如何显示页面？
所有的网页都含有其如何被显示的标签(tag) 浏览器通过阅读这些标签来决定如何显示页面 最常用的标记规则称为 HTML 用于段落的 HTML 标签类似这样：<p> 在 HTML 中像这样定义段落：<p>This is a
Q3-6 静态网页制作(HTML)
列表
无序列表是一个项目的列表，此列项目使用粗体圆 点（典型的小黑圆圈）进行标记
无序列表始于 <ul> 标签。每个列表项始于 <li> 标签
有序列表也是一列项目，列表项目使用数字进行标 记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签
Q3-3 浏览器如何读取并显示页面
浏览器如何读取页面?
浏览器可通过向服务器发送HTTP请求(request)来 表明自己想要获取哪一个页面(类似于到图书馆借 书)
请求是一个URL的标准 HTTP 请求
例如:
/somepath/page.htm
Web 信息存储于被称为网页(webpage)的文档中 网页是存储于被称为Web 服务器(web server)的计算机
上 读取网页的计算机称为Web 客户端(web client) Web 客户端通过称为浏览器(Browser)的程序来查看网
页 主要的浏览器有 Internet Explorer 和 Mozilla
Q3-5 什么是HTML文件
关键词 keywords
超文本标记语言(HTML)***** 标签(tag)**** <html> <head> <title> <body> <b>
Q3-6 静态网页制作(HTML)
HTML 标签（tag）
HTML 标签是用来标记 HTML 元素(element)的 HTML 标签被 < 和 > 符号包围 绝大部分HTML 标签是成对出现的。例如 <b> 和
Paragraph</p> <b>粗体</b>
Q3-3 浏览器如何读取并显示页面
关键词 keywords
HTTP请求(request)** URL**** 超文本标记语言 HTML ***** 标记(tag)****
Q3-4 WWW标准由谁制定
WWW标准并不是完全由厂商制定的 WWW的规则制定主体是W3C W3C 指的是万维网联盟（World Wide Web
Q3-6 静态网页制作(HTML)
网页中插入图片
<img src=“URL” alt=“替换文本” /> 图片是非常占用网页空间的，在实际设计中应该谨
慎使用图片
Q3-6 静态网页制作(HTML)
颜色
HTML中，颜色由一个十六进制符号来定义，这个符 号由红色、绿色和蓝色的值组成（RGB）。
Consortium） W3C将各种规范订立为WWW标准 最核心的WWW标准是HTML、CSS、XML 最新的HTML标准是XHTML 1.0
Q3-4 WWW标准由谁制定
W3C 指万维网联盟（World Wide Web Consortium）
W3C 创建于1994年10月 W3C 由Tim Berners-Lee创建 W3C 是一个会员组织 W3C 的工作是对web进行标准化 W3C 创建并维护 WWW 标准 W3C 标准被称为 W3C 推荐（W3C
Q3-6 静态网页制作(HTML)
HTML属性
<body bgcolor="yellow"> <h1 align="center"> 属性名和属性值 属性值要是用引号(单引号或者双引号)
Q3-6 静态网页制作(HTML)
Q3-6 静态网页制作(HTML)
字符实体
一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏 览器正确地显示这些字符，我们必须在 HTML 源码 中插入字符实体。
</b>, 也有单个标签 例如<br> 位于起始标签和终止标签之间的文本是元素的内容 HTML 标签对大小写不敏感，<b> 和 <B> 的作用的
相同的，但是推荐使用小写标签
Q3-6 静态网页制作(HTML)
HTML元素（element）
<b>此文本是粗体的。</b> 这就是一个HTML元素，HTML文 件就是由HTML元素组成的，就像组装汽车一样。
Recommendations）
分界页面
接下来学习制作静态网页 推荐一个重要网站
Q3-5 什么是HTML文件
HTML(Hypertext Markup Language)指超文本标 记语言
HTML文件是包含一些标签(tag)的文本文件 这些标签告诉WEB浏览器如何显示页面 HTML文件使用htm或者html作为文件扩展名 HTML文件可以通过简单的文本编辑器来创建。
Q3-2 WWW如何工作?
续 浏览器简介
常见的浏览器软件 Internet Explorer（IE浏览器,它随着微软公司 windows操作系统销售 是目前用户数量最多的浏览器软 件） Netscape（早期浏览器之一 2008.3停止开发） Opera（在移动终端发展的较好） Firefox（Mozilla公司产品 免费 吸引了大量用户） Google Chrome谷歌浏览器（2008年最新推出 google）