HTML第一课-认识Web语言.ppt

第一章Web语言 教师 黄成T 13980860112 Web服务器 MyPlaylist Kick nTunes BT Satellite nicedownbeattune 互联网 你使用HyperTextMarkupLanguage HTML 制作网页 并把它们放到服务器上 网页上的HTML告诉浏览器如何显示你的网页 并且你的网页可以在PDA或者手机上显示 甚至可以被浏览器用声音读出来 或放大显示 有无数的PC机或者其它设备使用浏览器连接到互联网 从大范围看 我需要lounge htm 找到 发给你 服务器存放HTML文件 图片 声音 以及其它文件 服务器就是一台连接到Internet上的计算机 服务器随时都在等待接收用户请求 浏览器发出请求 HTML页面 或者其它资源 像图片这些 Web服务器能干些什么 浏览器能干些什么 Web服务器 服务器提供网页并将它们发送到浏览器 浏览器取得网页 并且 浏览器显示网页 HeadFirstLoungeWelcometotheHeadFirstLoungeJoinusanyeveningforrefreshingelixirs conversationandmaybeagameortwoofDanceDanceRevolution Wirelessaccessisalwaysprovided BYOWS Bringyourownwebserver DirectionsYou llfindusrightinthecenterofdowntownWebville Comejoinus 总体印象 HTML A B C D E F G A B C D E F G 问题 HTML就是一大堆放在文本周围的标记 浏览器如何显示HTML 文档里有很多缩进和空格 但是我们在网页上没有看见这些缩进和空格 为什么需要标记 如何识别一个文件是HTML文件 标记看起来很笨拙 为什么不使用Word文档格式 如何写注释 HeadFirstLoungeWelcometotheHeadFirstLoungeJoinusanyeveningforrefreshingelixirs conversationandmaybeagameortwoofDanceDanceRevolution Wirelessaccessisalwaysprovided BYOWS Bringyourownwebserver DirectionsYou llfindusrightinthecenterofdowntownWebville Comejoinus HouseBlend 1 49Asmooth mildblendofcoffeesfromMexico BoliviaandGuatemala MochaCafeLatte 2 35Espresso steamedmilkandchocolatesyrup Cappuccino 1 89Amixtureofespresso steamedmilkandfoam ChaiTea 1 85Aspicydrinkmadewithblacktea spices milkandhoney 我们要为咖啡店写这样一个HTML网页 用notepad新建一个HTML文档 Windows系统里 显示文件扩展名 问题 为什么使用简单文本编辑器 Dreamweaver FrontPageandGoLive怎么样 应该使用哪个浏览器 InternetExplorer Firefox Opera Safari 我在自己的电脑上做好了网页 如何在因特网上浏览它们 用notepad写HTML网页 将前面的所提到的内容输入 StarbuzzCoffeeBeveragesHouseBlend 1 49Asmooth mildblendofcoffeesfromMexico BoliviaandGuatemala MochaCafeLatte 2 35Espresso steamedmilkandchocolatesyrup Cappuccino 1 89Amixtureofespresso steamedmilkandfoam ChaiTea 1 85Aspicydrinkmadewithblacktea spices milkandhoney 保存写好的网页 新建文件夹 所有文件 在浏览器中查看网页 通过浏览器的文件菜单打开 或双击刚才保存的文件 StarbuzzCoffeeBeveragesHouseBlend 1 49Asmooth mildblendofcoffeesfromMexico BoliviaandGuatemala MochaCafeLatte 2 35Espresso steamedmilkandchocolatesyrup Cappuccino 1 89Amixtureofespresso steamedmilkandfoam ChaiTea 1 85Aspicydrinkmadewithblacktea spices milkandhoney 加上标签 加上剩下的标签 StarbuzzCoffee Body部分是网页的主体 包含所有内容及其结构 再一次测试 已经有了标题 通过文件菜单打开或单击刷新按钮 标签解剖 用包围文本的成对标记告诉浏览器网页的结构 记住 元素 开始标记 内容 结束标记 问题 匹配标记不需要放在同一行 为什么结束标记必须有 符号 我发现某些页中的HTML有时没有用来匹配开始标记的结束标记 是怎么回事啊 是不是忘记了写结束标记 一个元素是开始标记 内容 结束标记 不能在标记中嵌入标记吗 就像头部和主体都在标记内 练习 为Starbuzz咖啡馆网站添加mission htm页面 打开notepad把HTML内容输入进去 并保存为 mission htm 放到和 index htm 同一个文件夹下 做完以上工作后 用浏览器打开 mission htm 做下一步前检查你的工作 嗯 我们已经做好了网页的结构 现在要集中精力改善它的外观 认识样式元素 StarbuzzCoffeeStarbuzzCoffeeBeveragesHouseBlend 1 49Asmooth mildblendofcoffeesfromMexico BoliviaandGuatemala MochaCaffeLatte 2 35Espresso steamedmilkandchocolatesyrup Cappuccino 1 89Amixtureofespresso steamedmilkandmilkfoam ChaiTea 1 85Aspicydrinkmadewithblacktea spices milkandhoney 指定网页样式 元素放置在HTML的头部中 与其它元素一样 元素有开始和结束标记 Style属性 给Starbuzz添加样式 body background color d2b48c margin left 20 margin right 20 border 1pxdottedgray padding 10px10px10px10px font family sans serif CSS使用一种和HTML截然不同的语法 问题 CSS看起来和HTML完全不同 为什么需要两种语言呢 b2b48c看起来不像一种颜色 它是土黄色 为什么CSS规则前边都有个 body 它是什么意思 练习 使用相同的样式更新你的 mission htm 页面 要点 HTML和CSS是用来创建网页的语言 Web服务器存储并提供HTML和CSS创建的网页 浏览器接收网页并基于HTML和CSS显示其中的内容 HTML是 HyperTextMarkupLanguage 的缩写 用来结构化网页 CSS是 CascadingStyleSheet 的缩写 用来控制HTML的外观 我们使用HTML来标记内容 用标记提供结构 我们称成对的标记和它们之间的内容为元素 一个元素由三个部分组成 开始标记 内容 结束标记 有些元素例外开始标记可以拥有属性 如type align 结束标记有个 用来区别于开始标记 网页通常应该有一个元素 并伴随着一个元素和一个元素 网页信息来源于元素 写进元素的内容就是在浏览器中所能看见的东西 浏览器忽略大多数空白 通过在元素中输入CSS规则 给HTML网页添加CSS 在HTML中用CSS指定每个元素的样式