《HTml简介网页教程》由会员分享，可在线阅读，更多相关《HTml简介网页教程（36页珍藏版）》请在金锄头文库上搜索。
1、Hands On实训教程系列 专题一 HTML简介 案例一 制作欢迎界面网页 Hands On实训教程系列 课程地位 Prev Prev HTML HTML SQL Base SQL Base Logic Java Logic Java C WinForms C WinForms STB STB Project1 ADO Net WinForms C S Project1 ADO Net WinForms C S ADO Net Three Tier ADO Net Three Tier JavaScript JavaScript SQL Advance SQL Advance Java OO
2、P Java OOP Project2 B S Project2 B S Net OOP Net OOP JSP JSP Ajax Web Service Ajax Web Service JSP Servlet JavaBean Web Service JSP Servlet JavaBean Web Service Struts Hibernate Spring Ajax Struts Hibernate Spring Ajax ASP Net ASP Net NTC NTC Project3 Net Java HR CRM OA B2C B S Project3 Net Java HR
3、CRM OA B2C B S 行业手册行业手册 行业手册行业手册 Hands On实训教程系列 就业技能结构图 Hands On实训教程系列 课程目标 学完本门课程后 你能够 能制作界面美观大方 面向企业应用的商业网站 含动态脚本功能 Hands On实训教程系列 课程项目展示 课程项目展示 Hands On实训教程系列 教学目标 能熟练的描述因特网 Web和HTML的概念 能熟练描述HTML文档结构 并正确使用记事本编写 HTML文档结构 能利用特殊字符和HTML基本元素编写简单的HTML 网页 能正确的预览编写的HTML代码 Hands On实训教程系列 工作任务 通过草图设计网页样式 利
4、用记事本制作欢迎界面网页 在windows下组织文件 使用windows的浏览器预览欢迎界面网页 Hands On实训教程系列 互联网介绍 1 全球范围内网络的网络 Internet 的一部分 由包含各种信息的文档组成 全球信息网 简称为3W World Wide WebWorld Wide Web 多台计算机互相连接即组成网络 Hands On实训教程系列 互联网介绍 2 1969年 美国国防部出资建立的ARPA NET网络 随后在美国及欧洲的大学逐渐得到应用 1991年 由瑞士日內瓦物理实验室 CERN 的研究员 Dr Tim Berners Lee 发明了WWW Hands On实训教程
5、系列 互联网介绍 3 HTML技术是目前最优秀也是最核心的Web技术之 一 1945年 Vannevar Bush提出文本之间相互链接来进 行阅读与关联的创新思想 1969年 IBM利用这种思想发明了GML语言 随后互 联网发展 产生了HTML Hands On实训教程系列 互联网介绍 4 互联网中的名词 URL Uniform Resource Locator 统一资源定位 例如 也被称为网页地址 是因特网上标准的资源的地址 FTP File Transfer Protocol 文本传输协议 HTTP Hypertext Transfer Protocol 超文本传输协议 在浏览网页时键入的
6、URL都以http 开头 IP地址 每台主机都有唯一的IP地址 如 202 96 140 250 TCP IP 传输控制协议和互联网协议 Email 格式如 user domainname Hands On实训教程系列 HTML语言 HTML是一种用于文档布局和超文本链接规范的语 言 它定义了特殊的 嵌入式指令的语法和放置方法 用 于在浏览器中显示文档的内容 如文本 图像以及其 他支持的媒体等 HTML并不是一种程序 它只是一种控制网页中资料 显示的标记语言 例如 文化 Hands On实训教程系列 HTML文档结构 1 HTML文档的组成包括定义文档内容的文本 和定义 文档结构及外观的标签
7、HTML文档 HTML文档 文档内容文本 文档内容文本 文档结构 文档结构 外观标签 外观标签 Hands On实训教程系列 HTML文档结构 2 HTML 文档的结构是由最外层的标签组成 里面是文档的头部和主体 欢迎访问我的网站 网页内容 可以是文本 图像等 欢迎访问我的网站 网页内容 可以是文本 图像等 头部头部 HTML部分部分 主体部分主体部分 网页标题网页标题 网页标题网页标题 Hands On实训教程系列 HTML标签 1 HTML的标签由普通的词语 缩写词和注释构成 标签都有一个标签名称 例如 有些标签后面还有一个可选的属性列表 标签的属性有值的话 它们就放在标签属性名称后面 的
8、等号 之后 例如 width 6 标签放在开始和结束括号之间 标签和属性名不区分大小写 例如 Hands On实训教程系列 HTML标签 2 HTML文件中完整定义为 内容 可以省略 如下 内容 Hands On实训教程系列 HTML标签 3 在HTML中 标记可以编写注释文字 Hello Hello World Hands On实训教程系列 HTML基本元素 所有的文件都应该在此标签中 在这个标签中还包括了两大标签 标记所建立的文件标题 标记所建立的文件主体 HTML HEAD BODY Hands On实训教程系列 HTML基本元素 1 在标签中放置关于HTML文件的信息 标题 编码方式
9、URL等 这些信息大部分是用于提供索引 辨认或其他应用 title元素的格式为 文件题目 title标明html文件的题目 它以窗口的名称显示出来 Hands On实训教程系列 HTML基本元素 2 meta标记用于描述不包含在标准HTML里的一些文档 信息 关键字和描述内容 页面的语言设置 避免页面中的乱码 强制性调用网络上的最新版本 meta NAME description CONTENT 该网页描述内容 meta HTTP EQUIV Pragma CONTENT no cache 简体中文 gb2312 GBK 繁体中文 big5 纯英文网页 iso 8859 1 简体中文 gb23
10、12 GBK 繁体中文 big5 纯英文网页 iso 8859 1 Hands On实训教程系列 HTML基本元素 标记为HTML文件的内容主体 可以利用各种HTML标记 控制网页显示内容的格 式 排版与效果 文件主体 Hands On实训教程系列 HTML基本元素 Hello World Hello World 网页背景色彩 网页背景色彩 网页背景图像 网页背景图像 为了使页面美丽大方 网页背景要尽量地浅 Hands On实训教程系列 HTML基本元素 1 标题元素有6种 分别为h1 h2 h6 用于表示文章 中的各种题目 标题号越小 字体越大 h1 黑体 特大字体 居中 上下各有两行空行
11、h2 黑体 大字体 上下各有一到两行空行 h3 黑体 斜体 大字体 左端微缩进 上下空行 h4 黑体 普通字体 比h3更多缩进 上边一空行 h5 黑体 斜体 与h4相同缩进 上边一空行 h6 黑体 与正文有相同缩进 上边一空行 Hands On实训教程系列 HTML基本元素 2 演示如下代码内容 hn的演示 H1 Hello World H2 Hello World H3 Hello World H4 Hello World H5 Hello World H6 Hello World Hands On实训教程系列 HTML基本元素 1 HTML文档中 可以将文本内容组合为多个段落 段落标记用于
12、标记段落的开始 段落标记并 非是必须的 或者 这是一个二级标题 段落一 段落二 Hands On实训教程系列 HTML基本元素 2 段落的align属性 可以设置段落的对齐方式 align的属性包括 左对齐 left 右对齐 right 居中对齐 center 两端对齐 justify 右边 左边 中间 Hands On实训教程系列 HTML特殊字符 1 小于号 和 符号加上特殊字符在Latin 1标准字符集里面的位置 编号 if a b then t 0 if a b then t 0 显示结果 显示结果 if a b then t 0 Hands On实训教程系列 HTML特殊字符 2 显
13、示样式说明字符实体字符编号 显示一个空格 大于 双引号 版权 注册商标 乘号 除号 1 2二分之一 Hands On实训教程系列 相关实践知识 1 确定在互联网中放置一张欢迎页面 思考页面的样式 以及布局 并在草稿纸上绘制草 图 书中草图如下 欢迎访问我的站点 图片图片 Hands On实训教程系列 相关实践知识 2 创建新的网页 在 开始 程序 附件 记事本 中 打开记事本 按照HTML语法键入HTML结构代码 欢迎访问我的网站 Hands On实训教程系列 相关实践知识 3 在标签中间加入内容 整体代码 如下 欢迎访问我的网站 欢迎访问我的网站 翰子昂教育发展有限公司 Hands On实训
14、教程系列 相关实践知识 4 打开另存为对话框 另存文件 在 文件名 框中输入Web页的名称 注意文件名 必须以 htm或 html为扩展名 按如下目录结构组织文件 welcome welcome images images welcome htm welcome gif Hands On实训教程系列 相关实践知识 5 在代码中改写图片路径 欢迎访问我的网站 欢迎访问我的网站 翰子昂教育发展有限公司 Hands On实训教程系列 相关实践知识 6 浏览器中预览效果 Hands On实训教程系列 总结 本章通过一个欢迎的网页练习 掌握了开发简单 HTML的过程 了解了因特网和HTML的相关知识 掌握了HTML的文档结构和HTML的一些基本元素 了解了HTML特殊字符的书写方式 Hands On实训教程系列 作业 课后作业
