简单HTML示例.docx
- 文档编号:11456133
- 上传时间:2023-03-01
- 格式:DOCX
- 页数:47
- 大小:774.30KB
简单HTML示例.docx
《简单HTML示例.docx》由会员分享,可在线阅读,更多相关《简单HTML示例.docx(47页珍藏版)》请在冰豆网上搜索。
简单HTML示例
实例一
1.要求:
知识要点:
html文档的基本结构,html标签的书写格式、作用、用法
实训目的:
掌握html文档的基本结构,掌握html代码网页编辑的基本方法
实训内容:
标签及其属性:
bgcolor、background、text、link、alink、vlink、leftmargin、topmargin
特别提醒:
当有
在html文档中,、
、好习惯用记事本编辑网页文件,在保存文件时,一定要注意文件扩展名写为.html或.htm
问题导学:
请听本页有优美的背景音乐“贝多芬第五交响乐”,如果想删除背景,如何改写代码?
2.代码:
我的第一个网页
这是我做的第一个网页,欢迎光临!
谢谢!
Thisismyfirstweb.Welcome.
3.效果:
实例二
1.要求:
知识要点:
以默认格式显示文字,用FONT标签设置显示文字的格式
实训目的:
掌握设置网页中文字的大小、字体、字型、字号、颜色等
实训内容:
标签及其属性:
face、size、color
、、标签等
知识扩展:
控制文字的大小、字体、字型、字号、颜色,还可以使用CSS样式
操作提示:
按下"新窗口浏览"按钮可在新窗口中浏览所编辑的网页
本网页下部有图片素材和音乐素材,可用作背景图片或背景音乐插入网页中,路径在其下方可复制引用
2.代码:
size="1"
size="2"
size="3"
size="4"
size="5"
size="6"
size="7"
U下划线 strike删除线
3.效果:
实例三
1.要求:
知识要点:
设置文章及章节的标题
实训目的:
掌握在网页中设标题文字的方法,包括标题文字的大小、对齐方式等。
实训内容:
…标签及其属性:
标签及其属性:
align
提高练习:
练习设置标题文字的字体、颜色、字型等
操作提示:
编辑左框中的代码,按下"查看结果"按钮,网页的浏览效果会显示在右框中
在新窗口中浏览网页,可改变窗口大小以详细观察效果
2.代码:
一级标题,默认左对齐
五级标题,用“center”标签设置为居中对齐
六级标题,默认左对齐
3.效果:
实例4
1.要求:
实训目的:
掌握网页中文字的排版控制等
实训内容:
style,注意
与
的区别
设计技巧:
hmtl代码中的空格及回车换行符,在浏览器释读时会被略,网页中需用空格时,可用字符实体" "或
全角空格代替; 回车换行符可用标记或
代替
知识扩展:
< > & "这几个重要符号及回车换行符也不能被浏览器正确释读,通常也需要用字符实体替代
<:
< >:
> &:
& ":
"
操作提示:
在新窗口中浏览网页,并改变窗口大小,可以详细观察
2.代码:
200;height: 100"> 标准的FTP客户端程序,有直观的操作界面,以左右两个窗口显示,功能和一般的FTP软件差不多
本指南介绍如何使用MacromediaDreamweaver。
本指南中的教程将引导您完成创建一个简单但具备一定功能的Web站点的过程。
然后计划并设置站点,开始创建页面。
3.效果:
实例5
1.要求:
实训目的:
掌握在网页中插入图片并设置图片的大小、对齐方式、替代文字、是否有边框及边框的宽度等
实训内容:
标签及其属性:
src、align、border、alt、hspace、vspace、width、height等
注意:
src是标签的最关键属性,用来描述图片的来源(url),可用绝对路径或相对路径,绝对路径是包括
网站域名在内的完全路径,一般用于实现外部链接;相对路径又分为根相对路径和文档相对路径,不能使用本
地绝对路径。
文件路径描述的更多知识,请参考有关资料
目标地址(URL),可用绝对路径或相对路径来描述。
绝对路径是包括网站域名在内的完全路径,一般用于实现外部链接。
相对路径又分为根相对路径和文档相对路径。
在编辑网页时,要在本地磁盘上选定一个文件夹,作为站点的本地文件夹,站点内链接用到的所有本地文件,都应该放在该文件夹内,以确保将这个文件夹上传到服务器后,所有的链接仍能保持有效。
这个模拟服务器上的站点的文件夹,就是站点的根文件夹,系统就是根据这个文件夹确定本地文件的位置。
根相对路径以“/”开头,路径从当前站点的根文件夹开始计算,但使用根相对路径在本地浏览时,必须设置本地站点,否则本地浏览时链接失效,这是因为Windows不支持把站点文件夹作为根目录。
建议不要使用本地绝对路径来描述目标文件的位置,如:
d:
\myweb2\html\web1.htm。
因为本地绝对路径在本地浏览时链接正常,但上传到服务器后,链接失效。
文档相对路径是以当前网页文档的位置为基础开始计算路径。
相对路径多用于链接保存在同一文件夹(如站点根文件夹)中若干子文件夹中的文档,这种路径在本地和服务器上都是可靠的,是使用最多的一种。
当超链接的目标是HTML文档,或能用浏览器打开的非HTML文档时,点击这个超链接将自动用浏览器打开目标,但当超链接的目标是不能用浏览器打开的文档时,点击这个超链接将打开“文件下载”对话框。
操作提示:
插入图片,可使用本网页下部的素材,其路径描述位于对应图片的下面,可以直接“复制-粘贴”
2.代码:
小娃娃与小狗狗
3.效果:
实例6
1.要求:
知识要点:
在网页中插入flash动画使用
在网页中加入视频剪辑使用IMG标签的dynsrc属性
实训目的:
掌握在网页中插入flash动画并设置其位置、大小等属性
掌握在网页中插入视频剪辑并设置其位置、大小、循环播放次数等属性,了解常用的多媒体文件类型
实训内容:
在网页中插入一段视频剪辑和一个flash动画
2.代码:
3.效果:
实例7
1.要求:
实训目的:
掌握在网页中插入水平线,并设置线长、线宽、对齐方式、颜色、是否有阴影等
实训内容:
标签及其属性:
align、width、color、size、noshade等
思考题:
在网页中是否能方便地插入一条竖直线?
要插入竖直有什么办法?
操作提示:
在新窗口中浏览网页,并改变窗口大小,以详细观察线长、对齐方式的变化
2.代码:
--
body{
background-image:
url(../img/back.jpg);
}
-->
水平线1:
左对齐,宽15%,粗细8,绿色
水平线2:
宽50%,粗细5,红色,无阴影,默认居中
水平线3:
默认线粗,宽300像素,右对齐
3.效果:
实例8
1.要求:
实训目的:
掌握在网页中设置滚动字幕的方法,包括字幕的对齐方式、滚动方向、宽度、高度、背景颜色、循环次数、
移动速度等
实训内容:
align、bgcolor、width、height、loop、behavior、hspace、vspace、
scrollamount、scrolleday等
注意:
请不要设置滚动字幕的滚动方向为“向右”和“向下”,因为这不符合中文的阅读习惯
思考题:
有些网页中的字幕,在鼠标指上时即停止滚动,鼠标移开时又开始滚动,这种效果如何实现?
2.代码:
欢迎光临电脑乐园
欢迎光临电脑乐园
3.效果:
实例9
1.要求:
知识要点:
超链接(Hyperlink)是html的精华,它为快速查找所需的信息提供了方便
锚点链接适用于网页内容较多,并有多个标题的情况
实训目的:
掌握网页内的锚点链接,包括锚记的设置,链接的设置等。
锚点链接是实现同一网页一处到另一处的链接
实训内容:
href、name、target、style等
操作提示:
当网页内容较少且浏览窗口较大时,使用锚点链接无法看到效果
注意观察:
在本系统的每一个页面上有一个
链接,这就是一个锚点链接的实例,可模仿应用
2.代码:
…… ……
SGML(StandardGeneralizedMarkupLanguage,标准通用标记语言)是一种用于描述文档资料的通用标记语言。
它的语法是可扩展的,数据描述功能很强,但十分复杂,不易学习,难以使用,在计算机上实现也很难,所以Web发明者TimBerners-Lee等人于1989年根据当时的计算机及网络技术,提出了html语言。
html是基于SGML的。
html自诞生以来不断发展完善,目前WWW上使用html4.0版本。
html(HypertextMarkupLanguage,超文本标记语言)是一种用来制作超文本文档的简单标记语言。
html语言可用于网页的排版,是网页设计的基础。
用html编写的超文本文档称为html文档,它能独立于各种操作系统平台。
使用html语言描述的文件,需要通过WEB浏览器显示出效果。
…… ……
…… ……
1)标签
一个html文档是由一系列标签组成的。
html语言中的“标签”是用两个尖括号括起来的标签指令,用来控制文本、图像的显示方式及加于其上的动作。
标签的格式:
<标签指令>
例如:
<title>,</title>,<hr/>等。
html标签可分单标签和双标签,如上例中的水平线标签<hr>、回车换行标签<br>就是单标签。
而<html>要与最后的</html>配合使用,<title>必须与后面的</title>配合使用,这种起始标签和结束标签的组合,就是双标签。
2)标签的属性
有些标签具有参数,这些参数精确地定义显示方式或行为等,被称为该标签的属性。
属性的用法:
<标签指令属性名="属性值">
…… ……
…… ……
4)html文档的基本结构
一个html文档的基本结构是以<html>开始,以</html>结束,中间包含文档首部(head)和文档主体(body)两部分。
head标签中可以嵌套描述文档特征和属性的标签,例如title标签。
body标签中描述网页的内容,浏览时将显示在浏览器窗口中。
…… ……
…… ……
为了满足W3C的MXL文档标准,在新的Xhtml规范中,要求文档是格式良好的(Well-formed),即必须满足以下要求:
①有且仅有一个根元素,其中可以包含若干子元素。
即Xhtml文档必须以<html>开始,以</html>结束,其中可以包含head元素和body元素,也就是说,标签必须严格嵌套。
②标签必须有结束标签。
③标签中属性的值必须使用引号。
④标签、属性以及属性的值都是大小写敏感的。
…… ……
…… ……
1)head标签
head标签用于定义html文档的首部
格式:
<head>…</head>
文档的首部描述了文档的很多特征和属性,包括文档的标题、和其他文档的关系等。
除文档标题外,head部分的大多数内容都不会真正显示在浏览器中。
2)title标签
title标签用于定义html文档的标题
格式:
<title>…</title>
该标签定义了文档的标题,<title>与</title>中间的文字在网页被浏览时会显示在浏览器的标题栏上。
标题通常用简明扼要的文字概括该网页的主要内容或主题。
…… ……
…… ……
html文档的主体是网页的实质部分,是放置文档核心内容的地方。
body标签用于定义文档主体
格式:
<body>…</body>
常用属性:
background、bgcolor、bgproperties
link、alink、vlink、text、leftmargin、topmargin
…… ……
3.效果:
实例10
1.要求:
知识要点:
各个网页链接在一起后才能构成一个网站,按链接目的可分为锚点链接、内部链接、外部链接、E-mail链接等
内部超链接是实现同一站点内一个网页到另一个网页的链接
知识温故:
内部链接目标网页的路径(url)表达形式,可使用根相对路径或文档相对路径
实训目的:
掌握超链接的设置方法
实训内容:
href、name、target、style等
注意观察:
在本系统的每一个页面上的
和
链接,就是内部链接的实例,可模仿应用
2.代码:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 简单 HTML 示例