In een vorige les heb je geleerd hoe je een hyperlink maakt. In Markdown ziet de link naar een afbeelding ongeveer hetzelfde uit.
Zoals met links zijn er ook twee manieren om een afbeelding weer te geven. Inline en via een referentie. We kijken eerst hoe een inline afbeelding weergegeven wordt. Een inline afbeelding herken je door het uitroepteken( ! ) in de code. .
Onze eerste afbeelding die we gaan gebruiken wordt een inline afbeelding. Hiervoor gebruiken we net zoals met links ronde( Maak onderstaande voorbeeld af. Zorg ervoor dat de alternatieve de afbeelding beschrijft als 'een knappe kat'. ( )) en vierkante ([ ]alternatieve weergave te staan. Deze tekst kan voorgelezen worden voor iemand met een visuele beperking. Tussen de ronde haken komt de link te staan naar de afbeelding. Dit voorbeeld laat een plaatje zien. . In het eerste deel staat een uitroepteken, daarna vierkante haken (met daartussen een beschrijving van de afbeelding) en daarna ronde haken (met de link naar dit plaatje https://about.gitlab.com/images/press/logo/png/gitlab-icon-1-color-black-rgb.png)
Goed gedaan!
Het is niet verplicht om een alternatieve weergave in te vullen. Maar het zorgt ervoor dat je website ook toegangelijk wordt voor mensen met een visuele beperking en mensen met een langzame verbinding.
We gaan nu aan de slag met referentie afbeeldingen. Hiermee kun je in een keer meerdere dezelfde afbeeldingen weergeven. De code voor een referentie afbeelding werkt als volgt.![Een afbeelding komt hier][Afbeelding1]. Het begint met een ! en daarna met twee setjes vierkante [ ] [ ] haken. In de eerste staat de omschrijving (alternatieve weergave) en in de tweede de link die verderop in je Markdown code wordt ingevuld. Meestal staat dit helemaal onderaan de pagina. Daar staat dan [Afbeelding1]:https://upload.wikimedia.org/wikipedia/commons/5/56/Tiger.50.jpg Zie je tussen [Afbeelding1] : een dubbele punt staan? Hiermee geef je aan wat er weergeven moet worden op de pagina. Dit zie je bij overal waar je [Afbeelding1] gebruikt.
Maak in het onderstaande venster de volgende opdracht
Er staat twee voorbeelden. Maak ze beide af. Zorg ervoor dat je bij Black Cat deze afbeelding gebruikt https://upload.wikimedia.org/wikipedia/commons/a/a3/81_INF_DIV_SSI.jpg en bij Orange cat deze afbeelding http://icons.iconarchive.com/icons/google/noto-emoji-animals-nature/256/22221-cat-icon.png