Download presentation
Presentation is loading. Please wait.
1
第二部分 HTML语言控制 本次课的主要内容： 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
3、P、BR、HR、Hn、img、a等标记符的基本用法 4、align属性的用法，掌握FONT标记符的用法
2
重点：使用“记事本”编辑HTML的操作 难点： HTML语言各标签的具体应用
3
一、网页制作的编程语言和编辑环境 1、HTML语言 是一种超文本标记语言，一个程序通常要经过编译运行等过程看到结果，网页就是能用记事本去编辑，浏览器去进行编译执行。 ※ 网页文件的扩展名为 . Htm 例如：word 文件的扩展名为 . Doc 文本文件的扩展名为 . txt
4
<HEAD></HEAD> <BODY>文 档 主 体， 正 文 部 分 </BODY>
2、HTML的基本结构 <HTML> <HEAD></HEAD> <BODY>文 档 主 体， 正 文 部 分 </BODY> </HTML> HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 html标记当中英文不分大小写,但内容中的字母是分大小写的.
5
3.Html编写环境 在记事本中就可以完成,文件的扩展名为.htm或.html
6
例: <HTML> <HEAD><TITLE>一个简单的HTML示例</TITLE></HEAD> <BODY> <CENTER> 欢迎光临我的主页<BR> <BR> <HR> 这是我第一次做主页，无论怎么样，我都会努力做好！ </CENTER> </BODY> </HTML>
7
二、超文本中的标签 1、<CENTER> 2、<BR> 表示换行 让内容居中显示
它只需单独使用就能完整地表达意思，这类标记的语法是：< 标签名称> 这些标记通常被称为“单标签” 3、<HR> 表示水平线段 这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。
8
许多单标记和双标记的始标记内可以包含一些属性， 其语法是： <标签名字 属性1 属性2 属性3 … > 例:
标签属性 许多单标记和双标记的始标记内可以包含一些属性， 其语法是： <标签名字 属性1 属性2 属性3 … > 例: <HR size=3 align=left width="75%“ > 其中SIZE属性定义线的粗细，属性值取整数，缺省值为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 " "号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是"100%"
9
<HR>的属性： noshade 线段无阴影属性，为实心线段
color 水平线的颜色 <HR noshade color=yellow> 颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是颜色的英文名称
10
<Hr color = red> 或者 <Hr color = #FF0000 >
black # 黑色 silver #C0C0C0 银色 gray # 灰色 pink #FFC8CB 粉红 maroon #800000 茶色 red #FF0000 红色 purple # 紫色 fuchsia #FF00FF 紫红 green # 绿色 orange #FFA500 橙色 lime #00FF00 亮绿 olive # 橄榄 yellow #FFFF00 黄色 blue #0000FF 蓝色 navy # 深蓝 teal # 青色 brown #A52A2A 褐色
11
4、段落标签<P> <P>标签还有一个属性align，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。 例： <html> <head><title>段落标签</title></head> <body> <P ALIGN=CENTER> 登鹳雀楼<P>白日依山尽，<P>黄河入海流。<P>欲穷千里目，<P>更上一层楼。 </body> </html>
12
<html> <head><title>段落标签</title></head>
<body> <P ALIGN=CENTER> 登鹳雀楼<br>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。 </body> </html> <html> <head><title>段落标签</title></head> <body> <P ALIGN=CENTER> 登鹳雀楼<P>白日依山尽，<P>黄河入海流。<P>欲穷千里目，<P>更上一层楼。 </body> </html>
13
5、文字标签<font> 字体样式属性： <font face="字体"> </font>
字体颜色属性： <font color=…>…</font> 字体字型标签： <B></B>粗体 <I></I>斜体 <U></U>加下划线
14
6、表格 <table> 表格的基本结构 <table>...</table> 定义表格
<tr> 定义表行 <th> 定义表头 <td> 定义表元(表格的具体数据)
15
以下是一个简单的例子： <table border=1> <tr> <th>姓名</th><th>性别</th><th>年龄</th> <td>王林</td><td>男</td><td>25</td> </table>
16
表格相关属性值 ★ 表格的大小 <table width=n1 height=n2> width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。
17
★ 边框尺寸设置 边框是用border属性来体现的，它表示表格的边框线厚度 如： <table border=10 > ★ 格间线宽度 <TABLE CELLSPACING=#> #表示要取用的像素值 ★ 内容与格线之间的宽度 <TABLE CELLPADDING=#> #表示要取用的像素值
18
★ 表格内文字的对齐/布局 表格中数据的排列方式:
左右 <align>: 居左（left)、居右(right)和居中(center)； 上下<valign>: 上齐(top)、居中(middle)、下齐(bottom) <tr align=#> #=left, center, right <td align=#> <tr valign=#> #=top，middle，bottom，baseline <td valign=#>
19
跨多列的表元 <th colspan=#> <td colspan=#>
★ 跨多行、多列的表元 跨多列的表元 <th colspan=#> <td colspan=#> 跨多行的表元 <th rowspan=#> <td rowspan=#> <table border> <tr><th colspan=3>值班人员 </th> <tr><th>星期一</th><th>星期二</th><th>星期三</th> <tr><td>李强</td><td>张明</td><td>王平</td> </table> <table border> <tr><th rowspan=2>值班人员</th><th>星期一</th><th>星期二</th><th>星期三</th> <tr><td>李强</td><td>张明</td><td>王平</td> </table>
20
★ 表格的颜色 在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。 表格的背景色彩 <table bgcolor=#> 行的背景色彩 <tr bgcolor=#> 表元的背景色彩 <th bgcolor=#> <td bgcolor=#> #=rrggbb 16进制 RGB数码
21
7、文件之间的链接 超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面。一个链接的基本格式如下： 例：
<A href="资源地址">链接文字</A> · 标签<A>表示一个链接的开始，</A>表示链接的结束； · 属性“HREF”定义了这个链接所指的地方； · 通过点击“链接文字”可以到达指定的文件。 例： <a href=
22
链接分为本地链接、URL链接和目录链接。
在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。 本地链接： 对同一台机器上的不同文件进行的连接称为本地链接. 以绝对路径表示： <A HREF=“c:\study\HTML教程\link01.htm”>文件的链接</A> 以相对路径表示： <A HREF="link01.htm">文件的链接</A>
23
URL链接 : 如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件是采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。 <A href= <A href=FTP:// >我的网站</A>
24
目录链接 制作目录链接方法是： 首先把某段落设置为链接位置，格式是： <A NAME=“链接位置名称”></A>
首先把某段落设置为链接位置，格式是： <A NAME=“链接位置名称”></A> 再调用此链接部分的文件，定义链接： <A HREF="文件名＃链接位置名称">链接文字</A> ☆ 如果是在一个文件内跳转，文件名可以省略不写。
25
开一个新窗口： <a href="URL" target="Window_Name"> ... </a> 例: <a href=“ target=“乌职院”>乌兰察布职业学院 </a> <body bgcolor=# text=# link=# alink=# vlink=#> bgcolor --- 背景色彩 text --- 非可链接文字的色彩 link --- 可链接文字的色彩 alink --- 正被点击的可链接文字的色彩 vlink ---已经点击(访问)过的可链接文字的色彩
26
8、插入图形 超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。 基本格式 超文本支持的图象格式一般有bmp、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。 插入图象的标签是<IMG>，其格式为： <IMG SRC="图形文件地址">
27
例： <IMG SRC="images/ball.gif">
IMG 属性: HEIGHT 高 WIDTH 宽 通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示： ★ 图形与文字的对齐排列 由IMG中的ALIGN属性来设置图文的对齐方式，有以下几种： Align=top/ middle /left /right 例： <IMG SRC="images/ball.gif“ align=right>
28
★ 图文之间的距离设置： HSPACE 水平位置 VSPACE 垂直位置 例：<IMG SRC="love.gif" HSPACE=30> ★ 图形链接 其基本格式如下： <A HREF="资源地址"><IMG SRC="图形文件地址"></A> 例： <A HREF="index.htm"><IMG SRC="html.gif"></A>
29
9、播放音乐 HTML除了可以插入图形之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、AU格式。另外在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。 <A HREF="音乐地址">乐曲名</A> 例如：播放一段MIDI音乐： <A HREF="midi.mid">MIDI音乐</A>
30
<EMBED SRC="音乐文件地址">
★ 自动载入音乐 基本语法： <EMBED SRC="音乐文件地址"> src="filename" 设定音乐文件的路径 autostart=true/false 是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE loop=true/false 设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。 width height 设定控制面板的大小 hidden=true 隐藏控制面板
31
<html> <head><title>播放音乐</title></head>
<body> <EMBED SRC="midi.mid" autostart=true hidden=true loop=true> 作为背景音乐来播放。 </body> </html>
32
10、会移动的文字(Marquee) 基本语法 <marquee> ... </marquee> 文字移动属性的设置
方向 direction=#, #=left, right 方式 behavior=#, #=scroll, slide, alternate
33
循环 loop=# #=次数；若未指定则循环不止
速度 scrollamount=# <marquee scrollamount=20>我走得好快哟！</marquee> 延时 scrolldelay=# <marquee scrolldelay=500 scrollamount=100>我走一步，停一停！</marquee>
34
对齐方式(Align) align=# #=top, middle, bottom
底色 bgcolor=# #=rrggbb 16 进制数码，或者是下列预定义色彩： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>我会移动！</marquee> 面积 <height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa> 我会移动！</marquee>
Similar presentations
