Cursus HTML - deel 5: afbeeldingen en hyperlinks

Trefwoorden: HTML, website, afbeelding, foto, hyperlink, link

1. Inleiding


In dit deel gaan we kijken hoe je afbeeldingen op je webpagina plaatst. Dit kan alles wel een beetje opvrolijken en het is altijd tof om bij wat tekst een foto ter illustratie te geven :).
We gaan ook eens kijken hoe je nu links op je webpagina zet. Links zijn de sleutel tot een goeie website die meerdere pagina's bevat, ze laten de bezoeker navigeren tussen de verschillende pagina's op een gemakkelijke manier.

2. Afbeeldingen op je website


Zoals je in de inleiding kan lezen kunnen afbeeldingen veel mooie dingen doen op je website, hier gaan we eens kijken hoe het nu precies in elkaar zit om afbeeldingen te tonen op je website.
2.1. De basis

De tag om een afbeelding op je website te plaatsen, ofwel de img-tag wordt niet op de manier afgesloten zoals we gewend zijn. Een voorbeeld ervan zie je hieronder
CODE
  1. <img src="map/afbeelding.jpg" alt="alt-tekst bij afbeelding" />

Dit is het enige wat je nodig hebt om een afbeelding op je website te tonen. Dus je hoeft niet '</img>' te gebruiken want je sluit al via '/>' af op het einde ;).

Wat uitleg bij bovenstaande code
In de tag zie je 2 attributen die eigenlijk noodzakelijk zijn:

Het eerste is src: dit staat voor source, dus de bron van de afbeelding. De browser gaat in het pad dat je opgeeft op zoek naar de afbeelding, als deze aanwezig is dan wordt de afbeelding getoond. Als deze niet gevonden wordt, wordt een rood kruisje getoond, ofwel de opgegeven alt-tekst.
Je moet dus zeker zorgen dat het pad naar je afbeelding klopt en als je je website online zet, moeten ook alle afbeeldingen online geplaatst worden, anders worden deze niet gevonden.

Het tweede attribuut is alt: hiermee definieer je de alt-tekst van een afbeelding. Dit is het gele kadertje dat verschijnt als je een paar seconden met je muis op een afbeelding rust.
Voor degenen die nog niet begrijpen wat ik bedoel, sta eens 2 seconden op deze smiley ((bonk)), wat zie je? Inderdaad, je ziet de tekst 'Titel: bonk!', en dat is ook wat in de alt-tekst staat.
De alt-tekst is geen verplicht attribuut, maar het W3C raadt toch aan om het te gebruiken.

2.2. Enkele andere attributen

Er bestaan nog enkele attributen voor afbeeldingen, maar sommige zijn niet meteen aangeraden om te gebruiken.

twee van die attributen zijn width en height. Zoals je al kan vermoeden kan je hiermee de breedte en hoogte van je afbeelding bepalen. Dit is echter wel verraderlijk, want een afbeelding ziet er wel lelijk uit als de browser deze moet verkleinen. Je zou dus beter de afbeelding zelf met een programma verkleinen en dan uploaden.

Verder heb je nog het attribuut border, waarmee je via een cijfer kan aangeven hoe dik de rand rond te afbeelding moet zijn.

Als laatste wil ik nog het attribuut align vermelden. Hiermee kan je aangeven hoe de afbeelding uitgelijnd moet worden. Enkele woorden die daarbij gebruikt worden zijn:
topbovenaan
bottomonderaan
leftlinks
rightrechts

En zo heb je er nog enkele, maar dit zijn de belangrijkste.


Als we al deze attributen nu toepassen op basiscode krijgen we dit:
CODE
  1. <img src="map/afbeelding.jpg" alt="alt-tekst bij afbeelding" width="100px" height="80px" border="1" align="left" />

Hierbij krijgen we dus een afbeelding met:
  • de alt-tekst alt-tekst bij afbeelding
  • een breedte van 100 pixels en een hoogte van 80 pixels
  • de fijnst mogelijke rand
  • en die links wordt uigelijnd.


3. Hyperlinks op je website


Hyperlinks zijn dus de sleutel van de website en laten de bezoekers toe op een simpele manier verschillende pagina's te bezoeken.

3.1. De basis

De tag om een hyperlink te definiëren is a. Deze keer is er geen speciale afsluiting, maar gaat het op de normale manier:
CODE
  1. <a href="link">linktekst</a>

In deze code is er één attribuut gebruikt, het href-attribuuut, wat het belangrijkste is. Dit verwijst naar hetgeen waar je naar linkt. Hetgeen tussen de a-tags is de linktekst, waar de gebruiker op moet klikken.

3.2. 3 verschillende links

In principe heb je 3 verschillende links:
  • Een link naar een bestand binnen jouw website
  • Een link naar een bestand of website buiten jouw website
  • Een link naar een bepaald e-mailadres


3.2.1. Een link naar een bestand binnen jouw website

Via deze link kan je naar een bestand binnen je website verwijzen. Dit kan simpelweg een HTML-bestand zijn, dus een andere pagina van je website, maar ook een word-document (.doc) een videobestand (.mpg, .wmv, .avi, ...), een afbeelding (.jpg, .gif, .png, ...), ... Als het voor de browser mogelijk is om het bestand te tonen, wordt dit gedaan (bij een afbeelding bv.). Als het bestand niet getoond kan worden, wordt eventueel een programma geopend die dit wel kan (Microsoft Word bv.).

Ook bij deze linken moet je opletten dat je zorgt dat het pad naar je afbeelding klopt.
Een voorbeeld:
CODE
  1. <a href="homepagina.html">Terug naar de homepage</a>

Deze code kan bv. bovenaan je pagina staan om de bezoekers de mogelijkheid te geven terug te keren naar de homepagina.

3.2.2. Een link naar een bestand of website buiten jouw website

Via deze soort links wordt verwezen naar een bestand buiten jouw website. Het verschil met de vorige links zit hem in het pad, nu moet dit helemaal gedefinieerd worden. www.multidesk.be bv. zal niet gevonden worden http://www.multidesk.be wel. Hetzelfde geldt voor andere bestanden.

De regels voor het openen van een bestand zijn hier ook precies hetzelfde.

Een voorbeeld:
CODE
  1. <a href="http://www.multidesk.be">Multidesk.be : Dé gratis PC- & multimedia helpdesk</a>

Deze code geeft een link naar Multidesk.be. Je ziet dat het volledige pad gedefinieerd moet worden.

3.2.3. Een link naar een bepaald e-mail adres

Als je linkt een e-mailadres wordt meestal een emaileditor dit beschikbaar is op het besturingssysteem van de gebruiker geopend (Op windows MS oulook of outlook express bv.). In het vakje AAN staat het e-mail adres die in de link opgegeven staat al ingevuld.

Om te linken naar een e-mail adres wordt in de href nog het woord mailto ingevuld.
Een voorbeeld:
CODE
  1. <a href="mailto:info@example.com">Mail naar example.com</a>

Deze maakt een link waarmee gemaild kan worden naar example.com. Bij een klik wordt dus de emaileditor geopend met info@example.com al ingevuld.
Let op de mailto: in de href, zonder dit zal de mail niet werken.

3.3. Enkele attributen

Als laatste geef ik nog enkel attributen mee die je kan gebruiken in je link.

Het eerste is title.
Title is te vergelijken met alt bij afbeeldingen. Dit geeft ook een tekst weer in een geel kadertje als je enkele seconden op de link staat.

Het tweede attribuut is target.
Target wordt gebruikt om aan te duiden welke bestemming een link geeft. Als je frames gebruikt moet in bij target aangegeven worden in welk frame het bestand geopend moet worden.

Target wordt ook gebruikt om te zorgen dat een link zich opent in een extern venster, hiervoor vullen we dan '_blank' in.

Als we al deze attributen nu toepassen op de link krijgen we:
CODE
  1. <a href="http://www.multidesk.be" target="_blank" title="Link naar Multidesk.be">Multidesk.be</a>

Dit zorgt ervoor dat Multidesk.be zich opent in een nieuw venster en er wordt een informatieve tekst weergegeven als je lang op de link blijft staan.

4. slot


Zo, dit was het deel over afbeeldingen en hyperlinks. Je kan met afbeeldingen zeer veel bereiken op je website en ook hyperlinks zijn heel handig en bijna noodzakelijk om een overzichtelijke website te creëren.
Waar je nog kan op letten als je hyperlinks gebruikt. Geef ze geen naam zoals 'kijk hier' of 'deze pagina'. Zoekmachines indexeren je site namelijk via de hyperlinks en daarbij is de linktekst zeer belangrijk, als deze alleen de tekst 'hier' bevat zal je site niet vlug gevonden worden. Hou je linkteksten dus zo algemeen mogelijk ;).

Als je nog vragen of hulp nodig hebt kan dit in de forums hier op Multidesk.be :).

Klik hier om deel 6 lijsten te lezen.Dit artikel werd geschreven door Simon op zaterdag 7 april 2007 om 20:23 en werd sindsdien 22805 keer gelezen.

  • Pagina
  • 1 van 1

Bericht geplaatst door een gast op maandag 11 februari 2008 om 13:24:27.
Het alt-attribuut dient niet om een gele tooltip te geven, daar is title voor uitgevonden. Eén bepaalde browser vertoont dit foute gedrag, tweemaal raden welke.

W3C
Bericht geplaatst door SMG op dinsdag 12 februari 2008 om 10:05:13.
SMG's avatar
Multiviteit: 12000
Moderator
Het alt zegt het eigenlijk zelf, dat is voor Alternative. Als een surfer ingesteld heeft om geen afbeeldingen te tonen wordt de alt waarde weergegeven. Als je stikt ziet moet alt een korte tekst (liefst gewoon een woord) dat die afbeelding omschrijft. Het title attribuut mag veel meer bevatten (bijvoorbeeld een omschrijving van de afbeelding: Ik en Katrien op de glijbaan zou een goed voorbeeld zijn van een title waarde, terwijl je als alt beter Glijbaan ofzo gebruikt.
In XHTML strikt is dit attribuut verplicht, maar als je het niet wilt opgeven kan je het gewoon ook leeg laten (om toch gevalideerde XHTML te maken).

Maar zoals die persoon boven mij zegt, je mag het alt niet gebruiken om het gele kadertje te tonen. Daar dient het title attribuut voor (dat overigens op bijna elke tag werkt).
Deze tekst werd het laatst bewerkt voor 25.85 % door SMG op dinsdag 12 februari 2008 om 21:50:34.
  • Pagina
  • 1 van 1