Web应用开发技术 教学课件 作者 宋先斌 何在玉 第02章.ppt

第 2 章 网页制作基础 2.1 Internet信息服务 2.2 超文本标记语言 2.3 主页制作工具 通过本章的学习，读者应重点掌握以下内容： ? 了解Internet及Web的概念 ? 熟悉HTML文档格式和常用标签 ? 了解常用的主页制作工具 2.1 Internet信息服务 2.1.1 Internet简介 Internet（因特网）是一个通过网络设备把世界各国的计算机相互连接在一起的计算机网络，在Internet上，人们可以利用任何两台支持TCP/IP的计算机进行通信。Internet还支持多种流行的程序，包括World Wide Web。 2.1.2 Web出版 把一些文字、图片、声音等内容组织成一个或多个Web文档，放置在Web服务器上，供用户在能与该服务器相连的机器上访问，这一过程称为Web出版。 2.2 超文本标记语言 一般把通过在文本中插入链接把相关文本组织在一起而形成的文档称为超文本（Hyper Text）。通常，超文本使用超文本标记语言来描述。 超文本标记语言（HyperText Markup Language，HTML）是一种用来创作万维网页面的描述语言，它使用HTML标签来定义文档的格式、组成和链接关系，供浏览器解释执行。 所谓HTML标签，由3部分组成：左尖括号“＜”、“标签名称”和右尖括号“＞”。标签通常是成对出现的，分别称为“开始标签”和“结束标签”，结束标签的左尖括号后加一个斜杠符号“/”。 2.2.1 第一个HTML文档 让我们先来看一个例子。 例2-1 一个简单Web页。 HTML HEAD TITLE我的第一个WEB页/TITLE /HEAD BODY BGCOLOR=WHITE 正文内容写在这里 /BODY /HTML 1．一般形式 从例中可以看出，一个HTML文档的一般结构如下。 HTML HEAD 头部 /HEAD BODY 主体部分 /BODY /HTML 2.2.2 文字修饰与布局 1．修饰方法 （1）标题文字（Header） Hn作为标题的文字/Hn （2）文字大小（FONT SIZE） 形式：FONT SIZE=n需显示成n号大小的文字/FONT 其中，n=1，2，3，…，7。 （3）文字颜色（FONT COLOR） 形式：FONT COLOR=#rrggbb需显示成指定颜色的文字/FONT （4）定义字体（FONT FACE） 形式：FONT FACE=字体需显示成指定字体的文字/FONT （5）标记文字 对于文字还有一些常用的修饰，即加粗、斜体和加下划线。对此，HTML中设计了独立的标签，使用形式如下： B需要加粗的文字/B I需要显示成斜体的文字/I U需要添加下划线的文字/U 例2-2 文字的修饰。 HTML HEAD TITLE文字的修饰/TITLE /HEAD BODY H1这是标题字体H1/H1 H6这是标题字体H6/H6 P FONT SIZE=5 FACE=楷体这是大小为BIG5SMALL的楷体字/FONT P 本教材讨论的是：B动态U网页/BI制作/I/U P FONT COLOR=#ff0000这是红色的文字/FONT /BODY /HTML 2．文字布局 （1）段落P （2）换行BR （3）文字对齐 可以以段落为单位设置文字的对齐方式，形式如下： P ALIGN=对齐方式需要按照给定方式对齐的文字/P （4）预格式化文本 当需要按照输入时的格式来控制换行时，可以使用预格式化文本标签PRE，使用形式如下： PRE 这里是多行文本 /PRE 2.2.3 加入其他网页元素 1．插入水平线 有时为了较明显地划分上下各部分的内容，在文档中间加入一些水平线，使用形式如下： HR WIDTH=宽度 ALIGN=对齐方式 SIZE=高度 例2-3 水平线。 HTML HEAD TITLE水平线/TITLE /HEAD BODY H2这里是标题/H2 HR WIDTH=90％ ALIGN=CENTER 以下是正文内容 /BODY /HTML 本例代码浏览时显示结果如图2-3所示。 2．加入超级链接 （1）链接到其他地址 （2）链接到本页的其他地方 （3）链接到其他地址的某一地方 （4）在新窗口打开链接 例2-4 超级链接。 3．加入图像 要在网页的某个位置放置一个图像，使用I