SlideShare a Scribd company logo
 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" /><!-- other head information here --> </head> <body> <!-- other body information here --> </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
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 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
Layout using float
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
Sliding door
Rounded box
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.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
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
Ví dụ

More Related Content

What's hot (20)

Html and Xhtml
Html and XhtmlHtml and Xhtml
Html and Xhtml
Chhom Karath
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
Lennart Schoors
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
Alfredo Torre
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
People Strategists
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]
Aaron Gustafson
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
Robert Nyman
 
Web I - 02 - XHTML Introduction
Web I - 02 - XHTML IntroductionWeb I - 02 - XHTML Introduction
Web I - 02 - XHTML Introduction
Randy Connolly
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
Sayed Ahmed
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
Christopher Schmitt
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5
Derek Bender
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
Albino Tonnina
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
David Lindkvist
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
Ata Ebrahimi
 
An Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScriptAn Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScript
Troyfawkes
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
ballychohanuk
 
WWW and HTTP
WWW and HTTPWWW and HTTP
WWW and HTTP
BG Java EE Course
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
Zi Bin Cheah
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
Ian Jasper Mangampo
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
IT Geeks
 
Html 5
Html 5Html 5
Html 5
Prabhakaran V M
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
Lennart Schoors
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
Alfredo Torre
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]
Aaron Gustafson
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
Robert Nyman
 
Web I - 02 - XHTML Introduction
Web I - 02 - XHTML IntroductionWeb I - 02 - XHTML Introduction
Web I - 02 - XHTML Introduction
Randy Connolly
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
Sayed Ahmed
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5
Derek Bender
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
Albino Tonnina
 
Html 5 New Features
Html 5 New FeaturesHtml 5 New Features
Html 5 New Features
Ata Ebrahimi
 
An Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScriptAn Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScript
Troyfawkes
 
Html 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally ChohanHtml 5 tutorial - By Bally Chohan
Html 5 tutorial - By Bally Chohan
ballychohanuk
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
Zi Bin Cheah
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
IT Geeks
 

Similar to Css, xhtml, javascript (20)

Castro Chapter 11
Castro Chapter 11Castro Chapter 11
Castro Chapter 11
Jeff Byrnes
 
CSS3 Refresher
CSS3 RefresherCSS3 Refresher
CSS3 Refresher
Ivano Malavolta
 
Advanced CSS.pptx
Advanced CSS.pptxAdvanced CSS.pptx
Advanced CSS.pptx
DiyonaVas
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
Rex Wang
 
Chapter6
Chapter6Chapter6
Chapter6
DeAnna Gossett
 
CSS
CSSCSS
CSS
ARJUN
 
XHTML and CSS
XHTML and CSS XHTML and CSS
XHTML and CSS
peak3
 
Web Layout
Web LayoutWeb Layout
Web Layout
Shawn Calvert
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Hatem Mahmoud
 
Static layouts with css
Static layouts with cssStatic layouts with css
Static layouts with css
Dan Phiffer
 
Css advanced – session 4
Css advanced – session 4Css advanced – session 4
Css advanced – session 4
Dr. Ramkumar Lakshminarayanan
 
CSS_Dibbo
CSS_DibboCSS_Dibbo
CSS_Dibbo
Sayanton Vhaduri
 
Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
BG Java EE Course
 
CSS for Developers
CSS for DevelopersCSS for Developers
CSS for Developers
Nascenia IT
 
CSS 201
CSS 201CSS 201
CSS 201
Jennifer Berk
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
Web Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros DeveloperWeb Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros Developer
Nyros Technologies
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
Gareth Saunders
 
Html5
Html5Html5
Html5
Chris Young
 
The Future of CSS Layout
The Future of CSS LayoutThe Future of CSS Layout
The Future of CSS Layout
Zoe Gillenwater
 
Ad

Recently uploaded (20)

Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too LateKubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free DownloadViral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Puppy jhon
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptxFIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdfHigh Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptxFIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent IntegrationPyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdfvertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API CatalogMuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdfENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUEIntroduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too LateKubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free DownloadViral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Puppy jhon
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptxFIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdfHigh Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptxFIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent IntegrationPyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdfvertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
MuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API CatalogMuleSoft for AgentForce : Topic Center and API Catalog
MuleSoft for AgentForce : Topic Center and API Catalog
shyamraj55
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdfENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
Ad

Css, xhtml, javascript

  • 1. XHTML, CSS, JavascriptTrầnKhảiHoàng
  • 2. Website development processHTML vs XHTMLCSSJavascriptContent
  • 3. ContentI want…I need …CustomerWebsite specificationTesterAnalystSitemapWeb developerDesignerWireframeWebsitePage designWebsite development processTemplate
  • 4. 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 ?
  • 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 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)
  • 7. 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 ?
  • 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 codeValidated XHTML prevents website bugsHow to validate ?http://validator.w3.org/Web developer add-on (Firefox, IE)Validate XHTML
  • 11. 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 ?
  • 12. 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
  • 13. A fixed layout is a layout with a fixed widthFixed layoutPros : Easy to create
  • 14. Width are the same in all browser
  • 15. No need min-width,max-widthCons : Additional spaces in high resolution
  • 16. Scrollbars when in low resolutionExamples : http://www.lebloe.comhttp://www.floridaflourish.com
  • 17. Fluid (liquid) layout is a layout that adjust to the user’s screen resolutionFluid layoutPros : More use friendly
  • 19. Eliminate horizontal scrollbarCons : May look awful in some resolution
  • 20. Image, video may have multiple width
  • 21. Additional space while less content in large resolutionExamples : http://www.blossomgraphicdesign.com
  • 22. 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
  • 24. Using {position} we can place an element anywhere on webpageposition : static;position : fixed;position : relative;position : absolute;Positioning element
  • 25. Static positionstatic — The default positioning of all elements. Static elements remain in the normal page flow and do not move.
  • 26. 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
  • 28. 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
  • 30. 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;
  • 32. 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
  • 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
  • 37. IE6 and below has many CSS bugsSome bugs : PNG transparency IE Box modelDouble margin bugNo min/max width/heightCross browser issue
  • 38. Float left (right) element that has left (right) margin will have double marginDemo : Fix : Add display:inline; to the floated elementDouble margin bug
  • 39. 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
  • 40. 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
  • 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 properlyFix : Add width & overflow : hidden to its containerClear 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 specifiedFix : When in IE6, apply margin-left : -3px for text3px text jog bug
  • 44. Identify IE6 to apply CSS or Js fix : Using Conditional Comments For Internet ExplorerUse Javascript to identify IE6Use IE 6 unsupported CSS SelectorsIE filter
  • 45. 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
  • 46. A collection of common CSS for reuseFramework can divide into : reset baselineformstypographygridSome framework : Blue PrintYUI GridsYAML ( 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 styleImplicitly use coding/naming guidelinesCons : ... that are not yoursYou have to learn the frameworkPossible semantical implicationsMight offer too muchPros and Cons
  • 48. 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
  • 49. 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
  • 50. Mô hình quan hệ giữa các nodeHTML DOM tree
  • 51. Quan hệ giữa các nodeHTMLDOM example
  • 52. Lấy 1 nodeGet an HTML DOM nodeX.getElementById( id) :get element with provided id in X
  • 53. X.getElementByTagName( name) : get list of elements with provided tag name in X45
  • 54. Thuộc tính 1 nodeHTML DOM Node accessX.innerHTML : html text in X
  • 55. X.nodeName : node name of X
  • 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
  • 64. Ví dụ innerHTMLHTML DOM traverse Example
  • 65. Thêm, xóa 1 nodeAdd-remove nodesX.appendChild ( Y) : add node Y into node X
  • 66. X.removeChild ( Y ) : remove node Y out of node X
  • 68. document.createElement(TagName) : create an element nodeVí dụ
  • 69. Làm việc với thuộc tínhModify attributesX.getAttribute(“Attribute name”) : Get an attribute value
  • 71. X.removeAttribute(“Attribute name”) : Remove attributeĐịnh dạng nodeHTML Style objectEvery element node has an style object that represent its CSS
  • 72. To change CSS style : Ví dụ Style object example
  • 74. Thay đổi border, margin, paddingDOM Node properties
  • 77. ObjectsEverything in Javascript is object includes functionObject is simple name-value pairs, as seen in:Dictionaries in PythonHashes in Perl and RubyHash tables in C and C++HashMaps in JavaAssociative arrays in PHPVery common, versatile data structureName 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"] 12Object 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, SimonUsing 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 nacsihTExtending core objects
  • 87. Job done fasterOvercome cross-browser issue in Javascript + CSSProgramming easierMost important : don’t invent the wheelSome javascriptframwork : jQueryPrototypeYUIDojoExtjsMootoolsWhy javascript framework ?
  • 89. jQuery is a fast JavaScript Library to simplify: HTML document traversing,Event handlingAnimatingAjax interactions for rapid web development.
  • 90. Demo – Table strips,filter…
  • 91. Kham khảoReferenceXHTML Tutorial http://www.w3schools.com/xhtml/default.asp
  • 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/
  • 98. CSS Frameworks: An introduction Horst GutmannReferenceJavascript 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
  • 104. JavaScript Libraries, Ajax Experience - October 2007,John Resig (ejohn.org)
  • 105. A (Re)-Introduction to JavaScriptSimonWillisonETech,
  • 107. LearningJQuery_v1.3 – Jonathan Chaffer, Pack publishing

Editor's Notes

  • #14: 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.