HTML cursus

Les 2: Links maken

In de vorige les leerde je hoe je tekst invoegt en opmaakt. In dit lesje zul je leren hoe je weblinks maakt, men onderscheidt 4 soorten links.

  • Naar een andere website verwijzen

    <a href="http://www.google.be">Zoeken met Google!</a>
    Zoeken met Google!

    Als je klikt op de link, word je doorverwezen naar de website van Google.

    Zoals je ziet, gebruikt men de a tag gebruikt om weblinks te maken. De waarde van het href attribuut bepaalt naar welke website of webpagina de bezoeker wordt doorverwezen na geklikt te hebben op de link. Tussen de <a> en de </a> tag komt de tekst die weergeven moet worden op de pagina. Deze tag heeft – zoals de meeste tags – een eindtag, deze dient om aan te duiden tot waar precies de link loopt.

    Opmerking

    Vergeet zeker de http:// niet, dit is een frequent voorkomende fout en leidt tot een fout resultaat. Volgende code is dus verkeerd:

    <a href="www.google.be">Zoeken met Google!</a>

    De browser gaat immers op zoek naar een map met de naam www.google.be. Vandaar dat het vermelden van de http-protocol noodzakelijk is.

  • Verwijzen naar een andere pagina van je eigen website

    <a href="gastenboek.html">Teken mijn gastenboek!</a>
    Teken mijn gastenboek!

    Als je klikt op de link, word je doorverwezen naar de de pagina gastenboek.html.

    Opmerking

    Let er wel op dat de webpagina waar u naar verwijst zich in dezelfde directory bevindt als de pagina waar de link op staat. Indien dit niet het geval is, noteer je vóór de bestandsnaam van de pagina waar je naar verwijst de naam van de directory gevolgd door een slash.

  • Verwijzen naar een e-mailadres

    <a href="mailto:emailadres@domeinnaam.com">Stuur mij een e-mailtje!</a>
    Stuur mij een e-mailtje!

    Het is ook mogelijk een e-mail naar verschillende ontvangers te versturen, dit gebeurt door de e-mailadressen te scheiden door komma's:

    <a href="mailto:emailadres@domeinnaam.com, tweedeemailadres@domeinnaam.com">Stuur mij een e-mailtje!</a>
    Stuur mij een e-mailtje!

    Het is ook mogelijk om bij deze e-mail een subject of onderwerp toe te voegen:

    <a href="mailto:emailadres@domeinnaam.com?subject=Hier schrijf je het onderwerp">Stuur mij een e-mailtje!</a>
    Stuur mij een e-mailtje!

    Je kan ook een cc argument meegeven:

    <a href="mailto:emailadres@domeinnaam.com?cc=andereemail@domeinnaam.com">Stuur mij een e-mailtje!</a>
    Stuur mij een e-mailtje!

    Een bcc argument meegeven, doet men als volgt:

    <a href="mailto:emailadres@domeinnaam.com?bcc=andereemail@domeinnaam.com">Stuur mij een e-mailtje!</a>
    Stuur mij een e-mailtje!
    Opmerking

    Zowel bij het cc als het bcc argument is het ook mogelijk om meerdere e-mailadressen mee te geven, dit wordt bereikt door ze te scheiden met komma's.

    Ten slotte kan men ook nog de inhoud van het bericht meegeven:

    <a href="mailto:emailadres@domeinnaam.com?body=Hier komt de inhoud van het bericht">Stuur mij een e-mailtje!</a>
    Stuur mij een e-mailtje!

    Het is uiteraard ook mogelijk om al deze argumenten in één keer te gebruiken:

    <a href="mailto:email@domeinnaam.com?subject=Onderwerp&cc=email-2@domeinnaam.com&bcc=email-3@domeinnaam.com&body=Hier komt de inhoud van het bericht">Stuur mij een e-mailtje!</a>
    Stuur mij een e-mailtje!

  • Download plaatsen

    <a href="download.zip">Download link</a>
    Download link

    Zoals je ziet, wordt hier gelinkt naar het bestand download.zip. Wanneer je er op klikt, krijg je de mogelijkheid om het bestand te downloaden.

    Maar wat moet je nu doen als je een HTML document ten downloade wilt zetten? Want i.p.v. het HTML document dan te downloaden, zal de webbrowser het document gewoon weergeven. De beste oplossing hiervoor is het bestand in een gecomprimeerde map.

Zo, je kan nu al links op je website zetten, maar we zijn nog niet volledig klaar. Er valt namelijk nog één belangrijk attribuut te bespreken; het target attribuut. Deze bepaalt waar de pagina, waar naar verwezen wordt, geopend moet worden. Voor dit attribuut zijn er 4 verschillende waarden, die we nu zullen bespreken.

  • _blank
    <a href="http://www.google.be" target="_blank">Google</a>
    Google

    De pagina wordt geopend in een nieuw venster.

  • _self
    <a href="http://www.google.be" target="_self">Google</a>
    Google

    Dit is de standaardwaarde van het target, en kan dus evengoed weggelaten worden.

  • _top
    <a href="http://www.google.be" target="_top">Google</a>
    Google

    Deze waarde dient gebruikt te worden als de link zich in een een frame of iframe bevindt, en geopend moet worden in het hele venster i.p.v. in de (i)frame. Deze waarde heeft dus enkel effect als er gewerkt wordt met (i)frames. Meer uitleg hierover zal gegeven worden in de les over frames. Dus als je nog geen kennis gemaakt hebt met frames, hoef je hier nog niet veel aandacht aan te besteden.

  • _parent
    <a href="http://www.google.be" target="_parent">Google</a>
    Google

    Dit dient ook enkel gebruikt te worden iendien er gewerkt wordt met (i)frames. De pagina wordt geopend in de volledige frameset waartoe het frame (waarin de link staat) behoort. Ook hier hoef je je nog niet druk om te maken, dit zal nog verder besproken worden in de les die handelt over het gebruik van frames.

Dit laatste deel was misschien eventjes verwarrend, maar onthoud voorlopig gewoon dat je met het target attribuut een pagina in een nieuw venster kan laten openen.