Download de presentatie
De presentatie wordt gedownload. Even geduld aub
1
HTML5 Taste4U
2
Waarom HTML 5 De HTML5-tags definiëren de content waardoor de betekenis van onderdelen duidelijk wordt. Semantisch element: beschrijft de betekenis van een onderdeel Voordeel voor: Browser Developers Zoekmachines
3
Wat is het verschil met HTML 4?
Simpelere DOCTYPE: <!DOCTYPE html> Simpelere charset: <meta charset="UTF-8"> In plaats van <div id=“header”></div> <header></header> Opbouw HTML5-document
4
HTML5-tags <header>
Groepeert de introductie boven platte tekst (kop + tagline) Kan meerdere keren voorkomen (in main, article en section) <article> <header> <h1>Most important heading here</h1> <h3>Less important heading here</h3> <p>Some additional information here</p> </header> <p>Lorem Ipsum dolor set amet....</p> </article>
5
HTML5-tags <nav>
Groepeert navigatielinks LET OP: niet alle links op de pagina zitten in een <nav> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
6
HTML5-tags <footer>
Bevat informatie zoals: auteur, copyright, links, contactinformatie, etc. Kan meerdere keren voorkomen (in main, article en section) <footer> <p>Posted by: Hege Refsnes</p> <p>Contact </footer>
7
HTML5-tags <main>
Groepeert de content van de webpagina <main> <h1>Web Browsers</h1> <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p> <article> <h1>Google Chrome</h1> <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p> </article> <article> <h1>Internet Explorer</h1> <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p> </article> </main>
8
HTML5-tags <article>
Op zichzelf staand ‘verhaal’, moet onafhankelijk te lezen zijn bijv.: forum, blog post, krantenartikel, comment Heeft een kop, vaak in een header <article> <h1>Google Chrome</h1> <p>Google Chrome is a free, open-source web browser developed by Google, released in </p> </article>
9
HTML5-tags <section>
Thematische groep van content bijv.: introductie, content, contactinfo of de sportsectie in een krant met daarin artikelen per sport Heeft een kop, kan in een header <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section>
10
<article> in <section>
Een <section> kan meerdere <article>s bevatten <section> <h1>Famous Cities</h1> <article> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </article> <article> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </article> <article> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </article> </section>
11
<section> in <article>
Een <article> kan meerdere <section>s bevatten <article> <header> </header> <section id="introduction"> </section> <section id="content"> <section id="summary"> <footer> </footer> </article>
12
HTML5-tags <aside>
Heeft een relatie met de content maar is er geen onderdeel van Vaak in de sidebar <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>
13
HTML5-tags <figure> <figcaption>
Groepeert een plaatje <img> en de toelichting daarop <figcaption> <figcaption> Visuele verklaring van een plaatje <figure> <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption> </figure>
Verwante presentaties
