SSD1: Introduction to Information Systems

SSD1: Introduction to Information Systems
Unit 1: Using the Web 1.2 What's in a Web Page? (1) Shen Zhidong ISS, Wuhan University

1.2 What's in a Web Page? A Web page is "written" in HTML language.
Browser Internet Explorer Netscape ….

提纲描述 HTML 编写简单的 HTML 文档网站的导航使用 <META> 标记 HTML文档中的基本标记
提纲描述 HTML 编写简单的 HTML 文档使用 <META> 标记 HTML文档中的基本标记在 HTML 文档中使用特殊字符在 HTML 文档中使用超链接网站的导航

用户从浏览器获得资源请求 HTTP传输输入地址 INTERNET

A First Look at HTML HTML－ Hypertext Markup Language
Language is a term we all understand. Markup is the process of preparing manuscripts for typesetting by marking them with directions about font type and size, indentation, spacing, and the like. Text refers to the words on the computer screen that we are marking up. Hypertext would create links between related topics in different papers, stands for the notion of creating linked, nonlinear structures of information endured.

A First Look at HTML HTML 是一种标记语言使用 HTML 标记和元素，可以：
超文本标记语言(HTML)是Web用来创建和识别文档的标准语言。使用 HTML 标记和元素，可以：控制页面和内容的外观式样发布联机文档使用 HTML 文档中插入的链接检索联机信息创建联机表单，收集用户的信息、执行事务等插入动画开发帮助文件

浏览器和编辑器浏览HTML文件的工具编辑HTML文件的工具 Netscape 的 Navigator
Microsoft 的 Internet Explorer Microsoft FrontPage Macromedia Dreamweaver 记事本 ……

HTML 示例1 运行结果 <HTML> <HEAD>
<TITLE>欢迎学习 HTML</TITLE> </HEAD> <BODY> <H3>我的第一个 HTML 文档</H3> </BODY> </HTML> 运行结果

HTML文件编辑示例 1

HTML文件编辑示例 2 保存文件后，修改文件名

网页文件命名 *.htm 或 *.html 无空格无特殊符号（例如&符号），可以有下划线“_”；只可以为英文、数字区分大小写
首页文件名习惯默认为：index.htm 或 index.html

HTML 示例1 Tags (标记) <HTML> <HEAD>
<TITLE>欢迎学习 HTML</TITLE> </HEAD> <BODY> <H3>我的第一个 HTML 文档</H3> </BODY> </HTML> Tags (标记)

HTML 文档的结构基本结构： HTML 部分文档头部分正文部分运行结果 <HTML> <HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE> </HEAD> <BODY> 这会是一种很有趣的体验 </BODY> </HTML> HTML 部分文档头部分正文部分运行结果

HTML 的标记 HTML 标记的格式组成：值 - 分配给属性的内容属性 - 描述标记元素 - 标识标记
<ELEMENT ATTRIBUTE = value> 元素 - 标识标记属性 - 描述标记值 - 分配给属性的内容

HTML基本组成部分 —HTML标记的属性
<BODY BGCOLOR = lavender leftmargin="50" topmargin="80">

HTML基本结构的有关元素和元素属性 HTML 根标记 <HTML> . . . </HTML>

HTML基本结构的有关标记和标记属性 HEAD标记 <head>标记出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的标记有特殊重要的意义。 <title> 文档标题标记 <title>标记定义HTML文档的标题内容。 <title>与</title>之间的内容将显示在浏览器窗口的标题栏。 <title></title>标记必须成对出现，并且只能放在<head></head>标记对之间。

使用META标记 1 提供关于网页的信息对网页的描述
<META name=“Author” content=“Graham Browne”> <META name=“KEYWORDS” content=“...”>　 <META name="DESCRIPTION" content="..."> 获得文档的作者名称根据关键词生成响应；用来标记搜索引擎在搜索你的页面时所取出的关键词。对网页的描述

使用META标记 2 2.应用：关键词生成响应 Expires: Mon, 15 Sep 2008 14:25:27 GMT
<META http-equiv="Expires" content="Mon, 15 Sep :25:27 GMT"> 设置网页的到期值:响应 Expires: Mon, 15 Sep :25:27 GMT

使用META标记 3 3.自动刷新页面应用：如网上实时新闻报道。 4. 网页所使用的文本编码应用：如在不同浏览器上正确显示中文。
<META http-equiv="Refresh" content="10; url= 应用：如网上实时新闻报道。 4. 网页所使用的文本编码 <META http-equiv="Content-Type" content="text/html; charset=gb2312"> 应用：如在不同浏览器上正确显示中文。

<body>标记及其属性—1 <body>标记 HTML基本结构的有关标记和标记属性表明HTML文档的主体部分。

Comment (注释) ""
a remark to be put in among the page content but DO NOT want these to be displayed by a browser, Ex.

<HTML> <HEAD> <TITLE>电影节目预告</TITLE> </HEAD> <body>  2008年上映的大片 1. 赤壁 2. 钢铁侠 3. 地心历险记（3D版） </body> </HTML>

<body>标记及其属性—2 <body>标记中有下列标记属性： (1) bgcolor
bgcolor属性标志HTML文档的背景颜色。如：bgcolor = “#CCFFCC”。 <html> <head> <title>这是标题</title> </head> <body bgcolor = "# CCFFCC "> 这里是本文区 </body> </html>

HTML对颜色的控制 HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。 16 进制的数码有:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.

常见颜色的代码颜色颜色名和RGB值黑色 Black=”#000000” 银色 Silver=”#c0c0c0” 红色
Red=”#ff0000” 蓝色 Blue=”#0000ff” 白色 White=”#ffffff” 黄色 Yellow=”ffff00” 绿色 Green=”#00ff00” 海蓝色 Aqua=”#00ffff”

<body>标记及其属性—3 <body>标记属性： (2) background
background属性标志HTML文档的背景图片。如：background=“images/bg.gif"。可以使用的图片格式为GIF，JPG

<html> <head> <title>这是标题</title> </head>
<body background=“bg-pic1.jpg"> 这里是文本区 </body> </html>

<body>标记及其属性—4 <body>标记属性： (3) bgproperties=fixed

<body>标记及其属性—5 <body>标记属性： (4) text
text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。 Text元素定义的颜色将应用于整篇文档。

<html> <head> <title>这是标题</title> </head> <body text="#FF6666"> 这里是本文区 </body> </html>

<body>标记及其属性—6 <body>标记属性： (5) 超级链接颜色
link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接的颜色。

<HTML> <HEAD> <TITLE>超链接的颜色显示</TITLE> </HEAD> <BODY link="#0000ff" vlink="#00ff00" alink="ff0000"> 文本显示区 <A href=' title="网易主页">网易主页</A> <A href=' title="新浪主页">新浪主页</A> <A href=' title="搜狐新闻">搜狐新闻</A> </BODY> </HTML>

<body>标记及其属性—7 <body>标记属性： (6) leftmargin和topmargin

<HTML> <HEAD> <TITLE>欢迎使用 HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender leftmargin="50" topmargin="80"> 这会是一种很有趣的体验 另一个段落元素 </BODY> </HTML>

段落标记 运行结果 <HTML> <HEAD>
<TITLE>欢迎使用 HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> 这会是一种很有趣的体验 另一个段落元素 </BODY> </HTML> 运行结果

换行标记 运行结果 <HTML> <HEAD>
<TITLE>欢迎使用 HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> 这会是一种很有趣的 体验 另一个段落元素 </BODY> </HTML> 运行结果

使用对齐属性运行结果 <HTML> <HEAD>
<TITLE>学习HTML</TITLE> </HEAD> <BODY BGCOLOR=lavender> 这会是一种很有趣的体验 </BODY> </HTML> Left：左对齐 Center：居中 Right：右对齐右对齐运行结果

在HTML文档中使用特殊字符 & ; HTML特殊字符显示 &, entity or #entity编号，分号
例：显示小于号，&lt；或者&#60；

超链接简介 1 1、职位： 2、教学资源： 3、联盟：关于可申请的职位…… 本学院软件工程学位的教学资源请单击此处查看视频……
1、职位：关于可申请的职位…… 2、教学资源：本学院软件工程学位的教学资源请单击此处查看视频…… 3、联盟：我们有许多联盟……

超链接简介 2 链接类型内部链接外部链接 Web站点1 Web站点2 到同一文档内或同一网站内的其他部分的链接
Web站点1 Web站点2 到同一文档内或同一网站内的其他部分的链接外部链接到其他网站或服务器上的页面的链接。

创建超链接要创建超链接，必须指定两个部分要链接的文件的完整地址或 URL 热点：热点可以是一行文字甚至一个图像绝对URL
C:\internet\index.html service/index.html 文件的完整地址相对URL 热点：热点可以是一行文字甚至一个图像

URL Uniform Resource Locator （统一资源定位符）
格式：protocol://host.domain:port/path/filename Protocol是协议类型 http 超文本传输协议 gopher 搜索文件 telnet 打开telnet会话 ftp 文件传输协议 mailto 发送电子邮件 Host.domain是服务器的 Internet 地址 Port是目标服务器的端口号 /path/filename指服务器中存放的某个资源文件例：

DNS 与Internet 地址 Domain Name System ( DNS ，域名解析系统)
作用：把域名转换成为网络可以识别的ip地址。互联网的网站都是以一台一台服务器的形式存在，但是我们怎么去到要访问的网站服务器呢？这就需要给每台服务器分配IP地址，互联网上的网站无穷多，我们不可能记住每个网站的IP地址，这就产生了方便记忆的域名管理系统DNS，它可以把我们输入的好记的域名转换为要访问的服务器的IP地址，例如：在浏览器地址栏输入

DNS 与Internet 地址域名的类型，后缀 com – commercial organizations
edu – educational entities gov – government agencies net – network service providers org – non-profit organizations

链接地址的类型 Links Absolute Links A complete URL.
Relative Links Relative URLs are URLs that are lack only a protocol identifier and a host name. Relative URLs can consist of only a resource file name. /afs/cs/user/jar/www/index.html web123.html

链接地址的类型 Relative Links Relative to root begins with a slash (/)
描述的是相对于主机根目录的资源位置. 例如 The page containing the link has the URL: relative-to-root URL : /web123.html The browser would construct complete URL:

链接地址的类型 Relative Links Relative to resource
does not begin with a slash (/) 描述的资源位置是相对于包含了该资源链接的资源而言例1 The page containing the link has the URL: relative-to-resource URL : courses.html The browser would construct complete URL:

链接地址的类型 Relative Links Relative to resource
does not begin with a slash (/) 描述的资源位置是相对于包含了该资源链接的资源而言例2 The page containing the link has URL: relative-to-resource URL: fall2007/courses.html The browser would construct complete URL:

相对地址说明假设当前目录结构是/root/layer1/layer2, root是根目录，当前用户处于layer1的某页面上
说明 Href=“../index.htm” 两点“..”表示向上退一层目录，浏览器将在root 目录中寻找index.htm，因为root 是layer1 的上层目录。 Href=”layer2/mynote.htm” 浏览器将在当前的层次（layer1）中寻找layer2，然后在layer2中寻找mynote.htm Href=”/help.htm” 斜杠“/”代表直接退到根目录中，在当前例子里，浏览器将跳转到根目录root，然后在其中寻找help.htm Href=”../layer11/submit.htm” 浏览器此时将在上层目录中首先寻找一个叫layer11 的子目录，此目录和layer1 是平级的，然后在layer11 中寻找submit.htm

HREF 和 <a></a>锚站元素
语法格式： <A HREF = protocol://host.domain:port/path/filename> Hypertext </A> HREF指明链接的URL Protocol是协议类型 Host.domain是服务器的 Internet 地址 Port是目标服务器的端口号 /path/filename指服务器中存放的某个资源文件 Hypertext是用户必须单击才能激活链接的文本或图像例： <A HREF = > icarnegie’s courses </A>

<A HREF = http://www. icarnegie. com/courses
<A HREF = > icarnegie’s courses </A>

使用超链接的几种方式链接到其他文档链接到同一文档的各个部分链接到另一文档中某个特定位置链接使用电子邮件

链接到其他文档 <HTML> <HEAD> <TITLE>使用链接</TITLE>
<BODY> 本页的所有内容都讲述关于如何创建到文档的链接 <A HREF = Doc2.html>单击此处查看文档2</A> </BODY> </HTML> <HTML> <HEAD> <TITLE>文档2</TITLE> </HEAD> <BODY> 这是文档2。单击文档1中的超链接后将显示本页。 <A HREF= Doc1.html>返回</A> </BODY> </HTML>

链接到同一文档的各个部分单击 <HTML>
<HEAD><TITLE>使用链接</TITLE></HEAD> <BODY> <A HREF = #Internet>互联网</A> <A HREF = #HTML>HTML简介</A> <A HREF = #Consistency>多样化和统一性</A> <A name = Internet>[互联网]</A> 互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。 <A name = HTML>[HTML简介]</A> 超文本标记语言是Web用来创建和识别文档的标准语言。 <A name = Consistency>[多样化和统一性]</A> 万事万物都离不开多样性和统一性这样一条基本准则。也就是说， </BODY> </HTML>

链接到另一文档中某个特定位置单击 <HTML> <HEAD>
<TITLE>主文档</TITLE> </HEAD> <BODY> <A HREF=页面内的链接.html#Internet>互联网</A> <A HREF= 页面内的链接.html#HTML>HTML简介</A> <A HREF= 页面内的链接.html#Consistency>多样性和统一性</A> </BODY> </HTML>

链接使用电子邮件如果希望用户在网页上通过链接直接打开客户端的发送电子邮件的工具来发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的工作就是在链接标记中插入mailto值。 <A

在网站上导航线性布局分层布局图像映射超链接子页面目录 “后退”和“前进”按钮

线性布局遵循线性结构页面之间顺序链接 Web Web Web Web

分层布局主页具有到其他多个页面的链接每个页面可有一个到主页的链接
Home Page

总结 HTML命令称为标记（Tag），用于控制HTML文档的内容和外观。 META元素提供关于网页的信息。 HTML文档的基本结构和标记。
总结 HTML命令称为标记（Tag），用于控制HTML文档的内容和外观。 META元素提供关于网页的信息。 HTML文档的基本结构和标记。掌握使用HTML标记创建超链接。了解网站的导航方式。

SSD1: Introduction to Information Systems

Similar presentations

Presentation on theme: "SSD1: Introduction to Information Systems"— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

SSD1: Introduction to Information Systems

Similar presentations

Presentation on theme: "SSD1: Introduction to Information Systems"— Presentation transcript:

Similar presentations

About project

反馈