SlideShare ist ein Scribd-Unternehmen logo
1 von 12
Introduction to
HTML5
How did HTML start?
 Tim Berners-Lee (1989)
Proposed a hypertext document system.
To be use by CERN community.
CERN is the European Organization for
Nuclear Research.
(1990) the system named as World Wide
Web.
(1991) Html code for the internet.
History of HTML
HTML first published1991
2012
2002
-
2009
2000
HTML 2.0
HTML 3.2
HTML 4.01
XHTML 1.0
XHTML 2.0
HTML5
1995
1997
1999
HTML5 is much more tolerant and can
handle markup from all the prior versions.
Though HTML5 was published officially in 2012, it
has been in development since 2004.
After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
XHTML 2.0 had even stricter standards
than 1.0, rejecting web pages that did not
comply. It fell out of favor gradually and
was abandoned completely in 2009.
What is HTML5?
 HTML5 is the newest version of HTML, only recently
gaining partial support by the makers of web browsers.
 It incorporates all features from earlier versions of HTML,
including the stricter XHTML.
 It adds a diverse set of new tools for the web developer
to use.
 It is still a work in progress. No browsers have full
HTML5 support. It will be many years – perhaps not
until 2018 or later - before being fully defined and
supported.
Goals of HTML5
 Support all existing web pages. With HTML5, there is no
requirement to go back and revise older websites.
 Reduce the need for external plugins and scripts to show
website content.
 Improve the semantic definition (i.e. meaning and
purpose) of page elements.
 Make the rendering of web content universal and
independent of the device being used.
 Handle web documents errors in a better and more
consistent fashion.
New Elements in HTML5
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<nav>
<progress>
<section>
<source>
<svg>
<time>
<video>
These are just some of the new elements introduced in HTML5. We
will be exploring each of these during this course.
<article>
<aside>
<audio>
<canvas>
<datalist>
<figure>
Other New Features in HTML5
 Built-in audio and video support (without plugins)
 Enhanced form controls and attributes
 The Canvas (a way to draw directly on a web page)
 Drag and Drop functionality
 Support for CSS3 (the newer and more powerful version
of CSS)
 More advanced features for web developers, such as
data storage and offline applications.
First Look at HTML5
Remember the DOCTYPE declaration from XHTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In HTML5, there is just one possible DOCTYPE declaration and it is simpler:
<!DOCTYPE html>
Just 15 characters!
The DOCTYPE tells the browser which type and version of document to
expect. This should be the last time the DOCTYPE is ever changed. From
now on, all future versions of HTML will use this same simplified declaration.
The <html> Element
This is what the <html> element looked like in XHTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
Again, HTML5 simplifies this line:
<html lang="en">
Each of the world’s major languages has a two-character code, e.g. Spanish = "es",
French = "fr", German = "de", Chinese = "zh", Arabic = "ar".
The lang attribute in the <html> element declares which language the page
content is in. Though not strictly required, it should always be specified, as it
can assist search engines and screen readers.
The <head> Section
Here is a typical XHTML <head> section:
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
And the HTML5 version:
Notice the simplified character set declaration, the shorter CSS stylesheet link
text, and the removal of the trailing slashes for these two lines.
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
Basic HTML5 Web Page
Putting the prior sections together, and now adding the <body> section and
closing tags, we have our first complete web page in HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>
Let's open this page in a web browser to see how it looks…
Viewing the HTML5 Web Page
Even though we used HTML5, the page looks exactly the same in a web
browser as it would in XHTML. Without looking at the source code, web
visitors will not know which version of HTML the page was created with.

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
 
Html coding
Html codingHtml coding
Html coding
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
html-css
html-csshtml-css
html-css
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Basic html
Basic htmlBasic html
Basic html
 
Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
Css3
Css3Css3
Css3
 

Ähnlich wie 1. introduction to html5

Ähnlich wie 1. introduction to html5 (20)

Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
Introduction to html55
Introduction to html55Introduction to html55
Introduction to html55
 
1. Introduction to HTML5.ppt
1. Introduction to HTML5.ppt1. Introduction to HTML5.ppt
1. Introduction to HTML5.ppt
 
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
 
1._Introduction_to_HTML5 powerpoint presentation
1._Introduction_to_HTML5 powerpoint presentation1._Introduction_to_HTML5 powerpoint presentation
1._Introduction_to_HTML5 powerpoint presentation
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
 
HTML5 and DHTML
HTML5 and DHTMLHTML5 and DHTML
HTML5 and DHTML
 
Html 5
Html 5Html 5
Html 5
 
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
HTML
HTMLHTML
HTML
 
Html 5
Html 5Html 5
Html 5
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Html5
Html5Html5
Html5
 
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT KharagpurHTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
HTML5 vs Flash : Term paper at VGSOM, IIT Kharagpur
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 

Mehr von JayjZens

Creating you first web page!
Creating you first web page!Creating you first web page!
Creating you first web page!
JayjZens
 

Mehr von JayjZens (18)

Science 7 lesson 1.1
Science 7 lesson 1.1Science 7 lesson 1.1
Science 7 lesson 1.1
 
Quilling famtime
Quilling famtimeQuilling famtime
Quilling famtime
 
Rebekah women of the bible
Rebekah women of the bibleRebekah women of the bible
Rebekah women of the bible
 
1. intro ict
1. intro ict1. intro ict
1. intro ict
 
Evaluating internet resources
Evaluating internet resourcesEvaluating internet resources
Evaluating internet resources
 
Web browser &amp; search engine
Web browser &amp; search engineWeb browser &amp; search engine
Web browser &amp; search engine
 
Introbotics
IntroboticsIntrobotics
Introbotics
 
Creating &amp; organizing bookmark for website
Creating &amp; organizing bookmark for websiteCreating &amp; organizing bookmark for website
Creating &amp; organizing bookmark for website
 
Advantages and disadvantages of using online tools
Advantages and disadvantages of using online toolsAdvantages and disadvantages of using online tools
Advantages and disadvantages of using online tools
 
Styling of css
Styling of cssStyling of css
Styling of css
 
Html table
Html tableHtml table
Html table
 
Html links
Html linksHtml links
Html links
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
 
Creating you first web page!
Creating you first web page!Creating you first web page!
Creating you first web page!
 
Roborobo 3 parts
Roborobo  3 partsRoborobo  3 parts
Roborobo 3 parts
 
Roborobo 3 p arts definition
Roborobo  3 p arts definitionRoborobo  3 p arts definition
Roborobo 3 p arts definition
 
Liquidity ratio
Liquidity ratioLiquidity ratio
Liquidity ratio
 
Corals and coral reefs
Corals and coral reefsCorals and coral reefs
Corals and coral reefs
 

Kürzlich hochgeladen

%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
masabamasaba
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Health
 
The title is not connected to what is inside
The title is not connected to what is insideThe title is not connected to what is inside
The title is not connected to what is inside
shinachiaurasa2
 
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
masabamasaba
 

Kürzlich hochgeladen (20)

VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
 
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
The title is not connected to what is inside
The title is not connected to what is insideThe title is not connected to what is inside
The title is not connected to what is inside
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
 
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfPayment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
 
%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto
 
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?
 
tonesoftg
tonesoftgtonesoftg
tonesoftg
 
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
 

1. introduction to html5

  • 2. How did HTML start?  Tim Berners-Lee (1989) Proposed a hypertext document system. To be use by CERN community. CERN is the European Organization for Nuclear Research. (1990) the system named as World Wide Web. (1991) Html code for the internet.
  • 3. History of HTML HTML first published1991 2012 2002 - 2009 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0 HTML5 1995 1997 1999 HTML5 is much more tolerant and can handle markup from all the prior versions. Though HTML5 was published officially in 2012, it has been in development since 2004. After HTML 4.01 was released, focus shifted to XHTML and its stricter standards. XHTML 2.0 had even stricter standards than 1.0, rejecting web pages that did not comply. It fell out of favor gradually and was abandoned completely in 2009.
  • 4. What is HTML5?  HTML5 is the newest version of HTML, only recently gaining partial support by the makers of web browsers.  It incorporates all features from earlier versions of HTML, including the stricter XHTML.  It adds a diverse set of new tools for the web developer to use.  It is still a work in progress. No browsers have full HTML5 support. It will be many years – perhaps not until 2018 or later - before being fully defined and supported.
  • 5. Goals of HTML5  Support all existing web pages. With HTML5, there is no requirement to go back and revise older websites.  Reduce the need for external plugins and scripts to show website content.  Improve the semantic definition (i.e. meaning and purpose) of page elements.  Make the rendering of web content universal and independent of the device being used.  Handle web documents errors in a better and more consistent fashion.
  • 6. New Elements in HTML5 <figcaption> <footer> <header> <hgroup> <mark> <nav> <progress> <section> <source> <svg> <time> <video> These are just some of the new elements introduced in HTML5. We will be exploring each of these during this course. <article> <aside> <audio> <canvas> <datalist> <figure>
  • 7. Other New Features in HTML5  Built-in audio and video support (without plugins)  Enhanced form controls and attributes  The Canvas (a way to draw directly on a web page)  Drag and Drop functionality  Support for CSS3 (the newer and more powerful version of CSS)  More advanced features for web developers, such as data storage and offline applications.
  • 8. First Look at HTML5 Remember the DOCTYPE declaration from XHTML? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> In HTML5, there is just one possible DOCTYPE declaration and it is simpler: <!DOCTYPE html> Just 15 characters! The DOCTYPE tells the browser which type and version of document to expect. This should be the last time the DOCTYPE is ever changed. From now on, all future versions of HTML will use this same simplified declaration.
  • 9. The <html> Element This is what the <html> element looked like in XHTML: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Again, HTML5 simplifies this line: <html lang="en"> Each of the world’s major languages has a two-character code, e.g. Spanish = "es", French = "fr", German = "de", Chinese = "zh", Arabic = "ar". The lang attribute in the <html> element declares which language the page content is in. Though not strictly required, it should always be specified, as it can assist search engines and screen readers.
  • 10. The <head> Section Here is a typical XHTML <head> section: <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>My First XHTML Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> And the HTML5 version: Notice the simplified character set declaration, the shorter CSS stylesheet link text, and the removal of the trailing slashes for these two lines. <head> <meta charset="utf-8"> <title>My First HTML5 Page</title> <link rel="stylesheet" href="style.css"> </head>
  • 11. Basic HTML5 Web Page Putting the prior sections together, and now adding the <body> section and closing tags, we have our first complete web page in HTML5: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My First HTML5 Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>HTML5 is fun!</p> </body> </html> Let's open this page in a web browser to see how it looks…
  • 12. Viewing the HTML5 Web Page Even though we used HTML5, the page looks exactly the same in a web browser as it would in XHTML. Without looking at the source code, web visitors will not know which version of HTML the page was created with.