Css, xhtml, javascript

XHTML, CSS, JavascriptTrần Khải Hoàng

Website development process HTML vs XHTML CSS Javascript

Content

Customer

Analyst

Designer

Web

developer

Tester

I want…I need …

Page design

Website

Website specification

Sitemap

Wireframe

Content

Website development process

Template

XHTML=EXtensible HyperText 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 ?

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<img src=moutain.jpg/><img src=“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)

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 ?

<!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 StrictThis 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 TransitionalThis 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 FramesetThis 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 code

Validated XHTML prevents website bugs How to validate ?

◦ http://validator.w3.org/◦ Web developer add-on (Firefox, IE)

Validate XHTML

http://validator.w3.org/

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 ?

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

A fixed layout is a layout with a fixed width

Fixed layout

Pros : • 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

http://www.lebloe.com/

http://www.floridaflourish.com/

Fluid (liquid) layout is a layout that adjust to the user’s screen resolution

Fluid layout

Pros : • More use friendly• No unused spaces• Eliminate horizontal

scrollbarCons : • May look awful in

some resolution• Image, video may

have multiple width• Additional space

while less content in large resolution

Examples : http://www.blossomgraphicdesign.com

http://www.blossomgraphicdesign.com/

http://www.blossomgraphicdesign.com/

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

Layout using float

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

Positioning element

Static position static — The default positioning of all

elements. Static elements remain in the normal page flow and do not move.

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

Demo fixed element PositionFixed.html

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

Demo relative element PositionRelative.html

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;

Demo absolute position AbsolutePosition.html

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

Demo overlap PositionOverlap.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

Sliding door

Rounded box

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

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

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

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

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 properly

Fix : ◦ Add width & overflow : hidden to its

container

Clear 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 specified

Fix : ◦ When in IE6, apply margin-left : -3px for text

3px text jog bug

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

Strategy to avoid IE issue :1. Start working with an standard compliant

browser (like Firefox)2. Use the right DOCTYPE3. Validate your code4. Use CSS reset first5. Use progressive enhancementWay to fix : 6. Use IE filter7. Use javascript framework8. Use IE6 javascript fix9. Use IE6 hack (not recommend)

How to overcome IE6 issue

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

Pros :◦ DRY (Don't repeat yourself)◦ Basic concept that makes it easy for other people

tounderstand 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

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

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

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

Quan hệ giữa các nodeHTML DOM example

Lấy 1 node

45

X.getElementById ( id) :get element with provided id in X

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

Get an HTML DOM node

X.innerHTML : html text in X

X.nodeName : node name of X

X.parentNode : parent node

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

Thuộc tính 1 nodeHTML DOM Node access

<div> Hello <b>World</b> </div>

innerHTML vs outerHTML

a outerHTML

innerHTML

innerHTML vs outerHTML

Ví dụ innerHTMLHTML DOM traverse Example

X.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 node

Thêm, xóa 1 nodeAdd-remove nodes

Ví dụ

X.getAttribute(“Attribute name”) : Get an attribute value

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

X.removeAttribute(“Attribute name”) : Remove attribute

Làm việc với thuộc tínhModify attributes

Every element node has an style object that represent its CSS

To change CSS style :

Định dạng nodeHTML Style object

Ví dụ Style object example

Ví dụ

Thay đổi border, margin, paddingDOM Node properties

Thay đổi backgroundStyle background

Thay đổi fontStyle font

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

var obj = { name: "Carrot", "for": "Max", details: { color: "orange", size: 12 }} > obj.details.color

orange > obj["details"]["size"]

12

Object example

You can iterate over the keys of an object:var obj = { 'name': 'Simon', 'age': 25};for (var attr in obj) { print (attr + ' = ' + obj[attr]);}

for (var attr in obj)

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)

> 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)

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

> s = makePerson("Simon", "Willison")> s.fullName()Simon Willison> s.fullNameReversed()Willison, Simon

Using object methods

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

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

> var s = "Simon";> s.reversed()TypeError: s.reversed is not a function> String.prototype.reversed = function() { var r = ''; for (var i = this.length - 1; i >= 0; i--){ r += this[i]; } return r;}> s.reversed()nomiS> "This can now be reversed".reversed()desrever eb won nac sihT

Extending core objects

Job done faster Overcome cross-browser issue in Javascript +

CSS Programming easier Most important : don’t invent the wheel Some javascript framwork :

◦ jQuery ◦ Prototype◦ YUI◦ Dojo◦ Extjs◦ Mootools

Why javascript framework ?

jQuery is a fast JavaScript Library to simplify: ◦ HTML document traversing,◦ Event handling◦ Animating◦ Ajax interactions for rapid web development.

Demo – Table strips,filter…

Kham khảo

XHTML Tutorial http://www.w3schools.com/xhtml/default.asp

CSS Tutorial http://www.w3schools.com/css/

Quirk mode http://www.quirksmode.org/

Ultimate IE6 bug http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

HTML vs XHTML http://www.webstandards.org/learn/articles/askw3c/oct2003/

Fixed vs Fluid layout http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Blue print framwork http://www.blueprintcss.org/

CSS Frameworks: An introduction Horst Gutmann

Reference

http://www.w3schools.com/xhtml/default.asp

http://www.w3schools.com/css/

http://www.quirksmode.org/

http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

http://www.webstandards.org/learn/articles/askw3c/oct2003/

http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

http://www.blueprintcss.org/

Reference Javascript Tutorial : http://www.w3schools.com/JS/default.asp Object Oriented JavaScript Mike Girouard — AJAXWorld 2009 HTML DOM Tutorial :

http://www.w3schools.com/HTMLDOM/default.asp Javascript & DOM example :

http://www.w3schools.com/JS/js_ex_dom.asp HTML DOM Style Object :

http://www.w3schools.com/jsref/dom_obj_style.asp JQuery [email protected] MAY 2008 JavaScript Libraries, Ajax Experience - October 2007,John Resig

(ejohn.org) A (Re)-Introduction to JavaScriptSimon Willison ETech, jquery http://jquery.org LearningJQuery_v1.3 – Jonathan Chaffer, Pack publishing

http://www.w3schools.com/JS/default.asp

http://www.w3schools.com/HTMLDOM/default.asp

http://www.w3schools.com/JS/js_ex_dom.asp

http://www.w3schools.com/jsref/dom_obj_style.asp

mailto:[email protected]

http://jquery.org/

Technology

Css, xhtml, javascript