Your SlideShare is downloading. ×
0
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Html5 & CSS overview
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 & CSS overview

621

Published on

This is a quick presentation I did for

This is a quick presentation I did for

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
621
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 & CSSAN OVERVIEW
  • 2. HTML5 // Cleaning redundancy<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • 3. HTML5 // Cleaning redundancy AM !B <!doctype html>
  • 4. HTML5 // Cleaning redundancy <meta http-equiv="Content-Type"HTML 4.01 content="text/html; charset=utf-8"> <?xml version="1.0" encoding="UTF-8"?>XHTML 1.0 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • 5. HTML5 // Cleaning redundancy<meta charset=”utf-8”> BA M!! D ouble
  • 6. HTML5 // Cleaning redundancy<link rel="stylesheet" href="styles.css" type="text/css" /><script src=”jquery.js” type=”text/javascript”></script>
  • 7. HTML5 // Cleaning redundancy<link rel="stylesheet" href="styles.css" type=”text/css” /><script src=”jquery.js” type=”text/javascript”></script>
  • 8. HTML5 // Cleaning redundancy<link rel="stylesheet" href="styles.css” /><script src=”jquery.js”></script> ...looks much prettier!
  • 9. HTML5 // New elements<header> <video><nav> <figure><section> <footer><article> <time><aside> <datalist> To check all elements: http://joshduck.com/periodic-table.html
  • 10. HTML5 // Common structure<body> <div class=”article”> <div class=”header”> <h1>Article head</h1> <h1>Company logo</h1> <p>Article paragraph</p> <p>Tagline</p> <div class=”aside”> </div> <p>pointer for article</p> <div class=”nav”> </div> <ul> </div> <li>link1</li> <div class=”figure”> <li>link2</li> <img src=”...”> </ul> <div class=”figcaption”>text</div> </div> </div> <div class=”section”> <footer> <div class=”article”> &copy; <div class=”header”> <time datetime=”2012-11-08”> <h1>...</h1> 2012</time> </div> </footer> <div class=”section”> </body> ... </div> </div>
  • 11. HTML5 // Common structure<body> <article> <header> <h1>Article head</h1> <h1>Company logo</h1> <p>Article paragraph</p> <p>Tagline</p> <aside> </header> <p>pointer for article</p> <nav> </aside> <ul> </article> <li>link1</li> <figure> <li>link2</li> <img src=”...”> </ul> <figcaption>text</figcaption> </nav> </figure> <section> <footer> <article> &copy; <header> <time datetime=”2012-11-08”> <h1>...</h1> 2012</time> </header> </footer> <section> </body> ... </section> </article> ...much better semantic!
  • 12. HTML5 // Common structure<section class=”item”> <header> <h1></h1> </header> <footer class=”meta”>...</footer> <div class=”content”> ... </div> <nav class=”links”> ... </nav></section>
  • 13. HTML5 // Common structure<a href=”#” target=“_blank”> <div class=”panel”> <h2>Banner title</h2> <p>Get your 50% discount now, mofo!</p> </div></a>
  • 14. HTML5 // Forms<input type=”text” required><input type=”email” value=”i@i.com”><input type=”date” min=”2010-08-14” max=”2016-08-14” value=”2010-08-10”><input type=”range” min=”0” max=”50” value=”11”><input type=”search” placeholder=”Type city or property”><input type=”tel” placeholder=”(353)657778888 patter=”[regexp]”><input type=”color” placeholder=”#ff00ff”><input type=”number” step=”1” min=”-5” max=”10” value=”0”> ...example available
  • 15. HTML5 // Audio & Video<audio id=”audio” scr=”song.mp3” controls></audio><video id=”video” src=”video.mov” autoplay controls></video>
  • 16. HTML5 // Audio & Video d egrad e grac efully. ...<video id=”video” src=”video.mov” autoplay controls> <object data=”video.mov”> <!-- fallback content --> </object></video>
  • 17. CSS // Pseudo classesRelational Links Input Text:not :link :focus :first-letter:empty :visited :target :first-line :hover :enabled :lang :active :disabled ::selectionPosition :checked:first-child:last-child:nth-child(n):nth-of-type(n):first-of-type:last-of-type:nth-last-of-type(n):nth-last-child(n):only-of-type
  • 18. CSS // Pseudo classesRelational Links Input Text:not :link :focus :first-letter:empty :visited :target :first-line :hover :enabled :lang :active :disabled ::selectionPosition :checked:first-child:last-child:nth-child(n):nth-of-type(n) BAD NEWs...:first-of-type:last-of-type Most of these don’t:nth-last-of-type(n):nth-last-child(n):only-of-type work on old popular browsers! :(
  • 19. CSS // Pseudo classesRelational Links Input Text:not :link :focus :first-letter:empty :visited :target :first-line :hover :enabled :lang :active :disabled ::selectionPosition :checked:first-child:last-child:nth-child(n):nth-of-type(n) SOLUTION?:first-of-type:last-of-type Use more markup or:nth-last-of-type(n):nth-last-child(n) try Selectivizr.com:only-of-type
  • 20. CSS // Pseudo classesRelational Links Input Text:not :link :focus :first-letter:empty :visited :target :first-line :hover :enabled :lang :active :disabled ::selectionPosition :checked:first-child:last-child:nth-child(n):nth-of-type(n) GOOD NEWS...:first-of-type:last-of-type They all work great on:nth-last-of-type(n):nth-last-child(n):only-of-type IE9, webkit browsers, Firefox and Opera...
  • 21. CSS // Pseudo classesRelational Links Input Text:not :link :focus :first-letter:empty :visited :target :first-line :hover :enabled :lang :active :disabled ::selectionPosition :checked:first-child:last-child:nth-child(n):nth-of-type(n) GOOD NEWS...:first-of-type:last-of-type ... meaning, very suitable:nth-last-of-type(n):nth-last-child(n):only-of-type to work on mobile browsers :)
  • 22. CSS // Some exampleselem:nth-child(5) { color:orange; }elem:nth-child(n+6) { color:orange; }elem:nth-child(-n+5) { color:orange; }elem:nth-child(4n-7) { color:orange; }
  • 23. CSS // Some exampleselem:nth-child(odd) { color:orange; }elem:nth-child(even) { color:orange; }elem:last-child { color:orange; }elem:last-child(2) { color:orange; }
  • 24. CSS // Some examples “What goes around comes around” <blockquote>HTML <p>What goes around comes around</p> </blockquote> p:before { p:after {CSS content:’”’; color:light-green; content:’”’; color:light-green; } }
  • 25. CSS // Some examples i WARNING!HTML <p class=”warning”>Warning!</p> p:before {CSS content:””; background:url(warning-icon.png) 0 0 no-repeat; display:inline-block; margin-right:10px; }
  • 26. CSS // Some examples i SIGN UP HEREHTML <p class=”sign-up”>sign up here</p> CSS .sign-up:before { content:””; background:url(warning-icon.png) 0 0 no-repeat; display:inline-block; margin-right:10px; } .sign-up:after { content:””; background:url(arrow.png) 0 0 no-repeat; position:absolute; bottom:-15px; left:50%; }
  • 27. CSS // Some examples i SIGN UP HEREHTML <p class=”sign-up”>sign up here</p> CSS .sign-up:before { /* same code as previous slide */ } .sign-up:after { content:””; position:absolute; bottom:0; left:50%; width: 0; height: 0; border-left: 15px solid transparent; ro w im g! } border-right: 15px solid transparent; border-top: 30px solid orange; no ar
  • 28. RESOURCEShttp://html5doctor.com/css3-pseudo-classes-and-html5-formshttp://www.developer.nokia.com/document/Mobile_Web_Templates_for_Smartphones_Examples/content.htmlhttp://mobilehtml5.org/http://css-tricks.com/pseudo-class-selectors/http://css-tricks.com/pseudo-element-roundup/http://www.sitepoint.com/css3-tabs-using-target-selector/http://slides.html5rocks.com/#landing-slidehttp://selectivizr.com
  • 29. Thanks!

Ă—