Afbeelding

Een website zonder afbeeldingen is natuurlijk een beetje saai. Omdat een website vaak meerdere afbeeldingen bevat is het handig om een mapje te maken waar je al je afbeeldingen inzet.

Zie onderstaande om een nieuw mapje te maken. Noem deze 'images'

add image

 

Zoek een afbeelding (bv met google afbeeldingen) sla deze op, bijvoorbeeld in 'downloads'

Nu gaan we de afbeelding aan onze repl.it omgeving toevoegen. Zie onderstaande

upload file

Selecteer je bestand dat je gedownload hebt en klik op 'Openen'.

Sleep het bestand nog even in het 'images' mapje

 

Nu gaan we onze afbeelding toevoegen aan onze index.html pagina. Let op bij ons heet de afbeelding computer.png. De afbeelding wordt toegevoegd met het src attribute (source)

<img src="images/computer.png" alt="computer">

Let op het attribuut alt is verplicht. Dit is voor browsers die geen afbeelding kunnen laten zien.

Het is mogelijk om ook een attribuut voor de width/heigth mee te geven. Maar wij zien dit liever in de de CSS.

img {
    width: 300px;
    height: 200px;
}

Als je alleen de width of height meegeeft blijft het aspect-ratio van de afbeelding behouden. Dus geen vervorming van de afbeelding.

Het zoeken van afbeeldingen of het maken van afbeeldingen kan een tijdrovende bezigheid zijn. Je kan ook dummy afbeeldingen gebruiken. Om een pagina globaal in te delen.

Kijk op https://dummyimage.com/ voor dummy afbeeldingen.
Voorbeeld: (zwart met blauwe letters afmeting 300x200pixels)

<img src="https://dummyimage.com/300x200/000/0ff">

 

Uiteraard kan je een afbeelding dmv CSS opmaken. Bijvoorbeeeld een ronde rand.

.rond {
    border-radius: 5px;
}
<img class="rond" src="images/computer.png" alt="computer">