Html5 en css3
Html5 belooft de nieuwe standaard te worden voor websites. Dankzij de nieuwe versie van html kunnen sites interactiever worden. In combinatie met css3 wordt de vormgeving bovendien een stuk makkelijker.
De nieuwe standaard voor html5 is nog lang geen feit. Er wordt nog hard aan gewerkt, maar er is wel een ‘voorlopig ontwerp’ (W3C working draft) klaar. Diverse browsers ondersteunen de standaarden die hierin worden genoemd. Helaas geldt dat nog niet voor de huidige versie van Internet Explorer, maar Chrome, Safari en Firefox zijn al wel (deels) zover. De bètaversie van Internet Explorer 9 ondersteunt ook delen van html5. Kortom, reden genoeg om alvast ervaring op te doen met deze standaard van de toekomst.
Met html5 en css3 kunt u ook eenvoudig fraaie, uitklappende menu’s maken. Dat kan met deze code. Om te beginnen de css:
<style type="text/css"> ul, li { list-style-type: none; } #menu { background:#e3e3e3; padding: 3px; } #menu > li { position: relative; display: inline-block; } .submenu { background:#e3e3e3; position: absolute; z-index: 0; opacity: 0; padding: 2px; } .submenu li { background:#fff; } #menu > li:hover .submenu, #nav > li.focus .submenu { opacity: 1; } #menu > li:hover .submenu li, #nav > li.focus .submenu li { height: 25px; } </style>
-
In deze (sterk vereenvoudigde) css-code wordt bepaald dat de menu-items in een horizontale balk worden weergegeven. Dat gebeurt door het gebruik van display: inline-block. Via .submenu wordt bepaald dat de submenu’s worden weergegeven als blokjes onder het hoofdmenu. Deze css-code kan gecombineerd worden met volgende html-code:
<nav> <ul id="menu"> <li>Home</li> <li>Over <ul class="submenu"> <li>Geschiedenis</li> <li>Medewerkers</li> </ul> </li> <li>Contact <ul class="submenu"> <li>Adresgegevens</li> <li>E-mailadres</li> </ul> </li> </ul> </nav>
-
Aan het menu kunt u nog een fraai animatie-effect toevoegen door de volgende code toe te voegen aan het css-gedeelte. Voeg dit toe aan .submenu li:
-webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s;
-
Dit zorgt ervoor dat het menu uitklapt in 0,2 seconden.
Tot slot geven we zijbalk nog een animatie-effect mee. Hierdoor zal dit blok uitzoomen en lichtjes terugdraaien, zodra de bezoeker er met de cursus overheen gaat. In feite creëert u hiermee dus een animatie die meestal met Flash wordt gedaan! Gebruik hiervoor de volgende code in uw css:
.zijbalk:hover { -webkit-transition: all 1s ease-in-out; left-margin: 100px; -moz-transition: all 1s ease-in-out; -webkit-transform: rotate(360deg) scale(1.5); left-margin: 100px; -moz-transform: rotate(360deg) scale(1); display: block; display: inline; float: left; margin: 20px 0 0px 60px; }
-
U ziet in deze code dat de transitie (beweging) één seconde duurt. Tegelijkertijd verandert de left-margin naar 100 pixels om te voorkomen dat het blok uit beeld verdwijnt. Via transform wordt bepaald dat de rotatie 360 graden wordt en de schaal (uitvergroting in dit geval) anderhalf bedraagt.
Als u over het blokje heengaat, wordt deze anderhalf keer vergroot en gaat weer recht staan.
Het is met html5 mogelijk om tekst (of een afbeelding) schuin neer te zetten. Zo kunt u tekst 90 graden te draaien, zodat deze verticaal op het scherm staat. Uiteraard is het ook mogelijk om de tekst minder sterk te draaien. Het is een leuke optie, bijvoorbeeld om een speels effect te bereiken. We blijven bij het voorbeeld uit de vorige tips, maar willen de tekst met het kader eromheen nu lichtjes schuin plaatsen. Daartoe voegen we de volgende code toe:
-webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); transform: rotate(-2deg);
-
Als u de afbeeldingen bekijkt, ziet u dat Safari de schuin gedraaide blokjes wat fraaier weergeeft dan Chrome. Bij de laatste browser wordt het wel erg blokkerig.
Een blok iets schuin gedraaid in Safari en Chrome.
Met behulp van html5 en css3 is ook mogelijk om een kleurverloop toe te voegen. Dat kan bijvoorbeeld gelden voor de achtergrondkleur van uw website, maar u kunt ook een kadertje voorzien van zo’n verloopkleur. We blijven bij ons voorbeeld van een zijbalk met afgeronde hoeken. Behalve een schaduw gaan we nu ook een verloopkleur toevoegen. Voor Chrome en Safari doet u dat met deze code:
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#967C52));
-
De kleur verandert van wit naar lichtbruin. De verandering vindt lineair plaats van linksboven naar linksonder. Eventueel kunt u nog een tussenstap inbouwen, waarbij op de helft een lichtbruine kleur wordt toegevoegd:
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#967C52), color-stop(.5,#F0F0D8));
-
Om ook Firefox-browsers te ondersteunen, kunt u deze code toevoegen:
background: -moz-linear-gradient(top, #fff,#967C52);
-
Kleurverloop.
Het maken van kader rondom tekst met afgeronde hoeken was altijd een ingewikkeld klusje, maar met html5 wordt het een stuk eenvoudiger. Er is nog wel een probleem. Aangezien html5 nog geen definitieve standaard is, ondersteunen Chrome en Firefox nog niet de voorgestelde standaarden. Ze gebruiken eigen code. Daardoor moet u drie codes opnemen om het in zowel Chrome, Firefox als Opera te laten werken (in de huidige Internet Explorer werkt het nog niet). In onderstaand voorbeeld ziet u hoe u een zijbalk kunt maken met een kader rondom tekst dat afgeronde hoeken bevat:
<style type="text/css"> .zijbalk { -moz-border-radius: 45px; -webkit-border-radius: 45px; border-radius: 45px; border: 6px solid ccc; padding: 10px;width:200px; } </style>
-
Door de border-radius een waarde mee te geven, bepaalt u de ronding van het hoeken. In dit geval hebben we gekozen voor 45 pixels.
Afgeronde hoeken met html5.
We gaan nog even door op het bovenstaande voorbeeld. Het is mogelijk om met html5 schaduwen te genereren. U hoeft ze dus niet meer met een tekenprogramma te maken en deze afbeeldingen met ingewikkelde code aan te roepen. Om schaduw toe te voegen, gebruikt u box-shadow.
Er zijn minimaal drie en maximaal vier waarden die u kunt geven aan dit element. U kunt de horizontale waarde voor schaduw geven. Dit kan zowel een positieve als een negatieve waarde zijn, zodat de schaduw rechts of juist links te zien is. Ook moet de verticale waarde bepaald worden. Opnieuw kan deze waarde positief of negatief zijn om de schaduw boven of onder de afbeelding te tonen. Vervolgens dient u de mate van vervaging opgeven. Dit kan minimaal de waarde 0 hebben. Hoe hoger deze waarde, des te meer de schaduw vervaagd. Deze waarde kan ook weggelaten worden. Dan zal er geen vervaging optreden. En tot slot kunt u de kleur van de schaduw opgeven. Daaruit volgt dat de volgende code kan gebruikt worden om de zijbalk uit tip 5 een schaduw te geven:
box-shadow:10px 10px 20px #000; -webkit-box-shadow:10px 10px 20px #000; -moz-box-shadow: 10px 10px 20px #000;
-
Ook hier ziet u weer dat de schaduw drie keer bepaald moet worden, omdat niet alle browsers dezelfde code ondersteunen. Zoals u aan de afbeeldingen ziet, geeft Chrome de schaduw rondom afgeronde hoeken wat ‘rafelig’ weer. Dit probleem treedt niet op bij rechte hoeken. Safari geeft de schaduw rondom ronde hoeken wel prima weer.
Schaduw in Safari en Chrome.
Met het nieuwe “contenteditable=‘true’” is het mogelijk om bezoekers content te laten aanpassen. Dat kan handig zijn voor bijvoorbeeld Wikipedia-pagina’s, maar ook als u bezoekers formulieren wilt laten invullen, is het nuttig. Bovendien is het denkbaar dat u in de toekomst een weblog bijwerkt dankzij het contenteditable-element. De werking is als volgt:
<section id="editable" contenteditable="true"> <p>Deze tekst kunt u wijzigen</p> </section>
-
Als u deze code in een html-pagina plaatst, is de tekst aan te passen. Hebt u een gedeelte dat bezoekers niet mogen aanpassen, dan kunt u contenteditable="false" gebruiken. Door alleen contenteditable toe te voegen, zal de tekst die een bezoeker wijzigt, nog niet onthouden worden. Een volgende keer dat de bezoeker de site laadt, zal de oorspronkelijke tekst er weer staan. Door middel van JavaScript is dit te ondervangen. Het voert te ver om deze gehele code hier af te drukken, maar op html5demos.com/contenteditable kunt u deze code terugvinden.
Het opnemen van video’s is ook bijzonder eenvoudig in html5. Hieronder ziet u een voorbeeld van een regel om een video op een webpagina te plaatsen:
<video width=320 height=240 controls autoplay poster=poster.jpg> <source src='video.mp4'> </video>
-
U ziet: er is weinig verschil met het opnemen van audio in de site. Wel kunt u hier nog het posterattribuut toevoegen. Dit is een afbeelding die verschijnt als de video nog niet is gestart. Door autoplay toe te voegen, start de video automatisch. Het is de vraag of u dat wilt, want veel bezoekers klikken liever zelf op de startknop om de video te laten beginnen. Wel kunt u overwegen de code preload="auto" toe te voegen. Hiermee zal de video tijdens het laden van de pagina alvast laden. Indien u ‘autoplay’ hebt toegevoegd, wordt deze waarde genegeerd. Als u hier ‘none’ opneemt, gebeurt dat niet. Ook kunt u de tag preload de waarde ‘meta’ meegeven. Dan worden alleen de metadata alvast geladen. Door controls toe te voegen, komen de knoppen start, stop, pauze, et cetera tevoorschijn. Net als bij audio is het ook hier weer afhankelijk van de browser of een bepaald videofragment afgespeeld kan worden. In de volgende tabel staat welke browsers overweg kunnen met welke videocodecs:
Om te voorkomen dat bezoekers van uw site een video niet kunnen afspelen doordat hun browser de codec niet ondersteunt, kunt u meerdere sourcebestanden opnemen in uw code. De code wordt dan bijvoorbeeld:
<video> <source src='video.mp4'> <source src='video.m4v'> <source src='video.ogv'> </video>
-
Wanneer de browser het eerste bestand niet kan afspelen, zal automatisch het volgende worden geprobeerd. Eventueel kunt u als laatste fallbackoptie ook een code opnemen voor Flash-video.
De animatiefilm Big Buck Bunny in een html5-speler.
Het plaatsen van audio in een webpagina is bijzonder eenvoudig met html5 dankzij het <audio>-element. De huidige specificaties voor html5 bieden op dit moment de volgende attributen:
src − hiermee geeft u aan op welke locatie het audiobestand zich bevindt;
autoplay − dit bepaalt of de audio direct moet gaan spelen;
loop − dit bepaalt of de audio zich moet herhalen;
controls − hiermee bepaalt u of de browser de standaard mediaknoppen (start, stop, volume) moet tonen;
preload − hierbij hebt u de opties none, metadata en auto. Bij metadata zal alleen de metadata geladen worden, terwijl bij auto de browser beslist of het bestand wordt geladen.
Een eenvoudig voorbeeld van het gebruik van deze elementen is:
<audio src=’geluid.mp3’ controls preload=’auto’></audio>
-
Dit voorbeeld werkt in Safari, Chrome en Internet Explorer 9. De browsers Firefox en Opera ondersteunen helaas het mp3-bestandsformaat niet. Om mensen die deze browser gebruiken toch ook te voorzien van geluid, kan een regel worden toegevoegd. De volledige code wordt dan:
<audio controls preload=’auto’ autobuffer> <source src="geluid.mp3" /> <source src="geluid.wav" /> </audio>
-
Als de webbrowser het eerste bestand niet kan afspelen omdat er geen codec voorhanden is, zal de browser het tweede bestand proberen. Overigens is de veiligste keuze wav(?). Dit bestandstype wordt door Firefox, Safari, Chrome, Opera en Internet Explorer 9 ondersteund.
Wilt u er zeker van zijn dat iedereen de audio kan horen, dan kunt u na de tweede <source>-element nog een zogeheten fallback inbouwen naar een Flash-element. Die zal de video dan in Flash afspelen als de andere opties niet werken. Dit biedt bijvoorbeeld een oplossing voor Internet Explorer 8.
Wie bekend is met html, zal weinig moeite hebben om html5 te leren. Net als bij html moet een webpagina die html5 gebruikt, beginnen met het !doctype-element. In html5 is het zelfs een stuk eenvoudiger geworden. Voorheen moest een xhtml1.0-site beginnen met deze code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
Bij een html5-pagina kunt u volstaan met:
<!DOCTYPE html>
-
Daarna is er weinig verschil met een ‘gewone’ html-pagina:
<html> <head> <title>Titel</title> </head> <body> <header> <h1>Pagina titel</h1> </header> <nav> <!-- Navigatie --> </nav> <section> <!-- Hoofdcontent --> </section> <aside> <!-- Zijbalk --> </aside> <footer> <!-- Voettekst --> </footer> </body> </html>
-
U ziet dat het met enige html-kennis goed te begrijpen is. Toch vallen enkele nieuwe tags op, zoals <header>, <nav>, <section>, et cetera. Html5 streeft daarmee een nauwkeurige structuur van de pagina na.
