Cursus HTML
Beginner
Gevorderde
Appendix
Informatie
Referenties
Links
7 Afbeeldingen
7.1 Inleiding
Afbeeldingen worden vaak gebruikt op het Internet. Er zijn enkele puntjes waar rekening met gehouden moet worden:
- Plaats niet teveel afbeeldingen op één document, dit vertraagt de laadtijd.
- Probeer een afbeelding zo klein mogelijk te houden qua bestandsgrootte. Afbeeldingen kunnen gecomprimeerd worden met grafische software als Adobe Photoshop.
- Zorg er voor dat afbeeldingen apart worden gehouden in een bepaalde map met bijvoorbeeld als naam "afbeeldingen".
7.2 Type afbeeldingen
GIF
- (Graphics Interchange Format)
GIF wordt meestal gebruikt bij kleinere afbeeldingen, zoals bepaalde knoppen, cartoons en logo's. Het maximale aantal kleuren is 256 - JPEG
- (Joint Photographic Expert Group)
JPEG/JPG is een type dat geschikt is voor ondermeer foto's en fotografische logo's. Het maximale aantal kleuren loopt op tot in de miljoenen. Helaas ondersteunt dit type geen transparantie. - PNG
- (Portable Network Graphics)
Wanneer je een combinatie van GIF en JPEG wilt, dan biedt PNG de uitkomst. Je kunt nu foto's met miljoenen kleuren van transparantie voorzien. het nadeel is echter dat PNG niet door alle oude browsers wordt ondersteund. - BMP
- (BitMaP)
Het oudste bestandstype is BMP, wat bij Windows hoort. Je allereerste afbeelding die je ooit gemaakt hebt, is hoogstwaarschijnlijk gemaakt in Paint en was van het type BMP. Dit type heeft één groot nadeel: het kent geen compressie. Daarom worden deze afbeeldingen soms wel meer dan één MB groot, wat veel te groot is voor een afbeelding om op een website te plaatsen.
7.3 Het 'img' element
Een afbeelding wordt in HTML gedefineerd door het img element (img afgeleid van image). Dit element heeft verplicht 2 attributen die moeten worden gedefinieerd, namelijk de attributen src en alt. Het attribuut src beschrijft de locatie van de afbeelding. Het adres dat wordt ingegeven in het attribuut src kan een relatief pad of een absoluut pad zijn.
Het attribuut alt defineert een tekst die zichtbaar wordt wanneer de afbeelding niet kan getoond worden door de browser. Het is verplicht altijd een korte beschrijving te noteren bij een afbeelding.
Met de attributen width en height is het mogelijk de afmetingen van de afbeelding te wijzigen. De waarde van deze attributen is een getal en bepaalt het aantal pixels. Het wordt aangeraden de afmetingen van de afbeelding vast te leggen. De browser weet dan hoeveel ruimte hij moet reserveren voor de desbetreffende afbeelding met als gevolgd dat de inhoud errond al op de juiste plaats kan getoond worden terwijl de afbeeldingen worden geladen.
Een afbeelding met als locatie "http://www.cursushtml.be/afbeeldingen/appel.jpg" met een breedte van 177 pixels en een hoogte van 182 pixels ziet er zo uit in HTML:
<img src="http://www.cursushtml.be/afbeeldingen/appel.jpg" width="177" height="182" />Het element img wordt zoals het element br afgesloten in de start tag.
