HTML5基础.ppt

《HTML5基础.ppt》由会员分享，可在线阅读，更多相关《HTML5基础.ppt（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、揭开神秘的面纱揭开神秘的面纱网页基础HTML5的应用的应用lHTML5游戏：l割绳子游戏；l愤怒的小鸟；l坦克大战；l雷电5（2011html5大赛1等奖）：http:/ lWeb APP应用：lCSS3时钟（2011html5大赛2等奖）：http:/ l日记本：http:/ l超级绚丽的html5页面：lhttp:/bit.ly/Kcd5RTWhats webpage?Some concept about webpagelSGMLlW3Clweb serverlbrowserTask1：Creat the Starbuzz Web page。lCreate an HTML file usi

2、ng your favorite text editor.lType in the menu the Starbuzz CEO wrote on the napkin.lSave the file as“index.html”.lOpen the file“index.html”in your favorite browser.lWatch the magic happen.the CEO wrote these.Result:You may see uh.unsatisfying!Its so ugly!Job:Add structure for the content.Tags disse

3、cted:Whats Element?Element=Opening Tag+Content+Closing Tag.Exercise:Do you remember these tags？Task2:Create another page for the Starbuzz.the Starbuzz CEOwe need our company mission on a page,too.Grab the missionstatement off one of our coffee cups and create another page for it.the company missionS

4、tarbuzz CoffeesMissionTo provide all thecaffeine that youneed to power yourlife.Just drink it.1.Write the HTML for the new“mission.html”page.2.Type in your HTML using a text editor,and save it as“mission.html”in the same folder as your“index.html”file.3.Once youve done that,open“mission.html”in your

5、 browser.4.Check your work at the end of the chapter before moving on.Meet the style element where？function？Giving Starbuzz some style.llbody lbackground-color:#d2b48c;lmargin-left:20%;lmargin-right:20%;lborder:1px dotted gray;lpadding:10px 10px 10px 10px;lfont-family:sans-serif;llreload your“index.

6、html”file.Who does what？lbackground-color:#d2b48c;lmargin-left:20%;lmargin-right:20%;lborder:1px dotted gray;lpadding:10px 10px 10px 10px;lfont-family:sans-serif;Defines the font to use for text.Defines a border around the body that is dotted and the color gray.Sets the left and right margins to tak

7、e up 20%of the page each.Sets the background color to a tan color.Creates some padding around the body of the page.Do you have any questions?Bullet pointslHTML and CSS are the languages we use to create web pages.lWeb servers store and serve Web pages,which are created from HTML and CSS.Browsers ret

8、rieve pages and render their content based on the HTML and CSS.lHTML is an abbreviation for HyperText Markup Language and is used to structure your web page.Bullet pointslCSS is an abbreviation for Cascading Style Sheets,and is used to control the presentation of your HTML.lUsing HTML we mark up con

9、tent with tags to provide structure.We call matching tags,and their enclosed content,elements.lAn element is composed of three parts:an opening tag,content and a closing tag.There are a few elements,like,that are an exception to this rule.lOpening tags can have attributes.Weve seen a couple:type and

10、 align.Bullet pointslClosing tags have a“/”after the left angle bracket,in front of the tag name to distinguish them as closing tags.lYour pages should always have an element along with a element and a element.lInformation about the Web page goes into the element.lWhat you put into the element is wh

11、at you see in the browser.Bullet pointslMost whitespace(tabs,returns,spaces)are ignored by the browser,but you can use these to make your HTML more readable(to you).lCSS can be added to an HTML Web page by putting the CSS rules inside the element.The element should always be inside the element.lYou

12、specify the style characteristics of the elements in your HTML using CSS.Task3：Add links for the“index.htm”file.Understanding attributeslAttributes give you a way to specify additional information about an element.The type attribute specifies which style language were using,in this case CSS.The href attribute tells us the destination of a hyperlink.The src attribute specifies the filename of the picture an img tag displays.Exercise：