当前位置：文档之家 › 第2章 HTML入门PPT教学课件

第2章 HTML入门PPT教学课件

  • 格式：ppt
  • 大小：76.00 KB
  • 文档页数：40

下载文档原格式

  / 40

合集下载

第2章 HTML网页设计PPT课件

第2章 HTML网页设计PPT课件
</TABLE>
2.3 HTML 表格标记
2.3.2 表格应用举例
<table border="0" width="260" bgcolor="skyblue"> <tr> <th width="112" align="left">商品名称</th> <th width="72">单位</th> <th width="87" align="right">单价</th></tr> <tr> <td width="112">平板电视机</td> <td align="center" width="72">台</td> <td align="right" width="87">$12,699</td></tr> ……
<hr>
2.2 HTML 常用标记
2.2.4 文字格式标记
1．字体标记
<FONT size = 大小 face = 字体名称 color = 颜色> 文字 </FONT>
2．文字修饰标记 <b>、<i>、<u>
2.2.5 特殊字符标记
在HTML文档中， <、>、& 、空格等特殊字符需要 用特定字符串来表示。
</html>

《HTML基础》PPT课件

《HTML基础》PPT课件

• <title>欢迎访问我的主页</title>
• <style type="text/css">
• .STYLE11 {FONT-SIZE: 12px; color: #666666; }
• </style>
• <script type="text/JavaScript">
• <!--
• function MM_jumpMenu(targ, selObj, restore){ //v3.0
3. 开头部分用以存载重要信息，而只有本文部分会被显示。所以 大部分标记会运用于本文部分。
4. <TITLE>所标示的是文件的标题。会出现于浏览器顶部及为 别人 Bookmark 时的名称，所以每页有不同而明确的标题 是需要的。
h
9
实例 • <HTML>
• <head>
• <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
HTML就没有WWW“世界” 。
• HTML 不是程序设计语言，而是一种结构
语言。
h
4
2.1 HTML概述
• HTML有许多元素，文档通过元素置标就 形成了所谓的HTML文档。
• HTML 也是文本文件，所以可以用纯文本 编辑器来编辑（如Windows 的记事本、 写字板)
• 其后缀名必须是 .html 或 .htm
h
1
第2章 HTML语言基础
• 2.1 HTML概述 • 2.2 文本的编辑 • 2.3 图像编辑 • 2.4 建立超链接 • 2.5 表格与框架 • 本章小结

HTML教学课件..

HTML教学课件..
③ 属性color用来设置文字颜色。颜色可以用相应英文单 词或以“#”引导的一个十六进制数代码来表示，参见 表2-1。
例2-3 用<FONT>设置文字的大小、字体和颜色。
<HTML> <HEAD> <TITLE>用FONT标记设置文字大小、字体和颜色</TITLE> </HEAD> <BODY> 普通文字<br> <FONT size=1>1号字</FONT> <FONT size=7>7号字</FONT><br> <FONT size=4 face=宋体>宋体4号字</FONT> <FONT size=3 face=华文彩云>华文彩云3号字</FONT><br> <FONT color=red>红色</FONT> <FONT size=6 face=隶书 color=#0000FF>蓝色隶属6号字 </FONT> </BODY> </HTML>
<META http-equiv=”Refresh” content=”2” url=””>可以使当前网页在2秒 后自动转到北京化工大学北方学院的主页 （） 去，这就是META的刷新 作用，在Content中，2代表设置的时间（单位为秒）， 而URL就是在指定的时间后自动连接的网页地址。如果 网页地址就是本页的地址，那么就是自动刷新。
2. 强制换段标记
段落标记<P>放在一段文字的末尾，就定义了一个新段落的 开始。<P>标记不但能使后面的文字换到下一行，还可以是 两段之间留一空行。由于一段的结束意味着新一段的开始， 所以使用<P>也可省略结束标记。 强制换段标记的格式为： 文字<P> 强制换段标记可以看作两个强制换行标记<BR><BR>

第二章HTML和XHTML精品PPT课件

第二章HTML和XHTML精品PPT课件
• 1995年欧洲核能研究所主持下在瑞士日内 瓦举行的第一次WWW会议上成立了一个 HTML工作小组。它的主要任务是把HTML 形式化成为一种SGML DTD，称之为 HTML2.0标准。
2.1.1 标记语言的发展
• W3C联盟在1996年对WWW技术中出现的 一些成果进行总结，并领导制订了著名的 HTML3.2标准。
2.1.2 HTML文件的页面结构
• 2．html文件的基本结构
• 一个简单的HTML网页示例。代码见程序清单21,运行结果。
2.1.3 HTML的基本标签
• html
• 定义一个HTML页面
• head
• 定义HTML的首部实体
• title
• 定义网页的标题
• body
• 定义网页的正文
2.1.3 HTML的基本标签
• 2000年，W3C联盟推荐了XHTML1.0。XHTML 是用XML语法优化和改进的HTML。
• 2007年，WHATWGa（Web Hypertext Application Technology Working Group）推 出了HTML5.0标准草案。该标准增加了新的特性， 主要帮助WEB上日益增多的网络著述、表达等方 面的应用。
• <br>标签是一种特殊的非封闭标签，它没有结束标签。 如果要写成</br>则是错误的表达形式。
• br标签的换行与p标签的换行不同，p标签的换行带有一 定的段落格式，段落与段落之间存在间距。而br标签仅
仅是换行。行与行之间的文字不存在空隙。 • 一个换行的应用实例。代码见程序清单2-4，运行结果。
第2章 HTML和XHTML
教学目的
• 了解HTML • 了解XHTML • 比较HTML与XHTML的异同

Dreamweaver网页设计第2章_HTML简介PPT教学课件

Dreamweaver网页设计第2章_HTML简介PPT教学课件

2.1 HTML文档的基本结构—标记和属性
Hale Waihona Puke ⑵ 其他常用属性属性名 background
text link alink vlink leftmargin topmargin
属性用法 background="图像url"
text="颜色" link="颜色" alink="颜色" vlink="颜色" Leftmargin="像素值" topmargin="像素值"
2.1 HTML文档的基本结构—标记和属性
⑴ bgcolor属性 用法二：bgcolor="颜色标识符" “颜色标识符”在HTML的预定义颜色符中取值。 常用的预定义颜色符： black、olive、teal、red、blue、maroon、navy、 gray、lime、fuchsia、white、green、purple、 sliver、yellow、aqua 例如： <body bgcolor=" yellow">
2.1 HTML文档的基本结构—标记和属性
⑵ meta标记 描述网页说明 <meta name="description" content="网页说明信息"> “网页说明信息”是一段文本，它将作为搜索引擎对网页 的描述信息。 搜索引擎就能够根据这些关键字搜索到相应网页，并显 示关于网页的说明信息。
2.1 HTML文档的基本结构—标记和属性
⑴ title标记 title标记用于标识网页标题。 格式如下： <title>字符串</title> 格式中的“字符串”是网页的标题内容，浏览网 页时该内容显示在网页顶部的标题行中。 ⑵ meta标记 meta标记用于描述网页关键字和网页说明、定义 网页语言编码、页面刷新设置等，进行网页浏览 时，这些标记信息是不可见的。

html2ppt课件

html2ppt课件
4
文字标签属性—文字4-2
❖ 文字属性标记 2.文字字体 <font face=“#, #, ..., #”> ... </font> #=客户端可获得的字体 例：
<HTML> <HEAD>
<TITLE>设定不同字体</TITLE> </HEAD> <BODY>
<font size="3"> <font face="黑体">黑体<br></font> <font face="楷体_gb2312">楷书<br></font> <font face="宋体">宋体</font>
</HTML>
7
文字布局2-1
❖ 行的控制 段(Paragraph) (可以看作是空行) <p></p> 空白占位符&nbsp; 例：
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<li type="A">ONE-ONE <li type="a">ONE-TWO <li type="I">ONE-THREE <li type="i">ONE-FOUR <li type="1">ONE-SIX </ol> <ol start="10"> <li>TWO-ONE <li type="i"1>7TWO-TWO

第2章 初识HTML5ppt课件(全)

对网页可用性存在负面影响，因此在HTML 5中已经不再 支持frame框架，但是支持iframe框架。所以HTML 5中废弃了frame框架的 <frameset>、<frame>和<noframes>标签。
其他废弃标签
在HTML 5中其他被废弃的标签主要是因为有了更好的替代方案。
HTML 5文档结构
编写HTML文件的时候，必须遵循HTML的语法规则。一个完整的HTML文 件由标题、段落、列表、表格、单词和嵌入的各种对象所组成。这些逻辑 上统一的对象统称为元素，HTML使用标签来分割并描述这些元素。实际 上整个HTML文件就是由元素与标签组成的。
HTML5的基本语法
绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间的部分 是元素体，例如<body>…</body>。第一个元素都有名称和可选择的属性， 元素的名称和属性都在起始标签内标明。
2.1 了解HTML 5
HTML 5是近十年来Web标准最巨大的飞跃。和以前的版本不同， HTML 5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应 用平台，在这个平台上，视频、音频、图像、动画，以及同电脑的交互都 被标准化。尽管HTML 5的实现还有很长的路要走，但HTML 5正在改变 Web。
HTML 5中精简的头部
HTML 5避免了不必要的复杂性，DOCTYPE和字符集都极大地简化了。 DOCTYPE声明是HTML文件中必不可少的内容，它位于HTML文档的第一
行，声明了HTML文件遵循的规范。
2.3 HTML 5中新增的标签 在HTML 5中新增了许多新的有意义的标签，为了方便学习和记忆，在 本节中将HTML 5中新增的标签进行分类介绍。

第2章HTML语言精品PPT课件


…
</ head > 文件头结束
<body> 文件体开始
…
</ body > 文件体结束
</ htnl >
htnl文件结束
2.1 文档结构
2.1.1 开始与结束标记
语法格式：
<HTML> HTML文件的所有内容
</HTML>
2.1 文档结构
2.1.2 头部标记
语法格式：
< head > HTML文档的头部内容
<A href=”#第一部分”>链接到第一部分
</A>
2.3 超链接标记
2.3.4 链接至不同文件的另一个段落
假如在example1.html文件里建立链接“链接
到第—部分”，而锚标记“第一部分”在
example2.html网页中，则可写在
example1.html添加语句：
<A href=” example2.htm#第—部
分”>链接到第—部分</A>
2.4 嵌入式内容
2.4.1 页面中插入图象
语法格式：
<img src=图像的URL[align=# alt=文字 border=# height=# wdith=#]>
2.4 嵌入式内容
2.4.2 页面中插入音频、视频和动画
语法格式：
<img src=音频、视频和动画的URL[align=# alt=文字border=# height=# wdith=#]>
3．表格行标记
<tr>…</tr>
4．列名标记
<th>列名</th>

第二章网页制作语言HTML精品PPT课件

学时：60学时
第二章 网页制作语言HTML
• 了解：HTML语言的基本知识 • 熟练掌握：掌握使用HTML标签建立基本的网页；使用各种对象
标签在网页中插入文本、图像、表格、列表、多媒体；使用超 链接标签建立绝对路径和相对路径的链接；通过框架的形式建 立包含框架的页面。
• 掌握：熟悉HTML的语法；掌握HTML的基本标签；掌握HTML 中的文本、图像、链接、列表、表格、多媒体、框架等标签的 使用方法；掌握各个对象标签的属性应用。
• 到现在为止，HTML已经发展到了比较成熟的HTML 4.0版本，在这个版本下 的语言中，规范更加统一，浏览器之间的兼容性也更加完善。
• 除了HTML语言以外，W3C组织在2000年推出了另一种XHTML1.0语言，该 语言其实是HTML4.0的升级版本HTML4.01，只是用XHTML1.0来命名。
从上面的标签中可以看到标签都是成对出现，由开始标签<标签名>和结束标签 </标签名>组成的，这种成对出现的标签称之为双向标签。除此之外HTML标签 还有单向标记，单向标签只有一个标签<标签名/>，如图像标签<img/>，水平线 <hr/>等。大部分的HTML标签都是有属性的，在为标签添加属性时，属性要写 在标签内，如是双向标签，属性写在开如标签内，各个属性之间不分先后顺序， 属性是可选的，如果不写，那就是采用默认属性值，其格式如下：
二、HTML文件的编写方法
二、HTML文件的编写方法
1.手工直接编写
可以使用任何文本编辑器 来打开并编写HTML文件， 如Windows系统中自带的 记事本。
2.使用可视化软件
Microsoft公司的 FrontPage、Adobe公司 的Dreamweaver等软件均 可以创建HTML文档。

第02章 HTML基础(HTML5与ASPNET程序设计教程(第2版)课件)


20
2.5 表格
表格标记（table）
在HTML文档中，一个表格是由<table>开始，到</table>结束。 表格的行由tr标记定义，<tr>与</tr>之间用<td>和</td>填充。表 2-5列出了表格相关的标记。
规则表格：<tr>表示表格的一行，每一个<td>作为该行的一列 ，与该行构成一个单元格。 非规则表格：非规则表格用colspan特性和rowspan特性来指定 跨越的列数或行数。
2.7 语义化标记
语义化标记的用途是增加HTML代码的可读性，包括 section、nav、article、aside、hgroup、header、footer、 figure、figcaption以及mark标记等。
1．导航标记（nav） 2．文章标记（article、header、section） 3．页脚标记（footer）
2020年10月17日星期六
12
2.3 列表和图像显示
无序列表（ul、li）
例见教材
2020年10月17日星期六
13
2.3 列表和图像显示
自定义列表（dl、dt、dd）
<dl> <dt>小猫</dt> <dd>年龄：2岁</dd> <dd>爱好:睡觉</dd> <dt>小狗</dt> <dd>年龄：3岁</dd> <dd>爱好:逗小猫</dd>
7
2.1 HTML入门
HTML5的基本结构
基本格式为：
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

2.2.4 HTML链接标签<link>
<link>标签可以设定外部文件的链接，可定义当前文档和其
他文件之间的关系。
Href：指定要定义关系文件的URL。
ID：指定某个链接的标识符。
Title：说明链接的关系。
Rel：指定当前文档和Href域中文档之间的关系。
Байду номын сангаас
例如：
<link rel="stylesheet" href="style.css"> <!--调入样式表， 链接样式表文件”style.css” -->
2.2 HTML头标记
HTML头标记指的是<head>标签。在浏览器窗口中，头部信 息是不显示在正文中的，在标记中可以插入其他的用来说 明文件的标题或公共属性的标记。<head>和</head>标 签中包含了许多信息，如文档类型、语言编码、 JavaScript和Vbscript的函数和变量、搜索引擎的关键字 和内容提示等。
<body alink="color value" link="color value" vlink="color value">
语法说明： alink是指鼠标在超链接上按下时文本的显示颜色。 link是指默认的超链接文本颜色，即超链接没有被单击过的
状态。 vlink是指连接过的超链接文本的显示颜色。其中color value
2.2.1 HTML标题标签<title>
<title>标签定义页面标题，在<title>和</title>之间加入页面 的标题文字就会在浏览器的标题栏显示出来，如果与动态 程序相结合，可以实现实时显示文章标题。例如，在ASP 编程时，在文章显示页的<title>和</title>标签中加入 News_rs（“News_Title”），当浏览者单击新闻标题时 ，文章显示页面的标题栏上就会显示这条新闻的标题。
<body text="color value"> 其中color value可以是色值的英语单词，也可以是十六进制。
2.3.2 背景属性
<body>的背景属性包括背景颜色属性（bgcolor）和背景图 像属性（background）。
1．bgcolor 用来设定整个前台页面的背景颜色。基本语法如下： <body bgcolor="color value"> 2．background 用来设定页面的背景图像。为了提高页面的打开速度，应该
HTML网页文件可以使用记事本、写字板或Dreamweaver等 编辑工具来编写，以.htm或.html为文件后缀名保存。对 于网站设计师来说，掌握HTML标记语言是基础。
2.1.2 HTML的基本语法
HTML标记是由“<”和“>”所括住的指令标记，用来向浏览 器发送标记指令。主要分为单标记指令和双标记指令。
2.2.3 HTML基链接标签<base>
使用基链接标签可以确保文档中所有的相对URL都可以被分 解成正确的文档地址。即使文档本身被移动过或被重命名 ，也可以正确解析。
在创建文档集合时，<base>标签的使用尤为重要。通过在 每个文档中放置正确的<base>标签，就可以在目录之间 、服务器之间移动整个文档集合，而不会破坏文档中的任 何链接。
第2章 HTML入门
HTML（Hyper Text Marked LanguageHTML编写的超本文 文档称为HTML文档，它独立于各种操作系统平台（如 UNIX、Windows等）。
最初的HTML语言功能是很有限的，仅仅能够实现静态文本 的显示。但是人们远远不满足于死板的类似于文本文件的 Web页。随着Internet的飞速发展，HTML语言也不断扩 展，逐渐开始支持图片、声音、视频、动画等。
2.2.2 HTML元信息标签<meta>
meta标签是一个辅助性标签，位于HTML文档头部的 <head>标记和<title>标记之间，所提供的信息是不可见 的。meta标签可以用来为搜索引擎定义页面描述，或定 义浏览器上的Cookie；也可以用来鉴别作者，标注内容 提要和文字，设置页面格式；还可以设置页面，比如可以 使其根据定义的时间间隔刷新页面。meta标签分为两大 部分：HTTP标题信息（http-equiv）和页面描述信息（ name）。
2.1 HTML概述
通过浏览器访问的到的Web页面，通常是基于HTML的基础 上形成的，那么，什么是HTML呢？下面将介绍HTML的 概念及其基本语法。
2.1.1 HTML的概念
HTML语言是构建任何网站的基础语言。当畅游Internet时， 通过浏览器看到的网页是由HTML语言编写的。HTML是 一种建立网页文件的语言，通过标记式的指令（Tag）， 将文字、图片、声音、视频等连接并显示出来。
将图片的尺寸和大小处理的尽量小，背景图像的显示一般 是对图像进行不断的重复平铺。基本语法如下： <body background="URL"> 其中URL是背景图像文件的路径。
2.3.3 超链接属性
<body>的超链接属性只对默认的没有运用样式的链接起作 用。现在CSS样式表的应用十分流行，因此在页面编辑 中一般很少用到<body>的超链接属性。基本语法如下：
<body>和</body>是HTML文档的主体标签。主体标签中包 含了网页中所有显示内容的标签。<body>有自己的属性 ，如表2.1所示。
2.3.1 文本颜色
<body>标签的文本属性只是页面中默认文本的颜色属性，即没 有对文本进行特定设置时的文本。如果对一段文本单独设置了 属性，则在<body>中设置的文本颜色就不会对此段文本起作 用。基本语法如下：
<link rel="short" href="tubiao.ico"> 标文件"tubiao.ico" -->
<!--地址栏图标，图
<link rel="bookmark" href="tubiao.ico"> <!--在收藏夹中
显示网站图标，图标文件"tubiao.ico"-->
2.3 HTML主体标记
是颜色值。
2.3.4 边距属性
<BODY>的边距属性包括上边距、下边距、左边距和右边距 。边距属性定义页面内容与浏览器边界留白的距离。基本 语法如下：