Css, xhtml, javascript

XHTML, CSS, JavascriptTrầnKhảiHoàng

Website development processHTML vs XHTMLCSSJavascriptContent

ContentI want…I need …CustomerWebsite specificationTesterAnalystSitemapWeb developerDesignerWireframeWebsitePage designWebsite development processTemplate

XHTML=EXtensibleHyperText Markup LanguageXHTML is almost identical to HTML 4.01XHTML is a stricter and XHTML is a W3C Recommendation cleaner version of HTMLXHTML is HTML defined as an XML applicationWhat is XHTML ?

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)

Empty elements must also be ClosedA 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 MandatoryHTML vs XHTML (2)

XHTML is easier to maintainXHTML is XSL readyXHTML is ready for query using DOM, XpathXHTML is easier to teach and to learnXHTML is ready for the futureWhy XHTML ?

<!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" /> </head> <body>  </body> </html>XHTML basic structure

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

Validation helps to find errors in XHTML codeValidated XHTML prevents website bugsHow to validate ?http://validator.w3.org/Web developer add-on (Firefox, IE)Validate XHTML

CSS = Cascading Style SheetCSS consists of rules to display, style and decorate HTML elementsWhy CSS ?Separate decoration from HTML markup (Ex : <b>,<font>,…)Help web development fasterEasy to maintain and fix bugsEasy to change website layout & interfaceWhat is CSS ?

Total element width = width + left padding + right padding + left border + right border + left margin + right marginTotal element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom marginIE includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared.Box model

A fixed layout is a layout with a fixed widthFixed layoutPros : Easy to create

Width are the same in all browser

No need min-width,max-widthCons : Additional spaces in high resolution

Scrollbars when in low resolutionExamples : http://www.lebloe.comhttp://www.floridaflourish.com

Fluid (liquid) layout is a layout that adjust to the user’s screen resolutionFluid layoutPros : More use friendly

Eliminate horizontal scrollbarCons : May look awful in some resolution

Image, video may have multiple width

Additional space while less content in large resolutionExamples : http://www.blossomgraphicdesign.com

CSS float allows element to be pushed to left or right so that other elements will wrap on itEx : img{ float:left;}Float usually used for images and layoutTo turn off other elements to wrap around float, use {clear:both} or clearfix (google it)Floating element

Using {position} we can place an element anywhere on webpageposition : static;position : fixed;position : relative;position : absolute;Positioning element

Static positionstatic — The default positioning of all elements. Static elements remain in the normal page flow and do not move.

Fixed positionfixed — Element will be taken out of the normal flow of the page, and attach to viewable page edgesfixed element will stay visible even when the page is scrolled. Internet Explorer 6 does not support fixed positioning without !DOCTYPE

Demo fixed elementPositionFixed.html

Relative positionrelative — A relative element will be positioned according to its static place holderrelative element will have a place holder to mark its original place

Demo relative elementPositionRelative.html

Absolute positionabsolute — 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;

Demo absolute positionAbsolutePosition.html

Overlap elementIf 2 element are overlapped when displaying, z-index will be used to specify their ordersz-index can be positive or negativeHiger z-index will be in front of others

Demo overlapPositionOverlap.html

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

IE6 and below has many CSS bugsSome bugs : PNG transparency IE Box modelDouble margin bugNo min/max width/heightCross browser issue

Float left (right) element that has left (right) margin will have double marginDemo : Fix : Add display:inline; to the floated elementDouble margin bug

E6 ignores the min-height property and instead treats height as the minimum heightDemo : Fix : /*For IE6*/ #container {min-height:200px; height:200px;} /*For all other browsers*/ html>body #container { height:auto;} Min Height

100% height doesn’t effect in IE6Fix : 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

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

Container will not wrap floated elements properlyFix : Add width & overflow : hidden to its containerClear float

When text is next to a floated element. IE6 will add a 3px margin between the element and the text, even if none is specifiedFix : When in IE6, apply margin-left : -3px for text3px text jog bug

Identify IE6 to apply CSS or Js fix : Using Conditional Comments For Internet ExplorerUse Javascript to identify IE6Use IE 6 unsupported CSS SelectorsIE filter

Strategy to avoid IE issue :Start working with an standard compliant browser (like Firefox)Use the right DOCTYPEValidate your codeUse CSS reset firstUse progressive enhancementWay to fix : Use IE filterUse javascript frameworkUse IE6 javascript fixUse IE6 hack (not recommend)How to overcome IE6 issue

A collection of common CSS for reuseFramework can divide into : reset baselineformstypographygridSome framework : Blue PrintYUI GridsYAML ( Yet Another Multicolumn Layout)CSS framework

Pros :DRY (Don't repeat yourself)Basic concept that makes it easy for other people to understand the styleImplicitly use coding/naming guidelinesCons : ... that are not yoursYou have to learn the frameworkPossible semantical implicationsMight offer too muchPros and Cons

http://blueprintcss.googlecode.comLicense: MITBased 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

Invented in 1995, became ISO standard in 1998Runs within a host environment (Web browser, adobe acrobat, …)Javascript capable of : ProgrammingReact to eventsDOM manipulation : read,write,modify HTML elementsChange CSS at runtimeRead, write cookiesAnimation (with the help of some library)Javascript

Mô hình quan hệ giữa các nodeHTML DOM tree

Quan hệ giữa các nodeHTMLDOM example

Lấy 1 nodeGet an HTML DOM nodeX.getElementById( id) :get element with provided id in X

X.getElementByTagName( name) : get list of elements with provided tag name in X45

Thuộc tính 1 nodeHTML DOM Node accessX.innerHTML : html text in X

X.childNodes: array of X children nodes

X.attributes : array of X attributes

X.firstChild : X’ first child node

X.lastChild : X’ last chid node

X.nextSibling : X next sibling node

X.previousSibling : X previous sibling node X is an HTML DOM node

innerHTML vs outerHTMLinnerHTMLvsouterHTMLouterHTMLa<div> Hello <b>World</b> </div>innerHTML

Ví dụ innerHTMLHTML DOM traverse Example

Thêm, xóa 1 nodeAdd-remove nodesX.appendChild ( Y) : add node Y into node X

X.removeChild ( Y ) : remove node Y out of node X

document.createTextNode(“Text”) : create a text node

document.createElement(TagName) : create an element nodeVí dụ

Làm việc với thuộc tínhModify attributesX.getAttribute(“Attribute name”) : Get an attribute value

X.setAttribute(“Attribute name”,”Attribute value”) : Set attribute value

X.removeAttribute(“Attribute name”) : Remove attributeĐịnh dạng nodeHTML Style objectEvery element node has an style object that represent its CSS

To change CSS style : Ví dụ Style object example

Css, xhtml, javascript

More Related Content

What's hot

Similar to Css, xhtml, javascript

Recently uploaded

Css, xhtml, javascript

Editor's Notes