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.
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.
Deze tag gebruik je om het lettertype, de lettermaat of de letterkleur aan te passen. Ook hier weer heb je diversie opties.
geeft een met een stap vergrootte rode lettertype
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.
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.
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.
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.
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
| <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:
Hieronder staat een voorbeeld.
<table width=”99%” border=”0″ cellpadding=”0″ cellspacing=”0″><tr><td bgcolor=”#339933″>
</td></tr></table> |
|
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.
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
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
<img src=”https://www.geocaching.nl/wp-content/uploads/2017/10/geocaching-nl-logo-recht.png” width=”10%” height=”10%”> zorgt ervoor dat
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!
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. >
Bij het weergeven van coördinaten op je cache pagina dien je goed op de volgende punten te letten:
Even een korte uitleg over het formaat HDDD°MM.MMM
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.
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
