Nederland

home
 
boeken
  gevonden?
  registreren?
  etiketten
  obcz
  ring!ring!
  themaboeken
  wilde tips
mensen
  meetings
  foto's
  actievelingen
  kletsen
  emmadag
  jarig
bookcrossing
  aanmelden?
  in de media
  promoot
  boekenplank

Breng je boekenplank in model met HTML

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 en vet | Links maken | Kleur | Combinaties | Plaatjes | Tekst ordenen | Tekst: accenten | Lettertypes | Springen


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

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

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.
naar boven


Link
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.

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>
naar boven


Kleur
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!
naar boven


Combinaties
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).
naar boven


Plaatjes
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.
naar boven


Tekst ordenen
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.

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.

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">
naar boven


Tekst: accenten
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.
naar boven


Fonts/Lettertypes
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.
naar boven


Springen
Als je pagina nogal lang wordt (zoals deze) wordt het snel onoverzichtelijk. Je kunt 'ankers' in de pagina zetten zodat de lezer heen en weer kan springen:
terug naar boven   of   naar de inhoudsopgave   of   naar Kleur

Op de plaats waarheen gesprongen wordt, het doel, zet je een 'anker'. Het anker van het rijtje onderwerpen bovenin deze pagina heet bijvoorbeeld 'inhoud'. Boven het doel zet je
<a name="inhoud"></a>

De bezoeker ziet het anker niet. De springplank natuurlijk wel, en die is vanzelf aanklikbaar:
<a href="#inhoud">naar de inhoudsopgave</a>

Anker en springplank heten dus (precies) hetzelfde. Hoe je ze noemt maakt niet uit, maar houd het decent: de naam verschijnt in de adresbalk :o)


wordt vervolgd...
naar boven

De kleine lettertjes:
De naam Bookcrossing en het logo zijn ©Bookcrossing.com. We zijn enthousiaste deelnemers aan die site en hebben het logo hier ter promotie neergezet. We zijn niet van plan er iets mee te gaan verdienen. -o-o- Name and logo are ©Bookcrossing.com. We are enthusiastic participants in that site and have used the logo here to promote the original site. We do not intend to make a profit out of its use.