Hier is een internetcodering puzzel:
Wat is de HTML-code voor een afbeelding van een kat?
De oplossing is:
<img src="kat.jpg" alt="Een kat" />
Deze code zorgt ervoor dat een afbeelding met de naam kat.jpg
wordt weergegeven op de webpagina. Het attribuut src
geeft de locatie van de afbeelding aan, en het attribuut alt
geeft een alternatieve tekst aan voor de afbeelding.
Hier is een andere puzzel:
Wat is de CSS-code om een afbeelding te centreren op een webpagina?
De oplossing is:
img {
display: block;
margin: 0 auto;
}
Deze code zorgt ervoor dat de afbeelding wordt weergegeven in het midden van de webpagina. Het attribuut display: block
zorgt ervoor dat de afbeelding als een blok wordt weergegeven, en de uitlijning margin: 0 auto
zorgt ervoor dat de afbeelding wordt uitgelijnd met het midden van de container.
Hier is nog een puzzel:
Wat is de JavaScript-code om een afbeelding te laten bewegen over een webpagina?
De oplossing is:
function moveImage() {
var image = document.querySelector("img");
image.style.left = image.offsetLeft + 5;
if (image.offsetLeft > document.body.offsetWidth) {
image.style.left = 0;
}
}
setInterval(moveImage, 10);
Deze code zorgt ervoor dat de afbeelding 5 pixels per seconde naar rechts beweegt. De functie moveImage()
wordt elke 10 milliseconden aangeroepen. De functie krijgt de afbeelding als parameter. De functie geeft de stijl van de afbeelding bij. De stijl left
geeft de positie van de afbeelding aan.
Ik hoop dat je deze puzzels leuk vindt!