Presentation html5 css3 by thibaut
2 likes1,373 views
The document discusses new features in HTML5 including: 1. New semantic HTML5 elements like <header>, <nav>, <section>, <article>, and <footer> that help structure and provide meaning to content. 2. New attributes like "role", "data-", "aria-", "draggable", and microdata attributes that add more semantics and meaning. 3. New form input types like email, number, date, time, etc. and new form attributes that make forms more usable.
![NOUVEAUX FORMULAIRES
<input type="email" placeholder="mail@mail.com"/> mail@mail.com
<input type="number" min="13" max="110" value="20"/> 20
<input type="range" min="0" max="50" step="10"/>
<input type="search" results="10" placeholder="Search..." /> Search...
<input type="tel" pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$" /> (555) 555-5555
<input type="color" placeholder="e.g. #bbbbbb" />
Avantage pour les claviers mobiles :](https://image.slidesharecdn.com/presentationhtml5css3bythibaut-120108041132-phpapp01/85/Presentation-html5-css3-by-thibaut-8-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (7)
Ad
Similar to Presentation html5 css3 by thibaut (20)
Ad
Recently uploaded (20)
Presentation html5 css3 by thibaut
- 1. HTML5 PAR THIBAUT BAILLET HTML5 HTML5 ▲ ◄ ► ▼
- 2. FRONT-END DEVELOPER HETIC thibaut-baillet.com @bailletthibaut
- 3. OBJECTIFS Structurer et donner du sens Créer des applications
- 5. NOUVELLES BALISES <header> <hgroup> <h1>Titre</h1> <h2>Sous titre</h2> </hgroup> </header> <nav> <ul> <li><a href="http://">Link Text</a></li> <li><a href="http://">Link Text</a></li> <li><a href="http://">Link Text</a></li> </ul> </nav> <section> <article> <header> <h3>Titre article</h3> <time datetime="2011-15-12">15 décembre 2011</time> </header> Contenu... <figure> <img src="#" alt="" /> <figcaption>Description de l'image</figcaption> </figure> </article> </section> <footer>Copyright...</footer>
- 6. NOUVEAUX ATTRIBUTS <tag role=""> <tag data-xxx=""> <tag aria-xxx=""> <tag draggable=""> <tag itemscope="" itemtype="" itemprop="" > <input type="email" placeholder="Votre email" required />
- 7. MICRODATA <article itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Inception (2010) - IMDb</h1> <span itemprop="description">The excerpt from the page will show up here. The reason we ca n't show text from your webpage is because the text depends on the query the user types.</span > Director: <div itemprop="director" itemscope itemtype="http://schema.org/People"> <span itemprop="name">Christopher Nolan</span> </div> Writers: <div itemprop="author" itemscope itemtype="http://schema.org/People"> <span itemprop="name">Christopher Nolan</span> </div> <div itemprop="actors" itemscope itemtype="http://schema.org/People"> <span itemprop="name">Leonardo DiCaprio</span>, </div> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">8,9</span>/<span itemprop="bestRating">10</span> stars fr om <span itemprop="ratingCount">457038</span> users. </div> </article> Rich snippets :
- 8. NOUVEAUX FORMULAIRES <input type="email" placeholder="[email protected]"/> [email protected] <input type="number" min="13" max="110" value="20"/> 20 <input type="range" min="0" max="50" step="10"/> <input type="search" results="10" placeholder="Search..." /> Search... <input type="tel" pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$" /> (555) 555-5555 <input type="color" placeholder="e.g. #bbbbbb" /> Avantage pour les claviers mobiles :
- 9. AUTRES BALISES <meter min="0" max="100" low="40" high="90" optimum="100" value="9 1">A+</meter> Your score is: A+ <progress>working...</progress> Download is: working... <progress value="75" max="100">3/4 complete</progress> Goal is: 3/4 complete
- 10. MULTIMÉDIA
- 11. AUDIO ET VIDÉO 00:00 -00:36
- 13. CSS3
- 14. WEB FONTS @font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf); } Font Squirrel Google Web fonts <link href='http://fonts.googleapis.com/css?family=SpicyRice' rel='stylesheet' type='text/css' > h1{ font-family: 'SpicyRice'; }
- 15. OPACITÉ .code{ background: rgba(255, 0, 0, 0.57); } ANGLE ARRONDI .radius{ border-radius : 30px; border-top-right-radius : 100px; } OMBRE PORTÉE .shadow{ box-shadow : rgba(0, 255, 0, 0.846094) 7px 3px 0px; }
- 16. DÉGRADÉ .gradient{ background: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#000)); }
- 17. PRÉFIXES PROPRIÉTAIRES -webkit -moz -o La solution : -prefix-free
- 18. TRANSITION CSS3 .transition{ -webkit-transition: width 1s ease-in-out; } .transition:hover{ width: 50%; } TRANSFORMATION CSS3 .transform{ -webkit-transition: -webkit-transform 1s ease-in-out; } .transform:hover{ -webkit-transform: rotateZ(-180deg); }
- 19. ANIMATION @-webkit-keyframes pulse { from { opacity: 0.0; font-size: 100%; } to { opacity: 1.0; font-size: 200%; } } .annim { display: block; background-color: #FF0; height: 100px; line-height: 100px; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; } Animation !!
- 20. API HTML5