《网页设计语言基础》PPT课件.ppt

第2章网页设计语言基础,网页设计者，必须具备HTML语言的基本知识。,学习目标,本章涉及的程序代码比较多，但是HTML语言是网页设计人员必须掌握的基本知识，也是网页设计和制作的基础，所以希望大家能够熟练地掌握本章的知识点，至少要熟悉常用的HTML语言。,本章重点,HTML语言的结构HTML常用标签的用法和意义学会使用HTML语言制作简单的网页,HTML概念,HTML:HypertextMarkedLanguage,即超文本标记语言,是一种用来制作超文本文档的简单标记语言.用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台.,HTML文档结构,TitleofpageThisismyfirsthomepage.Thistextisbold,例子解释,HTML文档中，第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是，这个标签告诉浏览器这是HTML文档的终止。,例子解释,在和标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。头信息中包含.和等标签对。在和标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。,例子解释,在和标签之间的文本是正文，会被显示在浏览器中。在和标签之间的文本会以加粗字体显示。,HTML标签,HTML标签用来组成HTML元素。HTML标签两端有两个包括字符：“”,这两个包括字符被称为角括号。HTML标签通常成对出现，比如和。一对标签的前面一个是开始标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容。HTML标签是大小写无关的，跟表示的意思是一样的。,HTML元素,下面是一个HTML元素：Thistextisbold此HTML元素以开始标签起始，内容是：Thistextisbold，以结束标签中止。标签的目的是定义一个需要被显示成粗体的HTML元素。,下面也是一个HTML元素：Thisismyfirsthomepage.Thistextisbold此HTML标签以开始标签起始，终止于结束标签。标签的目的是定义一个HTML元素，使其包含HTML文档的主体。,标签属性,标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。标签定义了HTML页面的主体元素。使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样：,HTML基本标签,HTML中最重要的标签是定义标题元素，段落和换行的标签。标题元素标题元素由标签到定义。定义了最大的标题元素，定义了最小的。ThisisaheadingThisisaheadingThisisaheadingThisisaheadingThisisaheadingThisisaheadingHTML自动在一个标题元素前后各添加一个空行。,问题：如果要在浏览器中输出含有的字符应该怎么做？,答：可以考虑使用转移字符。的转移字符表示为>,段落段落是用标签定义的。ThisisanotherparagraphHTML自动在一个段落前后各添加一个空行。,换行当需要结束一行，并且不想开始新段落时，使用标签。标签不管放在什么位置，都能够强制换行。Thisisaparagraphwithlinebreaks标签是一个空标签，它没有结束标记。,HTML中的注释注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。你可以使用注释来解释你的代码，这可以在你以后编辑代码的时候帮助你。注意：你需要在左括号“”后面跟一个感叹号，右括号不用。,练习完成以下网页设计：1、,3、,2、,其它HTML代码,如超级链接:腾迅网.注意：如果是链接到外部的网页的话，一定要加上协议。比如http:/，否则在上面中输入腾迅网是打不开网站的。,无序号列表,无序号列表使用的一对标签是，每一个列表项前使用。其结构如下所示：第一项第二项第三项,无序号列表,如果要改变无序号列表的标记为正方形的话，可以使用：第一项第二项第三项,例：无序列表这是一个无序列表：国际互联网提供的服务有：WWW服务文件传输服务电子邮件服务远程登录服务其它服务,无序号列表,序号列表,序号列表和无序号列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：第一项第二项第三项,序号列表,如果要改变序号列表的样式，可以采用的形式。例如，以罗马字符来进行排序第一项第二项第三项,序号列表,例：有序列表这是一个有序列表：国际互联网提供的服务有：WWW服务文件传输服务电子邮件服务远程登录服务其它服务,表格,基本结构.定义表格cellspacing定义单元格的间距border定义表格的边框.定义标题定义表行定义表头定义表元(表格的具体数据),以下是一个简单的例子：姓名性别年龄王林男25如果将分别替换成：和会出现什么样的效果？,插入图形,超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。,基本格式插入图象的标签是，其格式为：SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。,例：IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示：例：,查看源代码,1.DW中,通过视图中的,源代码或拆分,可以查看到.2.网页中,通过查看,源代码,可以查看到.,完成以下网页设计：1、,练习,2、,既然编写程序代码来完成网页设计有一定的烦琐性，那么有没有其他更好的方法来代替编写代码呢？比如有没有这样的软件，当用户输入要求后自动产生相应的程序代码。,课后思考,