Afbeeldingen toevoegen

Leerdoel:

Na deze uitleg:

• Kun je een afbeelding toevoegen aan je website;
• Kun je de juiste grootte instellen voor een afbeelding op je website;
• Kun je de juiste positie instellen voor een afbeelding op je website.

Je hebt in de vorige les jouw website voorzien van tekst. Met HTML kun je naast tekst ook afbeeldingen op je website plaatsen. Je kunt hiervoor eigen plaatjes of foto’s gebruiken, maar je kunt ook plaatjes of foto’s van het internet halen. Denk hierbij wel aan een juiste bronvermelding. Om afbeeldingen makkelijk toe te kunnen voegen aan je website, moet je de afbeeldingen opslaan in dezelfde map/folder als de webpagina. Dit kun je ook weer via repl.it doen. Je kunt voor de afbeelding ook verwijzen naar een externe webpagina, maar hiermee wordt je wel afhankelijk van deze externe webpagina. In deze module zullen we van deze mogelijkheid dan ook geen gebruik maken.

Om een afbeelding in te voegen, gebruik je het <img> element. Dit element wordt alleen geopend en kent dus geen sluitingselement. In het openingselement neem je alle informatie op die van belang is voor het toevoegen van de afbeelding. Een <img> element ziet er als volgt uit:

<img src=”plaatje.jpg” alt=”Mooi plaatje” style=”width:128px;height:128px”>

Bij src geef je de naam van de afbeelding aan; de afbeelding moet dan wel in dezelfde map staan als de webpagina. Je kunt er ook voor kiezen om een aparte folder op de internet-server aan te maken voor alle plaatjes; dit is wel overzichtelijker. Je kunt deze folder dan bijvoorbeeld images noemen. In dat geval gebruik je bij src “/images/plaatje.jpg”.

Bij alt geef je een omschrijving van de afbeelding weer. Dit wordt gebruikt als de afbeelding door de browser niet kan worden gevonden. Daarnaast zijn er programma’s die deze omschrijving gebruiken wanneer zij de tekst van de webpagina voorlezen voor blinden of slechtzienden. Als je webpagina goed functioneert, zul je deze omschrijving niet echt tegenkomen. Voor een goede werking van je webpagina is het wel noodzakelijk dat je deze alt opneemt in je code.

Met style=”width:128px;height:128px” geef je de gewenste grootte van de afbeelding weer in pixels. Let op dat je hierbij dezelfde verhouding gebruikt als de originele afbeelding. Doe je dit niet, zal de afbeelding vervormd worden. Het originele formaat van een afbeelding (in pixels) kun je vinden bij de details van de afbeelding, bijvoorbeeld in OneDrive. Je hoeft niet hetzelfde aantal pixels aan te houden, maar de verhouding tussen de breedte en de hoogte moet wel hetzelfde blijven.

Je kunt verschillende soorten afbeeldingen gebruiken, zoals jpg, gif en png-bestanden. Door met gif-bestanden te werken, kun je ook bewegende plaatjes toevoegen aan je website.

Opdracht 7:

Je gaat nu een afbeelding toevoegen aan je webpagina.

1. Zoek een passende afbeelding uit voor je webpagina. Dit mag een jpg, gif of png-bestand van internet of een eigen foto zijn. Sla deze afbeelding op jouw computer of iPad (in OneDrive) op.
2. Ga naar de website repl.it.
3. Log in met je eigen gegevens en open je project (in team IT College - Noordik).
4. Klik in het linkerscherm (Files) op de drie puntjes en kies voor 'Upload file'.
5. Zoek jouw afbeelding op en klik hierop. De afbeelding wordt nu ge-upload en is zichtbaar bij de files (je kunt eventueel een extra map 'images' aanmaken en daar je afbeeldingen in plaatsen).
6. Kies een plek op jouw webpagina (bij index.html) waar je de afbeelding wilt invoegen. Voeg de afbeelding op deze plek in door gebruik te maken van het <img> element. <img src=”plaatje.jpg” alt=”Mooi plaatje” style=”width:128px; height:128px”> Gebruik hierbij de naam van jouw eigen afbeelding, kies een eigen omschrijving en kies een passende breedte (width) en hoogte (height).
7. Bekijk het resultaat via een webbrowser.

Opdracht 8

Je kunt nog veel meer instellen bij het toevoegen van een afbeelding. Probeer maar eens uit!

1. Kopieer de regel die je bij stap 6 van opdracht 7 hebt gebruikt nog een keer in je file.
2. Type achter “style=” de volgende tekst: "width:…px; height:…px; float:left; margin-right:20px; margin-left:100px; border:1px solid black; padding:15px"
3. Bekijk het resultaat via een webbrowser.
4. Verander nu zelf waardes achter “style=”.
5. Kijk in de webbrowser wat er met de afbeelding gebeurt en schrijf dit op.
6. We bespreken klassikaal wat je met deze waardes nu precies kunt instellen.

Opdracht 9

Voorzie je website van meerdere afbeeldingen. Pas jouw afbeeldingen aan op een manier die je zelf het mooiste vindt.