Informaticasite van het Sondervick College te Veldhoven                 © L.J.M van Haperen (bron : R.J. van der Beek)
 

Hoofdstuk 8: Nog een aantal HTML-tags

  8.1 Achtergrondmuziek

Door een EMBED-tag in je document op te nemen kun je er voor zorgen dat er een achtergrondmuziekje speelt als je de pagina bekijkt, of dat er een paar keer een bepaald geluid wordt weergegeven.
Met bijvoorbeeld de tag <embed src="error.wav" hidden="true" autostart="true" loop="true"> regel je dat.
Met het attribuut src="......." bepaal je welk muziekje er wordt gespeeld.
Met loop="true" geef je aan dat het voortdurend herhaald moet worden, met loop="false" wordt het niet herhaald.
Met het attribuut hidden="true" bepaal je dat het muziek-afspeelapparaat niet zichtbaar is.

Je kunt ook een anker-tag opnemen, die naar een geluidsbestand verwijst.
Als je daar dan op klikt dan krijg je het geluid te horen. Hier onder is de volgende anker-tag ingevoerd: <a href="klokken.wav" >
Probeer maar uit, klik op Klokken

  8.2 Bestanden tonen

Op die laatste manier kun je trouwens van alles regelen.
  1. Een plaatje tonen : klik op Wereldbol
    De volgende anker-tag is ingevoerd: <a href="world.gif" >
  2. Een tekstbestand tonen : klik op Tekstbestand
    De volgende anker-tag is ingevoerd: <a href="tips.txt" >
  3. Een programma downloaden : klik op Unfreez-programma
    De volgende anker-tag is ingevoerd: <a href="unfreez.exe" >

  8.3 Knipperende tekst en voorbij lopende tekst

Met <BLINK> WAARSCHUWING </BLINK> kun je een stuk tekst laten knipperen.
De tag zorgt voor nogal wat onrust, daarom kun je het beter niet gebruiken.
Het zit er zelfs dik in dat het helemaal niet werkt !

Voorbij lopende tekst
Met <MARQUEE> WAARSCHUWING </MARQUEE> kun je een stuk tekst of een plaatje voorbij laten lopen.
Ook deze tag zorgt voor nogal wat onrust, daarom kun je ook deze beter niet gebruiken.
Als je het toch wilt gebruiken kun je ook nog attributen toevoegen.
  • Met direction left of direction right kun je de richting bepalen.
    Met behavior="alternate" geef je aan dat het heen en weer moet gaan
  • Met bijv. bgcolor=white kun je de achtergrondkleur bepalen
  • Met loop=3 wordt het scrollen 3 keer herhaald. Met loop=-1 gaat het steeds door.
  • Met scrollamount=20 bepaal je de stapbreedte
  • Met scrolldelay bepaal je met welke snelheid de stapjes worden genomen
  • Met height en width kun je de hoogte en breedte bepalen

  8.4 Nog een aantal veel gebruikte tags

  • <B>vetgedrukte tekst</B> heeft als resultaat:
    vetgedrukte tekst (vet = Bold)
  • <I>cursieve tekst</I> heeft als resultaat:
    cursieve tekst (Cursief = Italic)
  • <U>onderstreepte tekst</U> heeft als resultaat:
    onderstreepte tekst (onderstrepen = Underline)
  • <STRIKE>doorgestreepte tekst</STRIKE> heeft als resultaat:
    doorgestreepte tekst
  • index<SUB>2</SUB> heeft als resultaat:
    index2 (en dit wordt subscript genoemd)
  • a<SUP>2</SUP> heeft als resultaat:
    a2 (en dit wordt superscript genoemd)
  • <CENTER>deze tekst wordt gecentreerd</CENTER> heeft als resultaat:
    deze tekst wordt gecentreerd
  • <BLOCKQUOTE>dit wordt vaak voor citaten gebruikt</BLOCKQUOTE> heeft als resultaat:
    dit wordt vaak voor citaten gebruikt
  • <PRE>regel 1
    regel 2
        ingesprongen
    regel 4</PRE>
    heeft als resultaat:
    regel 1
    regel 2
        ingesprongen
    regel 4

    Hierbij worden regeleinden en meerdere spaties achter elkaar niet genegeerd.
    Er wordt een niet-proportioneel lettertype (Courier) gebruikt.

  8.5 Kleuren van links en body-attributen

De browser geeft links standaard in het blauw weer.
Misschien komt de blauwe link niet goed over bij je achtergrond.
Met de attributen LINK, VLINK en ALINK kun je zelf de kleur bepalen van de link:

<BODY link="#FF00FF" alink="#00AA00" vlink="#000080" >

Deze codes plaats je in de <BODY>-tag aan het begin van het HTML-document.
Dat is in deze pagina ook gedaan.
Hiervoor heb ik de bovenstaande code ingetikt achter de <BODY>-tag.
Standaard zijn de links op deze pagina paars, omdat #FF00FF paars is.
Klik nu op de link hieronder, dan zie je de kleur veranderen.
  • Je ziet dat als je op deze link klikt deze groen wordt.
    Dat komt doordat in de body-tag alink="#00AA00" is opgenomen (actieve link = alink, en #00AA00 = groen).
  • Als je daarna terugkeert naar deze pagina zie je dat de bezochte link () donkerblauw is geworden.
    Dat komt doordat in de body-tag vlink="#000080" is opgenomen (visited link = vlink en #000080 = donkerblauw).
  • Als je er met de muis overheen gaat wordt de kleur van de letters zwart.
    Dat komt doordat in de anker-tag (zie hieronder) onMouseOver="this.style.color='#000000' is opgenomen.
  • Als je er weer afgaat met de muis wordt de kleur van de letters paars.
    Dat komt doordat in de anker-tag (zie hieronder) onMouseOut="this.style.color='#ff00ff' is opgenomen.
  • De code voor de link is als volgt:
    <A href="kleuren.htm " onMouseOver="this.style.color='#000000' " onMouseOut="this.style.color='#ff00ff' " >

  • Ga naar De pagina over kleuren

Nog een aantal attributen van de body-tag
  • TEXT="kleur"
    de tekstkleur
  • BGCOLOR="kleur"
    de kleur van de achtergrond.
  • BACKGROUND="plaatje.gif"
    een afbeelding als achtergrond
  • LEFTMARGIN="20"
    linker marge
  • RIGHTMARGIN="25"
    rechter marge
  • TOPMARGIN="5"
    bovenmarge
  • BOTTOMMARGIN="3"
    benedenmarge
  • MARGINHEIGHT="2"
    ruimte tussen de regels
  • MARGINWIDTH="7"
    ruimte tussen de tekens

  8.7 Target

Je weet waarschijnlijk al hoe je een link naar een andere pagina maakt.
Dat gaat bijvoorbeeld als volgt:

<a href="http://www.microsoft.com">Microsoft</a>

Deze pagina wordt dan in hetzelfde venster geopend als waarin jouw pagina stond.
Hierdoor verdwijnt jouw pagina, en dat is misschien niet de bedoeling.
Als je wilt dat de pagina wordt geopend in een nieuw venster, dan voeg je het attribuut target="_blank" toe:

<a href="http://www.microsoft.com" target="_blank">Microsoft</a>

Als de bezoeker genoeg heeft van de pagina, dan kan hij het bovenliggende venster wegklikken, waardoor jouw pagina weer tevoorschijn komt.

  8.8 Object

Je kunt flash-animaties, geluidfragmenten en filmpjes op je pagina gebruiken. Je kunt ze invoegen met behulp van de OBJECT-tag.
Het attribuut classid bevat een waarde waardoor wordt vastgelegd welk object zal worden gebruikt.

Voor de kalender, die je hieronder ziet als je browser dit aankan, is de volgende code gebruikt:

<object classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02"></object>