Plaatjes

De voorbeelden gaan uit van een HTML-pagina met Enter wordt een nieuwe regel en Alles in het midden uit. Staan die aan (zo begint een nieuwe pagina), dan wordt elke Enter in je code een witregel en staat alles in het midden. Zet ze uit in de editor als je een voorbeeld plakt.

Een plaatje zet je in je pagina met de tag <img>. Het plaatje zelf moet eerst in je eigen map staan: Mijn bestanden. Of je kiest er een uit de galerij van Profielhulp.

Plaatjes in Mijn bestanden zetten

In Mijn bestanden kun je op twee manieren een plaatje toevoegen:

Uploaden van je computer of telefoon: JPG, PNG, GIF of WebP, tot 2 MB per plaatje. Je kunt er meer tegelijk kiezen.
Binnenhalen van internet: plak het adres van een plaatje bij "Plaatje van internet". De site haalt het op en zet het in je eigen map. Zo verdwijnt het niet als de andere site ooit offline gaat, zoals met zoveel plaatjes van vroeger gebeurd is.

Je hebt ruimte voor 100 bestanden en 25 MB samen. Een heel groot plaatje maakt de site kleiner, tot hoogstens 1600 bij 1600 pixels.

Een plaatje in je pagina zetten

Elk bestand heeft een naam, zoals hartje.gif. Die naam zet je in src: <img src="hartje.gif" alt="">. Hoofdletters en spaties worden bij het uploaden kleine letters en streepjes; de echte naam zie je in Mijn bestanden. Daar staat bij elk plaatje ook de knop "Code kopiëren", en in de editor zet de knop "Plaatje uit Mijn bestanden" de code meteen op de goede plek.

Een plaatje uit de galerij gebruik je met het hele pad, dat begint met /assets/profielhulp/:

Plaatjes van andere sites, zoals <img src="https://…/glitter.gif">, haalt de site weg. Zet het plaatje eerst met Binnenhalen in Mijn bestanden, en gebruik dan de naam.

Alt: wat er op het plaatje staat

In alt schrijf je kort wat er op het plaatje staat. Dat lezen mensen die een schermlezer gebruiken, en het staat er als het plaatje niet laadt. Is het plaatje alleen versiering, zoals een lijntje, laat alt dan leeg: alt="". Vergeet je alt helemaal, dan zet de site er een lege neer.

Breedte, hoogte en uitlijnen

Met width en height geef je de maat in pixels. Geef je alleen de breedte, dan past de hoogte zich vanzelf aan. Is een plaatje breder dan je pagina, dan maakt de site het vanzelf smaller, ook op een telefoon.

Met align="left" of align="right" staat het plaatje links of rechts, en loopt de tekst er netjes omheen. Met hspace en vspace komt er wat ruimte omheen. Wil je dat de volgende tekst weer onder het plaatje begint, zet dan <div style="clear: both"></div> ertussen.

<img src="/assets/profielhulp/strak/tekens/cirkel-roze.svg" alt="" width="48" height="48" align="left" hspace="8">
<p>Dit plaatje staat links, en de tekst loopt er rechts langs. Bij een lang verhaal gaat de tekst daarna gewoon onder het plaatje verder.</p>
<div style="clear: both"></div>
<p>Deze regel begint weer onder het plaatje.</p>

Let op met pixelplaatjes: maak je die groter dan ze zijn, dan worden ze wazig. De strakke plaatjes uit de galerij blijven op elke maat scherp.

Bewegende plaatjes

Bewegende GIF's werken gewoon, net als vroeger. In Mijn bestanden staat er "beweegt" bij. Sommige bezoekers hebben op hun computer of telefoon ingesteld dat ze minder beweging willen, bijvoorbeeld omdat bewegende dingen hen afleiden of misselijk maken. Zij zien vanzelf een stilstaande versie: het eerste beeldje van je plaatje. Daar hoef je zelf niets voor te doen.

Een plaatje dat ook een link is, maak je zoals in Links maken. Een plaatje als achtergrond staat in Achtergrond veranderen.