Html语言入门(多媒体).docx_咨信网zixin.com.cn

资源描述

Html语言入门（多媒体）教学章节： 1.1 html基本知识教学目的：１、了解一些关于网页的基础知识　　　　　２、了解HTML语言，并掌握一个简单的HTML文件的写法 3、掌握几个常用HTML标记教学重点： HTML语言标记的掌握教学难点： HTML语言标记的理解教学方法：讲演法教学课时：1课时教学过程：复习：１、ＷＷＷ（World Wide Web）万维网 2、URL（全球统一资源定位器）也就是“网址” 服务器浏览器 3、服务器、浏览器新课： 1、Hypertext (超文本) 是一种可以指向其他文件的文字或图片。这样可以在网上链接千万台计算机，世界范围内的大量信息通过Hypertext（超文本）的方式相互链接。 2、动态网页技术 ASP、PHP、JSP 3、HTML —— HyperText Markup Language 超文本标记语言一、 HTML入门 1、基本的格式是 <标记符>内容</标记符>——双容器 <标记符>——单容器 2、一个简单的HTML文件 <html> 网页开始 <head> <title>无标题文档</title> </head> 网页头，放网页标题等 <body> </body> 网页体，网页的内容都在这儿 </html> 网页结束 3、扩展名 ·html,·htm 4.html代码的特点 (1)网页以<html>开始，以</html>结束，网页由<head>和<body>（网页头和网页体）两部分组成，网页中的内容全部在网页体中 (2)网页代码中含有<body>这样的标记，每个标记代表一种含意，有些标记中还有属性值如 (3)标记一定要放在<...>之间，许多标记有对应的结束标记，应成对使用，如<body>...</body>，也有个别<>单独使用。 (4)HTML源代码中的一个或多个半角空格，一个或多个换行在网页显示时只当一个半角空格显示 5．学习“网页属性”的设置，了解body标记的属性　　在“网页属性”中可以对整张网页的效果进行设置，对它的设置，在HTML文件中体现在BODY标记的属性中。打开“网页属性”设置的方法是：单击菜单“修改－网页属性”。　　要求掌握以下属性的含义：background（背景图像）,bgcolor（背景）,text（文本）,link（链接）,leftmargin（左边界） 6．颜色代码为6位数XXXXXX，X为十六进制数即0-9，A-F(不分大小写)。　　颜色由“红、绿、蓝”三原色调合而成，每2位数代表一种颜色的浓度，00代表颜色浓度最小，FF代表颜色浓度最大。　　三种颜色的顺序为红、绿、蓝。　　理解几种常用的颜色代码：ff0000代表纯红、00ff00代表纯绿、0000ff代表纯蓝、000000代表纯黑、ffffff代表纯白、ffff00代表黄色。考考你：　 00ffff代表什么颜色？f0f0f0代表什么颜色？101010代表什么颜色？颜色代码的表示形式： ①"#ff0000" ②"ff0000" ③"red" ④双引号可以换成单引号或不加引号，小写字母可以改成大字字母 7．常用的HTML标记及属性 (1)网页开始与结束：<html>....</html> (2)网页头：<head>...</head> (3)网页标题(位于网页头)：<title>...</title> (4)网页体：<body>...</body> (5)段落：... 　左对齐：... 　居中对齐：... 　右对齐：... 　默认为左对齐 (6)换行： （单独使用） (7)水平线：<hr>（单独使用） (8)标题：<Hn>（n＝1到6，h1标记的字体最大，h6最小） (9)字体：... (10)图像：<img src="图像的路径和文件名" width="宽度" height="高度">（单独使用）（11）表格＜table＞＜tr＞＜td＞…单元格内容…＜/td＞＜/tr＞＜tr＞＜td＞…单元格内容…＜/td＞＜/tr＞＜/table＞跨行属性rowspan ＜TD ROWSPAN=单元格跨的行数＞跨列属性colspan ＜TD ROWSPAN=单元格跨的列数＞（12）段落标记＜P＞……＜/P＞转行标记＜BH＞……＜/BH＞其它如：项目列表、编号列表、仅对该文档的CSS样式等HTML语法，请自行查看，暂不要求熟记。 8．用HTML的眼光看DW软件，它的功能是什么？　　就是把用户设计的网页转换成HTML文件。所以我们通过属性面板用鼠标对网页的设置与在源代码视图方式下直接改代码的效果是完成相同的。其实，早在DW软件诞生之前，就有高手在设计网页了，他们用什么软件，记事本呀，高手啊！ 9、让我们也来做一回高手课堂练习：阅读以下代码，想一想，网页的显示效果是怎么样的？再在记事本中输入以下代码，完成后以“1.htm”保存。（注意保存时选“所有文件”，文件扩展名为“.htm”） <html> <head> <title>我的个人主页</title> </head> <body bgcolor="#FFFFCC"> 我爱网页设计 <hr> 我是<img src="logo.gif" width="175" height="60">05电脑专业 的一名学生 </body> </html> 9、DW能做出所有HTML语法支持的效果吗？　　HTML标准由国际组织W3C负责制订，现在的版本已经是HTML4.0了，详细文档可以看http://www.w3c.org/，DW支持HTML4标准，但做为超级软件霸主微软公司常常会自定义一些标准，最典型的就是滚动字幕功能，标准的HTML语法并不直接支持滚动字幕。　　所以DW软件中也不能直接插入滚动字幕，但我们可以直接在DW的代码视图方式下直接插入IE所支持的滚动字幕代码。这样虽然在DW中看不到滚动效果，但用IE浏览网页时，还是能看到滚动效果的（当然如果你使用的不是IE浏览器，而是Nescape,Mozilla等，就不一定能看到滚动效果了）。滚动字幕的代码是：　　　　<marquee>需要滚动的文字</marquee> 　　详细的滚动字幕的HTML语法，请试用微软公司的网页制作软件FrontPage 补充知识：如何到Internet上找HTML教程？　　21世纪的人才不是说要记得多少知识，而在于当需要知识时，能迅速找到知识，以前说“教师一瓶水，才能教会学生半瓶水”，现在按我校计算机特级教师张德新教师的话说是“教师首先要自已接上自来水，再去帮助学生也接上自来水”。教会同学们自动到Internet上找资料，就是帮学生接上自来水。　　到Internet上找资料，一靠的是经验，如果同学们平时经常上网，就会记住一些比较好的资源网站或教学网站，以后需要时可以去这些网站看看，我推荐同学可以看看以下网站　　二靠搜索引擎的帮忙，现在世界上的网站已经突破50亿张，如何在茫茫网海中迅速找到需要的信息，离不开搜索引擎，以下是现在比较有名的搜索引擎，推荐同学们使用课堂练习： 1、看html代码，画出网页。 <HTML> <HEAD> <TITLE>这是测试文件</TITLE> </HEAD> <BODY> 这是我制作的第一个网页 <img scr=banner.gif> 看来还有很多东东要学噢！ 返回主页 </BODY> </HTML> 2、再根据要求让学生写出一张网页的HTML代码。标题为：my page 欢迎进入我的个人网站进入网站 <HTML> <HEAD> <TITLE>my page</TITLE> </HEAD> <BODY bgcolor=#660066> 欢迎进入我的个人网站 <img scr=0.gif> 进入网站 </BODY> </HTML> 课后习题：１、写出10种常用的HTML标记及属性２、写出以下属性的含义：background、bgcolor、text、link、leftmargin ３、写出红色、绿色、蓝色、黑色、白色的颜色代码４、写出滚动字幕的代码本课小结：本课介绍了html语言的特点和一些简单的html语言的介绍。这对学习网页制作这门课非常重要。需要充分地理解和掌握。后记：

展开阅读全文