计算机网络与应用_第1页
计算机网络与应用_第2页
计算机网络与应用_第3页
计算机网络与应用_第4页
计算机网络与应用_第5页
已阅读5页，还剩32页未读， 继续免费阅读

下载本文档

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

文档简介

计算机网络与应用中国医科大学信息管理与信息系统系田大军编辑课件HTML语言基础编辑课件初期的网站都是由静态网页组成的，网页中只有文字、图形、图像等，用户只能被动地接受这些信息。那时的Web页面的核心是HTML(一种标记语言)，它编写很方便，不要求有特定的语言环境，可以用任何一种编辑器写好，便可以放到浏览器观看结果。现在HTML已经有许多专门的编辑软件，如FrontPage、Hotdog、Dreamweaver等。最初的Web是完全的静态，仅仅提供大量的信息服务，没有服务器端／客户端的概念。“静态”指的就是网站的网页内容“固定不变”。当用户浏览器通过互联网的HTTP(HypertextTransferProtocol)协议向Web服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。其页面的内容使用的是标准HTML代码，再加上GIF格式的动态图片。编辑课件静态网页制作：1、网页素材搜集与制作（图像处理与动画制作）2、网页版式设计3、文本编写自己的网页中需要大量的文字材料，这就要在网页编辑器中用HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能，直接写入文字。4、处理网页之间的关联这主要是建立合理、高效的网页导航系统。5、网页发布主要是将建设好的网页上传到服务器中供用户浏览。编辑课件静态网页的制作工具1、图像处理与动画制作工具：Photoshop、Flash等。2、网页编辑工具：1）纯文本编辑工具，如Notepad等；2）转换工具，如word等；3）专用工具，如FrontPage、Dreamweaver等。3、网页上传工具：1)FTP工具，如WS-FTP，CuteFTP等；2)专用网页编辑软件的文件传输功能。4、网页优化工具：网页减肥茶、网页优化大师等。编辑课件HTML简介HTML是HypertextMarkupLanguage(超文本标志语言)的缩写，它是构成Web页面(Page)的主要工具，是用来表示网上信息的符号标志语言。在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的"母语"。WWW(WorldWideWeb)所使用的出版语言就是HTML语言。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML"翻译"成可以识别的信息，就是现在所见到的网页。编辑课件HTML的功能1)出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。2)通过超链接检索在线的信息。3)为获取远程服务而设计表单，可用于提交数据、检索信息、定购产品等。4)在文档中直接包含表格数据、视频剪辑、声音剪辑以及其他的一些应用。编辑课件HTML文件的实质是以.htm或.html为扩展名的纯文本文件。是供浏览器解释的格式。可以使用记事本、写字板等编辑工具来编写HTML文件。HTML语言使用标志(标签)的方法来编写文件。它通常使用<标志名></标志名>来表示标志的开始和结束(例如<HTML></HTML>标志)。编辑课件HTML文件的组成头部和主体标签和普通文本html文件的格式查看网页源文件，可见html文件的格式如下：<html><head><title>网页的标题</title></head><body>……</body></html>其中省略号部份是网页的内容,其实每个标记都是一一对应的。每个网页文件都是以<html>开始和以</html>结束。<title>与</title>之间的内容是网页的标题。会显示在浏览器的标题栏上。<body>与</body>之间放的是网页内容。编辑课件标志（tag）的结构特点

1、用<>包围。2、多数成对出现。3、结束标记用/。4、标签是嵌入式的。5、标签可有多种属性和属性值。6、标签用半角字符，对大小写不敏感。编辑课件文档标题文档标题为<title></title>。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的"主题"。要将网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标志对之间加入要显示的文本即可。例：<title>中国医科大学</title>编辑课件颜色表示方法HTML用#RRGGBB字符串代表色彩，成为RGB值。RGB值中的RR、GG和BB分别代表红绿蓝三原色的两位十六进制整数值。每种原色的取值范围在00和FF（即十进制的0和255）之间，即一个字节存储一种原色。每种原色都有256种由浅至深的色彩变化，网页中呈现的色彩都是由这三种原色调配出来的。rgb值可以表示出（256*256*256）种颜色。黑色白色绿色黄色红色蓝色#000000#FFFFFF#00FF00#FFFF00#FF0000#0000FF编辑课件页面格式标签在网页设置中，会用到HTML页面设置、列表设置等格式标签。段落标签<p></p>预处理文本<pre></pre>换行标签<br>编辑课件标题格式标签HTML语言提供了一系列对文本中的标题进行操作的标志对：<h1></h1>…<h6></h6>，即一共有6对标题的标志对。<h1></h1>是最大的标题，而<h6></h6>则是最小的标题，也即是标志中h后面的数字越大标题文本就越小。如果HTML文档中需要输出标题文本，就可以使用这6对标题标志对中的任何一对。<h1>一号标题</h1><h6>六号标题</h6>编辑课件文本标志<b></b>用来使文本以黑体字的形式输出。<i></i>用来使文本以斜体字的形式输出。<u></u>用来使文本以下加一划线的形式输出。<sub></sub>下标<sup></sup>上标<tt></tt>用来输出打字机风格字体的文本。<cite></cite>用来输出引用方式的字体，通常是斜体。<em></em>用来输出需要强调的文本(通常是斜体加黑体)。<strong></strong>则用来输出加重文本(通常也是斜体加黑体)。编辑课件<font></font>设定文本的字体大小、颜色、字体名等，通过属性size、color、face的控制来实现。size属性：改变字体的大小，它可以取值：-N、N和+N；color属性：改变文本的颜色；face属性：字体名。值为系统中现有的字体，如“楷体_GB2312”。为保证在客户端浏览器中显示正确字体的网页，不要使用非系统自带的特殊字体，如“华文彩云繁”等。例：<fontsize=2face=宋体color=#FF0000>宋体红色2号字</font>编辑课件特殊字符©＆copy；®®；™＆＃153;±＆plusmn;

空格＆nbsp;¥＆yen;编辑课件网页图像格式：JPEG、GIF、PNG格式。可交换图像文件格式(GIF)由于几乎所有的Web浏览器都支持GIF格式（文件扩展名为.gif），因而该格式是万维网上最常用的两个图像文件格式之一。由于此格式最多仅可以显示256种颜色，因而最适于黑白线条图形、彩色剪辑图片和具有大块实心颜色的图片。GIF89a格式也同时支持透明和动画。GIF文件用于：包含透明区域的图像。有限的彩色，例如256色或更少。离散区域中的彩色。黑白图像。小尺寸图像，例如站点上的按钮。清晰度和边缘清晰度很重要的图形，例如线条图形或卡通。包含文本的图像。动画。编辑课件联合摄影专家组(JPEG)JPEG格式（文件扩展名为.jpg或.jpeg）是Web上的另一个最常用的图像文件格式。它不局限于256色，因此您可以使用它来显示高质量的照片或包含上百万种颜色的图片。由于它被设计为图像存储格式，因而可以有效地将高质量的大照片压缩为非常紧密的文件，这在您用电子邮件发送大图像时很有用。然而，您将图像文件的大小压缩的越多（或修改并重新保存图像），图像信息的丢失也越多——并且质量也会下降。此外，该格式不支持透明和动画。JPEG文件用于：照片。自然视觉效果图像。大数量的颜色，例如上百万。需要大量细节的图像。大尺寸的图像。编辑课件可移植网络图形(PNG)PNG格式（文件扩展名为.png）可以显示上百万种颜色。然而，由于它是一种新的格式，当前只有很少的浏览器可以支持（尽管它正快速获得支持）。以这种格式保存的图像，即便将文件压缩，其质量也不会降低。它支持透明，但不支持动画（因为它不能包含多个图像）。编辑课件图像标志

<img>标志来处理图像的输出。<img>标志并非真正地将图像融入到HTML文档中，而是标明图像文件的存放位置。src属性必须赋值，其值是图形文件的存放位置和文件名。align是图像的对齐方式。border属性是图像的边框，可以取大于或者等于０的整数，默认单位是像素。width和height属性是图像的宽和高，默认单位也是像素。alt属性是当鼠标移动到图像上时显示的文本。图像实例<imgsrc="cmu_cname.gif"width="101"height="22"alt="中国医科大学"border="1">编辑课件水平线标志<hr>标志是在HTML文档中加入一条水平线，具有size、color、width和noshade属性：size是设置水平线的厚度。width是设定水平线的宽度，默认单位是像素。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性，水平线将有阴影)。编辑课件表格【重点】表格标志对于制作网页是很重要的，现在很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意地进行背景和前景颜色的设置。可见表格在网页排版中的作用。？想想表格在网页中有哪些作用。编辑课件属性 用途bgcolor 设置表格的背景色border 设置边框的宽度，若不设置此属性，则边框宽度默认为0bordercolor 设置边框的颜色bordercolorlight 设置边框明亮部分的颜色(当border的值大于等于1时才有用)bordercolordark 设置边框昏暗部分的颜色(当border的值大于等于1时才有用)cellspacing 设置表格的单元格之间的空间大小cellpadding 设置表格的单元格边框与其内部内容之间的空间大小width 设置表格的宽度，单位用绝对像素值或总宽度的百分比align 表格在网页中的位置<table></table>标志对用来创建一个表格编辑课件表格的定义顺序是先定义行，再定义该行中的单元格。<tr></tr>标志对用来创建表格中的每一行。此标志对只能放在<table></table>标志对之间使用，而在此标志对之间加入文本将是无用的，因为在<tr></tr>之间只能紧跟<td></td>标志对才是有效的语法。<td></td>标志对用来创建单元格，此标志对只有放在<tr></tr>标志对之间才是有效的，输入的文本也只有放在<td></td>标志对中才有效(即才能够显示出来)。<td>具有width、colspan、rowspan和nowrap属性：width是单元格的宽度，单位用绝对像素值或总宽度的百分比。colspan设置一个表格单元格跨占的列数(缺省值为1)。rowspan设置一个表格单元格跨占的行数(缺省值为1)。编辑课件表格实例：<tableborder="1"><tr><tdrowspan="2"bgcolor="#0033FF"><fontcolor="#FFFFFF">1单元格跨越多行</font></td><tdbgcolor="#999999"><fontcolor="#FFFFFF">2</font></td><tdbgcolor="#0066FF"><fontcolor="#FFFFFF">3</font></td></tr><tr><tdbgcolor="#990000"><fontcolor="#FFFFFF">4</font></td><tdbgcolor="#009900"><fontcolor="#FFFFFF">5</font></td></tr><tr><tdbgcolor="#006600"><fontcolor="#FFFFFF">6</font></td><tdcolspan="2"bgcolor="#996600"><fontcolor="#FFFFFF">7单元格跨越多列</font></td></tr></table>１单元格

跨越多行２３４５６７单元格跨越多列编辑课件根目录/目录1目录2目录3目录4目录5目录5目录6文件1文件2文件3文件4目录7目录8文件5目录9文件6相对路径：相对于当前文档[../的用法]站内绝对路径：相对于网站根[/的用法]绝对路径：资源在网上完整的存放地址，网址。超链接[重点]编辑课件网页内部链接

点击链接热点，网页跳转到资源片段：定义链接热点<ahref="#资源片段名">到资源片段</a>定义资源片段<aname="资源片段名"></a>资源片段编辑课件网页间链接<ahref="文档位置+文件名">链接文字</a>例：<ahref="/chn/index.htm">中文主页</a>

网站间链接网站间的链接，必须使用目标资源的绝对路径，从协议开始。例：<ahref="">新浪网</a>编辑课件链接到电子邮件地址<ahref=“mailto:djtian@”>给我写信</a>，打开客户浏览器设定的默认电子邮件程序，收件人为mailto后的地址。将图像作为超级链接的锚点语法：<ahref="cat.jpg"><imgsrc="/images/cat.gif"></a>编辑课件网页内嵌窗口

<iframewidth=100%height=500scrolling=autoframeborder=0src=初始页面.htmname=iframe></iframe>

说明：src属性为窗口载入的初始网页；name属性指明窗口的名称，它和<a>标签的target属性相对应。编辑课件网页表单[重点]表单是网页上的一组特殊对象标签，是接受用户输入数据的窗口，是用户与服务器之间信息数据交互的桥梁。可以接受用户输入的信息数据，并提交给服务器端预定的程序等来接收并处理数据。表单技术的应用，使得基于网页的编程得以实现。含有表单的网页称作表单网页，表单对象中包含有若干表单域，每一个表单域也称表单控件，是表单的基本元素，用户可以在表单域中输入信息或作出选择。编辑课件<form>表单标签：设定表单的起止位置，并指定处理表单数据程序的url地址。基本语法结构：<formaction＝urlmethod=get|postname＝valueonreset=functiononsubmit＝functiontarget=window>表单元素</form>action：用于设定处理表单数据程序url的地址。method：指定数据传送到服务器的方式。有两种主要的方式，当method=get时，将输入数据加在action指定的地址后面传送到服务器；当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器。name：用于设定表单的名称。onreset和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。编辑课件<input>表单输入域（控件）此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：<inputname=valuevalue=valuetype=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button><textarea>多行文本输入标签<textareaname=namecols=nrows=nwrap=off|hard|soft>参数：name：文本框名称；clos：宽度；rows：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去；soft：自动软回车换行，换行标记不会传送到服务器中去。编辑课件<select>下拉菜单标记需与<option>标记联用，下拉菜单中的每个选项要用<option>标记来定义。<select>标记的语法如下：<select

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

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

最新文档

评论

0/150

提交评论