4746 leden

HTML Tips & Trucs 2004

HTML-Tips 2002

HTML-Tips 2003

Line breaks in Alt en Title

Met Title kun je een afbeelding een titel meegeven die verschijnt als je met de muis op een afbeelding komt. Alt wordt gebruikt als alternatief als een plaatje om de een of andere reden niet kan worden weergegeven. Je kunt Title en Alt beide gebruiken, maar in principe bereik je hetzelfde als je alleen Alt gebruikt. Soms zou je de tekst die wordt getoond met Alt en Title op meerdere regels willen tonen. Dat bereik je door in je editor de verschillende regels ook daadwerkelijk op verschillende regels te zetten met een harde return. Hieronder zie je verschillende voorbeelden met één en dezelfde afbeelding. Houd steeds de muis op de afbeelding om te zien wat er gebeurt. Let op: bij de voorbeelden is dus bewust een fout gemaakt zodat de afbeelding niet verschijnt! En ik moet ook toegeven dat het weer een Internet Explorer feestje is. Mozilla en Opera doen hier niet aan mee.

Alt en Title achter elkaar getypt. Houd de muis op de afbeelding zodat je de Title te zien krijgt.	Harde returns bij Alt en Title. Houd de muis op de afbeelding zodat je de Title te zien krijgt.
Alt en Title achter elkaar getypt. Afbeelding ontbreekt.	Harde returns bij Alt en Title. Afbeelding ontbreekt.
Alleen Alt. Achter elkaar getypt. Afbeelding ontbreekt.	Alleen Alt. Getypt met harde returns. Afbeelding ontbreekt.
Alleen Title. Achter elkaar getypt. Afbeelding ontbreekt. Houd muis op afbeelding.	Alleen Title. Getypt met harde returns. Afbeelding ontbreekt. Houd muis op afbeelding.

Lagen

Met lagen kun je elementen in een document precies plaatsen. Het grote voordeel van lagen is dat je ze op elke plekt kunt neerzetten. Ik heb als voorbeeld eerst twee plaatjes genomen en die over elkaar heen gezet. Met z-index geef je aan welke laag op de voorgrond en welke op de achtergrond moet staan. Je kunt zien dat het rechteroor van Tijgetje bij het eerste voorbeeld op de voorgrond staat en bij het tweede voorbeeld op de achtergrond. Op deze manier kun je zo ook tekst met plaatjes combineren of tekst met een achtergrond. Voor de code kun je het best even pooh.html downloaden.

Datum en tijd

Hans de Jong van www.handleidinghtml.nl heeft de volgende datum en tijd voorbeelden op zijn website beschikbaar:

• de huidige datum
• datum laatste wijziging van deze pagina
• de huidige tijd
• welkomstboodschap afhankelijk van de tijd

Klik maar op het logo om naar zijn website te gaan.

Pagina-einde forceren bij printen

Als webpagina's geprint worden, kan het wel eens gebeuren dat stukken tekst niet netjes bij elkaar blijven. De maker van de webpagina kan echter aangeven waar er een pagina-einde moet komen als er geprint wordt. Het kan bijvoorbeeld niet fijn zijn dat een tabel op twee pagina's komt als er geprint wordt. Zo'n harde pagina maak je met de volgende code:

<p style="page-break-before: always">

Klik maar eens op deze link en bekijk het afdrukvoorbeeld. Hoewel er maar drie regels tekst staan, zullen er drie pagina's geprint worden.

Als je bij een lange webpagina gebruik maakt van een extern css-bestand kun je bijvoorbeeld instellen dat er bij elke <h1> op een nieuwe pagina begonnen moet worden als er geprint wordt. Je kunt dat realiseren door in je css-bestand de volgende informatie te zetten.

h1 { page-break-before: always }

Eigenlijk heb je bij het maken van webpagina's praktisch dezelfde mogelijkheden als bij een moderne tekstverwerker. Als je er meer over wil weten, kun je bijvoorbeeld eens hier kijken.

HTML Tips & Trucs 2005

Kleuren

Er zijn verschillende manieren om kleuren te bepalen:

• namen van kleuren

  <font color=blue>tekst</font>

  Er zijn 16 namen van kleuren die zonder meer gebruikt kunnen worden. Daarnaast kunnen alle moderne browsers tegenwoordig 124 andere namen van kleuren gebruiken.

  • 16 namen van kleuren
  • 124 extra namen van kleuren

• systeemkleuren

  <font color=ActiveCaption>tekst</font>

  Er zijn 28 systeemkleuren. Dat zijn geen vaste kleuren, maar verwijzingen naar de kleuren die gebruikt worden door het systeem. Bijvoorbeeld een verwijzing naar de kleur van de titelbalk van het actieve venster (ActiveCaption) of naar de kleur van de tekst in de titelbalk (CaptionText).

  • 28 systeemkleuren

• RGB hexadecimale waarden

  <font color=#0000ff>tekst</font>

  Er is een palet van 216 veilige kleuren. Het aantal komt van 6x6x6 = 216 combinaties.

  • veilige kleuren

• RGB decimale waarden

  <font color=rgb(0,0,255)>tekst</font>

• RGB procentuele waarden

  < color=rgb(0%,0%,100%)>tekst</font>

In CSS werken de kleuren in principe hetzelfde maar de syntax is uiteraard net even anders. Voor de hexadecimale codes kun je een verkorte vorm gebruiken als beide karakters in het hexadecimale getal hetzelfde zijn. Zodoende is #f00 hetzelfde als #ff0000.