Een afbeelding toevoegen met HTML

Het toevoegen van afbeeldingen aan je website of sociale netwerk-profiel is een uitstekende manier om je webpagina aan te kleden. HTML (HyperText Markup Language) heeft legio functies voor het maken van webpagina's, maar de code die je nodig hebt voor het toevoegen van afbeeldingen is gelukkig niet al te moeilijk.

Methode 1

Methode 1 van 1:

Het Invoegen van Afbeeldingen met HTML

Pdf downloaden

1
Upload jouw afbeelding naar een gratis hosting website, zoals Photobucket of TinyPic, die hot-linking toestaat. Hot-linking zorgt voor de mogelijkheid van een directe koppeling van een afbeelding naar de server van de website; sommige providers hebben dit verboden omdat hot-linking hun bandbreedte gebruikt en ruimte inneemt op hun servers.
- Heb je een betaalde hosting account, upload dan de afbeeldingen direct naar de server waar je website is geplaatst. Dit is altijd meer betrouwbaar dan een gratis site en hoeft helemaal niet duur te zijn.
, Kladblok/Notepad) of open de pagina in je website/profiel waar je de HTML code direct kunt wijzigen.
3
Begin met de img tag. De img tag is leeg, wat betekent dat er geen afsluitende tag nodig is. Maar, voor XHTML validering kun je toch een space en een slash plaatsen voor het groter-dan teken.
- <img />
4
Er zijn veel beschikbare attributen, maar er is maar één noodzakelijk: src. Dat is de locatie/het adres, of ook de URL, van je afbeelding.
- <img src="URL of image" />
5
Vervolgens moet je het alt attribuut toevoegen. Dit laat een alternatieve tekst zien, voor het geval de afbeelding niet wil laden. Ook is dit een service voor slechtzienden die gebruik maakt van screen readers.
- Zweef je met de cursor boven een afbeelding, dan wordt deze tekst ook getoond als tooltip, maar dit is alleen het geval in Internet Explorer. De oplossing die bij alle browsers werkt (Firefox et al.) is om het title attribuut te gebruiken naast alt. (Deze laatste kun je weglaten als je niet wilt dat de afbeelding een tooltip heeft.)
Advertentie

Als voorbeeld:<img src="URL of image" alt="How.com.vn Nederlands: Just in case" title="Tooltip"/>

1
Nu zou je eventueel de grootte van de afbeelding nog kunnen aangeven, met het height en width attribuut, en door het specificeren van de pixels of een percentage. Merk op dat door het op deze manier veranderen van de grootte je alleen maar de grootte veranderd van de weergave, niet de grootte van de afbeelding zelf. Om de laadtijd van een afbeelding te verkorten is het beter, zeker bij grote afbeeldingen, om deze van te voren te verkleinen met fotobewerking software of met een online service zoals PicResize.com.
- <img src="URL of image" alt="How.com.vn Nederlands: Just in case" title="Tooltip" height="50%" width="50%" />
- <img src="URL of image" alt="How.com.vn Nederlands: Just in case" title="Tooltip" height="25px" width="50px" />

Tips

De waarde voor deze attributen is of gegeven in pixels, of in een percentage, van 1-100%.
De afbeelding kan overal op de webpagina worden geplaatst, met behulp van de diverse opmaak attributen zoals top, bottom, middle, right, left etc.
Het hspace attribuut wordt toegepast voor het invoegen van horizontal ruimte aan de linker en rechterkant van een afbeelding, waarbij het vspace attribuut wordt gebruikt om ruimte te maken aan de boven en de onderkant van afbeeldingen en andere objecten.
Leef je niet teveel uit met afbeeldingen. Dat ziet er rommelig en onprofessioneel uit.
Voor logos of cartoons zijn GIF afbeeldingen prima, maar voor foto's en andere afbeeldingen met veel kleuren is dit bestandstype minder geschikt.
- GIF afbeeldingen ondersteunen slechts 8-bits kleuren met een maximum van 256 kleuren voor een afbeelding. Dus valt te verwachten dat de weergave van een 16 of 24 bits kleurenillustratie of foto minder goed zal.
- GIF afbeeldingen ondersteunen ook transparantie. Eén bits transparantie is mogelijk wat inhoudt dat er één kleur transparant gemaakt kan worden.
- Interlacing wordt ook ondersteunt door GIF afbeeldingen wat inhoudt dat de bezoeker van de site een idee krijgt van hoe de afbeelding eruitziet voor deze helemaal is geladen.
- Het GIF formaat ondersteunt ook animatie.
Zorg dat de URL het bestandsformaat van de afbeelding vermeldt (.jpg .gif etc).

Advertentie