HTML基础及网页设计教案.pdf

实训教案

（2021—2022学年第二学期）

课程名称计算机应用训练

授课班级101-2102

授课教师

院部教研室学院

课程学时40

课程学分2

教材计算机基础

课序第一节

课题HTML基础及网页设计概述

1

√√

授课讲授（）；研讨（）；上机操作（）；实验（）；实训教学

4

√

方式（）；小测验（）；案例教学（）；多媒体教学（）时数

通过学习掌握基本的HTML文档、HTML文档的基本结构、HTML标签、

教学

目的元素及属性、标准属性、HTML字符实体、为文档添加注释、空白和空白字

要求

符等知识点。

1、HTML文档的基本结构

一个HTML文档由四个基本部分组成，如范例所示：

1HTML

（）一个文档类型声明，这表明该文档是文档。

2htmlHTML

（）标签对，用于标示文档的开始和结束。

（3）head标签对，期间的内容构成HTML文档的开头部分，包含一些辅助

性元素，这些辅助性元素将在下面予以详细介绍。

4bodyHTML

（）标签对，其间的内容构成文档的主体部分。

根据HTML的基本结构建立网页，下面以记事本程序为例，打开一个记事

本程序，按照HTML的基本结构建立一个网页。

教学

基本

内容

html

head

title标题/title

/head

body

页面内容

/body

/html

2

!--HTML开始标记--

!--HTML头信息开始标记--

!--网页标题标记--

!--HTML头信息的结束标记--

!--网页主体标记--

!--页面体中内容结束标记--

注意：以上构成了网页的基本结构。尽管看上去很简单，但这确实是个完

整，有效，合格的文档。我们创建的每个网页都将从与其类似的框架开始。

在HTML中，大部分元素都包含有自己的属性，属性可以为标签中的内容

提供不同的选项，以产生不同的效果。如下范例所示：

范例2.1：

html

head

title简单的HTML示例制作/title

/head

bodybgcolor=blacktext=#ffffff

center

h1我的第一个HTML实例/h1

/center

hrwidth=80%!--HTML中输出分割线标记--

p本页显示黑色背景，白色文本/p/body

/html

3

图2.1范例效果图

2.1.1html标签对和属性

html标签用于HTML文档的最前