1 / 68

项目9 HTML 语言基础

项目9 HTML 语言基础. 教学目标. 掌握 HTML 基本概念及结构 掌握文本和图像常用的 HTML 标签 熟悉列表、表格和表单标签. 知识目标：. 技能目标 ：. 熟练运用文本和图像常用的HTML标签 熟练运用列表、表格和表单的HTML标签 能使用HTML标记语言开发网页. 项目任务. 任务 9.1 制作珠海航空展首页框架. 2. 文本和图像常用的 HTML 标签. 3. 列表标签. 4. 表格和表单标签. 任务 9.1 制作珠海航空展首页框架. 任务描述.

thomas-kirby
Download Presentation

项目9 HTML 语言基础

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 项目9 HTML语言基础

  2. 教学目标 掌握HTML基本概念及结构 掌握文本和图像常用的HTML标签 熟悉列表、表格和表单标签 知识目标： 技能目标： 熟练运用文本和图像常用的HTML标签 熟练运用列表、表格和表单的HTML标签 能使用HTML标记语言开发网页

  3. 项目任务 任务9.1 制作珠海航空展首页框架 2.文本和图像常用的HTML标签 3.列表标签 4.表格和表单标签

  4. 任务9.1 制作珠海航空展首页框架

  5. 任务描述 通过HTML语言的基本框架标签完成“珠海航空展首页”的主体结构，如图9-1所示。 图9-1最终首页主体效果图

  6. 1. HTML语言概述 HTML是一种超级文本标记语言，它是一种规范，一种标准， 通过标签符号来标记要显示的网页中的各个元素。网页内容本身是一种文本文件，通过在文本文件中添加标签符，控制在浏览器中文字、图片、视频等元素显示样式。　　 （1）HTML语言的特点 HTML语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件，其主要特点如下： 　　 简易性：HTML语言不是程序语言，它是一种标记语言，文本语言，任何一个文本编辑器都可以编辑； 　　 速度快：使用HTML语言描述的文件，无需解释运行，通过WWW浏览器就显示出效果； 　　 通用性：HTML语言编写和应用与平台无关，适用于所有浏览器，正因此特点才使得万维网盛行； 　　 与平台无关：HTML语言执行与平台无关，它独立于各种平台。 相关知识与技能

  7. （2）HTML发展 　　超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）： HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.2——1997年1月14日，W3C推荐标准 HTML 4.0——1997年12月18日，W3C推荐标准 HTML 4.01——1999年12月24日，W3C推荐标准 HTML 5的第一份正式草案已于2008年1月22日公布，仍继续完善 HTML文档的编写方法 手工直接编写：记事本等，存成.htm .html格式； 使用可视化HTML编辑器：Frontpage、Dreamweaver等； 动态生成：由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。

  8. 2. HTML文档的基本结构 标签由开始标签起头，一定要有对应的结束标签来收尾。 如：<p> Hello World!</p> 属性是用来描述一个事物特征的表述语言，标签中的属性值必须放在引号内。 <标记 属性名1="值1" 属性名2="值2" …>内容</标记> 如：<a href="http://www.sohu.com ">浏览进入搜狐!</a> 多个标签时必须按照嵌套的原则，即一个标签必须是嵌套在另一个标签内使用。如： <body> <p><a href="http://www.sohu.com ">浏览进入搜狐!</a></p> </body> HTML标签基本的语法：<标记>内容</标记>

  9. 页面文档的基本结构可分为4层关系，这其中涉及到5个重要的结构性标签用来构成一个页面，分别是开始标签、头标签、标题标签和文体标签。页面文档的基本结构可分为4层关系，这其中涉及到5个重要的结构性标签用来构成一个页面，分别是开始标签、头标签、标题标签和文体标签。 开始标签：定义页面开始到结束。 <html> </html> 头标签和头标签的对象：有6个特殊的标签可以放在头标签中使用。<head> </head> 标题标签：设置网页的标题名。 <title> </title> 文体标签：用来表现网页的主体内容。 <body> </body>

  10. 头标记 <title>标记 用于设置网页标题信息 <style>标记 1、头标记 用于在文档中嵌入样式表 <meta>标记 用来设置页面关键字、控制页面缓存、刷新页面等功能

  11. 我们见到的整个网页中的内容全都在这里面,所有页面的东东全是body的臣民我们见到的整个网页中的内容全都在这里面,所有页面的东东全是body的臣民 主体标记 1、头标记 标记 <body>……</body> 2、主体标记 功能 决定页面实际显示的内容 <body bgcolor=" " text=" " link=" " alink=" " Vlink=" " background=" "> 格式 Bgcolor 设 置 背 景 色 彩 Text 设 置 非 可 链 接 字 色 link可 链 接 文 字 的 色 彩 alink正 被 点 击 可 链 接 色 彩 Vlink 已 点 击 可 链 接 色 彩 Background 设 置 页 面 背 景 图 像

  12. 3.使用文本文件制作珠海航展首页框架 （1）书写HTML代码如图9-2所示。 （2）使用浏览器浏览效果如图9-3所示。 图9-2HTML文档的基本结构图 图9-3珠海航空展首页框架效果图

  13. 4. 使用Dreamweaver CS6制作HTML文档的基本结构 （1）创建HTML页面：在Dreamweaver CS6的主窗口中，选择菜单栏中的【文件】|【新建】命令，打开如9-4对话框，选择“HTML”，最后单击【创建】，进入Dreamweaver CS6代码窗口，HTML基本框架代码全部自动写好，如图9-5所示。 图9-4 Dreamweaver CS6新建页面窗口

  14. 图9-5 Dreamweaver CS6代码窗口 （2）完善代码：修改标题为“珠海航空展”，添加主体内容“珠海航空展 2014-11-11，如图9-6所示。 图9-6 修改代码示意图

  15. （3）测试效果 ①单击Dreamweaver CS6主工作区的“文档工具栏”中【设计】，看到初步效果，如图9-7所示。 图9-7 Dreamweaver CS6设计窗口 ②按【F12】键运行页面，效果如图9-3所示。

  16. 任务实现 1. 创建HTML页面，如图9-4所示。 2. 编写HTML代码 图9-8 HTML代码编写示意图

  17. 3. 最终效果 图9-9 最终效果图

  18. 任务2 编写文本的排版与格式——航展新闻列表

  19. 任务描述 文本是网页不可缺少的元素之一，是网页发布信息所采用的主要形式。为了让网页中的文本看上去编排有序、整齐美观、错落有致，我们就要设置文本的大小、颜色、字体类型以及换行换段等。通过对航展新闻列表文本的设置，效果如图9-10所示。 图9-10 最终文本网页效果图

  20. 相关知识与技能 1.编写文字排版 1.1设置标题格式 语法：<hn align=left | center | right>标题文字</hn> ，<hn>标记用于标示网页中的标题文字，被标示的文字将以粗体的方式显示在网页中。在HTML中，共有6个层次的标题，因此其中n的范围为1～6。标题文字标记中可以设置align属性，用于控制对齐方式，默认的对齐方式为靠左，如图9-11所示。 图9-11 标题标签

  21. 1.2 设置段落 语法：<p>文本</p> ，<p>为分段标记，遇到此标记将文字分段。如图9-12所示。 图 9-12 编写文字排版代码

  22. <Pre> 标签 图9-13 排版前预览效果

  23. 图9-14 排版后预览效果

  24. 2. 设置文本格式 语法：<font 属性=属性值……>文字</font>，<font>文字格式标记用于控制文字的字体、大小和颜色。控制的方式是利用<font>标记的属性设置来实现的。属性具体说明如表9-1，font相关标记如表9-2，具体HTML语言编写如图9-12所示。 表9-1 <font>标记的属性

  25. 表9-2 font相关标记

  26. 对新闻列表页面进行格式设置，如图9-15，格式设置后的效果如图9-16所示。对新闻列表页面进行格式设置，如图9-15，格式设置后的效果如图9-16所示。 图9-15 文本格式设置

  27. 图9-16 文本格式设置效果

  28. 任务实现 （1）创建HTML页面 在Dreamweaver CS6的主窗口中，选择菜单栏中的【文件】|【新建】命令，打开如9-4对话框，选择“HTML”，最后单击【创建】，进入Dreamweaver CS6代码窗口，然后点击【保存】按钮保存，名为list.html。 （2）编写文字排版 设置标题格式：按照上面的方面把所有新闻的标题设置为二级标题，即加上<h2>，如图9-11所示。 设置段落格式：把各新闻标题、时间、内容及备注内容各分成一段，如图9-12所示。 （3）编写文本格式 如图9-15所示。最终效果图如图9-16所示。

  29. 任务3 编写项目列表——航展新闻列表

  30. 任务描述 新闻列表页面list.html为了显示更多新闻列表，而且新闻列表间是并列显示的，效果如图9-17所示。 图9-17最终文本网页效果图

  31. 相关知识与技能 1. 无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。列表项内部可以使用段落、换行符、图片、链接以及其他列表等，无序列表始于<ul>标记，每个列表项始于<li>标记，其语法格式： <ul> <li>...............</li> <li>...............</li> ........ </ul> 2. 有序列表 有序列表也是一个项目的列表，此列项目使用数字进行标记。列表项内部可以使用段落、换行符、图片、链接以及其他列表等，有序列表始于<ol>标记，每个列表项始于<li>标记，其语法格式： <ol> <li>...............</li> <li>...............</li> ........ </ol>

  32. 任务实现 打开新闻列表页面 list.html，航展网站新闻列表中“珠海航展参展飞机公布”新闻设置如图9-18所示，其效果如图9-17所示。 图9-18 航展网站首页新闻列表设置 32

  33. 任务4 编写超级链接——航展新闻列表

  34. 任务实现 点击新闻列表页面中每个新闻标题即可进入详细新闻页面，浏览新闻详细内容，如点击“珠海航展参展飞机公布”新闻标题，进入canzhan.html页面。

  35. 相关知识与技能 1.站内页面链接 站内页面链接是指在“文本”上创建一个指向本网站中其它页面，如从 canzhan.html，并在空白页面上打开链接，其语法格式： <a herf=”/canzhan.html” target=”_blank”>珠海航展参展飞机清单公布</a> 2.站外页面链接 站外页面链接是指在“文本”上创建一个指向其它网站中的页面，并在新页面上打开链接，其语法格式： <a href="http://www.airshow.com.cn/cn/Exhibitor/Index.html" target="_new">第十届中国国际航空航天博览会</a> 35

  36. 任务实现 打开新闻列表页面 list.html，航展网站新闻“珠海航展参展飞机公布”标题设置内部链接，“第十届中国国际航空航天博览会”新闻标题设置为外部链接，设置如图9-19所示，其效果如图9-20所示。 图9-19 链接设置

  37. 图9-20 链接设置后效果图

  38. 点击图9-20中的“第十届中国国际航空航天博览会”标题跳转到外部页面如图9-21所示。 图9-21 外部页面

  39. 点击图9-20中的“珠海航展参展飞机公布”标题跳转到新闻详细内部页面如图9-22所示。 图9-22 内部页面

  40. 任务5表格图片设置——珠海航展参展飞机清单公布任务5表格图片设置——珠海航展参展飞机清单公布

  41. 任务描述 在“珠海航展参展飞机清单公布”新闻页面canzhan.html插入表格，并在表格中插入热点飞机图片，如图9-23所示。 图9-23 表格图片设置效果

  42. 相关知识与技能 1.表格设置 用HTML语言制作表格的基本结构是： <table>…</table>定义表格 <caption>…</caption>定义标题 <tr>…</tr>定义表行 <th>…</th>定义表头 <td>…</td>定义表元（表格的具体数据） 表9-3 TABLE标签属性

  43. 相关知识与技能 HTML中表格建立的过程 定义表格 定义行 定义列 重复”定义行””定义列”完成整个表格制作过程 利用<TABLE> . . . . </TABLE> 标签 利用<TD> . . .. </TD> 标签 利用<TR> . . .. </TR> 标签

  44. 1、示例-创建表格1 <table border="1"> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>高阳</td> <td>32</td> </tr> <tr> <td>张鹏</td> <td>33</td> </tr> </table>

  45. TABLE标签属性

  46. 1、示例-创建表格2 <HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE BORDER = 2 > <TR> <TD>姓名</TD> <TD>性别</TD> <TD>分数</TD> </TR> <TR> <TD>Robert</TD> <TD>M</TD> <TD>80</TD> </TR> ....... </TABLE> </BODY> </HTML> <TABLE>代表表格的开始，border=2表示边框尺寸为2 <TR>表示行，这是表格的第一行，有三列数据，<TD>代表列 表格的第二行，有三列数据 表格的第三行，也有三列数据

  47. 2、示例-表格的标题 <BODY> <TABLE BORDER = 2> <CAPTION align=top>学员档案信息</CAPTION> <TR> <TH>姓名</TH> <TH>性别</TH> <TH>分数</TH> </TR> <TR> <TD>Robert</TD> <TD>M</TD> <TD>80</TD> </TR> ....... </TABLE> </BODY> </HTML> <CAPTION>表示表格标题 <TH>表示行或列标题，粗体显示 表格的第二行，有三列数据 表格的第三行，有三列数据

  48. 3、示例-表格的对齐方式 整个表格居中 <BODY> <TABLE border=2 align=center> <CAPTION align=top>学员档案信息</CAPTION> <TR> <TH>姓名</TH> <TH align="center">性别</TH> <TH align="right">分数</TH> </TR> <TR> <TD>Robert</TD> <TD align="center">M</TD> <TD align="right">80</TD> </TR> ....... </TABLE> </BODY> </HTML> 姓名列默认左对齐 性别列居中 分数列右对齐

  49. 4、合并单元格(跨列) <BODY> <TABLE BORDER = 2 ALIGN = CENTER> <CAPTION>创建表格 </CAPTION> <TH COLSPAN = 3>第一学期</TH> <TH COLSPAN = 3>第二学期</TH> <TR> <TD>数学</TD> <TD>科学</TD> <TD>英语</TD> <TD>数学</TD> <TD>科学</TD> <TD>英语</TD> <TR> <TD>98</TD> <TD>95</TD> <TD>80</TD> <TD>95</TD> <TD>87</TD> <TD>88</TD> .... COLSPAN=“n”属性表示跨多少列

More Related