Tips & Tricks

Welkom bij Tips & Tricks, hier vind je allerlei handige weetjes die van pas komen bij het maken van een website, maar ook bijvoorbeeld bij het oplossen of vermijden van een probleem.

Escape tekens

Misschien ben je het probleem al eens tegengekomen, je wilt bijvoorbeeld het kleiner dan symbool (<) laten verschijnen op een webpagina. Nu is het probleem dat dit niet lukt omdat het geïnterpreteerd wordt door de webbrowser als het begin van een bepaalde HTML tag. Om dit probleem op te lossen, gebruiken we escape tekens (ook wel speciale/bijzondere karakters genoemd).
Hieronder volgt een beperkte lijst van deze speciale karakters:

Voor een volledige lijst van al de speciale karakters, verwijs ik naar een HTML karakter tabel.

Geldige broncode

Zorg ervoor dat de broncodes van je webpagina's geldig zijn. Om te controleren of deze geldig zijn, kan je W3C Markup Validation Service gebruiken.

Om de broncode geldig te maken, raad ik je eerst en vooral aan om XHTML te leren. Als je je aan de regels van XHTML houdt, heb je veel minder kans op een ongeldig stukje broncode, maar het is echter nog steeds mogelijk.
De meest voorkomende fouten bespreek ik hieronder.

• Doctype

  Dit is een van de hoofdregels van XHTML. Zonder een doctype, zal de broncode nooit geldig zijn. Voor meer informatie over doctypes verwijs ik je door naar de XHTML tutorial.

• Het type attribuut

  Als je vroeger Javascript hebt geleerd, is de kans groot dat ze je aangeleerd hebben dat een javascriptje er zo uit moet zien:

  <script language="JavaScript">
  <!--
  // Javascript code
  //-->
  </script>

  Dit is echter ongeldig en moet worden:

  <script type="text/javascript">
  <!--
  // Javascript code
  //-->
  </script>

  Merk enerzijds op dat het language attribuut wordt vervangen door het type attribuut en dat de waarde hiervan ook anders is. Anderzijds moet je erop letten dat in de verbeterde code alle karakters lowercase zijn.

  Diegenen die nog geen Javascript kennen maar van plan zijn om het te leren, kunnen deze informatie best onthouden.

  Opmerking:

  De juiste en de foute code hierboven zijn niet allebei geldig, maar hebben wel hetzelfde effect.

• Ampersand in een URL coderen

  De naam ampersand (uit het Engels), of ook wel het et-teken genoemd (uit het Latijn), zal je waarschijnlijk niet veel zeggen. Je kent het echter wel, het is namelijk het volgende karakter: &.

  Het probleem met dit karakter is dat het in een URL kan voorkomen, kijk maar naar onderstaande code:

  <a href="extra.php?pag=faq&open=1">Beschrijving link</a>

  Deze code is niet geldig en moet verbeterd worden in:

  <a href="extra.php?pag=faq&amp;open=1">Beschrijving link</a>

  Als je (nog) geen PHP kent, ben je hoogt waarschijnlijk nog niet vertrouwd met dergelijke URL's zoals die hierboven. In dat geval raad ik je aan om dit te onthouden voor later maar je er toch nog niet teveel van aan te trekken.

  Opmerking:

  Beide codes hebben alweer hetzelfde effect, maar aangezien slechts de laatste geldig is, dient men deze gebruiken.

• Het alt attribuut

  Als je een afbeelding op je webpagina wilt laten verschijnen, gebruik je bijvoorbeeld volgende code:

  <img src="afbeeldingen/vakantie.jpg" />

  Het is echter zo dat het alt attribuut een verplicht attribuut is bij de img tag (en ook bij de area tag trouwens). Dus als we een geldige broncode willen hebben, moeten we telkens het alt attribuut gebruiken bij de img en de area tag.
  We verbeteren onze broncode en we krijgen:

  <img src="afbeeldingen/vakantie.jpg" alt="Foto van vakantie" />

  Als de bezoeker nu met zijn cursor blijft stilstaan op de afbeelding, komt er een kadertje tevoorschijn met daarin Foto van vakantie.

Houd er rekening mee dat dit slechts een beperkte lijst is van de mogelijke foutmeldingen die de validator kan geven. Indien je nog frequente foutmeldingen weet, kan je altijd op de contact pagina of het gastenboek terecht.

Ten slotte, als je alle broncodes geldig hebt gemaakt, kan je jouw bezoekers tonen dat je webpagina's voldoen aan de regels van XHTML of HTML door een code te laten maken door de Valid (X)HTML icon code generator en die code dan op je website te plaatsen.