Opvallende aanhalingstekens in html

Breng leven in je tekstpagina’s met citaten en opvallende aanhalingstekens (mét html-code).

Pagina’s met lange lappen tekst lezen niet prettig, zeker niet op het web. En als er ook geen foto’s of illustraties op je pagina staan, kan het helemaal erg saai worden. Voeg citaten toe met opvallende aanhalingstekens eromheen (de voorbeeld html-code geef ik hier ook) en maak je pagina’s direct een stuk aantrekkelijker.

Om het citaat hiernaast tussen groene aanhalingstekens neer te zetten en rechts van de gewone tekst te plaatsen, heb ik het eerst tussen een set paragraaf-tags gezet. In de begin-tag van de paragraaf heb ik de stijlkenmerken van deze paragraaf opgenomen. De tekst van deze paragraaf is wat lichter dan de overige tekst, namelijk lichtgrijs. Het lettertype van deze tekst is ook afwijkend: georgia, of een ander serif lettertype. En de letters zijn wat groter geworden. Verder heb ik nog een rechter- en linker-marge ingesteld, om ruimte te creëren voor de aanhalingstekens.

De stijlkenmerken van dit citaat zijn dan ook de volgende:

    color: #808080; 
    font-family: georgia, serif; 
    font-size: 1.1em; 
    margin-left: 2.3em; 
    margin-right: 1em;

Vervolgens heb ik net buiten deze paragraaf het openings-aanhalingsteken neergezet. De html-code voor zo’n aanhalingsteken openen is: “ Die letters staan voor: left double quote, oftewel: dubbel aanhalingsteken links. Als je de d vervangt door een s, wordt het een enkel aanhalingsteken. Die s staat natuurlijk voor single. Direct achter de paragraaf-tag heb ik het teken neergezet voor het dubbele aanhalingsteken sluiten. De html-code daarvoor is: ”

Om deze tekens vorm te geven, heb ik van elk een span-element gemaakt door ze tussen een set span-tags neer te zetten. Je kunt dit element dan een class geven en de stijlkenmerken ervan opnemen in je stylesheet of in een stijlblok bovenaan je pagina – of de stijlkenmerken gewoon binnen het span-element zelf zetten natuurlijk. Voor het citaat bovenaan deze pagina heb ik voor het openings-aanhalingsteken de volgende stijlkenmerken ingesteld:

    float: left; 
    font-size: 6em; 
    color: #347C2C; 
    margin-top: .22em;

En de kenmerken voor het dubbele aanhalingsteken sluiten zijn:

    float: right; 
    font-size: 6em; 
    color: #347C2C; 
    margin-top: -.68em;

Welke waarden je het beste kunt gebruiken voor de margin-top, hangt natuurlijk erg af van de lettergrootte en het lettertype waarin je tekst en aahalingstekens worden weergegeven.

Als variatie kun je de aanhalingstekens ook boven en onder de paragraaf neerzetten, zoals ik hier in het tweede citaat heb gedaan. Je verandert daarvoor alleen de waarden voor de margin-top en als je dan ook nog de kleur van de aanhalingstekens verandert, krijg je ineens een heel ander beeld.

Om het citaat in je tekst te positioneren, moet je het in zijn geheel – dus inclusief de begin- en eind-aanhalingstekens – ook nog even tussen een set div-tags zetten. In de begin-tag van dat div-element zet je dan wat stijleigenschappen neer, waarmee je de positie van het citaat op de pagina bepaalt. Voor de positionering van de citaten op deze pagina heb ik de volgende eigenschappen gebruikt:

    width: 30%; 
    float: right; 
    margin: 0.8em 0 0.8em 0.8em;