简单HTML示例.docx - 冰点文库

资源描述

简单HTML示例.docx

《简单HTML示例.docx》由会员分享，可在线阅读，更多相关《简单HTML示例.docx（47页珍藏版）》请在冰点文库上搜索。

简单HTML示例.docx

简单HTML示例

实例一

1.要求：

知识要点：

html文档的基本结构，html标签的书写格式、作用、用法

实训目的：

掌握html文档的基本结构，掌握html代码网页编辑的基本方法

实训内容：

<body>标签等,在网页中插入文字　　　　　　<body>标签及其属性：bgcolor、background、text、link、alink、vlink、leftmargin、topmargin特别提醒：当有<title>而丢掉或书写错误时，文档不能正确浏览

在html文档中，、、被完全省略、部分省略或嵌套不严格，是允许的，但这却不是一个　　　　　　好习惯用记事本编辑网页文件，在保存文件时，一定要注意文件扩展名写为.html或.htm问题导学：请听本页有优美的背景音乐“贝多芬第五交响乐”，如果想删除背景，如何改写代码？ 2.代码：<html><head><title>简单的html示例

我的第一个网页

这是我做的第一个网页，欢迎光临！

谢谢！

Thisismyfirstweb.Welcome.

3.效果：

实例二

1.要求：

知识要点：

以默认格式显示文字，用FONT标签设置显示文字的格式

实训目的：

掌握设置网页中文字的大小、字体、字型、字号、颜色等

实训内容：

标签及其属性：

face、size、color　

、、标签等

知识扩展：

控制文字的大小、字体、字型、字号、颜色，还可以使用CSS样式

操作提示：

按下"新窗口浏览"按钮可在新窗口中浏览所编辑的网页

　　　　　本网页下部有图片素材和音乐素材,可用作背景图片或背景音乐插入网页中,路径在其下方可复制引用

2.代码：

设置字体字型字号及文字颜色

幼圆黑色

size="1"

隶书蓝色

size="2"

黑体红色

size="3"

楷体绿色

size="4"

方正舒体紫色

size="5"

华文彩云深灰色

size="6"

华文琥珀灰色

size="7"

B加粗 I斜体

U下划线 ~~strike删除线~~

3.效果：

实例三

1.要求：

知识要点：

设置文章及章节的标题

实训目的：

掌握在网页中设标题文字的方法，包括标题文字的大小、对齐方式等。

实训内容：

…
标签及其属性：
align
提高练习：
练习设置标题文字的字体、颜色、字型等
操作提示：
编辑左框中的代码,按下"查看结果"按钮,网页的浏览效果会显示在右框中
　　　　　　在新窗口中浏览网页,可改变窗口大小以详细观察效果
2.代码：
设置文章标题
一级标题，默认左对齐
二级标题，用“center”设置为居中对齐

三级标题，用“left”设置为左对齐

四级标题，用“right”设置为右对齐

五级标题，用“center”标签设置为居中对齐

六级标题，默认左对齐

3.效果：

实例4

1.要求：

实训目的：

掌握网页中文字的排版控制等

实训内容：

等标签及其属性：

style，注意

与
的区别

设计技巧：

hmtl代码中的空格及回车换行符，在浏览器释读时会被略，网页中需用空格时，可用字符实体" "或

　　　　　全角空格代替；　回车换行符可用标记或
代替

知识扩展：

<　>　&　"这几个重要符号及回车换行符也不能被浏览器正确释读，通常也需要用字符实体替代

<：

<　　>：

>　　&：

&　　　"：

操作提示：

在新窗口中浏览网页，并改变窗口大小，可以详细观察　

所控制的段落的排版规律

2.代码：

文字排版控制示例

200;height:

100">　　标准的FTP客户端程序，有直观的操作界面，以左右两个窗口显示，功能和一般的FTP软件差不多

本指南介绍如何使用MacromediaDreamweaver。

本指南中的教程将引导您完成创建一个简单但具备一定功能的Web站点的过程。

学习如何使用MacromediaDreamweaver8文档和其它资源，以及了解如何设置Dreamweaver工作区使其符合您自己的工作习惯。

然后计划并设置站点，开始创建页面。

3.效果：

实例5

1.要求：

实训目的：

掌握在网页中插入图片并设置图片的大小、对齐方式、替代文字、是否有边框及边框的宽度等

实训内容：

标签及其属性：

src、align、border、alt、hspace、vspace、width、height等

注意：

　　src是标签的最关键属性，用来描述图片的来源（url），可用绝对路径或相对路径，绝对路径是包括

　　　　　网站域名在内的完全路径，一般用于实现外部链接；相对路径又分为根相对路径和文档相对路径，不能使用本

　　　　　地绝对路径。

文件路径描述的更多知识，请参考有关资料　

目标地址（URL），可用绝对路径或相对路径来描述。

绝对路径是包括网站域名在内的完全路径，一般用于实现外部链接。

相对路径又分为根相对路径和文档相对路径。

在编辑网页时，要在本地磁盘上选定一个文件夹，作为站点的本地文件夹，站点内链接用到的所有本地文件，都应该放在该文件夹内，以确保将这个文件夹上传到服务器后，所有的链接仍能保持有效。

这个模拟服务器上的站点的文件夹，就是站点的根文件夹，系统就是根据这个文件夹确定本地文件的位置。

根相对路径以“/”开头，路径从当前站点的根文件夹开始计算，但使用根相对路径在本地浏览时，必须设置本地站点，否则本地浏览时链接失效，这是因为Windows不支持把站点文件夹作为根目录。

建议不要使用本地绝对路径来描述目标文件的位置，如：

\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浏览器显示出效果。
……　……
top
知识网络
……　……　
1）标签
一个html文档是由一系列标签组成的。
html语言中的“标签”是用两个尖括号括起来的标签指令，用来控制文本、图像的显示方式及加于其上的动作。

标签的格式：
<标签指令>
例如：
<title>，</title>，<hr/>等。

html标签可分单标签和双标签，如上例中的水平线标签<hr>、回车换行标签 就是单标签。
而<html>要与最后的</html>配合使用，<title>必须与后面的</title>配合使用，这种起始标签和结束标签的组合，就是双标签。

2）标签的属性
有些标签具有参数，这些参数精确地定义显示方式或行为等，被称为该标签的属性。

属性的用法：
<标签指令属性名="属性值">
……　……
top
重点、难点研究
……　……　
4）html文档的基本结构
一个html文档的基本结构是以<html>开始，以</html>结束，中间包含文档首部（head）和文档主体（body）两部分。

head标签中可以嵌套描述文档特征和属性的标签，例如title标签。

body标签中描述网页的内容，浏览时将显示在浏览器窗口中。

……　……
top
金题解析延伸
……　……　
为了满足W3C的MXL文档标准，在新的Xhtml规范中，要求文档是格式良好的（Well-formed），即必须满足以下要求：

①有且仅有一个根元素，其中可以包含若干子元素。
即Xhtml文档必须以<html>开始，以</html>结束，其中可以包含head元素和body元素，也就是说，标签必须严格嵌套。

②标签必须有结束标签。

③标签中属性的值必须使用引号。

④标签、属性以及属性的值都是大小写敏感的。

……　……
top
能力迁移训练
……　……　
1）head标签
head标签用于定义html文档的首部
格式：
<head>…</head>
文档的首部描述了文档的很多特征和属性，包括文档的标题、和其他文档的关系等。
除文档标题外，head部分的大多数内容都不会真正显示在浏览器中。

2）title标签
title标签用于定义html文档的标题
格式：
<title>…</title>
该标签定义了文档的标题，<title>与</title>中间的文字在网页被浏览时会显示在浏览器的标题栏上。
标题通常用简明扼要的文字概括该网页的主要内容或主题。
……　……
top

助学资料
……　……　
html文档的主体是网页的实质部分，是放置文档核心内容的地方。

body标签用于定义文档主体
格式：
<body>…</body>
常用属性：
background、bgcolor、bgproperties
link、alink、vlink、text、leftmargin、topmargin
……　……
　top
3.效果：
实例10
1.要求：
知识要点：
各个网页链接在一起后才能构成一个网站，按链接目的可分为锚点链接、内部链接、外部链接、E-mail链接等
　　　　　内部超链接是实现同一站点内一个网页到另一个网页的链接
知识温故：
内部链接目标网页的路径（url）表达形式，可使用根相对路径或文档相对路径
实训目的：
掌握超链接的设置方法
实训内容：
标签及其属性：
href、name、target、style等
注意观察：
在本系统的每一个页面上的　
和
链接，就是内部链接的实例，可模仿应用

2.代码：
指向其它页面的超链接
××××课程复习指导<

展开阅读全文

相关资源

 简单HTML示例Word文档格式.docx
简单数独示例.docx
简单读书笔记示例.docx
学习matlab程序简单示例.docx
计算机简单编程示例.docx
学习matlab程序简单示例.docx
Android数据库SQLite的简单示例.docx
Cell华表实现AJAX简单示例.docx
简单数独示例Word文件下载.docx

猜你喜欢

东大17秋学期《公共政策学》在线作业1满分答案Word格式.docx

方程式的书写及答案Word格式文档下载.docx

试论国际商务谈判中的语言交际技巧英文论文Word格式文档下载.docx

气象观测专用技术装备测试方法总则Word文件下载.docx

动火作业审批表Word格式文档下载.docx

房地产基本制度与政策分类模拟15Word格式文档下载.docx

室内给水管道技术交底文档格式.docx

读《尼尔斯骑鹅旅行记》有感精选Word文件下载.docx

山西家具亟需观念创新品牌创建叫响山西制造Word格式.docx

相关搜索

简单

HTML

示例

资源标签

简单HTML示例
简单示例
html例子

当前位置：首页 > 人文社科 > 视频讲堂

copyright@ 2008-2023 冰点文库网站版权所有
经营许可证编号:鄂ICP备19020893号-2

登录

首页

资源分类

升级会员

通知公告

帮助中心