Afbeeldingen in HTML en een afbeelding invoegen in HTML |
|
Een afbeelding invoegenDe meeste gebruikte bestandsformaten voor afbeeldingen op websites zijn gif, jpg, jpeg, png en bmp. BMP kun je echter beter niet gebruiken; deze zijn te groot waardoor de laadtijd van je webpagina te lang wordt. Zorg er ook voor dat je niet teveel plaatjes op een webpagina zet vanwege de laadtijd. Hou de grootte van je bestand in de gaten. Hoe kleiner de afbeelding, hoe sneller je website geladen wordt. Maak de afbeelding niet groter dan 600 x 400 pixels tenzij het niet anders kan. Beperk de resolutie tot 72 dpi. Dit is de afstand tussen de pixels. Hoe hoger de resolutie, hoe meer pixels op een oppervlak. Gebruik thumbnails waar het kan. Thumbnails zijn kleine afbeeldingen waarop je kan klikken om de grote afbeelding te zien. De attributen width en heightDe attributen height (hoogte) en width (breedte) voeg je in principe ook altijd toe aan he HTML code. Height en width vertellen de browser welke afmetingen de afbeelding heeft. De browser laat deze ruimte eerst “open”en gaat verder met het laden van de tekst van de pagina. Pas als de tekst geladen is laadt de browser alle afbeeldingen. Hoe meer afbeeldingen op de webpagina, hoe langer het duurt voor alles is geladen. Met onze snelle internetverbindingen zien we vaak niet eens at de tekst eerst geladen wordt en daarna pas de afbeeldingen. Met behulp van de attributen height en width kan je de afbeelding ook verkleinen via de code. Een voorbeeld van een IMG tag met de bijbehorende attributen: Afbeelding uitlijnenNet zoals je een stuk tekst kunt uitlijnen, kan een afbeelding ook uitgelijnd worden. Je kunt een afbeelding links, rechts of in het midden uitlijnen. Om de afbeelding links of rechts op de pagina te positioneren gebruik je het attribuut align. De waarden van align kunnen left, right of center zijn. Left en right zijn uiteraard links en rechts, en als je de afbeelding in het midden wilt hebben gebruik je center. Bijvoorbeeld: Een afbeelding als achtergrondJe kunt een afbeelding ook als achtergrond oor je hele webpagina gebruiken. Je zet de naam van de afbeelding, dan in het attribuut background in de Body tag van de HTML pagina. Bijvoorbeeld: Witruimte romdom een afbeeldingAls je afbeelding en tekst te dicht op elkaar staan, kun je een witruimte creëren rondom je afbeelding. Dit doe je met de attributen hspace en vspace. Hspace staat voor horizontal space en vspace voor vertical space. De waarden van hspace en vspace liggen tussen de 1 en 100; dat zijn het aantal pixels wit links en rechts, of onder en boven de afbeelding. Alternatieve tekstJe kunt voor elke afbeelding een alternatieve tekst opgeven. Deze tekst wordt dan weergegeven op je webpagina op de plaats van de afbeelding indien de browser om welke reden dan ook de afbeelding niet weer kan geven. De alternatieve tekst komt in het attribuut alt te staan. Spraakbrowsers die door blinden en slechtzienden gebruikt wordt lezen deze alternatieve tekst ook voor. Een voorbeeld: Rand om afbeeldingMet het border attribuut kun je de dikte van de rand om je afbeelding aangeven. Sommige browsers zetten al automatisch om elke afbeelding een rand. Als je dat niet wilt neem je het border attribuut op met de waarde “0”. |
Plaatjes zeggen vaak meer dan woorden. Ze voegen waarde toe aan je website. Dit artikel gaat over het gebruiken van afbeeldingen op je HTML webpagina. Afbeeldingen kunnen bijvoorbeeld foto’s, plaatjes, knoppen, tekeningen of achtergronden zijn.
Je kunt ons sponsoren door dit artikel te delen met je vrienden. Gebruik dan de buttons hierboven!
