|
|
|
 |
| 网站建设教程-html语法,HTML语言的语法结构 |
| 更新时间：2012-8-27 14:49:17 浏览次数：3151 |
 |
| |
html语法
教学目标：了解HTML语言的语法结构，初步掌握HTML语言的基本结构。 教学重点难点：1、HTML的基本结构及文字版面、图像的HTML语法。
2、HTML语法含义的理解及进一步自学方法的掌握。 教学过程： 一、上机作业： 1、上机任意建一张网页，选择“代码视图”，看一下网页的源代码 2、新建一张空白网页，它的源代码是空白的吗？ 3、写出红色、绿色、蓝色、黑色、白色的颜色代码 二、html语法 1、什么是HTML，它与网页是什么关系 HTML是标记网页格式的格式化语言，如＜p＞表示段落，＜br＞表示换行等。本节课的重点就是记住这些常用的HTML标记。 2、HTML语言的特点 ①HTML标记放在＜与＞之间，一般＜＞..＜/＞成对使用，也有个别＜＞单独使用 ②HTML不区分大小写 ③许多HTML标记中含有属性，如＜font size=5＞ ④HTML源代码中的一个或多个半角空格，一个或多个换行在网页显示时只当一个半角空格显示 3、掌握HTML文件的总体格式 ＜html＞－－－－－－－－－－－－－－－－－－－－－－文件开始 ＜head＞ ＜title＞网页标题＜/title＞ ＜/head＞ －－－－－－－－－－－－－－－－－－－－－－－－－－－上部分是文件头，下部分是文件体 ＜body＞ 网页内容 ＜/body＞ ＜/html＞－－－－－－－－－－－－－－－－－－－－－文件结束 从这个结构中可以看出，HTML文件是由＜head＞和＜body＞二部分组成的，它们都放在＜html＞标记之间。 4、学习“网页属性”的设置，了解BODY标记的属性 在“网页属性”中可以对整张网页的效果进行设置，对它的设置，在HTML文件中体现在BODY标记的属性中。打开“网页属性”设置的方法是：单击菜单“修改－网页属性”。要求掌握以下属性的含义：background,bgcolor,text,link,leftmargin
5、颜色代码 ①"#ff0000" ②"ff0000" ③"red" ④双引号可以换成单引号或不加引号，小写字母可以改成大字字母
6
6、掌握常用的HTML标记 文字版面编辑类 ①注释：＜!--注释文字--＞（单独使用） ②段落：＜p＞...＜/p＞ 左对齐：＜p align=left＞...＜/p＞ 居中对齐：＜p align=center＞...＜/p＞ <center>...</center> 右对齐：＜p align=right＞...＜/p＞ 默认为左对齐 ③换行：＜br＞（单独使用） ④水平线：＜hr＞（单独使用）水平线有参数设置,如<hr width="50%" size="3" color=red align=center> ⑤标题：＜Hn＞（n＝1到6，h1标记的字体最大，h6最小） ⑥字体：＜font face="黑体" size="5" color="#ff0000"＞...＜/font＞ ⑦原样显示标签：<pre>...</pre> ⑦图像：＜img src="图像的路径和文件名" width="宽度" height="高度"＞（单独使用） 表格标签 表格的标签用<table>、<tr>、<td> 三个标签就可以完成。 表格的尺寸： width/height 表格边框的尺寸： border 表格边框、单元格边框的颜色： bordercolor 表格的位置： align 表格的背景颜色或背景图像： bgcolor/background 表格的格框线宽度(间距)： cellspacing 表格与内容的空隙（填充）： cellpadding 单元格的水平垂直对齐方式： align/valign 设置合并行或列： rowspan/colspan 其它如：项目列表、编号列表、仅对该文档的CSS样式等HTML语法，请自行查看，暂不要求熟记。 7、用HTML的眼光看DW软件，它的功能是什么？ 就是把用户设计的网页转换成HTML文件。所以我们通过属性面板用鼠标对网页的设置与在源代码视图方式下直接改代码的效果是完成相同的。其实，早在DW软件诞生之前，就有高手在设计网页了，他们用什么软件，记事本呀，高手啊！
8、让我们也来做一会高手 阅读以下代码，想一想，网页的显示效果是怎么样的，再在记事本中输入以下代码，注意保存时选“全体文件”，文件扩展名为“.htm” ＜html＞ ＜head＞ ＜title＞个人网页＜/title＞
7
＜/head＞ ＜body bgcolor="#FFFFCC"＞ ＜p＞我爱网页设计＜/p＞ ＜hr＞ ＜p＞我是06＜font color="#FF0000" size="5" face="黑体"＞电脑英才 班＜/font＞＜br＞的一名＜strong＞学生＜/strong＞? ＜img src="a1.jpg" width="140" height="214"＞ ＜/p＞ ＜/body＞ ＜/html＞ 9、DW能做出所有HTML语法支持的效果吗？ HTML标准由国际组织W3C负责制订，但做为超级软件霸主微软公司常常会自定义一些标准，最典型的就是滚动字幕功能，标准的HTML语法并不直接支持滚动字幕。 所以DW软件中也不能直接插入滚动字幕，但我们可以直接在DW的代码视图方式下直接插入IE所支持的滚动字幕代码。这样虽然在DW中看不到滚动效果，但用IE浏览网页时，还是能看到滚动效果的（当然如果你使用的不是IE浏览器，而是Nescape,Mozilla等，就不一定能看到滚动效果了）。滚动字幕的代码是： ＜marquee＞需要滚动的文字＜/marquee＞ 详细的滚动字幕的HTML语法，请试用微软公司的网页制作软件FrontPage 补充知识： 如何到Internet上找HTML教程？ 21世纪的人才不是说要记得多少知识，而在于当需要知识时，能迅速找到知识，以前说“教师一瓶水，才能教会学生半瓶水”，现在是“教师首先要自已接上自来水，再去帮助学生也接上自来水”。教会同学们自动到Internet上找资料，就是帮学生接上自来水。 到Internet上找资料，一靠的是经验，如果同学们平时经常上网，就会记住一些比较好的资源网站或教学网站，以后需要时可以去这些网站看看，推荐同学可以看看以下网站
二靠搜索引擎的帮忙，现在世界上的网站已经突破50亿张，如何在茫茫网海中迅速找到需要的信息，离不开搜索引擎，以下是现在比较有名的搜索引擎，推荐同学们使用 http://www.baidu.com
|
|
 |
|
