Een HTML (cache) pagina bestaat uit een aantal codes en is altijd in een vaste volgorde opgebouwd. Een groot aantal websites met uitleg over en gebruik van HTML vind je op (deze pagina).
Op deze pagina leggen we maar een klein gedeelte van de HTML codes uit. De codes die we hier uitleggen zijn bedoeld voor het bouwen van cache pagina’s.
HTML tags die niet in de lijst staan zijn ook niet handig om te gebruiken, ze kunnen wat problemen veroorzaken in sommige browsers.
Maak je gebruik van een WYSIWYG programma om je cache pagina in HTML aan te maken (Dreamweaver, Frontpage etc) zorg dan dat tags die hier genoemd staan ook niet voorkomen in je HTML.
De Lijst van de in cache pagina’s te gebruiken HTML codes
- Font tag <font> om je lettertype (kleur, grootte, soort) te veranderen
- Vetgedrukt tag <strong> om je tekst vet/dik weer te geven
- Regelafbreek tag <br /> om op een nieuwe regel verder te gaan
- Lijn tag <hr /> om een lijn over de hele breedte van het document te trekken
- Tabel tag <table> om een tabel weer te geven
- Lijst tag <ul> of <ol> om een lijst weer te geven
- Plaatjes tag <img> om een plaatje weer te geven
- Link tag <a href=”…”> om een link op je cache pagina weer te geven
- Hoe je coördinaten goed weergeeft
De Lijst van de NIET in cache pagina’s te gebruiken HTML codes
- <DOCTYPE…..> tag
- <html> … </html> tag
- <head> … </head> tag
- <meta> … </meta> tag
- <title> … </title> tag
- <body> … </body> tag
Al deze tags zijn namelijk bedoeld om de pagina kop in te vullen of weer te geven, en aangezien je de cachepagina alleen maar een veld is in een al aangemaakte internet pagina kan dat dus tot problemen leiden.
Mocht je een van deze tags dus vinden in de code die je gebruikte programma aangemaakt heeft verwijder ze dan.
Font tag
Deze tag gebruik je om het lettertype, de lettermaat of de letterkleur aan te passen. Ook hier weer heb je diversie opties.
-
- <font color=”red” size=”+1″>
geeft een met een stap vergrootte rode lettertype
-
- <font color=”#FFFFFF”>
geeft een wit stuk text aan Die tekst zie je dus niet want de achtergrond is ook wit, als je de tekst selecteerd kun je hem wel weer lezen 
Vergeet ook hier niet af te sluiten met de sluit tag ( </font> ) anders blijft alle text die volgt in dat type staan.
Vetdruk tag
Als je tekst dik/vet weer wilt geven gebruik je deze tag.
<strong> geeft tekst vetgedrukt weer
Vergeet ook hier niet af te sluiten met de sluit tag ( </strong> ) anders blijft alle text die volgt in dat type staan.
Regel afbreek tag
Als je op een nieuwe regel wilt beginnen met text is dit een handige tag om te gebruiken.
<br> laat de text die volgt op een nieuwe regel beginnen
Deze tag hoef je niet af te sluiten met een eindtag.
Lijn tag
Deze tag gebruik je (net als de afbreek tag) om je teksten te ordenen.
<hr> laat op die plek een horizontale lijn zien over de hele breedte van het document
Ook deze tag hoef je niet af te sluiten met een eindtag.
Tabel tag
Tabellen kun je gebruiken om zaken te verduidelijken, ook zijn ze makkelijk om plaatjes in te laten weergeven (die blijven dan netjes bij elkaar staan). Om een tabel in beeld te krijgen dien je eigenlijk gebruikt te maken van drie soorten tags die samen de tabel samenstellen. Hieronder zie je hoe een tabel opgebouwd is.
<table> geeft het begin van de tabel aan
<tr> geeft een rij aan
<td> geeft een cel aan
Deze tags dienen genesteld gebruikt te worden (dat geldt overigens voor alle tags), voor een voorbeeld tabel met een rij en drie cellen krijg je dan:
<table>
<tr>
<td> cel 1 </td>
<td> cel 2 </td>
<td> cel 3 </td>
</tr>
</table>
Je kunt de achtergrond van de cellen ook een kleur geven door in de tabel tag ( <table> ) gebruik te maken van de bgcolor item. Je gebruikt: <table bgcolor=”green”> als je de achtergrond van de tabel groen wilt hebben (je kunt ook hier natuurlijk weer gebruik maken van de cijfercodering voor de verschillende kleuren, let er wel op dat je dan een # gebruikt voor het kleurnummer). Een plaatje als achtergrond gebruiken kan natuurlijk ook (daarvoor gebruik je dan background=”url-van-plaatje”).
Voorbeeld met bijbehorende tags:
De gebruikte extra tags zijn
- Width – bepaalt de breedte van je tabel (als je die standaard op 99% zet kan je nooit hebben dat je tabel breeder wordt dan de breedte van de pagina (ook al wordt er gebruik gemaakt van frames))
- Border – geeft aan (in pixels) hoe breed je de tabelrand wilt hebben
- Bgcolor – geeft aan in welke kleur de achtergrond weergegeven wordt
- Bordercolor – geeft aan in welke kleur de tabelrand weergegeven wordt
- Cellpadding – de afstand van de celrand tot de text (in pixels)
- Cellspacing – de afstand tussen de cellen (in pixels)
- Align – uitlijning van de text
| <table width=”99%” border=”3″ bgcolor=”#008000″ bordercolor=”#800080″ cellpadding=”3″ cellspacing=”3″>
<tr bgcolor=”#C0C0C0″><td bgcolor=”#0000FF”> cel 1 </td> </tr> <tr bgcolor=”#FFD700″> </tr> </table> |
|
Je kunt deze tag ook gebruiken om de achtergrond (onder de tekst van je cache pagina) te veranderen. Hierbij kun je dan gebruik maken van een plaatje of een egale kleur. Zorg er voor dat al je cache informatie en tags dan in die tabelcel staat.
Let bij het gebruik van tags in de tabelcel dat je de volgende regels in acht houdt:
- Gebruik de tags <body>, <title>, <style> en <html> NIET
- Let er op dat je alles voor je cache pagina in die tabelcel plaatst dus tussen <td> en </td> in
- Plaats alles in het vak voor long description
Hieronder staat een voorbeeld.
<table width=”99%” border=”0″ cellpadding=”0″ cellspacing=”0″><tr><td bgcolor=”#339933″>
</td></tr></table> |
|
Lijst tag
Met de lijsttag kan je informatie in een nette lijst weergeven. Er zijn twee soorten lijsten die je op cache paginaas kunt gebruiken.
Geordende lijsten (ordered list) en Ongeordende lijsten (unordered list). Hieronder vind je hoe je deze lijsten kunt gebruiken.
Hieronder vind je een voorbeeld van een ongeordende lijst.
| <ul><li>dit is het eerste punt</li> <li>dit is het tweede punt</li></ul> |
|
Hieronder vind je een voorbeeld van een geordende lijst, als je vragen hebt horen we het wel.
| <ol><li>dit is het eerste punt</li> <li>dit is het tweede punt</li></ol> |
|
Als je de begin of eindtags vergeet dan verbouwd geocaching.com je cache pagina zodat de boel in de war komt.
Plaatjes tag
De plaatjes tag bebruik je om plaatjes op je cache pagina weer te geven. Houdt er rekening mee dat hoe meer plaatjes je in je cache pagina zichtbaar wilt hebben hoe langer het duurt voordat je hele cache pagina te zien is.
Als je op je cache pagina een plaatje wilt plaatsen moet je wel de locatie (url) van dat plaatje weten. Je kunt (als je een plaatje naar je cache pagina geladen hebt) een url vinden door op het linkje naar het plaatje (onderaan je cache pagina, boven de logjes voor je cache pagina) klikken. Je plaatje opent nu in een nieuw scherm. In de adresbalk van dat nieuwe scherm staat nu de url van dat plaatje. Je kunt nu de url kopiëren en gebruiken in je plaatjes tag.
<img src=”https://www.geocaching.nl/wp-content/uploads/2017/10/geocaching-nl-logo-recht.png”> zorgt er voor dat dit plaatje 
op je pagina verschijnt.
Plaatjes in een tabel weer laten geven zorgt er altijd voor dat de plaatjes worden aangepast naar de grootte die je met je tabel aanhoudt. Je kunt daarvoor gewoon de <img> tag in een cel plaatsen.
Om de maat van je plaatjes aan te passen kun je in de plaatjes tag de maat aangeven in procenten of in pixels. De maten in pixels zijn vast en geven dus altijd het plaatje in die maat aan. De maten in procenten zijn in procenten van de pagina of tabel-cel waarin ze geplaatst zijn en passen dus alijd onafhankelijk van de breedte van je scherm.
<img src=”https://www.geocaching.nl/wp-content/uploads/2017/10/geocaching-nl-logo-recht.png” width=”75″ height=”25″> zorgt ervoor dat op je pagina verschijnt
<img src=”https://www.geocaching.nl/wp-content/uploads/2017/10/geocaching-nl-logo-recht.png” width=”10%” height=”10%”> zorgt ervoor dat op je pagina verschijnt
Zo kun je er dus altijd voor zorgen dat de breedte van je plaatjes nooit breder is dan op je scherm past.
Plaatjes die je op je eigen website draait kun je ook prima op je cache pagina weer laten geven. Houdt er alleen rekening mee dat wanneer je eigen webiste niet beschikbaar is dus ook het plaatje op de cache pagina niet meer zichtbaar zal zijn. Het is daarom het makkelijkste om je plaatjes te laden naar je cache pagina.
Noot: mocht je de linkjes die onderaan je pagina staan niet meer zichtbaar willen hebben op je cache pagina kan je ze gewoon verwijderen (de plaatjes blijven gewoon bestaan, alleen de linkjes verdwijnen van de onderkant van je cache pagina).
Let wel op want als je de url van dat plaatje niet meer hebt kan je het plaatje ook niet meer zichtbaar maken. Je kunt de linkjes die je verwijdert niet meer opnieuw laten verschijnen op je cache pagina!
Link tag
De link tag gebruik je om te linken naar een andere pagina (of plaatje) ergens op het internet (of een speciefieke plek in een pagina). Deze kan je op je cache pagina gebruiken om te verwijzen naar een website met achtergrond informatie of een foto op je eigen website die je niet op je cache pagina zichtbaar wilt hebben of een andere cache pagina of om een meeltje te laten versturen.
Houdt er rekening mee dat het wel de bedoeling is dat alle informatie die nodig is om de cache te vinden op de cache pagina dient te staan en dat het linken naar commerciele sites niet toegestaan is.
Om te linken naar een andere pagina doe je het volgende
<a href=”https://www.geocaching.nl”>de nederlandse geocaching site</a> zorgt ervoor dat je dit krijgt: de nederlandse geocaching site
Standaard is het zo dat linkjes op je cache pagina altijd zullen openen in een nieuw venster. Als je dan dat venster sluit heb je nog altijd je cache pagina open staan.
Om te linken naar een plaatje doe je het volgende..
<a href=”https://www.geocaching.nl/wp-content/uploads/2017/10/geocaching-nl-logo-recht.png”>dit plaatje</a> zorgt ervoor dat je dit krijgt: dit plaatje
Een url (adres) van een plaatje vind je doorgaans door met de rechter muisknop op dat plaatje te klikken (als die niet beschermd is) en dan uit het submenu “kopieer locatie” te selecteren. De url van je plaatje staat dan ik het geheugen. Plak je die dan in een linkje dan heb je de boel klaar.
Om te linken naar een mailladres (mailltje te sturen) doe je het volgende..
<a href=”mailto:hawkeyess@geocaching.nl”>mail me</a> zorgt ervoor dat je dit krijgt: mail me
Je kunt dit type link dus ook prima op je cache pagina gebruiken om direct mailtjes te kunnen ontvangen van geocachers die je een plaatje of de antwoorden voor je cache willen toesturen.
Zoals je kunt zien worden linkjes bijna altijd onderstreept. En moet je de tekst die je aanklikbaar wilt maken tussen <a href=”…”> en </a> plaatsen. Een link heeft dus een begin en een eind tag.
Combineren van de verschillende tags
Je kunt (als je een beetje wil combineren ook een plaatje gebruiken om ergens heen te linken. Je krijgt dan het plaatje op je cache pagina te zien en als je er op klikt werkt het hetzelfde als een gewone tekst link.
<a href=”mailto:hawkeyes@geocaching.nl”><img src=”https://www.geocaching.nl/images/sm_bug.gif”></a> zorgt voor een plaatje dat een meeltje verstuurd als je erop klikt. > 
Hoe je coördinaten goed weergeeft in HTML
Bij het weergeven van coördinaten op je cache pagina dien je goed op de volgende punten te letten:
- Gebruik het standaard geocaching formaat (HDDD°MM.MMM’) of vermeld duidelijk welk ander formaat je gebruikt.
- Maak gebruik van het standaard geocaching kaart datum (WGS 84) of vermeld duidelijk welk ander kaart datum je gebruikt.
- Gebruik HTML voor het graden teken en niet het rondje zelf. De code voor het graden teken is: °
Even een korte uitleg over het formaat HDDD°MM.MMM
- H staat voor Hemisphere. (Noord, Oost, Zuid en West)
- DDD staat voor de drie cijfers van de graden (Breedtegraad ligt tussen de 00 en 90, Lengtegraad ligt tussen de 000 en 180)
- MM.MMM staat voor de cijfers van minuten (MM ligt tussen de 00 en 59, MMM ligt tussen de 000 en 999).
De breedtegraden hebben altijd twee cijfers (tussen 00 en 90) en voor die twee cijfers komt dus een spatie te staan (N 52°).
De lengtegraden hebben altijd drie cijfers (tussen 000 en 180) als je lager zit dan 100 graden gebruik je voorloopnullen om de ruimte op te vullen (E005°) (en hier is er dus geen spatie).
Het gradenteken(°) komt dus ook tussen de DDD en MM.MMM in te staan (aan het eind van de graden) en het minutenteken(‘) komt aan het eind van de minuten te staan, helemaal achteraan.
Een voorbeeld van hoe je een coördinaat in html weergeeft en hoe het er uit komt te zien:
N 52°14.342′ – E005°23.498′ zorgt voor deze weergave ongeacht de gebruikte browser: N 52°14.342′ – E005°23.498′
De meest gemaakte fouten.
- een punt (.) ipv een gradenteken (°) gebruiken
- N (noord) en E (oost) weglaten
- geen streepje (-) tussen het N en het E gedeelte van de coördinaat
- een spatie vergeten tussen N en de graden
- een spatie zetten tussen E en de graden
Hoe je coördinaten goed weergeeft zonder HTML
Zie voor uitleg het stukje hierboven. Om gradentekens weer te geven zonder HTML gebruik je het graden rondje.
Dit graden rondje kun je krijgen door de volgende toetsen in te drukken [Ctrl] en [Alt] en [Shift] en dan terwijl je die toetsen ingedrukt houdt op [:] te drukken.
Kom je er niet uit met al deze HTML code? Stel een vraag in ons Forum
Terug naar bovenkant van deze pagina
