IntroductiontoHTML5.pptxVIP

Introduction to HTML5OutlineHTML OverviewLayout in HTML Using TableHTML Layout Using CSSJavaScriptDOMJavaScript on DOM ManipulationAJAXJavaScript DebuggingInput Event Handling in JavaScriptHTML5 Video ElementHTML OverviewTag languageMost element in pair html…/htmlFormat tag_name key=value key=valuetext/tag_nameHello word samplehtmlheadtitlethe title/title/headbodyHello word/body/htmlReference: /specs/web-apps/current-work/multipage//specs/web-apps/current-work/multipage/Layout in HTML using Tabletable: tabletr: rowtc:cellAttributes:WidthHeightborderLayout using CSSCSS: Cascading Styling Sheet CSS Format: selector {attrib:value}Attrib:PositionBorderReference: /css//css/JavaScriptA C-like scripting language to be used with HTMLCan be written to response to webpage user eventCan change HTML dynamicallyReference: /js/index.asp/js/index.aspAdditional readings: Jquery, JSONDOMDocument Object ModelMostly a Tree Representation of HTML pageJavaScript on DOM ManipulationJavaScript Can Manipulate DOM to Generate Dynamic WebpageAdding ChildVar new_video=document.createElement(video);document.getElementById(right_panel).appendChild(new_video);Remove Childdocument.getElementById(right_panel).removeChild(document.getElementById(right_node));AJAXJavascript to Initiate HTTP RequestXMLHttpRequest?Reference: /ajax/ajax_intro.asp/ajax/ajax_intro.aspJavaScript DebuggingChrome ?Ctrl-shift-J (manu-tool-javascript)Input Event Handling in JavaScriptHook Message Callback Functionif(document.addEventListener) { document.addEventListener(keydown, keydown, false); } else if(document.attachEvent) { document.attachEvent(keydown, keydown); } else { document.onkeydown=keydown; }Getting key pressede.keyCodeHTML5 Video ElementvideoAttrib:SrcWidthHeightbgColorFunctionsPlayPause