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:
Links een ongenummerde lijst: element ul
(ul staat voor unordered list)
rechts een genummerde lijst: element ol
(ol staat voor ordered list)
Een lijst bevat een of meer lijst items. Elk item bestaat uit een element li
met tussen <li> en </li> de tekst van het item.
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
<ahref="https://www.youtube.com/watch?v=YlToR7RdfFQ"target="_blank" title="opent in een nieuw venster">
Terug naar Terschelling
</a>
Toelichting:
De begin-tag van de hyperlink is verdeeld over de eerste drie regels:
Op de eerste regel staat achter href het webadres van het filmpje.
Zo'n webadres kun je het beste kopiëren van de website van het filmpje.
Op de tweede regel geeft target="_blank" aan dat de link wordt geopend in een nieuw venster.
De derde regel geeft (in het attribuut title) de 'tooltip': Als je over de link beweegt, verschijnt de tekst 'opent in een nieuw venster'.
Let op: Daarachter staat nog het sluithaakje > van de openingstag. Vergeet dat niet!
Op de vierde regel staat de tekst waarop je moet klikken.
Op de vijfde regel volgt nog de eind-tag </a>.
Zoals je weet mag je de regelindeling veranderen, bijvoorbeeld alles op één regel.
Voor- en nadelen van een link naar een filmpje
Voordeel van een link is, dat je kunt verwijzen naar een filmpje van iemand anders.
En omdat je verwijst naar die andere website schend je geen auteursrechten.
Bovendien hoef je geen moeite te doen om een film te downloaden
Video's op YouTube of Vimeo werken op bijna op iedere computer.
Nadeel van een link is dat het filmpje waarnaar je verwijst door de eigenaar van internet kan worden verwijderd.
Het is dus handig om af en toe te controleren of de link naar het filmpje nog werkt.
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
<videowidth="100%" autoplay controls muted loop><source src="img/vlag.mp4"type="video/mp4">
Je browser ondersteunt geen HTML5 video
</video>
Toelichting:
De begin-tag <video> bevat vijf attributen:
width="100%" zorgt ervoor dat het filmpje zo breed is als het venster (hier het beige vlak).
Als je 50% invult wordt het filmpje half zo klein. Je mag ook een getal opgeven, bv. 300 of 800. Dan wordt het filmpje 300 of 800 pixels (beeldpunten) breed.
Autoplay betekent dat het fimpje automatisch start.
Als je dat woord weglaat start de film niet automatisch.
Controls zorgt voor de bedieningsknoppen onderin het filmvenster.
Als je dat woord weglaat worden de bedieningsknoppen niet getoond. Je moet dan rechtsklikken in het filmpje voor de bediening.
Met loop wordt het filmpje steeds opnieuw afgespeeld. Zonder loop stopt het filmpje aan het eind.
Muted speelt het filmpje zonder geluid af. Je kan het geluid overigens wel aanzetten met de bedieningsknoppen.
Zonder dat woord start de film met geluid.
Het element source op regel 2 geeft de naam en plaats van het videobestand en het type bestand:
src="..." geeft naam en plaats van het bestand.
type="...." geeft aan om welk video-formaat het gaat (mp4, webm, ogg).
De regel daaronder geeft aan wat er in beeld verschijnt als de browser de video niet kan afspelen.
Hier 'Je browser onderteunt geen HTML5 video'. Maar er kan bv ook een afbeelding staan.
Tenslotte is er de eind-tag </video>.
Voor- en nadelen can het insluiten van een filmpje
Het insluiten van een filmpje met het element video heeft een paar voordelen.
Ten eerste kun je zo een eigen video op je website zetten, zonder die eerst te moeten uploaden naar YouTube of Vimeo.
Ten tweede staat het natuurlijk gaaf als de video op je eigen website draait.
En de mogelijkheid dat een ander de video van het internet haalt is er niet.
Er zijn ook nadelen.
Zo worden nog maar een paar video-formaten ondersteund: mp4, webm en ogg, en dat niet bij alle browsers.
Ook is het bestand van een filmpje zo'n 40Mb per minuut of meer.
Dat betekent dat je website veel opslagruimte moet hebben.
De goedkoopste web-pakketten hebben meestal niet meer dan 100-300 MB voor de hele website en dat is weinig voor een wat langere film.
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>
Een afbeelding als hyperlink
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:
Op de eerste regels staat de begin-tag van <a>. Het attribuut href in deze tag wijst naar polder.html de pagina waarheen gesprongen wordt.
Op de tweede regel staat het zichtbare deel van de link, datgene waarop geklikt kan worden. Hier is dat geen tekst, maar een afbeelding: het element <img> met 3 attributen:
src verwijst naar het bestand met de polder-afbeelding: home1.jpg in de map img.
alt geeft aan welke mededeling verschijnt als het element niet getoond kan worden (bv. in een spraak-browser voor blinden).
title geeft de 'tooltip', de mededeling die verschijnt als je de link aanwijst.
Op de derde regel staat de eind-tag </a>.
Andersom geredeneerd: als je de tweede regel door een tekst vervangt is het een gewone hyperlink.
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:
Sommige elementen hebben een of meer verplichte attributen.
Zo heeft een hyperlink gewoonlijk weinig zin zonder het attribuut href met de naam van het bestand waarheen gesprongen wordt.
Het element img heeft twee verplichte attributen: src met de URL (pad en naam) van het afbeeldinsgbestand dat getoond moet wordt en alt een tekst die wordt getoond als de browser de afbeelding niet kan tonen.
(Dat kan bijvoorbeeld een spraakbrowser zijn - voor blinden. Dan wordt de tekst in alt voorgelezen.)
(Overigens werkt het img element in de meeste browsers goed, ook als het alt-attribuut wordt weggelaten.)
Veel attributen kunnen naar wens in bijna elke element worden gebruikt, bijvoorbeeld:
het class attribuut; en het id attribuut om een een element een naam te geven, waarnaar het stijlblad kan verwijzen
het title attribuut, een tooltip die wordt getoond als het element met de muis wordt aangewezen.
Samenvatting
Lijsten
Het element ul is een ongenummerde lijst (met opsomtekens)
Het element ol is een genummerde lijst
Het element li is een item uit een lijst
Zie de naslag
Video op een website
Je kan een film op 2 manieren op een website zetten:
Met een link naar een video op internet
<ahref="http://www.plaatsvandevideo">naam</a>
Door een video in te sluiten op de website met het element video
Zie de naslag
Audio op een website
Met het audio element kan een audio-bestand worden ingesloten op een website.
Zie de naslag
Een afbeelding als hyperlink
Meestal is een hyperlink een stukje tekst:
<a href="bestemming">tekst</a>
Op de plaats van tekst kan ook een afbeelding (element img) staan.
(In feite kan daar bijna elk element staan.)
Met een klik op de tekst, of de afbeelding of wat dat daar dan ook staat wordt naar bestemming gesprongen.
Zie de naslag
Attributen
Attributen geven extra informatie aan elementen
Attributen staan altijd in de start-tag.
Sommige elementen hebben een of meer verplichte attributen, bv.
Element a heeft altijd het attribuut href (met de plaats waarheen wordt gesprongen).
Element img heeft altijd het attribuut src met de plaats van het afbeeldingsbestand.
Globale attributen kunnen gebruikt worden bij elk element. Enkele globale attributen zijn class,
id, style, title.
Zie de naslag