《网页设计与制作》(第二版)电子课件第二章-Internet与HTML_第1页
《网页设计与制作》(第二版)电子课件第二章-Internet与HTML_第2页
《网页设计与制作》(第二版)电子课件第二章-Internet与HTML_第3页
《网页设计与制作》(第二版)电子课件第二章-Internet与HTML_第4页
《网页设计与制作》(第二版)电子课件第二章-Internet与HTML_第5页
已阅读5页，还剩54页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第2章Internet与HTML

2.1Internet与万维网

Internet概述万维网网页与网站一.Internet概述将地理位置不同的、具有独立功能的多个计算机系统通过通信线路和通信设备互连在一起，由网络软件实现网络资源共享和互相通信的系统叫计算机网络。计算机网络按照覆盖区域可分为局域网（LAN）和广域网（WAN）。Internet是将全世界的网络连接在一起形成的国际互联网络，简称“互联网”，我国推荐名称为“因特网”。Internet的发展历程20世纪60年代末，美国国防部所属的高级研究规划署ARPA研究并建立了实验性军用计算机网络ARPANet。70年代，ARPANet网络的应用由军事领域延伸到教育领域，科学家们开始利用ARPANet网络交换信息，共享研究成果。1983年，TCP/IP协议（即传输控制协议和网际间协议）的建立，使计算机通信有了统一的标准。这是计算机网络发展史上的一个里程碑，网络从此进入高速发展的时代。1986年，美国国家科学基金会NSF（NationalScienceFoundation）开始将美国各地的研究人员、各大学和研究机构的计算中心连接到了分布在不同地区的五个超级计算中心。至此，NSFNet网络越来越多地被高等院校、科研机构、政府部门、商业集团、实验室和个人等所使用，逐渐取代了ARPANet网络。Internet---我们生活的一部分随着计算机和通信技术的发展，计算机网络由过去的军事与教育专用网络发展成为无所不包、无所不能的国际互联网络：Internet。Internet提供的服务主要有：电子邮件（E-mail）、文件传输（FTP）、电子公告（BBS）、远程登录（Telnet）和网页浏览（WWW）。Internet正以人们难以想象的速度迅猛发展。二.万维网（WWW）WWW（WorldWideWeb）俗称万维网，它是欧洲粒子物理研究所（CERN）的科学家TimBerners-Lee发明的。他提出了超文本（HyperText）的结构体系，目的是让大家在不同的地方用一种简捷的方式共享信息资源。WWW制定了一套标准，包括超文本HTML语言、统一的资源定位符URL和超文本传输协议HTTP。超文本由若干互连的超媒体文件组成，它是通过超链接把一些具有超媒体特性的信息链接起来的一种新型的信息管理技术。超媒体不但包括了文本内容，还包括图像、动画、声音和视频等。超链接就是通过超文本中的链接点（也叫“参考点”或“热点”）建立与其他超媒体文件的链接，用鼠标单击链接点即可调出与之相链接的其他超媒体文件（即网页）。各种信息按不同的类型以网页文件的形式分别放在万维网服务器上。万维网已经成为当前Internet上最受欢迎、最为流行和最新的信息检索服务系统。三.网页与网站网站是网页的集合，通常一个网站是由众多不同内容的网页组成的。网页是网站的基本信息单位，是WWW网上的各个超文本文件。那么什么是超文本文件呢?超文本文件就是以超文本标记语言书写的。超文本标记语言是由TimBerners-Lee提出的WWW的描述语言，简称HTML（HyperTextMarkupLanguage），它不是编程语言，而是一种标记语言。HTML语言的目的是把网上各类计算机中的文本或图形有机地结合起来，形成共享的整体，而用户不必考虑具体信息是在网络上的哪个位置。超文本标记语言（HTML）HTML命令可以说明文字、图形、动画、声音、表格、链接等。网页就是HTML文本，它是由HTML命令组成的描述性文本。HTML的结构包括头部（Head）和主体（Body）两大部分：头部描述浏览器所需的信息，主体包含所要说明的具体内容。2.2HTML语言基础了解HTML的基本概念及工具

用HTML建立一个简单的网页

HTML文档的总体结构

常用的HTML标记

一.了解HTML的基本概念及工具1.标记符又称标签，HTML是影响网页内容显示格式的标记符集合，浏览器根据标记符决定网页的实际显示效果。2．HTML编辑器用于生成和保存HTML文档，是基于文本的编辑器，在创建文档时只能看到HTML代码。3．web浏览器用于浏览和测试HTML文档。最常用的浏览器是NetscapeNavigator和

MicrosoftInternetExplorer。标记符所有的标记符都用尖括号括起来。例如，<HTML>表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。如：<HTML>…<／HTML>。HTML标记符是不区分大小写的，通常约定标记符使用大写字母，利于HTML文档的维护。属性属性是用来描述对象特征的特性。在HTML中，所有的属性都放置在开始标记符的尖括号里；属性与标记符之间用空格分隔；属性的值放在相应属性之后，用等号分隔；而不同的属性之间用空格分隔。格式为：<标记符属性1=属性值1属性2=属性值2…>受影响的内容<／标记符>二.用HTML建立一个简单的网页网页文件的扩展名一般是“.htm”或“.html”，建立网页可以在Windows记事本内输入HTML文档。由于HTML文档是文本文件，在存盘时文件的原名一定要输入HTML文档的扩展名.htm或.html，同时要注意HTML文档中的各种英文标记要在英文方式下输入。为了便于管理，可在D盘根目录下建立一个名字为“网页”的文件夹。例1建立网页文件html1.htm操作步骤：

1打开Windows下记事本程序，创建新文档；

2输入HTML代码和文本正文；

<html><head><title>网页制作</title></head><body><h1>网页设计与制作</h1><h2>第2章</h2><br><h3>Internet与HTML</h3><br></body></html>3、将文件保存为“.htm”文件

第一次保存文件时会弹出“另存为”对话框，默认的保存类型为文本文档（*.txt），应在“保存类型”中选择“所有文件”，然后在“文件名”选顶中输入文件名“html1.htm”，最后按“保存”保存文件。显示结果4、浏览所设计的网页

浏览所设计的网页，可以有如下两种方法：第一种方法是双击HTML文档图标。第二种方法是双击浏览器图标，调出浏览器窗口，单击“文件”→“打开”菜单命令，调出“打开”对话框，再从“网页”文件夹中选择html1文件，单击“打开”按钮，即可在浏览器中打开网页了。显示结果三.HTML文档的总体结构从例1中我们可以看到HTML文档的一般结构如下所示：

<html><head><title>网页标题</title></head><body>网页正文</body></html>HTML文件一般是由标记和网页的正文组成。各种标记代表的含义如下：指明文件中HTML编码信息，同时文件扩展名.html或.htm也指明该文件是一个HTML文档。<html>表示HTML文档的开始，</html>表示HTML文档的结束。

HTML编码文档的第一部分，即头部信息。其中存放标题及其他内容。

（1）<html>...</html>（2）<head>...</head>这一对标记指明网页的标题，标题显示在浏览器窗口的顶端。标题应当是描述性的、独特的和相对简洁的。

HTML文档的第二部分，也是网页中最大的部分，即正文部分，包含文档的所有内容，显示在浏览器窗口的工作区域中。（3）<title>...</title>（4）<body>...</body>四.常用的HTML标记行控制文本对齐方式列表元素水平分隔线字体设置表单标记建立表格超链接和图像标记多媒体效果1.行控制HTML分段标记P，用来定义文档中的一个段落。标记<P>可看作是段落的开始，而标记</P>则可视作段落的结束。单独一个<P>会添加一个空行。段落的缩进、第一个词前面的空格以及其他特性主要由浏览器决定。（1）分段标记

换行标记BR是在HTML文档中增加一个换行。它只是进行了换行而不改变段落设置和其他字符，这一点不同于分段标记P。<BR>是HTML语言中为数不多的单独出现的标记，即只有<BR>而没有</BR>。（2）换行标记

2.文本对齐方式（1）ALIGN属性

ALIGN属性用来表示文本在水平方向的对齐方式。如下所示：

<PAlign=left/center/right></P>

等号右边的三个值分别表示文本靠左边、中间和右边对齐。（2）CENTER元素

CENTER元素的作用是使文本居中，处于CENTER元素起止标记符中间的任何文本，包括标题、正文或其他插入对象都将在浏览器窗口中居中显示。3.列表元素文档中的列表是很重要的，它将使文档一目了然。在HTML中的列表分为无序列表有序列表自定义列表例如：

<UL><LI>北京

<LI>上海

<LI>天津

</UL>显示结果为：

·北京

·上海

·天津（1）无序列表：UL元素和LI元素

UL元素可用于创建一个以圆点等项目开始的无序列表，列表中的每一项用LI元素加以识别。（2）有序列表：OL元素和LI元素有序列表与无序列表类似，但项目符号为序号数字或字母。显示如果如下所示：

1.北京

2.上海

3.天津

4.水平分隔线

水平分隔线元HR，可在HTML文档的不同章节之间插入一个水平线作为分界标志符。5.字体设置

HTML中可以用标记对文档字符进行字体设置。字体设置包括标题、字体、字符颜色等内容。（1）标题元素

使用标题有利于组织信息，以便用户能够对内容有一个迅速清楚的了解。HTML中规定了标题格式。在HTML中，支持六级标题，其标记分别为h1到h6，每对起止标记用来指定文档的标题内容。（2）字体元素

字体（FONT）元素用来设置文档的字体。通过改变其属性，对字体进行不同的设置。在FONT的属性中：

SIZE属性用来决定字的大小；

COLOR属性用来指定文档字符的颜色，颜色值可以按照十六进制数或者预定义颜色名方式给定；

FACE属性用来指定一种字体名。例2

<html><head><title>HTML中字体的设置</title></head><body><h1align=center>

<fontsize=12color=MediumSlateBlueface=cursive>欢迎进入我的网站</font>

</h1></body></html>显示结果6.表单标记表单Form标记，是动态HTML技术的基础。它使HTML文档能够接受用户的输入信息并能够对用户输入的信息进行反馈，提供了与用户交互的可能。表单从用户方面收集信息，当用户添好表单上所需要的信息并将表单提交后，服务器就可以得到表单中包含的信息。表单中主要使用的标记（1）FORM：在文档中生成表单;（2）INPUT：输入字段;（3）SELECT：定义可选择的若干选项，一般为列表框;（4）OPTION：SELECT元素中的选项;（5）TEXTAREA：多行文本的输入字段。例3<html><head><title>表单的应用</title></head><body><h3>表单的应用</h3><p>请详细填写以下资料：

<formmethod="post”action="login.asp"><p>姓名：<inputname="UsrName"size=20>性别：

男<inputname="gender"type=radiovalue="male">

女<inputname="gender"type=radiovalue="female"><p>年龄：<inputname="Age"size=10><p>工作单位：

<textareaname="Factory"cols=48rows=3></textarea><p>兴趣爱好：

<textareaname="Hobby"cols=48rows=3></textarea><p><inputtype=submitvalue="提交"><inputtype=resetvalue="取消"></form></body></html>显示结果7.建立表格表格在HTML的文档中应用非常广泛。它可以用于传统的表格，可以用来设置分栏和对齐以及对网页进行布局。TABLE元素定义表格TR定义表行TH定义表头TD定义表格数据例4<html><head><title>表格的应用</title></head><body><tablealign=centerborder=5width=100height=100><captionvalign=top>表格的应用</caption>

<tr><thcolspan=100>姓名</th></tr><tr><thbgcolor=red>小明</th><thbgcolor=blue>王红</th><thbgcolor=white>张亮</th></tr>

<tr><tdalign=left>中国</td><tdalign=center>英国</td><tdalign=right>法国</td></tr></table></body></html>显示结果关于例4的说明（1）用clospan属性实现跨列；（2）用rowspan属性实现跨行；（3）用border属性设定表格边框线的宽度；（4）用width和height属性来设定表格的宽度和高度；（5）用caption元素来规定表格的标题，表格标题默认放在表格的上方，但通过valign属性将值设为bottom，则标题放在表格的下方；（6）用bgcolor属性来设置表格的颜色，包括表元的和背景图像。格式如下：背景色设置：<bodybgcolor=black>

或<bodybgcolor=＃000000>常用颜色名称：red、yellow、green、blue、white、orange背景图像设置：<bodybackground=“bg.bmp”>例4中：第二行的表元分别设为红色、蓝色和白色。

align属性用来控制表格及其中文字的布局，它也有左、中、右三种取值。在第三行的表元中，分别设成了这三种取值。8.超链接和图像标记加入超链接功能，使得任何一个HTML文件可以方便地转到另一个页面。超链接主要是通过锚点元素A来实现的。A元素标识一些文本，使其成为超文本链接的起点或目的点。如果A元素中包含HREF属性，则该元素的起始标记与结束标记之间所有文本就变成了超文本（HyperText）。（1）加入超链接建立链接，必备两个条件：在文件中确定链接点和确认被链接的文件的名称或URL。页面链接使用的格式：

<ahref＝“被链接文件名”>带下划线的文本</a>如何建立链接使用HREF的一个例子友情链接：<ahref=>微软</a>这段代码的运行结果为：

友情链接：微软当用户点击带有下划线的“微软”文本时，即可打开微软公司的主页。几种链接格式

<AHREF＝“#锚点名称”><ANAME＝“锚点名称”><ahref=mailto:dqlgj@163.com>Email地址</a>同一个文件中的链接格式：为被链接的部分起名字并加标记，这个名字叫锚点名称。格式是：电子邮件链接格式：

（2）加入图像标记IMG用来将图

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论