De techniek achter een website

De techniek achter een website

Als je gewend bent om te werken met kantoorprogramma's zoals teksverwerkers (MS Word, LibreOffice...) en presentatieprogramma's (zoals MS Powerpoint, Apple Keynote...), dan ben je gewend om teksten en foto's en vormgeving samen te voegen in één bestand. Als je een bestand van je tekstverwerker doorstuurt naar vrienden, dan ben je er zo goed als zeker van dat de foto's die je aan het document hebt toegevoegd, nog steeds in dat document zitten als de bestemmeling het bestand opent. Enkel de lettertypes kunnen wat problemen geven.

Bij een website werkt het net iets anders. Een website bestaat uit een reeks afzonderlijke bestanden en een reeks mappen.

Op de afbeelding hieronder zie je een voorbeeld:

a. Alles is een link

Ook al toont een webpagina afbeeldingen tussen de tekst, de afbeeldingen zijn steeds gelinkt. Ze staan extern, meestal in een afzonderlijke map (in dit geval de map 'images'). Als je een webpagina opent in een browser, dan weet de browser dat hij die foto's moet gaan zoeken in de map op de webserver.

Stel dat je domeinnaam www.blabla.beis, dan zal het adres van de afbeelding www.blabla.be/images/banner.jpgzijn. Zo zie je dat het adres dat in je browserbalk verschijnt, ook effectief een mappenstructuur weergeeft (images/banner.jpg).

Ook video's of kaarten die in een webpagina getoond worden, staan niet "echt" in de webpagina. Ze worden "ingesloten", zoals je een foto achter een frame steekt in een kader. Kaarten komen vaak van Google Maps of OpenStreetMaps, films van YouTube of VIMEO...

b. Stijl en inhoud zijn strikt gescheiden

Webpagina's staan altijd in de basismap en eindigen op de uitgang .html, zoals een Worddocument eindigt op .doc of .docx. De opmaak van een webpagina (kleuren, lettertypes, afmetingen, posities...) staat beschreven in afzonderlijke documenten met de uitgang .css (in het voorbeeld style.css in de map style).

Een voorbeeld van CSS-code uit een stijlbestand:

De reden waarom stijlinformatie in een afzonderlijk document staat, is eigenlijk heel logisch. Als de eigenaar van een site de stijl van zijn/haar site wil aanpassen, dan moet hij/zij enkel dit ene stijldocument wijzigen. De site verandert dan meteen van uiterlijk zonder dat de inhouden opnieuw moeten ingevoerd worden.

Dankzij CSS kan de stijl van zeer grote sites in één oogwenk aangepast worden. De webmaster past het stijldocument aan en heel de site, of die nu één of 10 miljoen webpagina's bevat, verandert meteen van uitzicht.

Om die reden kan een site of online app zoals Facebook of Instagram er na een nachtje slapen plots volledig ander uitzien. Als een bedrijf zoals Facebook het CSS-bestand van hun site aanpassen, dan veranderen automatisch alle miljoenen profielen van uitzicht. Stel je voor dat je de huisstijl zou willen wijzigen in duizend Worddocumenten, dan zou je wel even wat tijd nodig hebben.

c. Webpagina's zijn IKEA-kasten voor browsers

Als je een website of webpagina in je browser opvraagt of via een zoekmachine als Google opzoekt, dan stuurt de webserver waarop die pagina "staat", je een reeks bestanden door: HTML- en CSS-bestanden (zie hierboven) en eventueel afbeeldingen en andere bestanden.

Je browser krijgt al die onderdelen toe en bouwt met behulp van het stijldocument (het CSS-bestand) de hele site op in het browservenster.

Je kan het perfect vergelijken met een IKEA-zelfbouwpakket. IKEA (de server) stuurt je één of meer kartonnen dozen. Jij (de browser) opent die dozen en bouwt met behulp van de handleiding (CSS) de planken en schroeven (HTML, foto's, films...) op tot een kast (de zichtbare webpagina).

d. Interactieve toestanden

Naast HTML en CSS is er nog een derde "taal" van cruciaal belang in moderne websites: JAVASCRIPT. Dit is een echte "programmeertaal". Vergelijk het nogmaals met een IKEA-kast. Bij een kast kan achteraf ook deuren en schuiven open- en dichtdoen. De "gebruiker" kan "interactief" met de kast omgaan.

Op een website zullen op die manier slideshows, accordeon-effecten enz. met behulp van javascript worden geprogrammeerd. De webmaster kan code schrijven (of in veel gevallen gewoon ergens downloaden) om interactieve effecten aan de site toe te voegen.

SAMENGEVAT: DE FRONTEND (wat we van een site zien in de browser) WORDT GEBOUWD MET EEN COMBINATIE VAN DRIE TALEN: HTML, CSS en JAVASCRIPT.

e. Een website bouw je in een teksteditor

Een "echte" webmaster zal een site in code bouwen in een teksteditor. Opgelet: een teksteditor is nog wat anders dan een tekstverwerker. Je kan er niet visueel pagina's in samenstellen. Je tikt code in in HTML of CSS of javascript. Je moet dus wel weten wat je aan het doen bent en hoe je dit moet doen.

De HTML-code van een webpagina in een teksteditor: