De Help Desk punt NL
Kennisbank
De Helpdesk > De Helpdesk > Kennisbank

Over afbeeldingen en html-codes

Oplossing

Beeld maakt boeiend! Vrolijk je website op met foto’s of illustraties – lees hier hoe je dat doet.

Websites zonder afbeeldingen zullen er niet veel zijn. En ook al heb je misschien niet op elke pagina een foto of illustratie nodig, webpagina’s met alleen tekst zijn gauw saai. Maar welke html-code heb je nodig om een afbeelding te laten weergeven, hoe maak je een slideshow of fotogalerij en waar haal je eigenlijk leuke afbeeldingen vandaan? Genoeg vragen om een aantal artikelen aan te wijden:

  • Wil je snel een afbeelding in je webpagina kunnen opnemen, bekijk dan deze voorbeeld html-code met uitleg. In ditzelfde artikel beschrijf ik ook op welke manieren je je afbeeldingen geschikt maakt voor je website (je moet ervoor zorgen dat ze niet te groot zijn bijvoorbeeld, want anders duurt het veel te lang voordat browsers je pagina geladen hebben).

  • Als je een rood kruisje te zien krijgt in plaats van je foto, wil dat niets anders zeggen dan dat je browser de foto waarnaar je in je html-code verwijst, niet kan vinden. Hier geef ik 7 vragen die je kunt stellen om je te helpen de oorzaak van zo’n rood kruisje op te sporen.

  • De ene afbeelding is de andere niet: een foto is iets heel anders dan een illustratie in zwart-wit bijvoorbeeld. Sommige afbeeldingen kun je het beste opslaan in jpg, voor andere kun je beter gif, png of misschien svg gebruiken. In het artikel jpg, gif, png of svg? geef ik een paar vuistregels.

  • Als je website responsive is (de layout ervan past zich vanzelf aan aan de breedte van je scherm), maar je foto’s zijn niet responsive, dan zijn je webpagina’s waar die foto’s op staan nog steeds niet goed op een smartphone te bekijken. Codeer daarom je afbeeldingen zo dat ook zij automatisch binnen de breedte van het scherm passen. In het artikel over responsive foto’s vertel ik je hoe je dat doet.

  • Foto’s of afbeeldingen kun je ook als achtergrond voor je site (of voor een enkele pagina) gebruiken. In het artikel Hoe krijg je een foto als achtergrond op je website? leg ik uit hoe je dat doet, en hoe je ervoor zorgt dat deze achtergrond meeverschuift als je je browservenster groter of kleiner maakt.

  • Wil je een verzameling foto’s op je website laten zien, dan geef ik in het artikel Leuke manieren om foto’s op je website te zetten een paar suggesties om ze op een aantrekkelijke en overzichtelijke manier te presenteren. Mét links naar voorbeelden en installatie-instructies.

  • Thumbnails zijn verkleinde versies van foto’s die je laat zien in een fotogalerij of pop-up. Op deze pagina leg ik je stap voor stap uit hoe je zelf thumbnails maken kunt van je bestaande foto’s.

  • Een favicon is een heel klein, vierkant plaatje dat je vaak links van een websitenaam in de url-balk ziet staan. Je website kan natuurlijk best zonder, maar zo’n plaatje zorgt er wel voor dat je site gemakkelijker te herkennen is en professioneler oogt. Dus heb je nog geen eigen favicon, zorg er dan snel voor dat je er een krijgt!

  • Heb je veel foto’s om op je website te laten zien, dan zou je daarvan een mooie fotogalerij kunnen maken. Ik leg uit hoe je een responsive fotogalerij maakt, die ook op smartphones en tablets goed overkomt.

  • Foto’s en afbeeldingen (en zelfs een galerij) zijn op zich natuurlijk vrij statisch. Een slideshow geeft door de bewegende beelden en interactiviteit direct leven aan je site. In 9 stappen leer ik je een prachtige slideshow te maken, die bovendien responsive is, en zich dus zonder moeite aanpast aan de breedte van het beeldscherm.

  • Foto’s en afbeeldingen kun je zelf maken, maar heb je geen geschikte foto’s bij de hand, dan geef ik je hier twee manieren waarop je gratis afbeeldingen downloaden kunt voor je website, ook als je ze commercieel wilt gaan gebruiken.

 
Was dit artikel bruikbaar? ja / nee
Gerelateerde artikelen Website maken sitemap
Wat is de html-code voor een foto of andere afbeelding?
Maak ook de foto’s op je website responsive!
Over letters, tekst en html-codes
Leuke manieren om foto’s op je website te zetten
Ik zie een rood kruisje in plaats van mijn foto!
Waar kan ik gratis afbeeldingen downloaden?
Tips en tools voor website-beheer
Organiseer je website-foto’s in een fotogalerij
Een website beginnen, vijf zaken waar je niet buiten kunt
Artikel details
Artikel ID: 696
Categorie: Een eigen website maken - Afbeeldingen
Zoekwoorden afbeeldingen, html, code, html-code, css, css-code, foto, foto's, afbeelding, web, site, websitem plaatsen, jpg, gif, png, svg
Datum toegevoegd: 5-Dec-2017 08:35:38
Aantal bekeken: 3449
Beoordeling (Stemmen): Artikel beoordeeld 5.0/5.0 (1014)

 
« Ga terug