SlideShare a Scribd company logo
Up Up and Above HTML 5
...Start, Brush Up Or Master
Skills Online
A Brief History of
WEB STANDARDS
History
● 2001-2006 : XHTML 1 & CSS 2.1
● 2004-2007 : WHATWG (Web HyperText Application Technology
Working Group)
● 2007-Present : W3C (World Wide Web Consortium)
● 2008-Present : HTML5 & CSS3
Content Layer
Presentation
Layer
Why to Learn HTML & CSS
● Internet Standard over 20 years
● Easy to learn
● Progressively Improve
● Employment
● For better understanding of web
● For creating website
● Content Management and Layouts
● Art Directed post and pages
● Better Blogging
● Reverse Engineering
● Customizing small site
● Animation
Content Layer
HTML
● HTML : Hyper Text Markup Language
● HTML first discovered in the late 1990s.
● HTML is standard markup language for creating web pages.
● HTML describes structure of web pages using markup language.
● Each and every HTML elements are represented by tags.
● A web browser do not display tags but use that tag to display the
content of the page.
HTML Versions
● HTML 1.0 – Released in 1990
● HTML 2.0 – Released in 1995
● HTML 3.2 – Released in 1997
● HTML 4.0 – Released in 1997
● HTML 4.01 – Released in 1999
● HTML 5 – Released in 2007
● HTML 5.1 – Released in 2016
HTML5 is the latest version with so
many features packed in it such as
web workers, video embed, canvas,
App Caches, Geolocation etc
HTML 5 : New Elements
● Structural Elements
● Figure
● Audio & Video
● Other Elements : Includes Meter, Progress, Time, Command,
Datagrid, Output, Ruby
HTML 5 : New Form Controls
● DATETIME : Allows input of a date and a time.
● DATETIME-LOCAL : Allows input of a date and a time, in a local time.
● NUMBER : Allows input of a number.
● RANGE : Input is verified to be within a range.
● EMAIL : Confirms the input to be a valid email.
● URL : Ensures input is a valid URL
● COLOR : Provides a mechanism for the user to input an RGB color.
HTML 5 : Doc Structure
● The HTML 5 doctype is way
easier than any other doctype
● The <!DOCTYPE> declaration
must be the very first thing in
your HTML document, before
the <html> tag
<!DOCTYPE html>
<html>
<head>
<title></title>
<body>
.
.
</body>
</html>
HTML 5 : New API
● Drag & Drop API
● getElementsByClassName
● Cross Document Messaging
● Simple Client Storage
● Strctured Client Storage
● Offline Application Caching
● Canvas
Presentation
Layer
CSS
● CSS – Cascaded Style Sheet
● External stylesheets are stored in CSS files.
● CSS saves lot of work by controlling the layout of multiple pages all at
once.
● CSS handles the look and feel part of the web page.
● Using CSS you can control everything like color of text, style of fonts,
spacing, sizing, background, layout design etc.
CSS Versions
● CSS 1 – Released in 1996
● CSS 2 – Released in 1998
● CSS 2.1 – Published as W3C
Recommendation in 2011
● CSS 3 – Released in 1999
● CSS 4 – There is no single
specification on CSS 4 but it is
split into level 4 modules.
CSS3 is completely backword
compatible with features such as
new selectors, shadow, rounded
corners, border image.
CSS : Key Aspects
Color
● Opacity
● RGBA Color
● HSL/A Color
Background
● Background Size
● Background Image
CSS : Key Aspects
Border
● Border Color
● Border Image
● Border Radius
● Box Shadow
Text
● Text Overflow
● Text Shadow
Ready Yet to Get Started???
Learn Along – It's Time to Learn and Use It
Eduonix Introduces
Learn HTML 5 Programming by Building Projects @ $15
To Get this Course at $10 Use Coupon Code : JY10
● Lectures: 75
● Video: 15.5 hours
● Language: English
● Includes: 30 day money back
guarantee!
Certificate of
Completion.
Lifetime Access.
Reference Link : https://goo.gl/fpEq5i
Table of Content
● SECTION 1 : Course Introduction
● SECTION 2 : Getting Started with HTML 5
● SECTION 3 : Blog Front End
● SECTION 4 : Animated Image Gallery
● SECTION 5 : Snake Game
● SECTION 6 : Stickys
● SECTION 7 : D & D Image Uploader
Table of Content Contd...
● SECTION 8 : HTML5 Quiz Application
● SECTION 9 : HTML5 Audio Player
● SECTION 10 : Mobile Todo App
● SECTION 11 : IndexedDB App
● SECTION 12 : Distance Meter
● SECTION 13 : Course Summary
Connect with us on Social Platform
Thank You!!!

More Related Content

ODP
Fresh Start HTML & CSS
PPTX
Web components. Compose the web.
PPTX
PDF
Drupal BigPipe: What have I learned
PDF
NE Scala 2016 roundup
PDF
HTML5 Editing Validation
PDF
[Hkdug] #20151219 drupal 8 release party - drupal 8 multilingual overview
PPTX
html5.ppt
Fresh Start HTML & CSS
Web components. Compose the web.
Drupal BigPipe: What have I learned
NE Scala 2016 roundup
HTML5 Editing Validation
[Hkdug] #20151219 drupal 8 release party - drupal 8 multilingual overview
html5.ppt

What's hot (17)

PDF
WordPress News and #SaigonWordPress 2015 - Saigon WordPress - Jan 17, 2015
PPTX
Android makers
PDF
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
PPTX
Golang from Scratch
PPTX
Typescript language
ODP
00_VB_Intro
PDF
Chicago Salesforce Saturday - Tools Presentation
PDF
Introduction to Frontend Development - Session 1 - HTML Fundamentals
PDF
WordPress Internationalization, Localization and Multilingual - Do It Right
PPTX
React native introduction (Mobile Warsaw)
PDF
Using web fonts in word press
PPTX
Angular JS - KNOWARTH
PPSX
IN LIVING CODING
PDF
Translating Drupal
PDF
Barcelona Multilanguage
PPTX
Web Development basics with WordPress
WordPress News and #SaigonWordPress 2015 - Saigon WordPress - Jan 17, 2015
Android makers
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
Golang from Scratch
Typescript language
00_VB_Intro
Chicago Salesforce Saturday - Tools Presentation
Introduction to Frontend Development - Session 1 - HTML Fundamentals
WordPress Internationalization, Localization and Multilingual - Do It Right
React native introduction (Mobile Warsaw)
Using web fonts in word press
Angular JS - KNOWARTH
IN LIVING CODING
Translating Drupal
Barcelona Multilanguage
Web Development basics with WordPress
Ad

Similar to Up Up and Above HTML 5 (20)

PPTX
Html,CSS & UI/UX design
PDF
HTML5 - The Good, the Bad, the Ugly
PPTX
Chapter 2 introduction to html5
PPT
Html5 Future of WEB
PPTX
Training presentation.pptx
ODP
PHP South Coast - Don't code bake, an introduction to CakePHP 3
PPTX
IS221__Week1_Lecture chapter one, Web design.pptx
PPT
Ppt ch01
PPT
Ppt ch01
PPTX
ODP
Don't Code, Bake. An introduction to CakePHP ~PHP Hampshire Oct 2014
PDF
[submission] Final_Presentation
PDF
PPTX
Html5
PPTX
What are new added in HTML5?
PPTX
Web Information Systems Html and css
PPTX
9781111528705_PPT_ch014.pptx
PPTX
9781111528705_PPT_ch01.pptx
PPTX
9781111528705_PPT_ch013.pptx
PPTX
9781111528705_PPT_ch012.pptx
Html,CSS & UI/UX design
HTML5 - The Good, the Bad, the Ugly
Chapter 2 introduction to html5
Html5 Future of WEB
Training presentation.pptx
PHP South Coast - Don't code bake, an introduction to CakePHP 3
IS221__Week1_Lecture chapter one, Web design.pptx
Ppt ch01
Ppt ch01
Don't Code, Bake. An introduction to CakePHP ~PHP Hampshire Oct 2014
[submission] Final_Presentation
Html5
What are new added in HTML5?
Web Information Systems Html and css
9781111528705_PPT_ch014.pptx
9781111528705_PPT_ch01.pptx
9781111528705_PPT_ch013.pptx
9781111528705_PPT_ch012.pptx
Ad

More from Sam Dias (20)

ODP
Are you ready for Christmas Sale?
ODP
Developers Guide To Blockchain, Bitcoin and Cryptocurrencies
ODP
Angular 6 - The Complete Guide
ODP
The Complete Machine Learning Resource
ODP
Tensorflow for Beginners
ODP
From 0 to Hero : Machine Learning Complete Guide
ODP
Projects in Enterprise Java (Java EE)
PPTX
Blockchain And Cryptocurrency Essentials
ODP
The Full Stack Web Development
PDF
The BestSeller Bundle by Eduonix
ODP
Web Development with VueJS : The Complete Guide
ODP
Generating Leads Through Digital Marketing : The Masterclass
ODP
Complete Introduction to Business Data Analysis
ODP
The Ultimate iOS 11 Course Learn to Build Apps
ODP
Projects In Laravel : Learn Laravel Building 10 Projects
ODP
A Glimpse on Angular 4
ODP
Become The AWS Certified Solution Architect Associate
ODP
Hadoop and Big Data for Absolute Beginners
ODP
Icon Design Masterclass : Learn Icon Design Principles
ODP
Learn Continuous Integration with Jenkins All in One Guide
Are you ready for Christmas Sale?
Developers Guide To Blockchain, Bitcoin and Cryptocurrencies
Angular 6 - The Complete Guide
The Complete Machine Learning Resource
Tensorflow for Beginners
From 0 to Hero : Machine Learning Complete Guide
Projects in Enterprise Java (Java EE)
Blockchain And Cryptocurrency Essentials
The Full Stack Web Development
The BestSeller Bundle by Eduonix
Web Development with VueJS : The Complete Guide
Generating Leads Through Digital Marketing : The Masterclass
Complete Introduction to Business Data Analysis
The Ultimate iOS 11 Course Learn to Build Apps
Projects In Laravel : Learn Laravel Building 10 Projects
A Glimpse on Angular 4
Become The AWS Certified Solution Architect Associate
Hadoop and Big Data for Absolute Beginners
Icon Design Masterclass : Learn Icon Design Principles
Learn Continuous Integration with Jenkins All in One Guide

Recently uploaded (20)

PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Modernizing your data center with Dell and AMD
PDF
cuic standard and advanced reporting.pdf
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
PDF
Empathic Computing: Creating Shared Understanding
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PDF
Encapsulation theory and applications.pdf
PPTX
Cloud computing and distributed systems.
PDF
KodekX | Application Modernization Development
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
Diabetes mellitus diagnosis method based random forest with bat algorithm
Modernizing your data center with Dell and AMD
cuic standard and advanced reporting.pdf
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
NewMind AI Weekly Chronicles - August'25 Week I
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
Empathic Computing: Creating Shared Understanding
Per capita expenditure prediction using model stacking based on satellite ima...
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
“AI and Expert System Decision Support & Business Intelligence Systems”
20250228 LYD VKU AI Blended-Learning.pptx
Digital-Transformation-Roadmap-for-Companies.pptx
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
Encapsulation theory and applications.pdf
Cloud computing and distributed systems.
KodekX | Application Modernization Development
Reach Out and Touch Someone: Haptics and Empathic Computing
Spectral efficient network and resource selection model in 5G networks
Building Integrated photovoltaic BIPV_UPV.pdf

Up Up and Above HTML 5

  • 2. ...Start, Brush Up Or Master Skills Online
  • 3. A Brief History of WEB STANDARDS
  • 4. History ● 2001-2006 : XHTML 1 & CSS 2.1 ● 2004-2007 : WHATWG (Web HyperText Application Technology Working Group) ● 2007-Present : W3C (World Wide Web Consortium) ● 2008-Present : HTML5 & CSS3
  • 6. Why to Learn HTML & CSS ● Internet Standard over 20 years ● Easy to learn ● Progressively Improve ● Employment ● For better understanding of web ● For creating website ● Content Management and Layouts ● Art Directed post and pages ● Better Blogging ● Reverse Engineering ● Customizing small site ● Animation
  • 8. HTML ● HTML : Hyper Text Markup Language ● HTML first discovered in the late 1990s. ● HTML is standard markup language for creating web pages. ● HTML describes structure of web pages using markup language. ● Each and every HTML elements are represented by tags. ● A web browser do not display tags but use that tag to display the content of the page.
  • 9. HTML Versions ● HTML 1.0 – Released in 1990 ● HTML 2.0 – Released in 1995 ● HTML 3.2 – Released in 1997 ● HTML 4.0 – Released in 1997 ● HTML 4.01 – Released in 1999 ● HTML 5 – Released in 2007 ● HTML 5.1 – Released in 2016 HTML5 is the latest version with so many features packed in it such as web workers, video embed, canvas, App Caches, Geolocation etc
  • 10. HTML 5 : New Elements ● Structural Elements ● Figure ● Audio & Video ● Other Elements : Includes Meter, Progress, Time, Command, Datagrid, Output, Ruby
  • 11. HTML 5 : New Form Controls ● DATETIME : Allows input of a date and a time. ● DATETIME-LOCAL : Allows input of a date and a time, in a local time. ● NUMBER : Allows input of a number. ● RANGE : Input is verified to be within a range. ● EMAIL : Confirms the input to be a valid email. ● URL : Ensures input is a valid URL ● COLOR : Provides a mechanism for the user to input an RGB color.
  • 12. HTML 5 : Doc Structure ● The HTML 5 doctype is way easier than any other doctype ● The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag <!DOCTYPE html> <html> <head> <title></title> <body> . . </body> </html>
  • 13. HTML 5 : New API ● Drag & Drop API ● getElementsByClassName ● Cross Document Messaging ● Simple Client Storage ● Strctured Client Storage ● Offline Application Caching ● Canvas
  • 15. CSS ● CSS – Cascaded Style Sheet ● External stylesheets are stored in CSS files. ● CSS saves lot of work by controlling the layout of multiple pages all at once. ● CSS handles the look and feel part of the web page. ● Using CSS you can control everything like color of text, style of fonts, spacing, sizing, background, layout design etc.
  • 16. CSS Versions ● CSS 1 – Released in 1996 ● CSS 2 – Released in 1998 ● CSS 2.1 – Published as W3C Recommendation in 2011 ● CSS 3 – Released in 1999 ● CSS 4 – There is no single specification on CSS 4 but it is split into level 4 modules. CSS3 is completely backword compatible with features such as new selectors, shadow, rounded corners, border image.
  • 17. CSS : Key Aspects Color ● Opacity ● RGBA Color ● HSL/A Color Background ● Background Size ● Background Image
  • 18. CSS : Key Aspects Border ● Border Color ● Border Image ● Border Radius ● Box Shadow Text ● Text Overflow ● Text Shadow
  • 19. Ready Yet to Get Started??? Learn Along – It's Time to Learn and Use It
  • 20. Eduonix Introduces Learn HTML 5 Programming by Building Projects @ $15 To Get this Course at $10 Use Coupon Code : JY10 ● Lectures: 75 ● Video: 15.5 hours ● Language: English ● Includes: 30 day money back guarantee! Certificate of Completion. Lifetime Access. Reference Link : https://goo.gl/fpEq5i
  • 21. Table of Content ● SECTION 1 : Course Introduction ● SECTION 2 : Getting Started with HTML 5 ● SECTION 3 : Blog Front End ● SECTION 4 : Animated Image Gallery ● SECTION 5 : Snake Game ● SECTION 6 : Stickys ● SECTION 7 : D & D Image Uploader
  • 22. Table of Content Contd... ● SECTION 8 : HTML5 Quiz Application ● SECTION 9 : HTML5 Audio Player ● SECTION 10 : Mobile Todo App ● SECTION 11 : IndexedDB App ● SECTION 12 : Distance Meter ● SECTION 13 : Course Summary
  • 23. Connect with us on Social Platform Thank You!!!