HTML5 - Afbeeldingen

• Informatica
• Middelbare school
• havo
• Leerjaar 4

HTML5 - Afbeeldingen

Leerdoel

Aan het eind van deze les kan je met behulp van HTML5 afbeeldingen toevoegen aan een website en kan je van een afbeelding een hyperlink maken.

Eerst even herhalen

Met welke tag maak je een hyperlink?

<u>Hallo allemaal</u>
In een webbrowser staat deze tekst...

1. cursief
2. dikgedrukt
3. onderstreept

Dit is ^tekst
De tekst "tekst" staat in een webbrowser...

1. als superscript (hoog)
2. als subscript (laag)

IMG-tag

<img src="huis1.gif" alt="Het huis van Roger." title="Dit is mijn huis" width="150" height="188">

<img src="huis1.gif" alt="Het huis van Roger." title="Dit is mijn huis" width="150" height="188">

Attributen

src: locatie van de afbeelding.

alt: tekst die wordt weergegeven als de afbeelding niet weergegeven kan worden.

title: tekst die verschijnt als je met de muis op de afbeelding gaat staan.

width en height: hiermee geef je aan hoe breed en hoog de afbeelding moet zijn. Deze  zijn optioneel. Geef je deze attributen niet mee dan zal de afbeelding op ware grootte worden weergegeven.

<img src="img/huis1.gif" alt="Het huis van Roger." title="Dit is mijn huis" width="150" height="188">

Afbeelding staat in een andere map

Bij grote websites worden mappen gebruikt om alle verschillende bestanden van de website te ordenen. Afbeeldingen staan dan vaak in een submap met de naam img of images. 

Stel, de afbeelding huis.gif staat in de map img. Dan ziet het src attribuut er als volgt uit:

src="img/huis.gif"

<a href="pagina2.html"><img src="img/huis1.gif" alt="Het huis van Roger." title="Dit is mijn huis" width="150" height="188"></a>

Afbeelding als hyperlink

Je kan een afbeelding ook instellen als hyperlink. Dit houdt in dat wanneer je op een afbeelding klikt je naar een andere HTML pagina of website kan gaan.

Om van een afbeelding een hyperlink te maken plaats je de IMG-tag op de plek waar je anders de tekst voor de hyperlink zou plaatsen.

<img src="planets.gif" width="145" height="126" alt="Planeten" title="Planeten" usemap="#planetmap">

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126" alt="Zon" title="Zon" href="sun.html">

  <area shape="circle" coords="90,58,3" alt="Mercurius" title="Mercurius" href="mercur.html">

  <area shape="circle" coords="124,58,8" alt="Venus" title="Venus" href="venus.html">

</map>

Gedeelte afbeelding als hyperlink

Je kan ook een specifiek gedeelte van een afbeelding instellen als hyperlink. Dit doe je met tag map.

Het attribuut shape kan zijn:

- rect (vierkant / rechthoek)

- circle (cirkel)

- poly (driehoek)

Het attribuut coords geeft de afmeting van het te klikken onderdeel.

coords attribuut

rect = x1,y1,x2,y2 (links, boven, rechts, onder)

cirle = x,y,radius (midden van cirkel + straal)

poly = x1,y1,x2,y2,..,xn,yn

Opdracht

Maak een nieuwe webpagina met daarin een afbeelding die je hebt gevonden op het internet. Gebruikt de correcte HTML5 opbouw van je pagina.