Bijlage 1: Kleuren

Je hebt al eerder gelezen dat je kleuren in HTML kunt opgeven door de naam ervan in te typen of door RGB-waarden (Rood, Groen, Blauw). Er is maar een bepaald aantal kleuren dat een naam heeft gekregen in HTML. Met RGB waarden kun je nog veel meer kleuren vormen (16,7 miljoen zelfs!).

Hieronder zie je een overzicht van de kleuren die een naam hebben gekregen in HTML: de webkleuren plus daaronder de bijbehorende RGB-waarden en daar weer onder zie je hoe de kleur er uit ziet.
Ze staan gerangschikt op alfabetische volgorde.

Er is ook een artikel verschenen dat speciaal gaat over het Kiezen van Kleuren voor je site.

Webkleuren en hun bijbehorende RGB-waarden

A - Lightgreen   Lightgrey - Yellowgreen

Mailto link in HTML

In de HTML cursus hadden we het in de les over het maken van links heel kort over mailto links (of e-mail links). In dit artikel gaan we uitgebreider in op de mogelijkheden van mailto links in HTML.

Een standaard mailto link in HTML

Om een bezoeker een e-mail te laten sturen via een link in HTML gebruik je de volgende code:

<a href="mailto:gebruikersnaam@emailadres.nl">Stuur een e-mail</a>

In je browser ziet deze link er zo uit:

Stuur een e-mail

Als een bezoeker op de mailto link klikt, dan wordt het e-mailprogramma van de bezoeker geopend en het e-mailadres wordt automatisch ingevuld in het "Aan-veld" van de e-mail.

Ontvangers toevoegen

Je kunt eenvoudig andere e-mailadressen toevoegen door een komma te plaatsen en de e-mailadressen toe te voegen in de code:

<a href="mailto:gebruikersnaam@emailadres.nl,naam@provider.nl,webmaster@website.nl">Stuur een e-mail</a>

Als je ontvangers wilt toevoegen als CC (Carbon Copy) of BCC (Blind Carbon Copy) aan de mailto link dan plaats je een ? in de code en direct daarachter cc=naam@provider.nl, of bcc=naam@provider.nl:

<a href="mailto:gebruikersnaam@emailadres.nl?cc=naam@provider.nl">Stuur een e-mail</a>

Onderwerp toevoegen in de mailto link: subject

Op dezelfde wijze als hierboven bij de ontvangers, kunnen we een subject (onderwerp) toevoegen aan de e-mail door dit toe te voegen aan onze mailto link. We gebruiken hiervoor ?subject=Tekst:

<a href="mailto:gebruikersnaam@emailadres.nl?subject=Tekst">Stuur een e-mail</a>

Een voorbeeld van een mailto link waarin subject gebruikt wordt:

Stuur een e-mail

Body toevoegen in de mailto link

Ook kun je een tekst opgeven die in het body gedeelte van de e-mail komt te staan. Dat doe je door ?body=Tekst toe te voegen aan de mailto link:

<a href="mailto:gebruikersnaam@emailadres.nl?subject=Onderwerp&body=Tekst">Stuur een e-mail</a>

We hebben hier zowel een onderwerp opgegeven via subject als een body tekst via body. Het is mogelijk om meerdere parameters aan de mailto link toe te voegen door het &-teken te gebruiken. Zoals hierboven: "?subject=Onderwerp&body=Tekst".

In de browser ziet deze link er zo uit:

Stuur een e-mail

Byzondere tekens in de link

Niet alle tekens kunnen zomaar gebruikt worden in een mailto link. Zo mag je geen spaties gebruiken in de URL. Als je bijvoorbeeld een spatie wilt toevoegen in het body= gedeelte van de link dan moet je %20 typen in de code:

<a href="mailto:gebruikersnaam@emailadres.nl?subject=Onderwerp&body=Tekst%20komt%20hier">Stuur een e-mail</a>

Het resultaat:

Stuur een e-mail

Enkele tekens die je moet vervangen zijn:

• spatie -> %20
• & -> &amp;
• " -> &quot;
• = -> %3D
• : -> %3A
• @ -> %40
• ? -> %3F

Spam en mailto links

Een probleem met mailto links is dat ze opgepikt kunnen worden door spambots die het web afstruinen naar e-mailadressen. Het gevolg is dat een mailto link op een webpagina kan zorgen voor een hoop spam op dat e-mailadres. Om dit te bestrijden kun je het e-mailadres coderen. Ook kun je het e-mailadres vervangen door een afbeelding, maar dat heeft als nadeel dat bezoekers nog gewoon je e-mailadres moeten intypen.

Een andere oplossing is om een formulier te maken en bijvoorbeeld een PHP script te gebruiken voor het verwerken van de informatie. Met een formulier dat gewoon weer gebruik maakt van mailto in de code (zoals we doen in de les over het maken van een formulier) beschermen we het e-mailadres dus niet tegen spambots. Daarvoor is een server-side script nodig.

Byzondere Tekens in HTML

Er is een aantal byzondere tekens in HTML die erg handig zijn voor een webmaster. Als je bijvoorbeeld het < , > of & teken wilt gebruiken in een pagina en je niet wilt dat deze gezien wordt als HTML. Zo zijn er nog veel meer tekens die je vaak tegenkomt als webmaster.

Hieronder zie je een overzicht van de belangrijkste tekens met daarbij de naam die je moet gebruiken om het teken weer te geven: bijvoorbeeld als je &amp; intypt in je HTML editor, dan krijg je het & teken als je de pagina laadt in je browser.

Het Euro Teken in HTML

Het Euro teken: € maak je via: &euro; of numeriek via: &#8364; !
Dit teken en de tekens hieronder worden vaak alleen ondersteund door de nieuwere browsers en je computersysteem moet deze tekens ook ondersteunen!

Als de Euro tekens bij jou niet goed worden weergegeven dan betekent dit waarschijnlijk dat je een verouderd lettertype gebruikt. Probeer in dat geval een update te vinden voor het betreffende lettertype via een zoekmachine.

Overzicht Byzondere Tekens

Dit waren de belangrijkste tekens die je als webmaster nodig hebt. Er zijn nog veel meer speciale tekens in HTML die je veel minder zult gebruiken. Voor een groter overzicht van deze tekens kun je op deze site kijken:

Een Redirect Maken

Bijna iedere webmaster krijgt een moment waarop hij een redirect moet gebruiken.
Bijvoorbeeld wanneer de domeinnaam van je website veranderd is of je bepaalde bestanden in andere directory's hebt geplaatst.

Je kunt dan een redirect pagina maken om bezoekers en sites die naar je linken te laten weten dat ze hun bookmarks en links aan moeten passen.

Je kunt daarvoor bijvoorbeeld deze tekst gebruiken:

Deze pagina is verplaatst en staat nu op dit adres: http://www.mijnhomepage.nl/
Pas a.u.b. uw bookmarks en links aan.

Met een link zoals hierboven worden de bezoekers alleen niet automatisch doorgestuurd.
Vaak is het handig om dat wel te doen. Dit kan je bereiken met de "meta-refresh" code.

Meta-refresh

Om de refresh te maken, moet je onderstaande code in het Head gedeelte van je pagina zetten.

<meta http-equiv="refresh" content="0;URL=http://www.jouwadres.nl/" />

Met deze code wordt de bezoeker direct doorgestuurd naar: http://www.jouwadres.nl/.
De 0 in de code geeft aan dat er niet gewacht moet worden voordat de bezoeker wordt doorgestuurd. Je kunt daar een hoger getal van maken, zodat de bezoeker eerst de tijd heeft om een berichtje te lezen, bijvoorbeeld het nieuwe adres van de site en dat hij automatisch wordt doorgestuurd.

Andere Redirects

De meta refresh is een eenvoudige manier om bezoekers automatisch door te sturen. Er zijn nog een paar andere manieren om te redirecten. Hier hebben we twee aparte artikelen over geschreven. Het gaat om de javascript redirect en de redirect via .htaccess.

<blink> en <marquee> tags: niet gebruiken!

Op veel webpagina's kom je knipperende of scrollende tekst tegen. De webmaster bereikt dit vaak via de <blink> en <marquee> tags en probeert hiermee de aandacht van de bezoeker te trekken. Er zijn een paar redenen waarom je deze tags niet moet gebruiken. Deze worden hieronder behandeld.

<blink> Tag

De <blink> tag is geintroduceerd door Netscape. Men wilde een unieke tag creëren waarmee de aandacht van de bezoeker direct op een bepaald woord of een bepaalde zin gevestigd zou worden. Het woord of de zin moest gaan knipperen op de webpagina.

Netscape heeft hiervoor uiteindelijk de <blink> tag gemaakt en heeft de ondersteuning voor de tag geimplementeerd in haar webbrowser: Netscape Navigator. Dit gebeurde buiten de officiële webstandaard van de W3C om. Dit is de reden dat de <blink> tag niet wordt ondersteund door onder andere Internet Explorer. Mensen met Internet Explorer zien dus geen knipperende tekst bij een <blink> tag!

De browsers Firefox en Opera ondersteunen wel de <blink> tag.

Test:

Zo ziet de code eruit:
<blink>Zie je hier knipperende tekst? Dan gebruik je Netscape, Firefox of Opera!</blink>

Resultaat:

Zie je hier knipperende tekst? Dan gebruik je Netscape, Firefox of Opera!!

Redenen waarom je de <blink> tag niet moet gebruiken zijn:

• de tag wordt niet ondersteund door Internet Explorer en enkele andere browsers
• knipperende tekst is meestal irritant voor bezoekers
• het gebruik van <blink> ziet er vaak amateuristisch uit

<marquee> Tag

Als antwoord op de introductie van blink door Netscape kwam Microsoft met haar eigen tag om de aandacht van de bezoeker te trekken: de <marquee> tag. Alle tekst binnen de <marquee> tags wordt scrollend weergegeven, van rechts naar links.

Ook de <marquee> tag is geen webstandaard. Het wordt ook niet ondersteund door Netscape. De browsers Firefox en Opera ondersteunen deze tag net als de <blink> tag wel.

Test:

Zo ziet de code eruit:
<marquee>Zie je hier scrollende tekst? Dan gebruik je Internet Explorer, Firefox of Opera!</marquee>

Resultaat:

Zie je hier scrollende tekst? Dan gebruik je Internet Explorer, Firefox of Opera!

Redenen waarom je de <marquee> tag niet moet gebruiken zijn:

• de tag wordt niet ondersteund door Netscape Navigator en enkele andere browsers
• scrollende tekst is meestal irritant voor bezoekers
• het gebruik van <marquee> ziet er vaak amateuristisch uit

Slot

Ik hoop dat ik zo duidelijk gemaakt heb dat het niet verstandig is om de <blink> en <marquee> tags te gebruiken op je site. Om toegankelijke sites te maken die er goed uitzien in alle browsers doe je er verstandig aan om de webstandaarden van het W3C te volgen. Deze tags maken hier geen onderdeel van uit.

Wil je toch per sé knipperende of scrollende tekst maken dan kan je dat het beste doen met behulp van een animated gif. Dan weet je tenminste dat het op iedere gangbare browser werkt en ziet het er wat professioneler uit.
Lees hier hoe je Animated Gifs kunt maken!

Links Beschrijven met Pop-Up Vensters

Als je met de muis op een plaatje gaat staan dan zie je vaak een klein Pop-Up venster verschijnen bij dat plaatje met daarin een tekstje.
Dit kan je doen door het alt attribuut bij de <img> tag te gebruiken en daarin de tekst te typen die je wilt laten verschijnen in het venster.

Iets soortgelijks kun je bereiken met de hyperlinks op je pagina.
Als de bezoeker met de muis op de link gaat staan dan verschijnt er een Pop-Up venster met daarin een tekstje.
Je kunt daarin bijvoorbeeld de naam van de site zetten waarnaar de link verwijst, of een korte inhoud van die pagina.

Je kunt dit zelfs bereiken zonder gebruik te maken van JavaScript, namelijk gewoon met HTML!

Ga bijvoorbeeld maar eens met je muis op onderstaande link staan:

http://www.mijnhomepage.nl/artikelen/artikelen.php

Het Title Attribuut

Het bovenstaande bereik je door gebruik te maken van het title attribuut in de hyperlink en het werkt bij alle moderne browsers.
De code voor bovenstaande link is dus als volgt:

<a href="http://www.mijnhomepage.nl/artikelen/artikelen.php" target="_blank" title="Allerlei artikelen voor webmasters!">De Linktekst</a>

Als je een tekstje wilt hebben dat meerdere regels beslaat, dan kun je de regels scheiden door gebruik te maken van de tekens "&#10;&#13;".

Ga maar eens op onderstaande link staan.
Als het goed is verschijnt er nu een Pop-Up met meerdere regels commentaar erbij (in ieder geval als je IE gebruikt).

http://www.mijnhomepage.nl/google/

De code voor de bovenstaande link is:

<a href="http://www.mijnhomepage.nl/google/" target="_blank" title="Allerlei artikelen over Google!&#10;&#13;De tweede regel.&#10;&#13;&#10;&#13;En de vierde regel.">De Linktekst</a>

Je ziet dat er na de tekst "De tweede regel" twee keer de tekens &#10; en &#13; geplaatst zijn.
Zo kun je een witregel maken.

Dit werkt trouwens niet in alle browsers, maar in ieder geval wel in moderne versies van Internet Explorer.

Hoe zet ik mijn homepage op het web?

Nu je je bestanden gemaakt heb, is het tijd om ze op het web te zetten, zodat ze ook gezien kunnen worden door bezoekers. Dat doe je door de bestanden te uploaden

Bestanden Uploaden

Uploaden kan op twee verschillende manieren die hieronder globaal beschreven worden. De manier die bij jou van toepasssing is hangt af van de homepage-provider die je hebt. Kijk daarom eerst op de site van je homepage-provider voor informatie over het uploaden van je site en voor het achterhalen van je gebruikersnaam en wachtwoord die daarvoor nodig zijn.

1. Uploaden via de browser

Bij sommige webhosts kun je je bestanden uploaden via een formulier op een bepaalde pagina van hun site. Dan gebeurt het uploaden dus via je browser.

2. Via FTP (=File Transfer Protocol)

De meest gebruikte wijze van uploaden is het uploaden door middel van FTP. Hiervoor heb je wel een FTP-programma nodig.
Hier vind je een lijstje met FTP programma's.

Wij hebben al een uitvoerige handleiding over uploaden met de FTP client FileZilla geschreven. Gebruik je andere software dan kun je waarschijnlijk op de site van het betreffende programma meer informatie vinden over het instellen van de software.

De gebruikersnaam, wachtwoord en hostnaam heb je normaal gesproken van je homepage-provider gekregen bij de aanvraag van je hostingaccount. Als je deze gegevens kwijt bent dan kunnen zij deze voor je achterhalen.

HTML Code controleren met een Validator