Terug naar beginpagina Homepage-Maken.nl
YourHosting Webhosting   

Les 5

Afbeeldingen Toevoegen

De meeste afbeeldingen die voor internet gebruikt worden, zijn in .gif .jpg (.jpeg) of .bmp formaat.

Hoewel plaatjes je pagina kunnen verfraaien, moet je toch goed nadenken voor je ze opneemt, want als je er te veel gebruikt, wordt de laadtijd van je pagina veel te lang. En als er één ding is dat je moet voorkomen, is het wel dat je bezoekers je site verlaten, omdat de pagina's te langzaam laden.

<IMG> tag en het attribuut "src"

Afbeeldingen neem je op met de <IMG> tag. Het heeft geen eindtag.
Je moet altijd het attribuut src (=source) erbij gebruiken, dit attribuut vertelt de browser waar de afbeelding staat.
De waarde van src is daarom altijd een adres. Het schrijven van een adres hebben we al behandeld in les 4.

De attributen "height" en "width"

Er zijn nog twee attributen die je eigenlijk altijd moet toevoegen, namelijk height en width.
Deze attributen vertellen de browser welke afmetingen de afbeelding heeft. De browser laat deze ruimte open (ruimte in pixels) en gaat verder met het laden van de rest van de pagina.

De afmetingen van je afbeeldingen moet je kunnen zien met je grafische software, zoals Photoshop.

Nu een voorbeeld van een "IMG" tag met de bijbehorende attributen:

<IMG src="hello3d.gif" height="64" width="154">

RESULTAAT:

Plaatje

Je ziet nu hierboven de afbeelding "hello3d.gif" op het scherm verschijnen.

Afbeeldingen Uitlijnen

Als je tekst bij een bepaalde afbeelding wilt plaatsen, moet je het align attribuut gebruiken.
Align kan hier als waarde top, bottom of middle hebben (bottom is de standaard, dus als je niets invult).

Nu zie je voorbeelden van het uitlijnen van een afbeelding:

PlaatjeStandaard is de onderkant van een afbeelding uitgelijnd met de tekst, zoals je hier ziet. Hieronder zie je voorbeelden van align met waarden: top en center.

PlaatjeDit is weer hetzelfde plaatje, maar nu zie je dat de tekst aan de bovenkant van de afbeelding begint. Je ziet dat alleen de eerste regel bovenaan begint. De rest van de tekst komt weer onder de afbeelding. Dit is dus de waarde top.

De complete tag met waarde "top" wordt dus:

<IMG src="hello3d.gif" height="64" width="154" align="top">

PlaatjeHier weer dezelfde afbeelding, maar nu zie je dat de tekst ter hoogte van het midden van de afbeelding begint. Je ziet dat alleen de eerste regel in het midden begint. De rest van de tekst komt weer onder de afbeelding.

De tag met waarde "middle":

<IMG src="hello3d.gif" height="64" width="154" align="middle">

Een Afbeelding Als Achtergrond Gebruiken

Dit is al kort behandeld in de eerste les.
Je kunt een afbeelding als achtergrond voor je pagina gebruiken. Je moet dan het attribuut background in de <BODY> plaatsen.
Zo dus:

<BODY background="afbeelding.gif">

Einde Les Vijf

In deze les kwam het werken met afbeeldingen in HTML aan de orde. De belangrijkste dingen zijn hier wel behandeld: het plaatsen van de afbeeldingen, het uitlijnen en het gebruiken van een afbeelding als achtergrond.
Tijd voor de volgende les!

Homepage-Maken Tip

De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.

Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.

Klik hier om te starten met je Weebly website!

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2018 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]