HTML5 Taste4U.

Slides:



Advertisements
Verwante presentaties
Onderwijsmateriaal publiceren via Blackboard Willibrord Huisman IOWO, Schema's ontwikkeld in het kader van enkele adviestrajecten over onderwijsmateriaalbeheer,
Advertisements

Les 2 Vandaag •Vragen over voorgaande stof •Plaatjes •Tabellen •Links •Huiswerk.
Een blog waarop je allemaal dingen kan posten (filmpjes, foto's, muziek enz.) Beetje overrated + wordt heel snel saai, maar het kan voor een tijdje leuk.
Les 4 cursus WordPress. Wat gaan we doen (1) 1. Importeren via Word problemen 2. Alle pagina’s en berichten verwijderen, incl prullenbak leegmaken 3.
Module: Delicious • Verzameling ‘favorieten of bookmarks’ • Eenvoudig om eigen bookmarks bij te houden • Je kan er overal aan (waar internet is) • Gebruikt.
Aan de slag met WordPress
Websites maken Waarom? Voor Wie? Hoe?
Social Technographics Hoe ontwikkel je een succesvolle social media strategie? Reineke Reitsma Director, Consumer Technographics Forrester Research 11.
Presentatie kennisoverleg HTML 5. Waarom HTML 5? • Veel van onze informatie is opgeslagen in HTML… • 95% van de HTML is syntactisch incorrect…
(c) Marc de Graauw Presentatie XML Marc de Graauw 2 maart 2000.
Wat is het AnySurfer label? Een Belgisch kwaliteitslabel voor toegankelijke websites Bestaat uit een Basislabel en een Pluslabel Basislabel garandeert.
HTML Les 1: Introductie HTML
CSS & HTML Les 2 Navigatie. De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de.
Crashcursus HTML en CSS 2013
IFontys 2.0 Workshop 14: How 2 make ePubs?. Inleiders Henk Lingers Francois Lier.
Voorbereiden van de stage/sollicitatie mede met behulp van internet.
WEBSITES ONTWIKKELINGEN Trends en standaarden op het gebied van webdesign HTML, DHTML, XHTML, FLASH, CSS Henk Zegwaard december 2003.
Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve.
Wauw!!! Google Panda update WAUW !!!!. Google Panda update Plots geen bezoekers en/of omzet meer? In de US had deze update een impact op bijna 12% van.
Hoe werkt een zoekmachine?. In feite als een gewone browser Zoekmachine discrimineert niet; álles wat geïndexeerd mag worden, wordt geïndexeerd Ranking.
Google WEB Services 6 oktober Wat zijn WEB services ? Google WEB Services Applicaties via het WEB Ruimte beschikbaar stellen op het WEB Communicatie.
WEBBUILDING 07/03/2005 Saartje De Geyter.
Preconference 'Weblogs in het onderwijs' Sybilla Poortman Gerard Bierens Pierre Gorissen 15 november 2005.
Workshop 'Weblogs in het onderwijs' Sybilla Poortman Gerard Bierens Pierre Gorissen 14 april 2005.
Bibliotheek Sociale Wetenschappen Introductie tot het zoeken Communicatiewetenschappen  Website faculteitsbibliotheek  Catalogus LIBISng: boeken, eindwerken,
ONLINE VERBONDEN EN INTELLIGENTE COMPUTERS Semantisch web Tom Schurmans Gunter Fransen Nand Truyen Nele Lieben.
Meer bekendheid via je Website
Rendement uit online.. Link naar nieuwe profibus website, staat nog niet echt live.
Bronnenonderzoek PWS-seminar V5 13 juli 2014
Link Popularity Het principe van linkpopulariteit kun je als volgt samenvatten: hoe meer webpagina's er naar een bepaalde webpagina linken, des te belangrijker.
Bezoekersgerichte teksten
Web 1.0 HTMLAfbeeldingen FlashHyperlinks CSS Participation AJAX Usability Design Ruby on Rails.
Sociale Media – Best Belangrijk Daniel
Deze les * recap css selectors * pseudoclasses * styling links: live tutorial * references, recources, categorisation * live tutorial o add css to template.html.
3D modellen van de Nederlandse Ondergrond
Deltion College Engels B2 Lezen [Edu/003] thema: Topical News Lessons: The Onestop Magazine can-do: kan artikelen en rapporten begrijpen die gaan over.
Deltion College Engels C1 Gesprekken voeren [Edu/001]/ subvaardigheid lezen thema: What a blooper…. can-do : kan taal flexibel en effectief gebruiken voor.
Deltion College Engels B2 Lezen[Edu/001] /subvaardigheid schrijven korte samenvattingen thema: Exotic news can-do : lezen om informatie op te doen - kan.
Deltion College Engels B2 Schrijven [Edu/005] thema: Writing a hand-out can-do: kan een begrijpelijke samenvatting schrijven © Anne Beeker Alle rechten.
Deltion College Engels B1 Lezen [Edu/002] thema: But I ‘ve read it in… can-do : kan hoofdthema en belangrijkste argumenten begrijpen van eenvoudige teksten.
Behind Interactive Media. Agenda 1.Intro Content Mangement Systemen 2.Open Source 3.CMS vergelijking 4.Wordpress installeren 5.Huiswerk.
Creating local Europeana related networks Europeana taskforce Hans van der Linden 17/4/15.
Let’s go! ›Beginnerspresentatie ›Starten met prospero ›Verschil CMS en web navigator ›Nieuwe content > nieuwe folder aanmaken ›Bestanden uploaden ›Linkobject.
1| library | library Pure – introductie.
Webpagina's maken met (X)HTML en CSS Lang leve het Kladblok!!! Verboden voor editors.
DIV Architecture Seminarie Webdesign. CSS-bestand oproepen Voeg tussen en de volgende lijn code toe om een CSS-file te laten werken: Zorg ervoor dat je.
Door Arian den Hollander IT15AMO1B
Codetuts Academy Les 2 Module 2a Php Fundamentals 1.
Basics SERP = Search Engine Results Page Betaalde resultaten = SEA Natuurlijke resultaten = SEO Search Engine Optimization SEO is een lange termijn verhaal.
1Informatica in de Tweede Fase Frans Peeters 7 maart 2007 Deze presentatie is downloadable van
Webwinkel in het D-cluster van de opleiding Logistiek Ad van Kooten – docent ERP toepassingen  Pract. 1.
HTML Hypertext Markup Language. HTML code Elementen van een webpagina Eigenschappen van elementen Structuur van elementen.
INFOSESSIE voor SOFTWARELEVERAN CIERS 6 juni 2016.
The Research Process: the first steps to start your reseach project. Graduation Preparation
MEDIAWIJSHEID LES 2 Laura van Vught. INTRODUCTIE o Vorige les: Zoeken op het Internet. Herkennen van betrouwbare sites. o Lessen Mediawijsheid Les 1:
Surfen op het internet Basisbegrippen
Zoekmachinemarketing
Processing Structured Hypermedia
Templates in MailChimp (2)
Programmeren is Makkelijk
Vervolgcursus; Les 7 Internet Wat is internet
Hoe maak je een pagina voor een website?
OGH APEX dag 2012 Toeters en bellen met APEX
Welkom :-).
KWADRATEN EN WORTELS Waar wortels woeden en varkens wroeten koester ik mijn sproeten in algebraïsch vergelijk wis, mijn kunde en leven lieve lusten en.
Player of creator? door Mark Grasmayer.
Player of creator? door Mark Grasmayer.
DE NAYER INSTITUUT Hogeschool voor Wetenschap & Kunst
HTML5 introductie.
Transcript van de presentatie:

HTML5 Taste4U

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

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

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>

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>

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 information: <a href="mailto:someone@example.com">   someone@example.com</a>.</p> </footer>

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>

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 2008.</p> </article>

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>

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

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

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>

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>