HTML教程.ppt

HTML 教程 现代教育技术中心 HTML教程 HTML入门 HTML基本构架 页面布局与文字设计 列表 TABLE表格 文件之间的链接 　 多媒体效果 多视窗口FRAMES 总复习 HTML入门 HTML英语意思是：Hypertext Marked Language，即超文本标记语言 超文本 通过HTML可以表现出丰富多彩的设计风格 通过HTML可以实现页面之间的跳转 通过HTML可以展现多媒体的效果 标签 “标签名字　属性” HTML的基本结构 文档头、文档体 HTML 　　　HEAD　　　　　　头 部 信 息　　　/HEAD 　　　BODY　　　　　文 档 主 体， 正 文 部 分　　　/BODY /HTML HTML的基本结构 (cont.) 下面是一个最基本的超文本文档的源代码： HTML HEADTITLE一个简单的HTML示例/TITLE/HEAD BODYCENTERH3欢迎光临我的主页/H3BRHRFONT SIZE=2　　这是我第一次做主页，无论怎么样，我都会努力做好！/FONT/CENTER/BODY/HTML 超文本中的标签 单标签 标签名称 请看例子BR 双标签 标签 内 容/ 标签 E请看例子M第一：/EM 标签属性 标签名字 属性1 属性2 属性3 … 请看例子 HR SIZE=3 ALIGN=LEFT WIDTH=75% 页面布局及文字设计 标题 换行BR 段落标签P 水平线段HR 文字的大小设置 文字的字体与样式 文字的颜色 位置控制 综合示例 标题 HTML中提供了相应的标题标签Hn,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大 H1…/H1　　　　　第一级标题 H2…/H2　　　　　第二级标题 H3…/H3　　　　　第三级标题 H4…/H4　　　　　第四级标题 H5…/H5　　　　　第五级标题 H6…/H6　　　　　第六级标题 请看下面的例子 换行BR 在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上BR标签 无换行示例 换行示例 段落标签P 文件段落的开始由P来标记，段落的结束由/P来标记，/P是可以省略的，因为下一个P的开始就意味着上一个P的结束 P标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种 请看例子 水平线段HR 这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。 HR有四个属性：size　水平线的宽度width 水平线的长，用占屏幕宽度的百分比或 象素值来表示align 水平线的对齐方式，有LEFT RIGHT CENTER三种noshade 线段无阴影属性，为实心线段 水平线段HR （cont.） 线段粗细的设定 线段长度的设定 线段排列的设定 无阴影的设定 文字的大小设置 提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。 请看示例 文字的字体与样式 HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。 　　font face=“字体” 请看例子 文字的字体与样式 (cont.) 为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下： B　 　　/B　　　　　粗体　　　　　HTML语言 I　 　　　/I　　　　　斜体　　　　 HTML语言 U　 　　/U　　　　　加下划线　 　HTML语言 TT　　 TT　　　　　打字机字体 　HTML语言 BIG　　/BIG　　　　大型字体　　 　HTML语言 SMALL　/SMALL　　小型字体　　　HTML语言 BLINK　/BLINK　　　闪烁效果 　　HTML语言 EM　　 /EM 表示强调，一般为斜体　HTML语言 STRONG /STRONG表示特别强调，一般为粗体　　HTML语言 CITE /CITE 用于引证、举例，一般为斜体　　　HTML语言 现在我们用一个实例来看看效果 文字