Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
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

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