HTML语言与网页设计幻灯片.ppt

HTML语言与网页设计 ——HTML基础 学习目标 理解网页的基本原理。 掌握HTML语言的语法规则，掌握基本的网页标记符和属性。 了解网页制作的常用工具。 Part 1 网页的基本概念 Internet 与 WWW 通俗地讲，Internet 就是许多功能不同的计算机通过线路连接起来组成的一个世界范围的网络。 Internet 与 WWW Internet 提供的服务： WWW服务（网上冲浪） 电子邮件服务（Email） 网上传呼（OICQ） 文件传输（FTP） 网络游戏（如 MUD、联网对战） WWW 与浏览器 WWW是由遍布在 Internet 上的称为 Web 服务器的计算机组成，它将不同的信息资源有机地组织到一起，通过浏览器进行浏览。 WWW 与浏览器 网站与主页 在逻辑上可视为一个整体的一系列页面的有机集合称为网站（Web Site或Site）。 作为一个组织或个人在 WWW（或其他Web）上开始点的页面称为主页（Homepage）。 HTML 的基本工作原理 HTML(Hypertext Markup Language) 是一种规范，一种标准，它通过标记符（tag）来标记要显示的网页的各个部分。 HTML的基本工作原理 通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定内容的格式。浏览器按顺序阅读网页文件（HTML文件），然后根据内容周围的HTML标记符解释和显示各种内容。 HTML的基本工作原理 演示——HTML的基本原理 Part 2 HTML基础 标记符概述 在 HTML 中，所有的标记符都用尖括号括起来。例如，html、a。 HTML 标记符是不区分大小写的。html、Html和HTML没有区别。 标记符概述 绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。某些标记符，例如BR，只要求单一标记符号。 开始标记符与结束标记符的区别在于：结束标记符多一个斜杠“/”（不是反斜杠“\”！） 标记符属性 属性是用来描述对象特征的特性。例如，一个人的身高、体重就是人这个对象的属性。 在HTML中，所有的属性都放置在开始标记符的尖括号里，多个属性之间用空格分开，通常也不区分大小写。 标记符属性 例如，可以用字体标记符和字号属性指定文字的大小。FONT SIZE=1本行字将以较小字体显示。/FONT 演示——属性的作用 Web页的基本结构 一个 Web 页实际上对应于一个 HTML 文件，HTML 文件以 .htm 或 .html 为扩展名。 最基本的HTML文档包括：HTML标记HTML/HTML、首部标记HEAD和/HEAD、以及正文BODY/BODY。 HTML标记符 HTML和/HTML 是Web页的第一个和最后一个标记符，Web 页的其他所有内容都位于这两个标记符之间。这两个标记告诉浏览器或其他阅读该页的程序，此文件为一个Web页。 HEAD标记符 首部标记HEAD和/HEAD位于 Web 页的开头，其中不包括 Web 页的任何实际内容，而是提供一些与 Web 页有关的特定信息。 HEAD标记符 首部标记中的内容也用相应的标记符括起来。例如，样式表（CSS）定义位于STYLE和/STYLE之间；脚本定义位于SCRIPT/SCRIPT之间。 TITLE 标记符 在首部标记符中，最基本、最常用的标记符是标题标记TITLE和/TITLE，用于定义网页的标题。 当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。 演示——TITLE的作用 BODY标记符 正文标记符BODY和/BODY包含Web 页的内容。文字、图形、链接以及其他HTML元素都位于该标记符内。 正文标记符中的文字，如果没有其他标记符修饰，则将以无格式的形式显示。 小节 综上所述，一个不包含任何内容的基本 Web 页文件如下所示： HTML HEADTITLE/TITLE/HEAD BODY/BODY /HTML 背景颜色 在BODY标记符中使用BGCOLOR属性可以为网页设置背景颜色。 在 HTML 中，除了使用颜色名称以外，还可以用格式 #RRGGBB 来表示颜色。 演示——设置网页背景颜色 背景图案 使用 BODY 标记符的 BACKGROUND 属性可以设置背景图案。HTML语句为： BODY BACKGROUND = “image.gif” 演示——设置网页背景图案 字符和链接的颜色 设置正文和链接颜色时，可以使用 BODY 标记符的 TEXT、LINK、VLINK 和 ALINK 属性。 其中，TEXT 属性用于设置正文的颜色；LINK 属性用于设置未被访问的链接的颜色；VLINK 用于设置已被访问过的链接的颜色；ALINK 用于设置活动链接