1 HTML第一课 - 认识Web语言

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第一章,Web,语言,教师：黄成,T,：,13980860112,Web,服务器,My Playlist,Kickn,Tunes,BT-Satellite:,nice downbeat tune.,.,互联网,你使用,HyperText,Markup,Language(HTML,),制作网页，并把它们放到服务器上。,网页上的,HTML,告诉浏览器如何显示你的网页。并且你的网页可以在,PDA,或者手机上显示。甚至可以被浏览器用声音读出来，或放大显示。,有无数的,PC,机或者其它设备使用浏览器连接到互联网。,从大范围看,我需要,lounge.htm,找到，发给你,服务器存放,HTML,文件、图片、声音，以及其它文件。,服务器就是一台连接到,Internet,上的计算机，服务器随时都在等待接收用户请求。,浏览器发出请求：,HTML,页面，或者其它资源，像图片这些。,Web,服务器能干些什么,浏览器能干些什么,Web,服务器,服务器提供网页并将它们发送到浏览器,浏览器取得网页,并且，浏览器显示网页,浏览器怎么知道如何显示网页,Head First Lounge,Welcome to the Head First Lounge,Join us any evening for refreshing elixirs,conversation and maybe a game or two of,Dance,Dance,Revolution,.,Wireless access is always provided;BYOWS(Bring your own web server).,Directions,Youll find us right in the center of downtown,Webville,.Come join us!,总体印象,HTML,A,B,C,D,E,F,G,A,B,C,D,E,F,G,问题：,HTML,就是一大堆放在文本周围的标记？,浏览器如何显示,HTML,？,文档里有很多缩进和空格，但是我们在网页上没有看见这些缩进和空格？,为什么需要,标记？,如何识别一个文件是,HTML,文件？,标记看起来很笨拙，为什么不使用,Word,文档格式。,如何写注释,Head First Lounge,Welcome to the Head First Lounge,Join us any evening for refreshing elixirs,conversation and maybe a game or,two of,Dance,Dance,Revolution,.,Wireless access is always provided;,BYOWS(Bring your own web server).,Directions,Youll find us right in the center of,downtown,Webville,.Come join us!,House Blend,$1.49,A smooth,mild blend of coffees from Mexico,Bolivia,and Guatemala.,Mocha Cafe Latte,$2.35,Espresso,steamed milk and chocolate syrup.,Cappuccino,$1.89,A mixture of espresso,steamed milk and foam.,Chai,Tea,$1.85,A spicy drink made with black tea,spices,milk and honey.,我们要为咖啡店写这样一个,HTML,网页,用,notepad,新建一个,HTML,文档,Windows,系统里，显示文件扩展名,问题：,为什么使用简单文本编辑器，,Dreamweaver,FrontPage and,GoLive,怎么样,？,应该使用哪个浏览器：,Internet Explorer,Firefox,Opera,Safari,？,我在自己的电脑上做好了网页，如何在因特网上浏览它们？,用,notepad,写,HTML,网页,将前面的所提到的内容输入：,Starbuzz,Coffee Beverages,House Blend,$1.49,A smooth,mild blend of coffees from Mexico,Bolivia and Guatemala.,Mocha Cafe Latte,$2.35,Espresso,steamed milk and chocolate syrup.,Cappuccino,$1.89,A mixture of espresso,steamed milk and foam.,Chai,Tea,$1.85,A spicy drink made with black tea,spices,milk and honey.,保存写好的网页,新建文件夹,所有文件,在浏览器中查看网页,通过浏览器的文件菜单打开，或双击刚才保存的文件。,Starbuzz,Coffee Beverages,House Blend,$1.49,A smooth,mild blend of coffees from Mexico,Bolivia,and Guatemala.,Mocha Cafe Latte,$2.35,Espresso,steamed milk and chocolate syrup.,Cappuccino,$1.89,A mixture of espresso,steamed milk and foam.,Chai,Tea,$1.85,A spicy drink made with black tea,spices,milk and,honey.,加上标签,加上剩下的标签,Starbuzz,Coffee,.,.,.,Body,部分是网页的主体，包含所有内容及其结构,再一次测试,已经有了标题,通过文件菜单打开或单击刷新按钮,标签解剖,Starbuzz,Coffee Beverages,通常在部分内容周围添加标记。这里我们使用标记告诉浏览器，这段文字是最高级标题,(,即一级标题,),标题开始的标记,标题结束的标记,元素,标记匹配,用包围文本的成对标记告诉浏览器网页的结构。,记住：,元素,=,开始标记,+,内容,+,结束标记,问题：,匹配标记不需要放在同一行？,为什么结束标记必须有,”,/”,符号？,我发现某些页中的,HTML,有时没有用来匹配开始标记的结束标记。,是怎么回事啊？是不是忘记了写结束标记？,一个元素是开始标记,+,内容,+,结束标记，不能在标记中嵌入标记吗？就像头部和主体都在,标记内？,练习,为,Starbuzz,咖啡馆网站添加,mission.htm,页面,打开,notepad,把,HTML,内容输入进去，并保存为“,mission.htm,”,，放到和“,index.htm,”,同一个文件夹下。,做完以上工作后，用浏览器打开“,mission.htm,”,，,做下一步前检查你的工作,嗯，我们已经做好了网页的结构，现在要集中精力改善它的外观。,认识样式元素,Starbuzz,Coffee,Starbuzz,Coffee Beverages,House Blend,$1.49,A smooth,mild blend of coffees from Mexico,Bolivia and Guatemala.,Mocha,Caffe,Latte,$2.35,Espresso,steamed milk and chocolate syrup.,Cappuccino,$1.89,A mixture of espresso,steamed milk and milk foam.,Chai,Tea,$1.85,A spicy drink made with black tea,spices,milk and honey.,指定网页样式,元素放置在,HTML,的头部中,与其它元素一样，,元素有开始,和结束标记,Style,属性,给,Starbuzz,添加样式,body,background-color:#d2b48c;,margin-left:20%;,margin-right:20%;,border:1px dotted gray;,padding:10px,10px,10px,10px,;,font-family:sans-serif;,CSS,使用一种和,HTML,截然不同的语法,问题：,CSS,看起来和,HTML,完全不同，为什么需要两种语言呢？,#b2b48c,看起来不像一种颜色，它是土黄色？,为什么,CSS,规则前边都有个“,body”,？它是什么意思？,练习,使用相同的样式更新你的“,mission.htm,”,页面,要点：,HTML,和,CSS,是用来创建网页的语言。,Web,服务器存储并提供,HTML,和,CSS,创建的网页。浏览器接收网页并基于,HTML,和,CSS,显示其中的内容。,HTML,是,(,HyperText,Markup Language),的缩写，用来结构化网页。,CSS,是,(Cascading Style Sheet),的缩写，用来控制,HTML,的外观。,我们使用,HTML,来标记内容，用标记提供结构。我们称成对的标记和它们之间的内容为元素。,一个元素由三个部分组成：开始标记,+,内容,+,结束标记。有些元素例外,开始标记可以拥有属性。如,type,、,align,。,结束标记有个,/,，用来区别于开始标记。,网页通常应该有一个,元素，并伴随着一个,元素和一个,元素。,网页信息来源于,元素。,写进,元素的内容就是在浏览器中所能看见的东西。,浏览器忽略大多数空白。,通过在,元素中输入,CSS,规则，给,HTML,网页添加,CSS,。,在,HTML,中用,CSS,指定每个元素的样式。,