Websites met stijl

12. Lijsten en filmpjes

In dit hoofdstuk

Drie onderwerpen die je nodig hebt voor de pagina index.html zijn nog niet ter sprake zijn gekomen: lijsten, video's en afbeeldingen als hypelink. Deze zaken zullen we eerst bespreken, om in het volgende hoofdstuk de pagina index.html af te maken.

Een lijst

In figuur 1 zie je twee voorbeelden van een lijst:

figuur 1
ongenummerd 
<ul> <li>zeilen</li>
<li>voetballen</li>
<li>golf</li>>
</ul>
output: 
  • zeilen
  • voetballen
  • golf
genummerd 
<ol> <li>hardlopen</li>
<li>voetballen</li>
<li>golf</li>>
</ol>
output: 
  1. zeilen
  2. voetballen
  3. golf


Een video

Een hyperlink kan verwijzen naar een bestand op internet, dus ook naar bv. een YouTube of Vimeo filmpje. Op de homepage van de website vind je zo'n link: naar het liedje 'Terug naar Terschelling' van Hessel. Zie figuur 2. figuur 2

<a href="https://www.youtube.com/watch?v=YlToR7RdfFQ" target="_blank"
title="opent in een nieuw venster" >
Terug naar Terschelling
</a>
Toelichting:

Voor- en nadelen van een link naar een filmpje

Een video bestand insluiten

In HTML5 is het ook mogelijk om een filmpje in te sluiten. Dat gaat eigenlijk verrassend gemakkelijk met het element video. Zie figuur 3.

Op mijn computer werkt het (mp4-)video-filmpje uit figuur 3 met de browsers Edge, Internet Explorer, Firefox, Chrome en Opera. Met Safari werkt het niet (situatie 2020).

Werkt het bij jou? Kijk maar of hieronder een filmpje wordt afgespeeld, of dat er alleen maar de mededeling 'Je browser ondersteunt geen HTML5 video' staat.

figuur 3
<video width="100%" autoplay controls muted loop> <source src="img/vlag.mp4" type="video/mp4">
Je browser ondersteunt geen HTML5 video
</video>

Toelichting:

Voor- en nadelen can het insluiten van een filmpje

Het insluiten van een filmpje met het element video heeft een paar voordelen.

Er zijn ook nadelen.

Audio

Ook audio bestanden kan je afspelen met een link of door insluiting. In figuur 4 staat hoe het insluiten gaat. Ondersteund worden mp3, wav en ogg audiobestanden. Op onze website vind je niet zo'n audio-bestand, maar als je een gesproken commentaar wilt toevoegen.....

figuur 4
<audio controls> <source src="mijnaudio.mp3" type="audio/mp3">
Uw browser ondersteunt geen HTML5 audio.
</audio>

We zijn al hyperlinks tegen gekomen in het menu (nav) en als link naar een YouTube filmpje. In al die gevallen stond er tussen de begin-tag <a> en de eind-tag </a> een tekst (een of meer woorden). Maar er mogen ook andere elementen in de link worden geplaatst, bijvoorbeeld een afbeelding. Als je dan op de afbeelding klikt, ga je naar de pagina waarheen de links verwijst.

Dat principe is toegepast op de home-page van onze website. In het menu van de home-page kan je kiezen uit de pagina's polder, duinen, wad. Maar er staan ook drie afbeeldingen met resp. de titel polder, duinen, wad. Met een klik op een van die afbeeldingen ga je ook naar de betreffende pagina. Probeer het maar op de website. In figuur 5 zie je hoe je dat voor elkaar krijgt: figuur 5

<a href="polder.html">
<img src="img/home1.jpg" alt="polder" title="klik voor de pagina 'polder'" >
</a>
Toelichting:

Opmerking: Je zou het attribuut title="klik voor de pagina 'polder'" ook in de openingstag van a kunnen zetten. Dan ziet de code van figuur 5 ar als volgt uit: <a href="polder.html" title="klik voor de pagina 'polder'">
<img src="img/home1.jpg" alt="polder">
</a>

Attributen

Misschien vraag je je af: 'Wanneer moet ik attributen gebruiken en bij welke elementen?' Het antwoord is:

Samenvatting

Lijsten

Video op een website

Je kan een film op 2 manieren op een website zetten:

Audio op een website

Een afbeelding als hyperlink

Meestal is een hyperlink een stukje tekst:

<a href="bestemming">tekst</a>

Attributen