HTML网页制作教程PPT课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<form> <em>
HTML文档结构
<html> <head> <body>
Add Your Title Text
•Text 1 •Text 2 •Text 3 •Text 4 •Text 5
Text
html
head
body
title
h1
p
ul
p
li
li
ul
ol
li
li
li
li
li
li
ul
li
li
❖ 标尺线
<hr>
-------即为布局而提供的一种直线
可以为标尺线设定大小、宽高、颜色、对齐方式等。
如: <hr size=3> <hr width=25> <hr color=red>
表格（Table）标记（TAG）
❖ 基本语法： ❖ <table>...</table> 定义表格
<tr> 定义表行 <th> 定义表头 <td> 定义表元(表格的具体数据)
❖ <meta http-equiv=“Content-Type” content=“text/html;charset=#”>
“#”处填写的是语言的类型，如一般中国大陆基本上汉字 用的是国标编码，则为 gb2312 ；而港台地区则是 big5 ；美国则为us-ascii 。
❖ 注意：我们在做模板时，如果找的是一些韩国网站，则出 现的是<META HTTP-EQUIV=“content-type” content=“text/html; charset=euc-kr”> 如果 你不修改此处为gb2312，则会页面出乱！
表格内文字的对齐/布局
❖<tr align=#> ❖<th align=#> #=left, center, right ❖<td align=#> ❖ <table>
<tr> <th>Food</th> <th>Drink</th><th>Sweet</th> </tr> <tr> <td align=left>A</td> <td align=center>B</td> <td align=right>C</td> </tr> </table>
看实例
页面（PAGE）标记（TAG）
❖HTML 文件主要结构 <html> <head> <title>网页的标题</title> </head> <body> 。。。正文。。。 </body> </html>
❖两个最基本的属性代码:宽 width 高 height 大小 size
语言字符集（charsets）
li
来看实例
HTML常用标签
格式标签 字体属性标签 图片标签 表格标签 表单标签
其他补充
格式标签
❖ 格式标签：控制网页显示的格式 ❖ 换行标签<br> 作用：相当于我们word办公中的回车符； ❖ 段落标签<p> 作用：创建一个段落； ❖ 空格符：  作用：产生一个空格；
看实例
字体属性标签
的标记语言。即告诉浏览器如何正确显示 信息。 ▪ 后缀名：html,htm ▪ 编写工具：记事本, Dreamweaver,and so on .
代码修改
HTML
来看实例
页面显示
Cycle Diagram
注意
标签
大小写
HTML的几个 概念
单标签
标签的 使用
双标签
HTML文档结构
<table> <br> <p> <hr> <font> <hn> <img> <a>
❖ Borde值
cellspacing 是单元格间隙的大小。
cellpadding 是单元格内部空白部分的大小
cellspacing=10 的效果图
cellpadding=10的效果图
cellspacing=0 的效果图
cellpadding=0
背景色彩与背景图片
❖ 语法格式： bgcolor=#ff4400 色彩是用 16 进制的 红－绿－蓝(red-greenblue, RGB) 值来表示。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
background= "image-URL“ 例如：<body background="imageURL">
❖ 标题文字标签：<hn> 作用：设置不同级别的标题；注意标题总是从新一
行开始的； ❖ 文字格式控制标签<font> 作用：控制网页中文字的字体、大小和颜色； ❖ 文字样式标签： 粗体标签<b> 斜体标签<i> 下划线标签<u> 水平线标签<hr> 看实例
图像标签 <img>
❖ 作用：在网页中插入一个图片 ❖ 换行标签<br> 作用：相当于我们word办公中的回车符； ❖ 段落标签<p> 作用：创建一个段落； ❖ 空格符：  作用：产生一个空格；
页面空白 (Margin)
❖ 页面左边的空白 <body leftmargin=…> 页面上方的空白<body topmargin=…>
“…” 这里写数值 合起来写时就是 <body leftmargin=2 topmargin=5> 和以前学的背景知识联系到一起，我们可以写出如下代码： <body leftmargin=2 topmargin=5 background=“Img-URL”>
一个表格的大致代码： <table border=1 width=170 height=100 cellspacing=10 cellpadding=10> <tr><th>TitleA</th><th>TitleB</th><th> TitleC</th> </tr> <tr><td>A</td><td>B</td><td>C</td> </tr> </table> 效果图片见下页
背景色彩与背景图片
❖设置背景色彩 ( bgcolor ) 一般可以放在页面的任何需要背景的地方。如页 面背景，表格背景，单元格背景，CSS样式背景 等等。
❖设置背景图片 ( background ) 同上，可以放在任何需要背景的地方。 注意：当在对同一个对象既定义了背景色彩又定 义了背景图片时，最终这个对象显示的结果则是 显示背景图片。
LOGO
HTML
认识HTML语言 HTML文档结构 常用的HTML标签 HTML中常用的特效
小结
Contents
Hot Tip
❖ 认识HTML语言：
▪ HTML(HyperTextMarkupLanguage) 超文 本标记语言。
▪ 是INTERNET上用于编写网页的主要语言 ▪ 不是一种程序，而只是控制网页内容显示
HTML文档结构
<html> <head> <body>
Add Your Title Text
•Text 1 •Text 2 •Text 3 •Text 4 •Text 5
Text
html
head
body
title
h1
p
ul
p
li
li
ul
ol
li
li
li
li
li
li
ul
li
li
❖ 标尺线
<hr>
-------即为布局而提供的一种直线
可以为标尺线设定大小、宽高、颜色、对齐方式等。
如: <hr size=3> <hr width=25> <hr color=red>
表格（Table）标记（TAG）
❖ 基本语法： ❖ <table>...</table> 定义表格
<tr> 定义表行 <th> 定义表头 <td> 定义表元(表格的具体数据)
❖ <meta http-equiv=“Content-Type” content=“text/html;charset=#”>
“#”处填写的是语言的类型，如一般中国大陆基本上汉字 用的是国标编码，则为 gb2312 ；而港台地区则是 big5 ；美国则为us-ascii 。
❖ 注意：我们在做模板时，如果找的是一些韩国网站，则出 现的是<META HTTP-EQUIV=“content-type” content=“text/html; charset=euc-kr”> 如果 你不修改此处为gb2312，则会页面出乱！
表格内文字的对齐/布局
❖<tr align=#> ❖<th align=#> #=left, center, right ❖<td align=#> ❖ <table>
<tr> <th>Food</th> <th>Drink</th><th>Sweet</th> </tr> <tr> <td align=left>A</td> <td align=center>B</td> <td align=right>C</td> </tr> </table>
看实例
页面（PAGE）标记（TAG）
❖HTML 文件主要结构 <html> <head> <title>网页的标题</title> </head> <body> 。。。正文。。。 </body> </html>
❖两个最基本的属性代码:宽 width 高 height 大小 size
语言字符集（charsets）
li
来看实例
HTML常用标签
格式标签 字体属性标签 图片标签 表格标签 表单标签
其他补充
格式标签
❖ 格式标签：控制网页显示的格式 ❖ 换行标签<br> 作用：相当于我们word办公中的回车符； ❖ 段落标签<p> 作用：创建一个段落； ❖ 空格符：  作用：产生一个空格；
看实例
字体属性标签
的标记语言。即告诉浏览器如何正确显示 信息。 ▪ 后缀名：html,htm ▪ 编写工具：记事本, Dreamweaver,and so on .
代码修改
HTML
来看实例
页面显示
Cycle Diagram
注意
标签
大小写
HTML的几个 概念
单标签
标签的 使用
双标签
HTML文档结构
<table> <br> <p> <hr> <font> <hn> <img> <a>
❖ Borde值
cellspacing 是单元格间隙的大小。
cellpadding 是单元格内部空白部分的大小
cellspacing=10 的效果图
cellpadding=10的效果图
cellspacing=0 的效果图
cellpadding=0
背景色彩与背景图片
❖ 语法格式： bgcolor=#ff4400 色彩是用 16 进制的 红－绿－蓝(red-greenblue, RGB) 值来表示。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
background= "image-URL“ 例如：<body background="imageURL">
❖ 标题文字标签：<hn> 作用：设置不同级别的标题；注意标题总是从新一
行开始的； ❖ 文字格式控制标签<font> 作用：控制网页中文字的字体、大小和颜色； ❖ 文字样式标签： 粗体标签<b> 斜体标签<i> 下划线标签<u> 水平线标签<hr> 看实例
图像标签 <img>
❖ 作用：在网页中插入一个图片 ❖ 换行标签<br> 作用：相当于我们word办公中的回车符； ❖ 段落标签<p> 作用：创建一个段落； ❖ 空格符：  作用：产生一个空格；
页面空白 (Margin)
❖ 页面左边的空白 <body leftmargin=…> 页面上方的空白<body topmargin=…>
“…” 这里写数值 合起来写时就是 <body leftmargin=2 topmargin=5> 和以前学的背景知识联系到一起，我们可以写出如下代码： <body leftmargin=2 topmargin=5 background=“Img-URL”>
一个表格的大致代码： <table border=1 width=170 height=100 cellspacing=10 cellpadding=10> <tr><th>TitleA</th><th>TitleB</th><th> TitleC</th> </tr> <tr><td>A</td><td>B</td><td>C</td> </tr> </table> 效果图片见下页
背景色彩与背景图片
❖设置背景色彩 ( bgcolor ) 一般可以放在页面的任何需要背景的地方。如页 面背景，表格背景，单元格背景，CSS样式背景 等等。
❖设置背景图片 ( background ) 同上，可以放在任何需要背景的地方。 注意：当在对同一个对象既定义了背景色彩又定 义了背景图片时，最终这个对象显示的结果则是 显示背景图片。
LOGO
HTML
认识HTML语言 HTML文档结构 常用的HTML标签 HTML中常用的特效
小结
Contents
Hot Tip
❖ 认识HTML语言：
▪ HTML(HyperTextMarkupLanguage) 超文 本标记语言。
▪ 是INTERNET上用于编写网页的主要语言 ▪ 不是一种程序，而只是控制网页内容显示