Afbeeldingen toevoegen aan je website
Eindresultaat webpagina met afbeeldingen
In onze eerste les over websites maken bespraken we de eerste stappen om een eenvoudige pagina te creëren. Je kan de code uit de vorige tutorial hierbij verder gebruiken indien je dat wenst. Zorg er voor dat je twee paragrafen hebt zodat we wat meer kunnen gaan spelen met onze inhoud.
images folder en code
Vooraleer we klakkeloos beginnen te werken met afbeeldingen is het slimmer om wat gestructureerd aan de slag te gaan. We creëren dus eerst een nieuwe map genaamd ‘images’ op de locatie waar onze .htm of .html file zich bevindt. De images die je wil gaan gebruiken voor je webpagina plaats je in deze map. Wat je tot hiertoe zou moeten hebben zie je in de screenshot rechts.
Nu kunnen we onze afbeelding eindelijk op onze pagina plaatsen. Dat doen we door één eenvoudig lijntje code en die komt uiteraard in onze body terecht. Waar dat is in onze body is niet belangrijk maar we plaatsen hem nu in de eerste paragraaf.
<p>
<img src=”images/example.jpg”/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, justo non dictum viverra,
dolor tortor volutpat ipsum, vel lacinia elit risus in quam. Proin ut arcu id enim consequat suscipit
sed vel ligula. In mollis consequat tincidunt. Donec ac purus accumsan purus tristique viverra a venenatis
magna.
</p>
Bij dit lijntje code hebben we iets nieuw gedaan. We hebben een attribuut gebruikt, namelijk “src” welke het pad naar onze afbeelding beschrijft.
Informatie over de attributen
Naast het attribuut src zijn er nog verschillende anderen. Hieronder zie je er nog een aantal.
width
height
align
alt (alternative)
border
Je bent vrij om deze attributen zelf even uit te proberen en er wat mee te prutsen. Met width en height kan je bijvoorbeeld de maten van je afbeelding instellen.
<img src=”images/example.jpg” height=”128px” width=”128px”/>
Je afbeelding wil je waarschijnlijk ook beter in de tekst integreren. Daar moeten we de uitlijning of het attribuut align voor gebruiken. Dit attribuut kan je de waarde left of right geven.
<img src=”images/example.jpg” height=”128px” width=”128px” align=”left”/>
Het resultaat hiervan kan er misschien een beetje vreemd uitzien maar om het helemaal perfect te maken hebben we tabellen nodig en dat leggen we later pas uit. Met het alt attribuut geef je een alternatief tekstje mee dat verschijnt wanneer je met je muis op de afbeelding gaat staan (hover) of wanneer de afbeelding door een technisch probleem niet gevonden kan worden.
<img src=”images/example.jpg” height=”128px” width=”128px” align=”left” alt=”my picture”/>
Onze uiteindelijke voorbeeldcode
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<title>
My first webpage
</title>
</head>
<body>
<h1>Title</h1>
<p>
<img src=”images/example.jpg” height=”128px” width=”128px” align=”left” alt=”my picture”/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, justo non dictum viverra,
dolor tortor volutpat ipsum, vel lacinia elit risus in quam. Proin ut arcu id enim consequat suscipit
sed vel ligula. In mollis consequat tincidunt. Donec ac purus accumsan purus tristique viverra a venenatis
magna.
</p>
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, justo non dictum viverra,
dolor tortor volutpat ipsum, vel lacinia elit risus in quam. Proin ut arcu id enim consequat suscipit
sed vel ligula. In mollis consequat tincidunt. Donec ac purus accumsan purus tristique viverra a venenatis
magna.
</p>
</body>
</html>
Het resultaat dat we hiermee hebben verkregen kan je zien op de afbeelding aan het begin van dit artikel.
- Geplaatst op 23/01/2012 door elsticky
- Geplaatst in Website maken
- 53 views
- Reageren?
