Your SlideShare is downloading. ×
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,194
views

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