Your SlideShare is downloading. ×
0
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Css, xhtml, javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css, xhtml, javascript

4,248

Published on

A summary on xhtml, css and javascript.

A summary on xhtml, css and javascript.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,248
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
162
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.The image above shows the general outline of a fixed-width website layout. The components inside are fixed to 520, 200 and 200 pixels, respectively. A 960-pixel width has become the standard in modern Web design because most website users are assumed to browse in 1024×768 resolution or higher.
  • Transcript

    • 1. XHTML, CSS, Javascript<br />TrầnKhảiHoàng<br />
    • 2. Website development process<br />HTML vs XHTML<br />CSS<br />Javascript<br />Content<br />
    • 3. Content<br />I want…<br />I need …<br />Customer<br />Website specification<br />Tester<br />Analyst<br />Sitemap<br />Web developer<br />Designer<br />Wireframe<br />Website<br />Page design<br />Website development process<br />Template<br />
    • 4. XHTML=EXtensibleHyperText Markup Language<br />XHTML is almost identical to HTML 4.01<br />XHTML is a stricter and XHTML is a W3C Recommendation cleaner version of HTML<br />XHTML is HTML defined as an XML application<br />What is XHTML ?<br />
    • 5. XHTML elements must be properly nested<br /><b><i>This text is bold and italic</b></i><br /><b><i>This text is bold and italic</i></b><br />XHTML elements must always be closed<br /><p>This is a paragraph<br /><p>This is a paragraph</p><br />XHTML elements must be in lowercase<br /><BODY> a website</BODY><br /> <body> a website </body><br />HTML vs XHTML (1)<br />
    • 6. Empty elements must also be Closed<br />A break: <br> <br />A break: <br/><br /> All attribute value must be quoted<br /><imgsrc=moutain.jpg/><br /><imgsrc=“moutain.jpg”/><br />XHTML documents must have one root element<br /><html><head>…</head</html>><body>…</body><br /> <html><head>…</head><body>…</body></html><br /><!DOCTYPE> Is Mandatory<br />HTML vs XHTML (2)<br />
    • 7. XHTML is easier to maintain<br />XHTML is XSL ready<br />XHTML is ready for query using DOM, Xpath<br />XHTML is easier to teach and to learn<br />XHTML is ready for the future<br />Why XHTML ?<br />
    • 8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><br /><head> <br /><title>Title here</title> <br /><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><br /><!-- other head information here --> <br /></head> <br /><body> <br /><!-- other body information here --> <br /></body> <br /></html><br />XHTML basic structure<br />
    • 9. XHTML 1.0 Strict<br /> This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br />XHTML 1.0 Transitional<br /> This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br />XHTML 1.0 Frameset<br /> This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><br />!DOCTYPE<br />
    • 10. Validation helps to find errors in XHTML code<br />Validated XHTML prevents website bugs<br />How to validate ?<br />http://validator.w3.org/<br />Web developer add-on (Firefox, IE)<br />Validate XHTML<br />
    • 11. CSS = Cascading Style Sheet<br />CSS consists of rules to display, style and decorate HTML elements<br />Why CSS ?<br />Separate decoration from HTML markup (Ex : <b>,<font>,…)<br />Help web development faster<br />Easy to maintain and fix bugs<br />Easy to change website layout & interface<br />What is CSS ?<br />
    • 12. Total element width = width + left padding + right padding + left border + right border + left margin + right margin<br />Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin<br />IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared.<br />Box model<br />
    • 13. A fixed layout is a layout with a fixed width<br />Fixed layout<br />Pros : <br /><ul><li>Easy to create
    • 14. Width are the same in all browser
    • 15. No need min-width,</li></ul>max-width<br />Cons : <br /><ul><li>Additional spaces in high resolution
    • 16. Scrollbars when in low resolution</li></ul>Examples : <br />http://www.lebloe.com<br />http://www.floridaflourish.com<br />
    • 17. Fluid (liquid) layout is a layout that adjust to the user’s screen resolution<br />Fluid layout<br />Pros : <br /><ul><li>More use friendly
    • 18. No unused spaces
    • 19. Eliminate horizontal scrollbar</li></ul>Cons : <br /><ul><li>May look awful in some resolution
    • 20. Image, video may have multiple width
    • 21. Additional space while less content in large resolution</li></ul>Examples : <br />http://www.blossomgraphicdesign.com<br />
    • 22. CSS float allows element to be pushed to left or right so that other elements will wrap on it<br />Ex : img{ float:left;}<br />Float usually used for images and layout<br />To turn off other elements to wrap around float, use {clear:both} or clearfix (google it)<br />Floating element<br />
    • 23. Layout using float<br />
    • 24. Using {position} we can place an element anywhere on webpage<br />position : static;<br />position : fixed;<br />position : relative;<br />position : absolute;<br />Positioning element<br />
    • 25. Static position<br />static — The default positioning of all elements. Static elements remain in the normal page flow and do not move.<br />
    • 26. Fixed position<br />fixed — Element will be taken out of the normal flow of the page, and attach to viewable page edges<br />fixed element will stay visible even when the page is scrolled. <br />Internet Explorer 6 does not support fixed positioning without !DOCTYPE<br />
    • 27. Demo fixed element<br />PositionFixed.html<br />
    • 28. Relative position<br />relative — A relative element will be positioned according to its static place holder<br />relative element will have a place holder to mark its original place<br />
    • 29. Demo relative element<br />PositionRelative.html<br />
    • 30. Absolute position<br />absolute — An absolute-positioned element will be taken out of the normal flow of the page & placed according to its nearest relative-positioned parent.<br />By default, <body> will has position:relative;<br />
    • 31. Demo absolute position<br />AbsolutePosition.html<br />
    • 32. Overlap element<br />If 2 element are overlapped when displaying, z-index will be used to specify their orders<br />z-index can be positive or negative<br />Higer z-index will be in front of others<br />
    • 33. Demo overlap<br />PositionOverlap.html<br />
    • 34. A technique to replace text with image using CSS <br /><h1 class=“header"> Toosols online </h1><br />.header{<br />overflow:hidden;<br /> text-indent:-9999px;<br />background:url(logo.gif) no-repeat;<br />}<br />Image replacement<br />
    • 35. Sliding door<br />
    • 36. Rounded box<br />
    • 37. IE6 and below has many CSS bugs<br />Some bugs : <br />PNG transparency <br /> IE Box model<br />Double margin bug<br />No min/max width/height<br />Cross browser issue<br />
    • 38. Float left (right) element that has left (right) margin will have double margin<br />Demo : <br />Fix : <br />Add display:inline; to the floated element<br />Double margin bug<br />
    • 39. E6 ignores the min-height property and instead treats height as the minimum height<br />Demo : <br />Fix : <br /> /*For IE6*/ <br /> #container <br /> {min-height:200px; height:200px;} <br /> /*For all other browsers*/ <br /> html>body #container { height:auto;} <br />Min Height<br />
    • 40. 100% height doesn’t effect in IE6<br />Fix : <br />Specify a fixed height of its parent element. <br />Need element fill the full-length of your page, apply height:100%; to both the html and body elements<br />/*100% height of the parent element for IE6*/ <br /> #parent {height:500px;} <br /> #child {height:100%;} <br /> /*100% of the page length for IE6*/ <br /> html, body {height:100%;} <br /> #fullLength {height:100%;} <br />100% Height<br />
    • 41. Floated elements drop below their expected position when their total width exceeds the content’s width of its container. <br />Demo <br />Fix : <br />Wrap content in a fixed-width container large enough to accommodate the content, or remove the width from the static block.<br />Float Drops<br />
    • 42. Container will not wrap floated elements properly<br />Fix : <br />Add width & overflow : hidden to its container<br />Clear float<br />
    • 43. When text is next to a floated element. IE6 will add a 3px margin between the element and the text, even if none is specified<br />Fix : <br />When in IE6, apply margin-left : -3px for text<br />3px text jog bug<br />
    • 44. Identify IE6 to apply CSS or Js fix : <br />Using Conditional Comments For Internet Explorer<br />Use Javascript to identify IE6<br />Use IE 6 unsupported CSS Selectors<br />IE filter<br />
    • 45. Strategy to avoid IE issue :<br />Start working with an standard compliant browser (like Firefox)<br />Use the right DOCTYPE<br />Validate your code<br />Use CSS reset first<br />Use progressive enhancement<br />Way to fix : <br />Use IE filter<br />Use javascript framework<br />Use IE6 javascript fix<br />Use IE6 hack (not recommend)<br />How to overcome IE6 issue<br />
    • 46. A collection of common CSS for reuse<br />Framework can divide into : <br />reset <br />baseline<br />forms<br />typography<br />grid<br />Some framework : <br />Blue Print<br />YUI Grids<br />YAML ( Yet Another Multicolumn Layout)<br />CSS framework<br />
    • 47. Pros :<br />DRY (Don't repeat yourself)<br />Basic concept that makes it easy for other people to<br /> understand the style<br />Implicitly use coding/naming guidelines<br />Cons : <br />... that are not yours<br />You have to learn the framework<br />Possible semantical implications<br />Might offer too much<br />Pros and Cons<br />
    • 48. http://blueprintcss.googlecode.com<br />License: MIT<br />Based on the idea of splitting the width of apage into 24 columns (with 40px = 30px +10px margin each)<br />By default max-width 950px (24 * 40 -10)<br />No fluid layout possible (yet)<br />Introduce Blueprint<br />
    • 49. Invented in 1995, became ISO standard in 1998<br />Runs within a host environment (Web browser, adobe acrobat, …)<br />Javascript capable of : <br />Programming<br />React to events<br />DOM manipulation : read,write,modify HTML elements<br />Change CSS at runtime<br />Read, write cookies<br />Animation (with the help of some library)<br />Javascript<br />
    • 50. Mô hình quan hệ giữa các node<br />HTML DOM tree<br />
    • 51. Quan hệ giữa các node<br />HTMLDOM example<br />
    • 52. Lấy 1 node<br />Get an HTML DOM node<br /><ul><li>X.getElementById( id) :get element with provided id in X
    • 53. X.getElementByTagName( name) : get list of elements with provided tag name in X</li></ul>45<br />
    • 54. Thuộc tính 1 node<br />HTML DOM Node access<br /><ul><li>X.innerHTML : html text in X
    • 55. X.nodeName : node name of X
    • 56. X.parentNode: parent node
    • 57. X.childNodes: array of X children nodes
    • 58. X.attributes : array of X attributes
    • 59. X.firstChild : X’ first child node
    • 60. X.lastChild : X’ last chid node
    • 61. X.nextSibling : X next sibling node
    • 62. X.previousSibling : X previous sibling node</li></ul> X is an HTML DOM node<br />
    • 63. innerHTML vs outerHTML<br />innerHTMLvsouterHTML<br />outerHTML<br />a<br /><div> Hello <b>World</b> </div><br />innerHTML<br />
    • 64. Ví dụ innerHTML<br />HTML DOM traverse Example<br />
    • 65. Thêm, xóa 1 node<br />Add-remove nodes<br /><ul><li>X.appendChild ( Y) : add node Y into node X
    • 66. X.removeChild ( Y ) : remove node Y out of node X
    • 67. document.createTextNode(“Text”) : create a text node
    • 68. document.createElement(TagName) : create an element node</li></li></ul><li>Ví dụ <br />
    • 69. Làm việc với thuộc tính<br />Modify attributes<br /><ul><li>X.getAttribute(“Attribute name”) : Get an attribute value
    • 70. X.setAttribute(“Attribute name”,”Attribute value”) : Set attribute value
    • 71. X.removeAttribute(“Attribute name”) : Remove attribute</li></li></ul><li>Định dạng node<br />HTML Style object<br /><ul><li>Every element node has an style object that represent its CSS
    • 72. To change CSS style : </li></li></ul><li>Ví dụ <br />Style object example<br />
    • 73. Ví dụ<br />
    • 74. Thay đổi border, margin, padding<br />DOM Node properties<br />
    • 75. Thay đổi background<br />Style background<br />
    • 76. Thay đổi font<br />Style font<br />
    • 77. Objects<br />Everything in Javascript is object includes function<br />Object is simple name-value pairs, as seen in:<br />Dictionaries in Python<br />Hashes in Perl and Ruby<br />Hash tables in C and C++<br />HashMaps in Java<br />Associative arrays in PHP<br />Very common, versatile data structure<br />Name part is a string; value can be anything<br />
    • 78. varobj = {<br /> name: "Carrot",<br /> "for": "Max",<br /> details: {<br /> color: "orange",<br /> size: 12<br /> }<br />}<br />> obj.details.color<br /> orange<br />> obj["details"]["size"]<br /> 12<br />Object example<br />
    • 79. You can iterate over the keys of an object:<br />varobj = { 'name': 'Simon', 'age': 25};<br />for (varattr in obj) {<br /> print (attr + ' = ' + obj[attr]);<br />}<br />for (varattr in obj)<br />
    • 80. function makePerson(first, last) {<br /> return {<br /> first: first,<br /> last: last<br /> }<br />}<br />function personFullName(person) {<br /> return person.first + ' ' + person.last;<br />}<br />function personFullNameReversed(person) {<br /> return person.last + ', ' + person.first<br />}<br />Function return object(1)<br />
    • 81. > s = makePerson("Simon", "Willison");<br />> personFullName(s)<br />Simon Willison<br />> personFullNameReversed(s)<br />Willison, Simon<br /> Surely we can attach functions to the objects themselves?<br />Function returns object (2)<br />
    • 82. function makePerson(first, last) {<br /> return {<br /> first: first,<br /> last: last,<br />fullName: function() {<br /> return this.first + ' ' + this.last;<br /> },<br />fullNameReversed: function() {<br /> return this.last + ', ' + this.first;<br /> }<br /> }<br />}<br />Object methods<br />
    • 83. > s = makePerson("Simon", "Willison")<br />> s.fullName()<br />Simon Willison<br />> s.fullNameReversed()<br />Willison, Simon<br />Using object methods<br />
    • 84. function Person(first, last) {<br />this.first = first;<br />this.last = last;<br />this.fullName = function() {<br /> return this.first + ' ' + this.last;<br /> }<br />this.fullNameReversed = function() {<br /> return this.last + ', ' + this.first;<br /> }<br />}<br />var s = new Person("Simon", "Willison");<br />Function constructor<br />
    • 85. function Person(first, last) {<br />this.first = first;<br />this.last = last;<br />}<br />Person.prototype.fullName = <br /> function() {<br /> return this.first + ' ' + this.last;<br />}<br />Person.prototype.fullNameReversed = <br /> function() {<br /> return this.last + ', ' + this.first;<br />}<br />Prototype<br />
    • 86. > var s = "Simon";<br />> s.reversed()<br />TypeError: s.reversed is not a function<br />> String.prototype.reversed = function() {<br />var r = '';<br /> for (vari = this.length - 1; i >= 0; i--){<br /> r += this[i];<br /> }<br /> return r;<br />}<br />> s.reversed()<br />nomiS<br />> "This can now be reversed".reversed()<br />desrevereb won nacsihT<br />Extending core objects<br />
    • 87. Job done faster<br />Overcome cross-browser issue in Javascript + CSS<br />Programming easier<br />Most important : don’t invent the wheel<br />Some javascriptframwork : <br />jQuery<br />Prototype<br />YUI<br />Dojo<br />Extjs<br />Mootools<br />Why javascript framework ?<br />
    • 88.
    • 89. jQuery is a fast JavaScript Library to simplify: <br />HTML document traversing,<br />Event handling<br />Animating<br />Ajax interactions for rapid web development. <br />
    • 90. Demo – Table strips,filter…<br />
    • 91. Kham khảo<br />Reference<br /><ul><li>XHTML Tutorial http://www.w3schools.com/xhtml/default.asp
    • 92. CSS Tutorial http://www.w3schools.com/css/
    • 93. Quirk mode http://www.quirksmode.org/
    • 94. Ultimate IE6 bug http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
    • 95. HTML vs XHTML http://www.webstandards.org/learn/articles/askw3c/oct2003/
    • 96. Fixed vs Fluid layout http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
    • 97. Blue print framworkhttp://www.blueprintcss.org/
    • 98. CSS Frameworks: An introduction Horst Gutmann</li></li></ul><li>Reference<br /><ul><li>Javascript Tutorial : http://www.w3schools.com/JS/default.asp
    • 99. Object Oriented JavaScript Mike Girouard — AJAXWorld 2009
    • 100. HTML DOM Tutorial : http://www.w3schools.com/HTMLDOM/default.asp
    • 101. Javascript & DOM example : http://www.w3schools.com/JS/js_ex_dom.asp
    • 102. HTML DOM Style Object : http://www.w3schools.com/jsref/dom_obj_style.asp
    • 103. JQuerySCOTT@THERYANSPLACE.COM MAY 2008
    • 104. JavaScript Libraries, Ajax Experience - October 2007,John Resig (ejohn.org)
    • 105. A (Re)-Introduction to JavaScriptSimonWillisonETech,
    • 106. jqueryhttp://jquery.org
    • 107. LearningJQuery_v1.3 – Jonathan Chaffer, Pack publishing</li>

    ×