Open een webpagina naar keuze en bekijk de broncode (F12 in Chrome). Globaal wordt een webpagina opgebouwd uit 3 talen:

  1. HTML: Inhoud & structuren
    • Titels
    • Alinea's
    • Afbeeldingen
    • Hyperlinks
    • Lijsten
    • ...
  2. CSS: Vormgeving
    • Lettertypes
    • Kleuren
    • Rand
    • Achtergrondafbeelding
    • Positionering
    • ...
  3. Javascript: Gedragingen
    • Interactie voor de gebruiker (naam herkenning)
    • Dynamische weergave (rekenmachine)
    • Openen van een pop-up afbeelding
    • ...

Kort samengevat, de beste manier om websites op te zetten bestaat uit 3 fasen:

  1. Het samenstellen van de structuur met HTML.
  2. De vormgeving vastleggen in een stijlblad met CSS.
  3. Het toevoegen van dynamiek en interactie met JavaScript.

De belangrijkste pagina die een website bevat is de homepagina, dit is de eerste pagina van je website. Normaal gezien bevat de homepage een overzicht van wat er op je website allemaal te zien en te beleven valt. Daarom is de navigatie het allerbelangrijkste in de website om het aantal webpagina's duidelijk te maken.

De verschillende pagina's zijn met elkaar verbonden door hyperlinks. Dit zijn knoppen of stukken tekst waar de bezoeker op kan klikken en hierdoor wordt een andere pagina geopend binnen dezelfde website. Het 'springen' van de ene naar de andere webpagina en/of website wordt ook wel surfen genoemd.

Website ontwikkelaars gaan al jaren gebukt onder het feit dat een webpagina er niet identiek uitziet in elke browser. Met name Internet Explorer (Windows) ligt vaak dwars en bedenkt eigen standaarden. Maar ook tussen Firefox en Chrome zitten soms nog kleine verschillen. Menige website ontwikkelaars bouwen webpagina's allereerst voor Firefox, omdat deze browser het dichtste bij de standaarden staan.

Dankzij een handige website www.HTML5test.com kunt u zien welke browser de meest HTML5 compatibele browser is.

Doe zelf ook de HTML5 test!

Met de website http://HTML5.validator.nu kunt u de inhoud van uw documenten eenvoudig testen. Kies in het dropdown menu linksboven de optie address en typ het addres van een webpagina voorbeeld http://www.pti-ninove.be of Je je kan ook een stuk HTML-code inplakken, verander de optie dan naar Text Field.

De rode markeringen maken duidelijk dat deze website nog niet voldoet aan de HTML5 eisen. Nog een goede validator is http://validator.w3.org.

De snelheid van een website hangt veel af van zuiver en korte code. Wanneer een pagina veel code heeft, zal de browser dus ook wat langer over het laden doen.  De snelheid van een website hangt veel af van zuiver en korte code. Wanneer een pagina veel code heeft, zal de browser dus ook wat langer over het laden doen. Ook figuren, animaties en andere externe mediabestanden moeten zo klein mogelijk zijn qua bestandsgrootte. Dit principe noemen we optimaliseren. Je kan de snelheid testen via developers.google.com/speed/pagespeed.

Je hebt ook handige tools om je HTML, CSS en JavaScript te verkleinen. Hou wel altijd een originele versie aangezien alle witruimtes verdwijnen en niet handig meer is om in te werken. Meer info vind je op Minify Resources

Je kan een website maken op 3 manieren:

  1. In code: De taal waarin een website ontwikkeld wordt is HTML, we typen de code rechtstreeks in een editor: notepad-plus-plus.org (notepad++) of sublimetext.com. Het zijn beide gratis editors met syntax highlighting voor meerdere programmeertalen en markup-talen, waaronder HTML en CSS.
  2. In een programma: Er bestaan programma's waarin je op grafische manier kan werken en die vervolgens voor jou de HTML-code genereren. Men noemt deze programma's WYSIWYG-editors, dit staat voor What You See Is What You Get. Dreamweaver is zo een programma.
  3. In een CMS-systeem: De laatste trend is dat men vertrekt van een website template, deze staat technisch volledig klaar enkel de inhoud moet worden aangevuld. Men moet dan zelf nog de inhoud toevoegen, lay-out wijzigen en de gewenste functionaliteit toevoegen. CMS staat voor Content Management System. Dit is de snelste manier om een website te maken, maar niet altijd de nauwkeurigste (lange inlaadtijden en het gevaar bestaat hierin dat alle websites op elkaar gaan lijken). De bekendste CMS-systemen zijn Drupal, Joomla en WordPress.

Ik werkte vroeger graag met Dreamweaver maar de gratis editor Sublime Text is zeker een aanrader! De laatste jaren hapert Dreamweaver veel en ik werk persoonlijk liever met een gewone text editor. Negeer de waarschuwing om over te gaan naar een betaalversie, je kan dit uitklikken en gewoon verder editeren. De laatste jaren hapert Dreamweaver veel en werk ik persoonlijk veel liever met een gewone text editor.

Bekijk websites en leer uit de opbouw en technieken. Je kan de code eenvoudig oproepen in de browser met behulp van de sneltoets F12 ( = Developer Tool ).