Css, xhtml, javascript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Css, xhtml, javascript

on

  • 4,497 views

A summary on xhtml, css and javascript.

A summary on xhtml, css and javascript.

Statistics

Views

Total Views
4,497
Views on SlideShare
4,496
Embed Views
1

Actions

Likes
1
Downloads
154
Comments
0

1 Embed 1

http://192.168.0.108 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.

Css, xhtml, javascript Presentation 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