Boekenplanken

HTML, dat is de code die je browser gebruikt om in te lezen hoe een webpagina eruit moet zien. Met codes uit die taal kun je je eigen BookCrossing-boekenplank naar je hand zetten.

Hoe gaat dat?
In je eigen profile tik je wat extra tekens en plotseling zijn je letters geel. Of cursief. Of, dat kan ook, dat allemaal tegelijk.

Dat zijn maar een paar van de mogelijkheden. Ook kun je links maken en foto’s plaatsen. Hieronder vind je de gebruiksaanwijzing voor een aantal handigheidjes.

Waar kun je het toepassen?
De meest voor de hand liggende plaats om dit uit te voeren is je bookshelf. Het kan ook in journal entries. In de fora is het niet toegestaan; als je daar code invoert verdwijnt die automagisch.

Hoe werk je?
Het werkt het makkelijkst om je opzet te maken in kladblok/simpeltekst op je computer, en dit later (knip/plak) in de website te kopiëren.

Hoe krijg je het op je boekenplankje?
Eerst inloggen, rechtsboven op de BookCrossing website. Daarna ga je naar my bookshelf, bijvoorbeeld door rechtsboven op je naam te klikken. Op je eigen pagina klik je (boven je plaatje) op edit my profile. Even naar beneden wandelen, naar het grote hok voor your extended information. Kopieer je code vanuit kladblok/simpeltekst, plak het in de website. Klik op submit changes. Klaar!

Ben je er klaar voor? Kijk dan snel hieronder!
Dit is geen uitleg over hoe je webpagina’s maakt. Daarvoor slaan we teveel over. Wel zie je hier een paar voorbeelden hoe je je boekenplank naar je eigen smaak kunt veranderen, oftewel: hoe je HTML kunt toepassen bij BookCrossing.

Cursief, Vet
punt Cursief maak je door voor de tekst <i> te zetten en erachter </i> .
Dan schrijf je dus <i>tekst</i> en dat wordt:   tekst

punt Vet maak je door voor de tekst <b> te zetten en erachter </b> .
Dan schrijf je dus <b>tekst</b> en dat wordt:   tekst

punt Vet cursief maak je door beide codes te gebruiken. Let op: de codes moeten elkaar omarmen.
Dus niet <b><i>tekst</b></i>
maar wel <b><i>tekst</i></b> .
Of je de volgorde <i><b> kiest of <b><i> maakt niet uit, zolang ze elkaar maar omarmen.

Link
punt Een link naar een andere pagina maak je zo:
<a href=”http://www.bookcrossing.com/referral/nrrdgrrl”>boekenplank van nrrdgrrl</a>
De tekst wordt hiermee vanzelf aanklikbaar en onderstreept.

Werkt het niet op jouw plank? Kijk dan eens of je de spatie tussen a en href hebt gezet, en vergeet vooral de aanhalingstekens “” om de url (da’s het adres) heen niet.

punt Wil je dat die link in een nieuw venster opent, dan voeg je een target toe:
<a href=”http://www.bookcrossing.com/referral/nrrdgrrl” target=”_blank”>boekenplank; link opent in nieuw venster</a>

Kleur
punt Kleur maak je met deze code: <font color=”#FF3366″>Kleur</font>
Kleuren worden hexadecimaal genoteerd, dat wil zeggen met cijfers van 0-9 en letters A-F. (Er is ook een trucje met Engelse kleurnamen, die slaan we nu even over).
Ga die codes vooral niet uit je hoofd leren maar laat een ander het uitrekenen!

Combinaties
punt Als je alles tegelijk wilt zet je alle codes om een stukje tekst heen. Denk eraan dat ze elkaar omarmen.
Voorbeeld:
<i><a href=”http://www.bookcrossing.com/referral/nrrdgrrl” target=”_blank”><font color=”#FF0000″>link naar nrrdgrrls boekenplank; link opent in nieuw venster; tekst is cursief; linktekst is rood</font></a></i>

Let op: Als je de kleur van een link wilt veranderen moet je dat noteren binnen de omarming van de “a href”-code. Zo niet, dan houdt de browser de standaard-manier aan om een link aan te geven (bij Bookcrossing is dat grijs).

Plaatjes
punt Een plaatje kun je alleen bij je planktekst toevoegen wanneer het al een parkeerplaats op internet heeft. Om het op je plank te laten zien gebruik je de volgende code:
<img src=”http://www.nrrdgrrl.nl/bxlogo.jpg”>
en op de plaats van het adres vul je het adres van je eigen plaatje in.

Plaatjes kun je op hun plaats zetten met alignment, dat gaat zo:
<img src=”http://www.nrrdgrrl.nl/bxlogo.jpg” align=”right”>
Je kunt kiezen uit “left” en “right”.

Een voordeel van alignment is dat je tekst er meteen naast kan beginnen. Als je het niet toepast begint je tekst automatisch vanaf de onderkant van het plaatje. Dat levert een groot wit gat op in je pagina, en dat is niet altijd gewenst.
Ter illustratie:

Zonder alignment leest de tekst onderaan het plaatje verder. Met alignment leest de tekst naast het plaatje verder.

Een aanklikbaar plaatje heeft een combinatie van twee codes: de linkcode en de plaatjescode. Dat ziet er zo uit:
<a href=”http://www.bookcrossing.com/referral/nrrdgrrl”><img src=”http://www.nrrdgrrl.nl/bxlogo.jpg” align=”right”></a>

Vergeet die </a> niet aan het einde! Anders is alle inhoud die erna komt aanklikbaar naar dezelfde link.

Tekst ordenenen
punt Je tekst loopt aan een stuk door en wordt uitgelijnd, tenzij je zelf ingrijpt.
Gebruik de volgende trucs niet te overdadig, want een rafelende tekst leest niet lekker.

 

Het centreren van een stuk tekst, zoals dit, doe je met
<center> aan het begin van de tekst
en je sluit het stuk af met </center>
 

Rechts lijnen van een stuk tekst, zoals hier, doe je met
<p align=”right”>
en dat kan ook naar links (“left”). Je sluit het stuk af met </p>

Dat laatste levert meteen een nieuwe regel op – denk eraan dat de BookCrossing-boekenplanken zo zijn ingesteld dat een nieuwe regel of een witregel in je code óók extra wit geeft.

Vaak controleren dus hoe het resultaat eruit ziet! Maar dat geldt voor alle veranderingen, en net zo goed voor de beroeps als voor de liefhebber.

punt HTML doet niet aan extra spaties. Als je er twee zet, leest de browser er maar een. Hoe nu?

Een vaste spatie maak je door &nbsp; te schrijven (non breaking space). Wil je een aantal spaties op een rij, zet dan &nbsp; [spatie] &nbsp; [spatie] &nbsp; enzovoort, tot je tevreden bent over het resultaat.

Wil je veel wit en word je gek van het herhalen van de code, dan kun je ook een blanco plaatje gebruiken. Dat maak je net zo breed als je wilt, door de width op het aantal pixels (schermpuntjes) te zetten dat je wilt.

In dit hokje staat een blanco plaatje: (rechtsklik om het op te slaan)
De hier gebruikte code is <img src=”http://www.bookcrossing.nl/blanco.gif” width=”100″ height=”20″ border=”1″>

Tekst: Accenten
punt HTML trekt zich geen bal aan van de accenten die je op je toetsenbord gebruikt. Schrijf jij “vóór” dan heb je geluk als er iets leesbaars te zien is in je browser. Vaak wordt het “v??r” en het kan ook zomaar gebeuren dat er ineens “veer” staat omdat je browser dacht dat dat de oplossing van het raadseltje was.
Je ziet dat effect ook vaak in emails.

HTML is bedacht in het Engels. En het Engels kent nu eenmaal geen accenten. Maar ja, andere talen wel, en je wilt ook wel eens een euroteken gebuiken of iets benadrukken.
Om zeker te weten dat iemand het accent te zien krijgt dat jij bedoelde gebruik je een code. In plaats van “dát” schrijf je d&aacute;t

a acute, dat is een a met een accent naar rechts. Schreef je A acute dan kwam er een A met een accent naar rechts: Á. Liever naar links? Dat is grave: &agrave; oftewel à.

De code begint altijd met een ampersand (het &-teken) en eindigt altijd met een puntkomma.
Een trema is &auml; (ä) en een tilde is &atilde; (ã), maar alleen logische combinaties worden geaccepteerd. &Xuml; wordt &Xuml; in plaats van een X met een trema.

Hier vind je de hele lijst voor letters. En deze lijst heeft de meeste andere tekens, zoals de euro €.

Al deze codes werken trouwens ook in de journals.

Fonts/Lettertypes
punt Wil je eens wat anders dan de standaard letters? Het vaste font (lettertype) van BookCrossing heet Trebuchet MS. Op deze pagina’s staat daarom <font face=”trebuchet ms,verdana,sans-serif”> (sluit af met </font>).

Waarom zoveel? Omdat je nooit weet wat iemand anders in zijn browser heeft. De lezer kon weleens een Apple hebben terwijl jij een PC hebt, bijvoorbeeld. Daarom staan er gewoonlijk meerdere fonts genoemd. Hier kijkt de browser eerst of Trebuchet MS af te beelden is. Heeft ie die niet, dan probeert hij Verdana. Heeft hij die ook niet, dan neemt hij zijn favoriete schreefloze letter (‘sans serif’ in het Engels; geschreefd is ‘serif’).

Enkele populaire fonts zijn Times New Roman, Arial en zijn Apple-soortgenoot Helvetica, Garamond, Verdana, Courier, Comic Sans MS.

Wordt het onleesbaar, voeg dan een relatieve lettergrootte toe: <font face=”trebuchet ms,verdana,sans-serif” size=”-1″> . De maten gaan van -7 tot +7.