ADVANCED WEBSITE

DESIGN Using HTML5 amp CSS3

For the Latest Web Development

Evolution

Hisham Mat Hussin UMK April 2012

What is the HTML5

HTML5 is the next generation of HTML

HTML5 will be the new standard for HTML

The previous version of HTML HTML 401 came in 1999 The web has changed a lot since then

HTML5 is still a work in progress However the major browsers support many of the new HTML5 elements and APIs

bull API= Application Programming Interface

How Did HTML5 Get Started

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG)

WHATWG was working with web forms and applications and W3C was working with XHTML 20

In 2006 they decided to cooperate and create a new version of HTML

HTML Timeline

XHTML dead

HTML5 future

Introduction to HTML5

HTML5 logo

Between Canvas WebGL and CSS3 3D features with stunning visuals natively rendered in the browser

HTML5 logo

More efficient connectivity means more real-time chats faster games and better communication

Improved technology for server connectivity

HTML5 logo

Beginning with the Geolocation API Web Applications can present rich device-aware features and experiences

From audiovideo input access to microphones and cameras to local data such as contacts amp events and even tilt orientation

HTML5 logo

Make Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

What is the HTML5

HTML5 is the next generation of HTML

HTML5 will be the new standard for HTML

The previous version of HTML HTML 401 came in 1999 The web has changed a lot since then

HTML5 is still a work in progress However the major browsers support many of the new HTML5 elements and APIs

bull API= Application Programming Interface

How Did HTML5 Get Started

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG)

WHATWG was working with web forms and applications and W3C was working with XHTML 20

In 2006 they decided to cooperate and create a new version of HTML

HTML Timeline

XHTML dead

HTML5 future

Introduction to HTML5

HTML5 logo

Between Canvas WebGL and CSS3 3D features with stunning visuals natively rendered in the browser

HTML5 logo

More efficient connectivity means more real-time chats faster games and better communication

Improved technology for server connectivity

HTML5 logo

Beginning with the Geolocation API Web Applications can present rich device-aware features and experiences

From audiovideo input access to microphones and cameras to local data such as contacts amp events and even tilt orientation

HTML5 logo

Make Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

How Did HTML5 Get Started

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG)

WHATWG was working with web forms and applications and W3C was working with XHTML 20

In 2006 they decided to cooperate and create a new version of HTML

HTML Timeline

XHTML dead

HTML5 future

Introduction to HTML5

HTML5 logo

Between Canvas WebGL and CSS3 3D features with stunning visuals natively rendered in the browser

HTML5 logo

More efficient connectivity means more real-time chats faster games and better communication

Improved technology for server connectivity

HTML5 logo

Beginning with the Geolocation API Web Applications can present rich device-aware features and experiences

From audiovideo input access to microphones and cameras to local data such as contacts amp events and even tilt orientation

HTML5 logo

Make Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML Timeline

XHTML dead

HTML5 future

Introduction to HTML5

HTML5 logo

Between Canvas WebGL and CSS3 3D features with stunning visuals natively rendered in the browser

HTML5 logo

More efficient connectivity means more real-time chats faster games and better communication

Improved technology for server connectivity

HTML5 logo

Beginning with the Geolocation API Web Applications can present rich device-aware features and experiences

From audiovideo input access to microphones and cameras to local data such as contacts amp events and even tilt orientation

HTML5 logo

Make Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

XHTML dead

HTML5 future

Introduction to HTML5

HTML5 logo

Between Canvas WebGL and CSS3 3D features with stunning visuals natively rendered in the browser

HTML5 logo

More efficient connectivity means more real-time chats faster games and better communication

Improved technology for server connectivity

HTML5 logo

Beginning with the Geolocation API Web Applications can present rich device-aware features and experiences

From audiovideo input access to microphones and cameras to local data such as contacts amp events and even tilt orientation

HTML5 logo

Make Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 future

Introduction to HTML5

HTML5 logo

Between Canvas WebGL and CSS3 3D features with stunning visuals natively rendered in the browser

HTML5 logo

More efficient connectivity means more real-time chats faster games and better communication

Improved technology for server connectivity

HTML5 logo

Beginning with the Geolocation API Web Applications can present rich device-aware features and experiences

From audiovideo input access to microphones and cameras to local data such as contacts amp events and even tilt orientation

HTML5 logo

Make Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

Introduction to HTML5

HTML5 logo

Between Canvas WebGL and CSS3 3D features with stunning visuals natively rendered in the browser

HTML5 logo

More efficient connectivity means more real-time chats faster games and better communication

Improved technology for server connectivity

HTML5 logo

Beginning with the Geolocation API Web Applications can present rich device-aware features and experiences

From audiovideo input access to microphones and cameras to local data such as contacts amp events and even tilt orientation

HTML5 logo

Make Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 logo

Between Canvas WebGL and CSS3 3D features with stunning visuals natively rendered in the browser

HTML5 logo

More efficient connectivity means more real-time chats faster games and better communication

Improved technology for server connectivity

HTML5 logo

Beginning with the Geolocation API Web Applications can present rich device-aware features and experiences

From audiovideo input access to microphones and cameras to local data such as contacts amp events and even tilt orientation

HTML5 logo

Make Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 logo

More efficient connectivity means more real-time chats faster games and better communication

Improved technology for server connectivity

HTML5 logo

Beginning with the Geolocation API Web Applications can present rich device-aware features and experiences

From audiovideo input access to microphones and cameras to local data such as contacts amp events and even tilt orientation

HTML5 logo

Make Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 logo

Beginning with the Geolocation API Web Applications can present rich device-aware features and experiences

From audiovideo input access to microphones and cameras to local data such as contacts amp events and even tilt orientation

HTML5 logo

Make Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 logo

Make Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 logo

Giving meaning to structure semantics

A richer set of tags microdata and microformats are enabling a more useful data driven web for

both programs and users

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 logo

Wide range of stylization and effects enhancing the web app performance

Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 logo

Audio and video are first class citizens in the

HTML5 web living in harmony with your apps

and sites

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 logo

Web Apps can start faster and work even if there is no internet connection

Using the HTML5 App Cache as well as the Local Storage Indexed DB and the File API specifications

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

Rules for HTML5 were established

New features should be based on HTML CSS DOM and JavaScript

Reduce the need for external plugins (like Flash)

Better error handling

More markup to replace scripting

HTML5 should be device independent

The development process should be visible to the public

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

Introduction to CSS3

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

Revision on CSS

What is CSS

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 40 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

Revision on CSS

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

Revision on CSS

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 + CSS3

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 + CSS3

bull HTML5 independent

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

HTML5 + CSS3 overview

bull ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

bull httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

bull ltheadgt

bull ltmeta http-equiv=content-type content=texthtml charset=ISO-8859-1gt

bull ltstyle type=textcssgt

bull margin0px padding0px

bull ltstylegt

bull ltscript type=textjavascript src=httpkreatifcomblogdemojsjsgtltscriptgt

bull ltheadgt

bull ltbodygt

bull lth1gtWelcome To My Sitelth1gt

bull Bagian Artikel

bull ltbodygt

bull lthtmlgt

ltDOCTYPE HTMLgt

Sample Semantics

Sample Semantics

Sample Semantics

Sample Multimedia

Sample Multimedia

Sample Multimedia

Sample Multimedia

Sample CSS3 ndash Text Animation

Sample CSS3 ndash Text Transformation

HTML5 Demos

Sample webpages

Sample webpages

Sample webpages

Sample webpages

REFERENCE