Een afbeelding toevoegen met HTML

1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/67\/Insert-Images-with-HTML-Step-1-Version-2.jpg\/v4-460px-Insert-Images-with-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/67\/Insert-Images-with-HTML-Step-1-Version-2.jpg\/v4-728px-Insert-Images-with-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   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.
2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/Insert-Images-with-HTML-Step-2-Version-2.jpg\/v4-460px-Insert-Images-with-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/Insert-Images-with-HTML-Step-2-Version-2.jpg\/v4-728px-Insert-Images-with-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   2
   Open een nieuw document in een tekst editor (b.v. , Kladblok/Notepad) of open de pagina in je website/profiel waar je de HTML code direct kunt wijzigen.
3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/ba\/Insert-Images-with-HTML-Step-3-Version-2.jpg\/v4-460px-Insert-Images-with-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/ba\/Insert-Images-with-HTML-Step-3-Version-2.jpg\/v4-728px-Insert-Images-with-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/Insert-Images-with-HTML-Step-4-Version-2.jpg\/v4-460px-Insert-Images-with-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Insert-Images-with-HTML-Step-4-Version-2.jpg\/v4-728px-Insert-Images-with-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/32\/Insert-Images-with-HTML-Step-5.jpg\/v4-460px-Insert-Images-with-HTML-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/32\/Insert-Images-with-HTML-Step-5.jpg\/v4-728px-Insert-Images-with-HTML-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   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="Just in case" title="Tooltip"/>

1. 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="Just in case" title="Tooltip" height="50%" width="50%" />
     {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c6\/Insert-Images-with-HTML-Step-6Bullet1-Version-2.jpg\/v4-460px-Insert-Images-with-HTML-Step-6Bullet1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c6\/Insert-Images-with-HTML-Step-6Bullet1-Version-2.jpg\/v4-728px-Insert-Images-with-HTML-Step-6Bullet1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
   • <img src="URL of image" alt="Just in case" title="Tooltip" height="25px" width="50px" />
     {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3a\/Insert-Images-with-HTML-Step-6Bullet2-Version-2.jpg\/v4-460px-Insert-Images-with-HTML-Step-6Bullet2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3a\/Insert-Images-with-HTML-Step-6Bullet2-Version-2.jpg\/v4-728px-Insert-Images-with-HTML-Step-6Bullet2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}