HTML网页编程基础课件
合集下载
《HTML入门》课件
《HTML入门》PPT课件
HTML入门PPT课件将带领你探索Web开发的基础知识，从HTML的简介开始， 一直到应用HTML和CSS美化页面样式。准备好了吗？让我们开始吧！
1. 简介
1 HTML的定义
了解HTML是什么以及如何使用它构建Web页面。
2 Web开发的基础
HTML作为Web开发的基石，对于想要迈入这个领域的人来说至关重要。
3
提交按钮和重置按钮
了解如何在HTML表单中添加提交按钮和重置按钮，实现用户交互响应。
5. CSS基础介绍
1 CSS的定义
介绍CSS的概念和作用，以及在Web开发中的重要性。
2 CSS和HTML的关系
解释CSS和HTML之间的关系，以及如何共同构建出精美的网页。
6. HTML+CSS的应用
美化页面样式
学习如何使用HTML和CSS共 同美化网页，使其外观更加吸 引人。
响应式布局
示例案例
了解响应式布局的概念和原理， 并学习如何创建适应不同设备 的网页。
通过实际案例演示如何将 HTML和CSS应用于创建令人 印象深刻的网页。
7. 总结
1 HTML和CSS的重要性和应用
2 学习进阶建议
总结HTML和CSS在Web开发中的重要性， 并强调其广泛应用的优势。
提供学习HTML和CSS进一步深入的资源 和建议，鼓励学习者继续探索。
列表和表格
使用HTML创建有序列表、 无序列表和表格，为信息 呈现提供更多选项。
链接和图片
探索如何在HTML中插入 链接和图像，使页面更富 有互动性和视觉吸引力。
4. HTML表单的基本结构，包括输入字段、标签和按钮。
2
文本框、下拉框和单选框
HTML入门PPT课件将带领你探索Web开发的基础知识，从HTML的简介开始， 一直到应用HTML和CSS美化页面样式。准备好了吗？让我们开始吧！
1. 简介
1 HTML的定义
了解HTML是什么以及如何使用它构建Web页面。
2 Web开发的基础
HTML作为Web开发的基石，对于想要迈入这个领域的人来说至关重要。
3
提交按钮和重置按钮
了解如何在HTML表单中添加提交按钮和重置按钮，实现用户交互响应。
5. CSS基础介绍
1 CSS的定义
介绍CSS的概念和作用，以及在Web开发中的重要性。
2 CSS和HTML的关系
解释CSS和HTML之间的关系，以及如何共同构建出精美的网页。
6. HTML+CSS的应用
美化页面样式
学习如何使用HTML和CSS共 同美化网页，使其外观更加吸 引人。
响应式布局
示例案例
了解响应式布局的概念和原理， 并学习如何创建适应不同设备 的网页。
通过实际案例演示如何将 HTML和CSS应用于创建令人 印象深刻的网页。
7. 总结
1 HTML和CSS的重要性和应用
2 学习进阶建议
总结HTML和CSS在Web开发中的重要性， 并强调其广泛应用的优势。
提供学习HTML和CSS进一步深入的资源 和建议，鼓励学习者继续探索。
列表和表格
使用HTML创建有序列表、 无序列表和表格，为信息 呈现提供更多选项。
链接和图片
探索如何在HTML中插入 链接和图像，使页面更富 有互动性和视觉吸引力。
4. HTML表单的基本结构，包括输入字段、标签和按钮。
2
文本框、下拉框和单选框
《HTML基础》PPT课件
• <title>欢迎访问我的主页</title>
• <style type="text/css">
• .STYLE11 {FONT-SIZE: 12px; color: #666666; }
• </style>
• <script type="text/JavaScript">
• <!--
• function MM_jumpMenu(targ, selObj, restore){ //v3.0
3. 开头部分用以存载重要信息，而只有本文部分会被显示。所以 大部分标记会运用于本文部分。
4. <TITLE>所标示的是文件的标题。会出现于浏览器顶部及为 别人 Bookmark 时的名称，所以每页有不同而明确的标题 是需要的。
h
9
实例 • <HTML>
• <head>
• <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
HTML就没有WWW“世界” 。
• HTML 不是程序设计语言，而是一种结构
语言。
h
4
2.1 HTML概述
• HTML有许多元素，文档通过元素置标就 形成了所谓的HTML文档。
• HTML 也是文本文件，所以可以用纯文本 编辑器来编辑（如Windows 的记事本、 写字板)
• 其后缀名必须是 .html 或 .htm
h
1
第2章 HTML语言基础
• 2.1 HTML概述 • 2.2 文本的编辑 • 2.3 图像编辑 • 2.4 建立超链接 • 2.5 表格与框架 • 本章小结
HTML代码简介 PPT课件
• <a href=“” target=_blank title="新浪站点链接"> 新浪站点链接</a>
• </body>
• </html>
显示结果
1.25
© 2009
HTML代码简介
• 链接到email地址 • 在网站中，你经常会看到“联系我们”
的链接，一点击这个链接，就会触发你 的邮件客户端，比如Outlook Express， 然后显示一个新建mail的窗口。用<a>可 以实现这样的功能。
பைடு நூலகம்
1.26
© 2009
HTML代码简介
• <html>
• <body>
• <a href="biaoti.htm">这是一个链接 </a><br>
• <a href="" target=_blank title="新浪站点链接">新浪站 点链接</a>
• <a href = "mailto:info@">联系新 浪</a>
HTML代码简介
HTML注释
• 在HTML文件里，你可以写代码注释，解 释说明你的代码，这样有助于你和他人 日后能够更好地理解你的代码。
• 注释可以写在<!--和-->之间。浏览器是 忽略注释的，你不会在HTML正文中看到 你的注释。
• <!-- This is a comment -->
1.15
HTML绝对路径(Absolute Path)
HTML网页制作教程PPT课件
<form> <em>
HTML文档结构
<html> <head> <body>
Add Your Title Text
•Text 1 •Text 2 •Text 3 •Text 4 •Text 5
Text
html
head
body
title
h1
p
ul
p
li
li
ul
ol
li
li
li
li
li
li
ul
li
li
❖ 标尺线
<hr>
-------即为布局而提供的一种直线
可以为标尺线设定大小、宽高、颜色、对齐方式等。
如: <hr size=3> <hr width=25> <hr color=red>
表格（Table）标记（TAG）
❖ 基本语法： ❖ <table>...</table> 定义表格
<tr> 定义表行 <th> 定义表头 <td> 定义表元(表格的具体数据)
❖ <meta http-equiv=“Content-Type” content=“text/html;charset=#”>
“#”处填写的是语言的类型，如一般中国大陆基本上汉字 用的是国标编码，则为 gb2312 ；而港台地区则是 big5 ；美国则为us-ascii 。
❖ 注意：我们在做模板时，如果找的是一些韩国网站，则出 现的是<META HTTP-EQUIV=“content-type” content=“text/html; charset=euc-kr”> 如果 你不修改此处为gb2312，则会页面出乱！
HTML文档结构
<html> <head> <body>
Add Your Title Text
•Text 1 •Text 2 •Text 3 •Text 4 •Text 5
Text
html
head
body
title
h1
p
ul
p
li
li
ul
ol
li
li
li
li
li
li
ul
li
li
❖ 标尺线
<hr>
-------即为布局而提供的一种直线
可以为标尺线设定大小、宽高、颜色、对齐方式等。
如: <hr size=3> <hr width=25> <hr color=red>
表格（Table）标记（TAG）
❖ 基本语法： ❖ <table>...</table> 定义表格
<tr> 定义表行 <th> 定义表头 <td> 定义表元(表格的具体数据)
❖ <meta http-equiv=“Content-Type” content=“text/html;charset=#”>
“#”处填写的是语言的类型，如一般中国大陆基本上汉字 用的是国标编码，则为 gb2312 ；而港台地区则是 big5 ；美国则为us-ascii 。
❖ 注意：我们在做模板时，如果找的是一些韩国网站，则出 现的是<META HTTP-EQUIV=“content-type” content=“text/html; charset=euc-kr”> 如果 你不修改此处为gb2312，则会页面出乱！
HTML语言基础--网页设计课件
(通常是斜体加黑体)；<strong></strong>输出加重文本
<font></font>
通过对它的两个属性 size 和 color 的控制来实现对输出文本的字体大
小、颜色进行随意地改变
16
17
3.5 图象标志
<img>
<img>是将标志对的src属性赋值，这个值是图形文件的文 件名，包括路径，这个路径可以是相对路径，也可以是网 址。实际上就是通过路径将图形文件嵌入到文档中。 <img>标志中还有alt、align、border、width和height属性
网页设计与制作ቤተ መጻሕፍቲ ባይዱ
Web基础知识 网页制作初步 HTML语言基础 层叠样式表的应用
Dreamweaver 4的使用
Fireworks 4.0
Flash 5.0
网页的发布与管理
1
chap3 HTML语言基础
主要内容：
HTML概述
基本标志 格式标志
文本标志
图象标志 表格标志
链接标志
语法：<p align="">
</p>
9
3.3 格式标志
<br>
作用：创建一个回车换行 语法： <br> 没有结束标志
<blockquote></blockquote>
在<blockquote></blockquote>标志对之间加入的文本会在浏览器中
按两边缩进的方式显示
10
3.3 格式标志
HTML语言基础PPT演示课件
3.3.2 图像标记
我们要可以在页面中插入一些漂亮的图像，使文章图文并茂，如何在Web页面上插入图像呢？
它的语法格式为： <img src=图像的URL地址>
[例]
<html> <head> <title>例3-12</title> </head> <body> <img src=picture1.jpg align=left alt=风景 height=165 width=200>插入一个图像 <br><p><a href="picture2.jpg">单击这里可以看到一个图像</a></p> <a href="music.mp3">单击这里可以欣赏音乐</a> </body> </html>
字体标记符的 COLOR 属性可用来控制文字的颜色，使用方法与正文标记符<BODY> 中使用的 BGCOLOR 属性相同。face 属性
face 属性用来指定字体样式。在这个属性中用户可以指定一个或几个字体名称 [例3-5] 字体设置
<html> <head> <title>例3-5</title> </head> <body> <font size=7 color=red>这是7号字体</font> <font size=5 color=blue>这是5号字体</font> <font size=3 color=yellow>这是3号字体</font> <font size=2 color=red>这是２号字体</font> </body> </html>
我们要可以在页面中插入一些漂亮的图像，使文章图文并茂，如何在Web页面上插入图像呢？
它的语法格式为： <img src=图像的URL地址>
[例]
<html> <head> <title>例3-12</title> </head> <body> <img src=picture1.jpg align=left alt=风景 height=165 width=200>插入一个图像 <br><p><a href="picture2.jpg">单击这里可以看到一个图像</a></p> <a href="music.mp3">单击这里可以欣赏音乐</a> </body> </html>
字体标记符的 COLOR 属性可用来控制文字的颜色，使用方法与正文标记符<BODY> 中使用的 BGCOLOR 属性相同。face 属性
face 属性用来指定字体样式。在这个属性中用户可以指定一个或几个字体名称 [例3-5] 字体设置
<html> <head> <title>例3-5</title> </head> <body> <font size=7 color=red>这是7号字体</font> <font size=5 color=blue>这是5号字体</font> <font size=3 color=yellow>这是3号字体</font> <font size=2 color=red>这是２号字体</font> </body> </html>
HTML网页设计基础 优质课件
3.2.3 列表标记
1．无序列表标记 格式： <UL type = 项目符号类型>
<LI type = 项目符号类型>列表项1 <LI type = 项目符号类型>列表项2 …… <LI type = 项目符号类型>列表项n </UL>
2．有序列表标记
格式：
<OL type = 序号类型 start = 开始序号> <LI type = 序号类型>列表项1 <LI type = 序号类型>列表项2 …… <LI type = 序号类型>列表项n </OL>
3.4.2 HTML网页简单实例
<html> <head> <title> 网页标题 </title> <style> *{margin:0px;padding:0px;} .content{margin:0px auto;width:80%;} .Header{width:100%;height:100px;background-color: green;text-align:center;font-
</SELECT>
3．<TEXTAREA>标记 格式：
< TEXTAREA name = 表单域名称 rows = 行数 cols = 列数> </TEXTAREA>
3.3.3 表单制作举例
图 表单范例执行结果
3.4 HTML常用标记
3.4.1 div盒子模型 格式： <div></div> 从外到内依次包括： margin：外边距、 border：边框、 padding：内补白、 content：内容。
HTML基础教程ppt课件
基本组成部分—— HTML元素属性
HTML元素可以有自己的相关属性，每一个 属性还可以由我们网页编制者赋一定的值。 元素属性出现在元素的< >内，并且和元素 名之间有一个空格分隔；属性值用“”引 起来。
第二张网页（02.htm）
<html> <head> <title>my first page</title> </head> <body> <p align="center">This is my first homepage!</p> </body> </html>
HTML对颜色的控制
HTML对颜色的控制也有自己的语法。 HTML使用16进制的RGB颜色值对颜色进 行控制。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
常见颜色的代码
颜色
黑色 银色 红色 蓝色 白色 黄色 绿色 海蓝色
颜色名和RGB值
Black=”#000000” Silver=”#c0c0c0” Red=”#ff0000” Blue=”#0000ff” White=”#ffffff” Yellow=”ffff00” Green=”#00ff00” Aqua=”#00ffff”
HTML基本结构的 有关元素和元素属性
HEAD元素——1 <head>元素出现在文档的开头部分。 <head>与</head>之间的内容不会在浏览 器的文档窗口显示，但是其间的元素有特 殊重要的意义。 <title>
<title>元素定义HTML文档的标题。<title>与 </title>之间的内容将显示在浏览器窗口的标题 栏。
html5基础PPT课件
.文档类型声明。 .html页面。
--文件头<head></head> --文件主体部分<body></body>
<!DOCTYRE html>
<html>
<head>
<meta charset=”utf-8”>
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
2021
5
html基础标签元素
2021
6
html基础标签元素
2021
7
html基础标签元素
2021
8
html基础标签元素
2021
9
html基础元素--表格
2021
<table> <caption>成绩统计表
</caption>
<tr> <td></td> <td></td> <td></td>
</select>
12
html基础元素--结构标记
2021
13
网页编程基础 HTML5
WebBasic HTML5 Unit01
2021
1
HTML快速入门
HTML快速入门
html概述 html文档结构 html基础语法
2021
超文本 什么是html
文档类型声明 head.body元素
标记语法 元素/嵌套 属性和值 HTML和XHTML HTML5
--文件头<head></head> --文件主体部分<body></body>
<!DOCTYRE html>
<html>
<head>
<meta charset=”utf-8”>
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
2021
5
html基础标签元素
2021
6
html基础标签元素
2021
7
html基础标签元素
2021
8
html基础标签元素
2021
9
html基础元素--表格
2021
<table> <caption>成绩统计表
</caption>
<tr> <td></td> <td></td> <td></td>
</select>
12
html基础元素--结构标记
2021
13
网页编程基础 HTML5
WebBasic HTML5 Unit01
2021
1
HTML快速入门
HTML快速入门
html概述 html文档结构 html基础语法
2021
超文本 什么是html
文档类型声明 head.body元素
标记语法 元素/嵌套 属性和值 HTML和XHTML HTML5
《网页制作HTML语言》课件
表格的创建和使用
表格是展示结构化数据的重要工具。了解HTML中表格的创建和基本属性设置， 可以便捷地创建出具有统一格式和样式的数据表格。
图像插入和处理
图像是网页设计中重要的元素之一，能够吸引用户的注意力并增强信息的传达效果。本节将介绍如何在 HTML中插入图像，并讲解一些常用的图像处理技巧和最佳实践。
超链接的创建与应用
超链接是连接各个网页之间的纽带，为用户提供导航和浏览体验。学会创建 超链接、设置链接样式和使用锚点等技巧，可以使网页更加富有互动性和导 航性。
《网页制作HTML语言》 PPT课件
通过本课件，深入了解HTML语言，包括其定义、发展历程、基本结构、常用 标签与属性、编写技巧等方面的内容，帮助您掌握网页制作的基本知识，并 了解CSS样式、响应式设计等进阶内容。
HTML语言的历史与发展
HTML是超文本标记语言（HyperText Markup Language）的缩写，是一种用 于创建网页的标准标记语言。本节将介绍HTML语言的起源、发展和重要版本。
HTML语言的基本结构和语法
学习HTML语言的基本结构和语法是入门的第一步。了解HTML标签、元素、属性等的使用方法，才能 正确编写网页代码，构建出流畅、优雅的页面。
HTML文档常用的标签与属性
HTML标签和属性是构建网页的基石。学会使用常见的HTML标签（如标题、段落、链接、图片等）以 及常用的属性，可以使网页内容更具结构和表现力。
如何编写HTML文档
编写HTML文档需要一定的规范和技巧。本节将介绍HTML文档的基本结构和 一些编写技巧，帮助您快速上手，编写出规范、易读的HTML代码。
文本格式化与排版
文本格式化和排版是网页设计中的关键环节。通过合理使用HTML标签和CSS 样式，可以实现文字大小、颜色、对齐方式等方面的灵活控制，提升网页的 可读性和美观性。
网页设计与制作教程-HTML基础 ppt课件
1.1 HTML简介
HTML是HyperText Markup Language（超文本置标语言） 的缩写，是一种为普通文件中某些字句加上标签的语言，其 目的在于运用标签（tag）对文件达到预期的效果。 1.1.1 HTML发展历史
ppt课件
3
1.1 HTML简介
1.1.2 HTML5的特性及元素
ppt课件 7
使用HTML语法编写HTML5文档
<!doctype html>
1.3 网页文件的创建过程
① 打开记事本。单击Windows 的“开始”按钮，在“程序” 菜单的“附件”子菜单中单击“记事本”命令。 ② 创建新文件，并按 HTML 语言规则编辑。在“记事本”窗 口中输入HTML代码，具体的内容如图1-2所示。 ③ 保存网页。打开“记事本”的“文件”菜单，选择“保存” 命令。此时将出现“另存为”对话框，在“保存在”下拉列 表框中选择文件要存放的路径，在“文件名”文本框输入 以 .html 或 .htm 为后缀的文件名，如 welcome.html ，在“保 存类型”下拉列表框中选择“文本文档（ *.txt ）”项，最 后单击“保存”按钮，将记事本中的内容保存在磁盘中。 ④ 在“我的电脑”相应的存盘文件夹中双击 welcome.html 文件启动浏览器，即可看到网页的显示结果。
在编写 HTML代码时要注意使用代码缩进来提高程序的结 构性和层次性。
ppt课件 6
1.2 HTML编写规范
1.2.3
<html> <head> <meta charset="gb2312"> <title>文档标题</title> </head> <body> 网页内容 </body> </html>
《HTML编程基础》课件
HTML提供了标签来创建超链接。通过设置链接的目标URL，可以实现跳转到其他网页或锚点。
超链接的类型和创建方法
超链接可以是外部链接，指向其他网站；也可以是内部链接，指向同一网站的其他页面。创 建超链接只需使用标签并设置正确的URL即可。
五、HTML图像显示
1 图像显示的作用和常见场景
图像在网页中起到吸引用户注意力和丰富内容的作用，常见场景包括产品展示、新闻报 道等。
2 HTML调试技巧和工具
在实际开发过程中，可能会遇到各种HTML的调试问题。提供一些实用的技巧和工具，帮 助学员解决问题。
3 HTML进阶学习和推荐资源
展示一些进阶学习的途径和推荐资源，帮助学员进一步深入学习HTML和Web开发。
八、总结与答疑
1 HTML编程基础的总结
对整个课程内容进行总结，强调学员的收获和重点知识。
HTML标签的嵌套 和属性
HTML标签可以相互嵌套， 形成复杂的文档结构。同 时，标签还可以接受属性 来添加额外的信息和样式。
三、HTML文本格式化
1 文本格式化的作用
和常见场景
2 HTML中的文本格式 3 CSS样式表的基本
化标签
语法和应用
通过HTML的文本格式化 标签，可以给网页添加 各种样式，使其更加美 观和易读。
HTML提供了众多的文本 格式化标签，如加粗、 斜体、下划线等。
通过CSS样式表，可以更 加灵活地控制网页的外 观和布局。学习CSS是进 阶的重要一步。
四、HTML超链接超链接的概和作用超链接是连接网页与网页之间的桥梁，使用户可以点击跳转到其他页面。它是实现网页之间 互动的重要手段。
HTML中的超链接标签
《HTML编程基础》PPT课 件
# HTML编程基础 PPT课件
超链接的类型和创建方法
超链接可以是外部链接，指向其他网站；也可以是内部链接，指向同一网站的其他页面。创 建超链接只需使用标签并设置正确的URL即可。
五、HTML图像显示
1 图像显示的作用和常见场景
图像在网页中起到吸引用户注意力和丰富内容的作用，常见场景包括产品展示、新闻报 道等。
2 HTML调试技巧和工具
在实际开发过程中，可能会遇到各种HTML的调试问题。提供一些实用的技巧和工具，帮 助学员解决问题。
3 HTML进阶学习和推荐资源
展示一些进阶学习的途径和推荐资源，帮助学员进一步深入学习HTML和Web开发。
八、总结与答疑
1 HTML编程基础的总结
对整个课程内容进行总结，强调学员的收获和重点知识。
HTML标签的嵌套 和属性
HTML标签可以相互嵌套， 形成复杂的文档结构。同 时，标签还可以接受属性 来添加额外的信息和样式。
三、HTML文本格式化
1 文本格式化的作用
和常见场景
2 HTML中的文本格式 3 CSS样式表的基本
化标签
语法和应用
通过HTML的文本格式化 标签，可以给网页添加 各种样式，使其更加美 观和易读。
HTML提供了众多的文本 格式化标签，如加粗、 斜体、下划线等。
通过CSS样式表，可以更 加灵活地控制网页的外 观和布局。学习CSS是进 阶的重要一步。
四、HTML超链接超链接的概和作用超链接是连接网页与网页之间的桥梁，使用户可以点击跳转到其他页面。它是实现网页之间 互动的重要手段。
HTML中的超链接标签
《HTML编程基础》PPT课 件
# HTML编程基础 PPT课件
网页设计与制作课件第1章 HTML语言基础
第一章 HTML语言基础
5.格式标志 ●字符格式标志
B 粗体 I 斜体 U 下画线 <FONT face=“字体名” size=字号 color=颜
色> ●水平线 HR ●段落格式标志 Br P 6.超链接 <A Href=“URL”> … </A> 7.图形连接 <Img Src=“图形文件的URL”>
第一章 HTML语言基础
一、超文本标记语言 ● HTML 是 建 立 发 表 联 机 文 档 采 用 的 语 言 。
HTML 文档也称为WEB文档，每个HTML文档称为一 个WEB页面，页面是浏览器中看到的内容。 ●HTML命令不区分大小写，所有HTML命令标 志用“< >”括起来，由标志和带斜杠的同 名标志表示该标志指定的范围。 如： 〈B〉……〈/B〉 ●HTML文档为文本格式，扩展名必须为HTML 或HTM 二、用HTML语言制作WEB页
第一章 HTML语言基础
1.HTML ●标志< HTML>和< /HTML>之间包含了整个文
档。 2.Head ●指定文档的初始信息，其中最常用的命令为
Title 如： 〈Title〉测试标题！〈/title〉 3.Body ●定义WEB文档的主体部分。 4.Hn ●定义WEB文档的标题级别 H1-H6 <Hx align=#> #:left,center,right
第一章 HTML语言基础
8.批注 ●由<!>括起的内容为批注。
如：<!示例> 9.背景图片与背景色 ●如：<body bgcolor=颜色>
<body background=背景图片路径> ●一般情况下，两者只
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
【具体步骤】 （1）在【桌面】上右击，在弹出的快捷菜单中选择【管理】命令，弹
出【计算机管理】对话框，选择【Internet信息服务】→【网站】 →【默认网站】命令，右击，在弹出的快捷菜单中选择【新建】 →【虚拟目录】→【下一步】命令，如图2-8～图2-10所示。 （2）在【别名】文本框中填入要给网站起的别名后，单击【下一步】 按钮，单击打开的对话框中【目录】文本框后的【浏览】按钮， 选择D:\website→【下一步】→【下一步】→【完成】命令，如图 2-11和图2-12所示。
【HTML】→【创建】命令，将出现Unitiled-1（未命名1）的页 面，如图2-6所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
（3）选择【文件】→【保存】命令，在弹出的【另存为】对话框的 【保存在】下拉列表框中，选择第一步建立的文件夹website，在 【文件名】下拉列表框中输入index.htm，然后单击【确定】按钮。
【背景知识】
一、HTML概述 HTML是Hypertext Marked Language的简写，即超文本标
记语言，是一种用来制作超文本文档的简单标记语言。超文本传 输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的 操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则 和标准，用HTML编写的超文本文档称为HTML文档，它能独立 于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ （World Wide Web，也可称为Web，中文叫做万维网）的信息表 示语言，使用HTML语言描述的文件，需要通过Web浏览器显示 出效果。
（1）双击【我的电脑】图标，选择【工具】→【文件夹选项】命令， 从弹出的对话框中打开【查看】选项卡，取消选中【隐藏已知文 件类型的扩展名】复选框，再单击【确定】按钮，即可将所有文 件的扩展名显示出来。
下一页 返回
任务一使用HTML语言来制作网页
（2）在【桌面】上右击，在弹出的快捷菜单中选择【新建】→【文本 文档】命令，此时会在桌面上出现“新建文本文档.txt”文件，如 图2-2所示，将文件名改为“index.htm”。图标会马上改为图2-3 所示的Байду номын сангаас式。
HTML只是一个纯文本文件。创建一个HTML文档只需要两 个工具，一个是HTML编辑器，另一个是Web浏览器。HTML编 辑器是用于生成和保存HTML文档的应用程序。Web浏览器是用 来打开Web网页文件，提供给用户查看Web资源的客户端程序。
上一页 下一页 返回
上一页 下一页 返回
任务一使用HTML语言来制作网页
（3）打开IE浏览器，在【地址】栏中输入 http://localhost/webtest/index.htm即可，出现如图2-13所示的页面。
（4）打开DreamWeaver，选择【站点】→【新建站点】命令，在弹 出的对话框中打开【高级】选项卡，按照步骤（5）、（6）、（7） 分别完成【本地信息】、【远程信息】、【测试服务器】的配置 就可以了，如图2-14所示。
（4）在上半部分的代码区的<title></title>内，输入“我的第一个首 页”，在<body></body>内，输入“此处显示网页的主体内容”。
（5）按F12键运行网页，得到图2-7所示的网页。
上一页 下一页 返回
任务一使用HTML语言来制作网页
【案例3】在DreamWeaver中进行站点发布
上一页 下一页 返回
任务一使用HTML语言来制作网页
所谓超文本，是因为它可以加入图片、声音、动画、影视等 内容，事实上每一个HTML文档都是一种静态的网页文件，这个 文件里面包含了HTML指令代码，这些指令代码并不是程序语言， 它只是一种排版网页中资料显示位置的标记结构语言，易学易懂， 非常简单。HTML的普遍应用就是带来了超文本的技术，即通过 单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一 个页面，与世界各地主机的文件链接，直接获取相关的主题。
上一页 下一页 返回
任务一使用HTML语言来制作网页
要浏览这个index.htm文件，只需在桌面上双击它，或者打开 浏览器，选择【File】→【Open】命令，然后选择这个文件就行 了。效果如图2-5所示。
【案例2】使用DreamWeaver来制作HTML网页
【具体步骤】（在DreamWeaver 8中完成） （1）在D盘根目录下建立文件夹并命名为website（网站）。 （2）打开DreamWeaver，选择【文件】→【新建】→【基本页】→
（3）在“index.htm”上右击，在弹出的快捷菜单中选择【打开方式】 →【记事本】命令，使用记事本来编缉代码文本，如图2-4所示。
（4）在打开的记事本中，输入以下代码： <html><head> <title>网页标题</title></head> <body> 这是我的第一个主页 </body> </html>
（5）在【本地信息】中，在【站点名称】文本框中给站点起名为 myWebsite，将【本地文件夹】设置为D:\website，如图2-15所示。
（6）在【远程信息】中，将【访问】下拉列表框中的值设置为“本地 /网络”，将【远程文件夹】设置为“D:\website”，并对应图将复 选框进行勾选，如图2-16所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
（7）在【测试服务器】中，将【服务器模型】设置为“ASP JavaScript”，将【访问】设置为“本地/网络”，在【URL前缀】 中的http://localhost/后加上“webtest”，结果如图2-17所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
项目二HTML网页编程基础
任务二在网页中应用JavaScript 任务三使用样式表（CSS）来美化网页
任务一使用HTML语言来制作网页
【任务要点】
1.使用记事本来制作HTML网页 2.使用DreamWeaver来制作HTML网页
【案例1】使用记事本来制作HTML网页 【具体步骤】（在Windows XP中完成）
出【计算机管理】对话框，选择【Internet信息服务】→【网站】 →【默认网站】命令，右击，在弹出的快捷菜单中选择【新建】 →【虚拟目录】→【下一步】命令，如图2-8～图2-10所示。 （2）在【别名】文本框中填入要给网站起的别名后，单击【下一步】 按钮，单击打开的对话框中【目录】文本框后的【浏览】按钮， 选择D:\website→【下一步】→【下一步】→【完成】命令，如图 2-11和图2-12所示。
【HTML】→【创建】命令，将出现Unitiled-1（未命名1）的页 面，如图2-6所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
（3）选择【文件】→【保存】命令，在弹出的【另存为】对话框的 【保存在】下拉列表框中，选择第一步建立的文件夹website，在 【文件名】下拉列表框中输入index.htm，然后单击【确定】按钮。
【背景知识】
一、HTML概述 HTML是Hypertext Marked Language的简写，即超文本标
记语言，是一种用来制作超文本文档的简单标记语言。超文本传 输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的 操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则 和标准，用HTML编写的超文本文档称为HTML文档，它能独立 于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ （World Wide Web，也可称为Web，中文叫做万维网）的信息表 示语言，使用HTML语言描述的文件，需要通过Web浏览器显示 出效果。
（1）双击【我的电脑】图标，选择【工具】→【文件夹选项】命令， 从弹出的对话框中打开【查看】选项卡，取消选中【隐藏已知文 件类型的扩展名】复选框，再单击【确定】按钮，即可将所有文 件的扩展名显示出来。
下一页 返回
任务一使用HTML语言来制作网页
（2）在【桌面】上右击，在弹出的快捷菜单中选择【新建】→【文本 文档】命令，此时会在桌面上出现“新建文本文档.txt”文件，如 图2-2所示，将文件名改为“index.htm”。图标会马上改为图2-3 所示的Байду номын сангаас式。
HTML只是一个纯文本文件。创建一个HTML文档只需要两 个工具，一个是HTML编辑器，另一个是Web浏览器。HTML编 辑器是用于生成和保存HTML文档的应用程序。Web浏览器是用 来打开Web网页文件，提供给用户查看Web资源的客户端程序。
上一页 下一页 返回
上一页 下一页 返回
任务一使用HTML语言来制作网页
（3）打开IE浏览器，在【地址】栏中输入 http://localhost/webtest/index.htm即可，出现如图2-13所示的页面。
（4）打开DreamWeaver，选择【站点】→【新建站点】命令，在弹 出的对话框中打开【高级】选项卡，按照步骤（5）、（6）、（7） 分别完成【本地信息】、【远程信息】、【测试服务器】的配置 就可以了，如图2-14所示。
（4）在上半部分的代码区的<title></title>内，输入“我的第一个首 页”，在<body></body>内，输入“此处显示网页的主体内容”。
（5）按F12键运行网页，得到图2-7所示的网页。
上一页 下一页 返回
任务一使用HTML语言来制作网页
【案例3】在DreamWeaver中进行站点发布
上一页 下一页 返回
任务一使用HTML语言来制作网页
所谓超文本，是因为它可以加入图片、声音、动画、影视等 内容，事实上每一个HTML文档都是一种静态的网页文件，这个 文件里面包含了HTML指令代码，这些指令代码并不是程序语言， 它只是一种排版网页中资料显示位置的标记结构语言，易学易懂， 非常简单。HTML的普遍应用就是带来了超文本的技术，即通过 单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一 个页面，与世界各地主机的文件链接，直接获取相关的主题。
上一页 下一页 返回
任务一使用HTML语言来制作网页
要浏览这个index.htm文件，只需在桌面上双击它，或者打开 浏览器，选择【File】→【Open】命令，然后选择这个文件就行 了。效果如图2-5所示。
【案例2】使用DreamWeaver来制作HTML网页
【具体步骤】（在DreamWeaver 8中完成） （1）在D盘根目录下建立文件夹并命名为website（网站）。 （2）打开DreamWeaver，选择【文件】→【新建】→【基本页】→
（3）在“index.htm”上右击，在弹出的快捷菜单中选择【打开方式】 →【记事本】命令，使用记事本来编缉代码文本，如图2-4所示。
（4）在打开的记事本中，输入以下代码： <html><head> <title>网页标题</title></head> <body> 这是我的第一个主页 </body> </html>
（5）在【本地信息】中，在【站点名称】文本框中给站点起名为 myWebsite，将【本地文件夹】设置为D:\website，如图2-15所示。
（6）在【远程信息】中，将【访问】下拉列表框中的值设置为“本地 /网络”，将【远程文件夹】设置为“D:\website”，并对应图将复 选框进行勾选，如图2-16所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
（7）在【测试服务器】中，将【服务器模型】设置为“ASP JavaScript”，将【访问】设置为“本地/网络”，在【URL前缀】 中的http://localhost/后加上“webtest”，结果如图2-17所示。
上一页 下一页 返回
任务一使用HTML语言来制作网页
项目二HTML网页编程基础
任务二在网页中应用JavaScript 任务三使用样式表（CSS）来美化网页
任务一使用HTML语言来制作网页
【任务要点】
1.使用记事本来制作HTML网页 2.使用DreamWeaver来制作HTML网页
【案例1】使用记事本来制作HTML网页 【具体步骤】（在Windows XP中完成）