《网页制作第十四章超文本编程技术.ppt》由会员分享，可在线阅读，更多相关《网页制作第十四章超文本编程技术.ppt（38页珍藏版）》请在装配图网上搜索。
1、第 14章 超文本编程技术,课前导读 课堂讲解 上机实战 课后练习,课前导读,基础知识 重点知识,基础知识,HTML的基本概念，HTML的语法特征，HTML的基本文件格式。,重点知识,用HTML控制各种网页元素，用HTML制作页面。,课堂讲解,超文本标记语言（HTML）简介 HTML基本语法,Dreamweaver、FrontPage等网页编辑器生成的都是HTML文档，它们提供的其实都只是一个网页编辑的集成环境，采取可视化的界面，使用户不用了解具体的HTML标记，也可以十分轻松地编写出精美的网页。但如果想要更自由地控制网页的格式、效果，得到最好的代码质量，还需要学习一下HTML。,超文本标记语
2、言（HTML）简介,HTML基本概念 HTML语法特征 HTML的基本文件格式,HTML是Internet上用于编写网页的主要语言。HTML不需要翻译而直接由浏览器解释执行。如果不考虑ASP和PHP等，一般的网页都可以在浏览器中查看其HTML代码。HTML可以很方便地使用任何文本编辑器编辑生成，也可以很方便地在Internet上传输。事实上访问一个网页时，就是从服务器上下载它的源代码，然后使用网页浏览器自带的解释器解释执行该源代码，按照解释结果将网页展现在我们面前。因此同一个网页，在不同的浏览器或同一浏览器的不同版本上的显示效果都很可能是不一样的。,HTML基本概念,HTML是Hyper Te
3、xt Markup Language的首字母缩写，中文通常称作超文本标记语言。用其语法规则建立的文档可以运行在不同操作系统的平台上。它的作用是通过一些标签来告诉浏览器怎么显示标签中的内容。HTML中的标签是固定的，不能扩展标签，在HTML文件中要显示的数据和如何显示这些数据的方法同时存在，即HTML不仅要负责组织数据还要负责显示数据。HTML文件的扩展名为htm或html。,HTML语法特征,纯文本标记语言的语言构成主要通过各种标记（Tag）来表示，通常标记由符号“”以及其中所包容的标记元素组成。如想在浏览器中显示一段倾斜的文本，可采用标记和，如粗体显示。,在用浏览器显示时，标记和不会显示，浏
4、览器在文档中发现了这对标记，就将其中包容的文字（如前面的“粗体显示”）以倾斜方式显示。 HTML的语法规则有以下3种表达方式： 对象 对象 语句中标记的书写不分大小写。下面分别对3种标记形式进行介绍。,对象 该语法显示了使用封闭类型标记的形式。多数标记是封闭类型的，它们成对出现，在对象内容的前面是一个标记，在对象内容的后面是另一标记，第二个标记元素前带有反斜线，表明结束标记对对象的控制。如国际名牌进军中国表示浏览器以斜体的形式显示“国际名牌进军中国”，如图15-1所示。,图15-1,如果一个该封闭的标记而没有被封闭，则会随浏览器的不同而出现各种错误。如忘记用标记封闭“国际名牌进军中国”文本，则
5、后面输入的所有文字都会以斜体的形式出现，如图15-2所示。,图15-2,对象 该语法显示了使用封闭类型标记的扩展形式，利用属性可以进一步设置对象某方面的内容，而参数则是设置的结果。如导向科技主页。和是锚标记，用于在文档中创建超级链接，href是该标记的属性之一，用于设置超级链接所指向的地址，在“=”后面的就是href属性的参数，对象是“导向科技主页”文本，在浏览器中预览如图15-3所示。 一个标记的属性可以有多个，在描述完一个属性后，输入一个空格，然后继续描述其他属性。, 该语法显示了使用非封闭类型标记的形式，在HTML语言中，非封闭类型很少，但的确存在，最常用的是换行标记。 如若要使一段文字
6、换行显示可以在文字要换行的地方添加换行标记。如：美丽容颜从今开始，在浏览器上就会以一段两行显示，如图15-4所示。,图15-3,图15-4,HTML代码都是由以上3种标记形式组合而成的，标记之间可以相互嵌套，形成更为复杂的语法。如： ，则文本会以粗体和斜体显示，如图15-5所示。,图15-5,在嵌套标记时，要注意嵌套标记封闭时的顺序，如果标记的嵌套顺序发生混乱，则显示结果也会发生错误。如： 开启梦想之门，效果如图15-6所示。,图15-6,HTML的基本文件格式,HTML文本可以用任何纯文本编辑器编辑。如用DOS下的edit、Windows下的记事本等。HTML文件的一般格式为： 无标题文档
7、,HTML文件具有以下几个特点。 在一个HTML文件的开头必须加上标记说明下面的文件属于HTML文件，这样浏览器才能正确识别，在文件结束时还应加上文件的终止标记，浏览器解释文件时发现有这个标记时就会停止执行。 在起始标记开始到终止标记内的文本都属于HTML文件的文件头。它只定义HTML文件需要特殊处理的一些预先说明，并不属于HTML文件内容，因此这部份内容并不在浏览器中显示。 标记用于说明此份文件的标题，说明此页HTML文件的标题是什么，当浏览器浏览该文件时，会将标题显示在浏览器最上方的标题栏内。,在编辑HTML时，为了维护文件方便或容易阅读，可以在文件内加上注解进行说明。注释标签的格式为：。
8、注释标签中的内容不会显示在浏览器中。 在和之间的文本是HTML文件的主体部分，也是整个HTML文件最重要的部分。,最好不使用Word等字编辑软件来编写HTML代码。建议使用Windows附件里的记事本来编写HTML文档,HTML基本语法,用HTML控制网页文本 用HTML控制网页图像 用HTML控制网页媒体 用HTML控制其他元素,通过前面的学习，相信讲读者已经对HTML有所了解，但这还远远没有达到学习本课的目的，下面具体讲解HTML的一些基本语法，也就是各种常用的标记。,用HTML控制网页文本,在HTML中定义了大量的标记来格式化文本。常用的标记如表15-1所示。,表15-1,续 表,用HT
9、ML控制网页图像,HTML还提供了许多标记对网页图像进行控制，其常用的标记如表15-2所示。,表15-2,用HTML控制网页媒体,HTML还可以控制网页的各种媒体，其常用的标记如表15-3所示。,表15-3,用HTML控制其他元素,HTML除了对以上元素进行控制外，还可以对表格、框架、表单等进行控制，其常用的标记如表15-4所示。,表15-4,续 表,上机实战,本课上机实战将制作一个简单的个人简介页面。利用记事本进行代码的编写，该页面分为两个部分，一是标题“欢迎光临我的第一个页面”，二是正文部分。正文中以斜体和粗体显示文字“这是我制作的第一个页面，请大家多多关照”，一级标题“个人简介”，包括“
10、姓名”、“年龄”和一张照片，段落字体为“棕色（#990000）”，格式为居中、字体为“隶书”、字号为“30”，将其保存为myfrist.htm文件，预,览效果如图15-7所示。希望通过学习这个例子读者能掌握HTML语言的基本用法，为以后的学习打下良好基础。 制作这个个人简介页面的具体操作如下。,图15-7,（1）选择开始所有程序附件记事本菜单命令打开“记事本”窗口。 （2）在编辑窗口中输入作为HTML文件的开始标记。 （3）按【Enter】键，输入作为文件头开始标记。 （4）按【Enter】键，输入作为文件标题开始标记。 （5）在后，输入“欢迎光临我的第一个页面”，该文本显示在浏览器的标题栏上
11、。 （6）输入作为文件标题结束标记。 （7）按【Enter】键，输入作为文件头结束标记。 （8）按【Enter】键，输入作为HTML正文开始标记。,（9）按【Enter】键，输入这是我制作的第一个页面，请大家多多关照，使文本以粗体和斜体显示。 （10）按【Enter】键，输入换行。 （11）按【Enter】键，输入个人简介，使标题为一级标题并居中显示。 （12）按【Enter】键，输入换行。 （13）按【Enter】键，输入作为段落的开始标记，段落格式居中。 （14）按【Enter】键，输入姓名：罗成年龄：7岁，使文本字体为“隶书”，字号为5，颜色为“棕色”。文本为换行显示。,（15）按【En
12、ter】键，输入插入一幅照片，设置照片的源文件，照片的宽度和高度分别为210、298。 （16）按【Enter】键，输入作为字体标记的结束。 （17）按【Enter】键，输入，作为段落格式的结束标记。 （18）按【Enter】键，输入，作为HTML正文的结束记。,（19）按【Enter】键，输入，作为HTML文件的结束标记。完成后的代码如图15-8所示。,（20）选择文件保存菜单命令，打开“另存为”对话框。,图15-8所示,（21）在“文件名”文本框中输入myfrist.htm，在“保存类型”列表中选择“所有文件”，如图15-9所示。,图15-9,（22）单击 按钮，保存文件为myfirst.
13、htm。 （23）打开保存文件myfirst.htm的文件夹即可看到myfirst.htm文件以 表示。 （24）双击该图标即可打开浏览器，预览个人简介页面，如图15-7所示。,课后练习,填空题 判断题 上机操作题,填空题,（1）HTML的全称是 。 （2）HTML文件的扩展名可用 或 。 （3）HTML的语法规则有 、 、 3种表达方式。,对象,html,htm,超文本标记语言,对象,判断题,（1）对象是封闭类型标记。（） （2）在HTML中一般不用非封闭型标记。 （） （3）语句中标记的书写不分大小写。 （） （4）标记的嵌套顺序发生混乱，显示结果不会发生错误。 （）,上机操作题,在记事本中编写“我的小屋”页面，要求：在HTML中部分添加“我的小屋”设置字体为“黑体”，字号为“6”，一段两头缩进的文字，字体为“楷体”，字号为“4”字体颜色为“#006600”，效果如图15-10所示。,图15-10,提示：参见本课的相关知识。,
网页制作第十四章超文本编程技术.ppt
