WEB实训HTML1.ppt

* 电子邮件链接 用户可从网页发送电子邮件 HTML HEAD TITLE海豚/TITLE /HEAD BODY H3充分交流，密切配合/H3 BR P据说，海豚的交流模式几乎与人类的一样复杂！ BR BR A HREF=mailto:thisperson@请将您的疑问发送至 David Fernandez/A /BODY /HTML * 总结 2-1 HTML 标签一般配对使用，不区分大小写 标签都具有属性。属性提供关于网页上 HTML 元素的附加信息 META 标签放置在网页的标题处以提供关于页面的信息。搜索引擎常会用到这些标签 标题级标签使用H1…H6 * 总结 2-2 段落标签使用P align＝“对齐方式”…/P 无序列表使用UL标签,有序列表使用OL标签 字体标签Font color=“颜色” size=“大小” face＝“字体” 超链接标签A href=“链接地址”超链接文本/A * 1.提问：HTML语言是用来做什么？ 引导：做网页。 顺便告诉学员，DreamWeaver能自动生成HTML代码，但是有时我们还是需要人工修改HTML代码。我们在实现动态网页时，更需要理解、阅读HTML代码，因此非常重要。 2.强调HTML的功能： 规定网页内容的显示格式。 * * 演示：切换到DreamWeaver的代码视图。清空代码开始编写，并浏览显示。 向学员说明，由于不同的HTML标签DreamWeaver采用不同的颜色显示，方便编写，因此推荐采用DreamWeaver编写工具。 * 向学员解释： 1)HTML网页的标签讲究配对，HTML开始，/HTML结束 2）HTML网页和人一样，由头部HEAD和主体BODY两部分组成 * 向学员解释： 标签一般由两部分组成：标签和属性， 例如： BODY bgcolor=“green” …. /BODY BODY就是标签， bgcolor=“green”就是属性，属性可选，还可以多个。 * * 演示： 自动刷新的例子：网页代码详见TG4-Source文件夹中的用例。 向学员说明：网页中的其他代码是JavaScript，后续章节会讲解。 * 演示：参见TG4-Source文件夹中“标题”用例 * 演示：参见TG4-Source文件夹中“段落对齐”用例 解释： 1）align的三种对齐方式。 2）段落相当于我们文章的分段，段落间间隔较大（以便与后面的换行BR区别） * 演示：参见TG4-Source文件夹中“换行”用例 提问：上图的两行和两段发现有什么不同没有？ 引导并解释解释： 1）换行间距较小。 2）BR标签比较特殊，不需要配对，即不需要/BR * 提问：打开TG4-Source文件夹中“预格式化前“用例（如下），提问学员，将显示什么效果？ 引导并预览显示，结果是一行连续显示，说明一个问题：HTML代码中IE浏览器不识别空格、换行鞥格式， 如果希望按HTML代码中的格式显示多方便啊，怎么办？现场加上PRE标签，再预览显示。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ HTML HEAD TITLE诗词学习/TITLE /HEAD BODY H1静夜思/H1 床前明月光 疑是地上霜 举头望明月 低头思故乡 /BODY /HTML －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ * 逐一讲解，告诉学员了解。 * 演示： TG4-Source文件夹中“无序列表“用例 * 演示： TG4-Source文件夹中“有序列表“用例，并演示改变type类型的效果。 * 演示：字体Font的用法，参见TG4-Source文件夹中“字体“用例。强调三个属性： 1)Face字体 2）size 大小 3）color 颜色 * 演示： TG4-Source文件夹中“图片对齐“用例 强调2个属性： 1）align 2）src * 提问：c语言中是不是有些转义字符，有哪些啊？ 回答：学员会提到\n换行，因为回车换行符号没法用字母a－z表示，所以用\n表示这些特殊字符。引出网页中也一样。 1）因为表示标签，有特殊含义，如果希望显示”“ 和”“，怎么办？很简单，用 gt; 现场演示看结果， 这个符号也称为字符实体，相当于C语言中的转义字符。 2）解释其他特殊字符 * 强调： 有分号； * 演示例子：TG4-Source文件夹中“超链接“用例 * 提问：(因为前面讲过)，链接路径分为哪两类？ 引导回答：相对和绝对路径 * 演示： TG4-Source文件夹中“锚链接“用例 * 演示： TG4-Source文件夹中”链接到其他文档的锚链接“ * 演示： TG4-Source文件夹中