HTML Afbeeldingen
Afbeeldingen zijn een hoofdbestanddeel van elke web designer, dus is het erg belangrijk dat je begrijpt hoe je ze moet gebruiken. Om een afbeelding te plaatsen op een website, moet men weten waar het beeld-bestand zich bevindt op de webserver.Om een afbeelding toe te voegen aan je HTML-document hoef je alleen maar een regel tussen te voegen met de tag <img>. Hiermee worden de beelden vastgelegd in HTML. Om een afbeelding op een pagina weer te geven, moet je het attribuut src gebruiken. Src staat voor "source". De waarde van het attribuut src is de URL van de afbeelding die je wilt weergeven.
<img src="url" alt="naam_afbeelding">De url verwijst naar de locatie waar het beeld is opgeslagen. Een afbeelding met de naam "flowers", gelegen in de map "img" op "www.site.nl" heeft de URL: www.site.nl/img/flowers.jpg.
<img src="www.site.nl/img/flowers.jpg" alt="bloemen">Merk op hoe de img element wordt geopend en gesloten met dezelfde tag. Het img element bestaat uit attributen zonder inhoud, daarom is een beëindiging niet nodig.
 |
De naam van de afbeelding hebben we "flowers" gegeven. ".jpg" vertelt de browser dat het te maken heeft met een afbeelding. Er zijn 3 verschillende soorten afbeelding bestandstypen die je kunt invoegen in je pagina:
GIF (Graphics Interchange Format) |
 |
GIF-afbeeldingen zijn meestal het beste voor graphics en tekeningen, terwijl de JPEG-beelden meestal beter zijn voor foto's. |
Dit is om twee redenen: Ten eerste GIF-afbeeldingen alleen bestaan uit max 256 kleuren, terwijl de JPEG beelden bestaan uit miljoenen kleuren. Ten tweede het GIF-formaat is beter in het comprimeren van eenvoudige beelden dan de JPEG indeling, die is geoptimaliseerd voor meer complexe beelden. Hoe beter de compressie, hoe kleiner de grootte van het beeldbestand, hoe sneller je pagina's kunnen laden. Zoals je waarschijnlijk weet kunnen onnodig 'zware' pagina's zeer vervelend zijn voor de gebruiker.
De GIF en JPEG formaten zijn de meest voorkomende afbeelding bestandstypen, maar de laatste tijd, is het PNG formaat meer en meer populairder geworden (vooral ten koste van het GIF-formaat). Het PNG-formaat bevat in vele opzichten het beste van zowel de JPEG en GIF formaat: miljoenen kleuren en is effectief te comprimeren.
Het alt attribuut
Het alt attribuut wordt gebruikt om een alternatieve beschrijving van een afbeelding te geven, als de afbeelding niet kan worden weergegeven. Dit is vooral belangrijk als de pagina langzaam wordt geladen of als de gebruiker een schermlezer gebruikt. Gebruik daarom altijd het alt attribuut.
<img src="html.jpg" alt="HTML leren">Sommige browsers laten de tekst van het alt attribuut verschijnen in een kleine pop-up box wanneer de gebruiker zijn cursor plaatst op de afbeelding. Houd er rekening mee dat bij gebruik ven het alt attribuut, het doel is om een alternatieve beschrijving van het beeld te geven.
Het title attribuut
Het title attribuut kan worden gebruikt om informatie toe te voegen aan het beeld:<img src="html.jpg" alt="HTML leren" title="Leer HTML op Codecenter.nl">
 |
Als je, zonder te klikken, de cursor op de afbeelding hiernaast plaatst dan zie je de tekst: "HTML Leren" verschijnen in een kleine pop-up box. |
De breedte en hoogte van een afbeelding
De "width" en "height" attributen worden gebruikt om de breedte en hoogte van een afbeelding in te stellen.De attribuut waarden worden standaard opgegeven in pixels:
<img src="flowers.jpg" alt="bloemen" width="240" height="180">
Je kunt ook het style attribuut gebruiken om de breedte en hoogte van een afbeelding in te stellen.
De waarden worden opgegeven in pixels (gebruik px achter de waarde):
<img src="flowers.jpg" alt="bloemen" style="width:240px; height:180px;">Het is goed om te weten dat de werkelijke grootte in kb of mb van het beeldbestand gelijk blijft ook al wordt de afbeelding op het scherm kleiner weergegeven. Probeer daarom je afbeelding zo min mogelijk te verkleinen met behulp van de "width" en "height" waarden. Probeer in plaats daarvan altijd het formaat van je afbeeldingen in een grafisch programma aan te passen. Op deze manier worden je pagina's sneller.
Voorbeeld:
<img src="images/flowers.jpg" title="Normaal" width="240" height="180">
<br />
<img src="images/flowers.jpg" title="Vergroot" width="310" height="250">
Afbeelding uitlijnen
In het verleden, gebruikten we het element <center> voor het centreren van afbeeldingen. Sinds de komst van HTML5 wordt gebruik gemaakt van het style attribuut om een afbeelding in het midden te plaatsen.
Links of rechts uitlijnen
Een afbeelding uitlijnen naar links of rechts kan heel makkelijk met CSS dit werd vroeger in HTML gedaan met align="left" of "right". In het onderstaande voorbeeld gebruiken we float voor het uitlijnen van een afbeelding.
Voorbeeld:
<p>
<img src="images/penguin.jpg" style="float:left; width:61px; height:46px;">
De afbeelding is toegevoegd aan een paragraaf. De afbeelding wordt links uitgelijnt
zodat de tekst rechts van de afbeelding wordt geplaatst.
</p>
