Webbouwen

Inhoud:

Inleiding

Je kunt op elke computer met een internetaansluiting websites bekijken op het World Wide Web (WWW).
Daarvoor heb je een webbrowser nodig, zoals Firefox of Microsoft Internet Explorer.
Als je het adres in de adresbalk van de webbrowser intypt (of op een link klikt) dan vraagt de browser de betreffende webpagina op bij de webserver waar de pagina op staat, downloadt de pagina naar je computer, en laat hem aan je zien.

In feite gaat dit hetzelfde als dubbelklikken op het icoontje van een bestand op je eigen computer, zoals een doc-bestand, txt-bestand, pdf-bestand, jpg-bestand, etc., alleen staat het bestand nu niet op je eigen computer, maar op de webserver, en die webserver kan overal staan: in Nederland of in een ander land, bij een bedrijf of bij iemand thuis.

Schema: de webserver is verbonden met PC's van mensen en met mobiele telefoons e.d.Veel webpagina's zijn html-bestanden. HTML betekent 'Hyper Text Markup Language': het bestand is geschreven in een taal waarmee men hypertext kan maken; links naar andere bestanden op het WWW. Je roept dan zo'n bestand op, dat wordt gedownload naar je computer, en daar wordt het in de webbrowser aan je getoond.

Als je een html-bestand op het WWW oproept, wordt het bestand gedownload naar je computer met het Hyper Text Transfer Protocol, HTTP. Daarom begint het adres altijd met http://.
Direct daarna staat het adres van de webserver waar het bestand op staat, daarna vaak nog de directory (map) waar het bestand in zit, en daarna de naam van het bestand zelf.
Bij de webpagina http://www.mimia.nl/muziek/artiest.htm gaat het bijvoorbeeld om het bestand [artiest.htm], en dat zit in de directory [muziek], en die staat op de webserver [www.mimia.nl].

In dit geval staan er ook nog plaatjes op die webpagina, die worden als aparte bestanden met de pagina mee gedownload naar de computer. In het html-bestand [artiest.htm] zelf staat alleen maar tekst met links, maar er wordt in het bestand ook aangegeven welke plaatjes er getoond moeten worden en waar die plaatjes moeten komen te staan. De plaatjes zijn vaak jpg-bestanden, png-bestanden en gif-bestanden. Op de webpagina http://www.mimia.nl/muziek/artiest.htm staat bijvoorbeeld het plaatje http://www.mimia.nl/imagmuz/ph-mono.gif. Zoals je ziet (als je op de link klikt) kun je ook alleen het plaatje in je browser oproepen.

Als je een html-bestand op je eigen computer hebt staan, en je opent het, wordt het ook automatisch in je webbrowser geopend. Het adres begint dan natuurlijk niet met http://, want het bestand wordt nu niet gedownload naar je computer met het Hyper Text Transfer Protocol, HTTP. Het adres kan bijvoorbeeld zijn: C:\Documents and Settings\Laura\My Documents\handleiding.htm.

Met het oog op de toekomst en op de bezoeker van de site is het belangrijk er rekening mee te houden als je een website bouwt dat de pagina er niet altijd voor iedereen precies zo uitziet als je zelf graag zou willen, of zoals hij er op je eigen computer uitziet: een webpagina kan met verschillende apparaten oproepen worden, bijvoorbeeld een PC met Windows, een PC met Linux, een Apple Macintosh, een laptop, een PDA, een mobiele telefoon, en ook door sommige televiesies. Bovendien kan de webpagina opgeroepen worden door verschillende soorten webbrowsers, bijvoorbeeld Firefox of Microsoft Internet Explorer, of Lynx, een browser die alleen tekst laat zien, en geen plaatjes. Lynx wordt vaak gebruikt door mensen die een speciaal soort computer hebben of door mensen die blind zijn, en daarom een brailleregel gebruiken bij hun computer. Het is belangrijk er rekening mee te houden dat de website voor al deze apparaten, al deze browsers en zoveel mogelijk mensen toegankelijk moet zijn.

Als je een webpagina wilt bouwen, gebruik je de richtlijnen van W3C, het ‘World Wide Web Consortium’. W3C heeft de codetalen ontwikkeld waarmee men webpagina's kan opstellen, zoals HTML. Door je aan de richtlijnen, codes en regels van W3C te houden, zorg je ervoor dat je website toegankelijk is voor je bezoekers, en dat hij ook in de toekomst toegankelijk zal blijven, ook als er nieuwe versies van webbrowsers en nieuwe apparaten ontwikkeld worden.

HTML

De meeste webpagina's zijn dus html-bestanden. Dat zijn bestanden, geschreven in html.
Probeer maar eens het bestand http://www.mimia.nl/muziek/artiest.htm op te slaan op je eigen computer, door in je browser te kiezen voor bestand - opslaan (of file - save), en open het bestand dan in een simpele teksteditor, zoals kladblok (notepad). De tekst die je in je webbrowser zag staan, vind je allemaal terug, maar er staan wat codes omheen, die tussen hoekhaken staan: de < en de >.

Een html-bestand bestaat uit twee gedeelten: de head en de body.

In de head staat informatie over het bestand, die niet in de webbrowser wordt weergegeven. Deze informatie is nodig voor de webbrowser, en soms ook voor zoekmachines e.d., en bovendien is de titel opgenomen in de head. Die titel wordt in de meeste browsers getoond in de blauwe titelbalk bovenaan. Ook wordt de titel gebruikt voor de 'favorites' of 'bookmarks': als je een bookmark maakt van een webpagina wordt de titel de naam van de bookmark.

De body is het deel van het bestand dat aan de bezoeker wordt getoond in de webbrowser.

Head en Body in een html-bestand

De meeste html-codes in een html-bestand zijn 'elementen', bestaande uit een 'begin-tag' en een 'eind-tag'.

Een html-bestand begint altijd met het html-element. Dit element geeft aan dat het bestand html-code bevat.
De begin-tag van dit element ziet er zo uit: <html> (bij deze codes doet het er niet toe of je hoofdletters of kleine letters gebruikt.)

Helemaal aan het eind van het bestand wordt dit element afgesloten met de eind-tag: </html>.
De 'slash' (/) geeft aan dat het element wordt afgesloten.

De head van de webpagina wordt gedefiniëerd met het head-element: het begint met <head> en wordt afgesloten met </head>. Daartussen komt dan de extra informatie, zoals de titel. Die begint met <title> en eindigt met </title>. Daartussen zet je dan de titel, bijvoorbeeld "Ratje-toe: Webbouwen".

De body wordt gedefinieerd met het body-element: start met <body> en eindig met </body>. Daartussen zet je de tekst die je aan de bezoeker wil laten zien in de webbrowser.

Een heel simpel html-bestand ziet er dus zo uit:

<html>
   <head>
      <title>Ratje-toe: Webbouwen
      </title>
   </head>

   <body>Hier staat een uitleg over hoe je een website bouwt.
   </body>
</html>

Open nu een simpele teksteditor (zoals kladblok/notepad), en kopieer de bovenstaande tekst daarin.

Sla de tekst nu op je bureaublad op als webbouwen.htm. (Kies bij 'type bestand'/'filetype' niet voor 'text', maar voor 'alle typen'/'all types'.)

Zoek het bestand nu op op je bureaublad, en open het. Je zult zien dat het in je webbrowser geopend wordt, en dat de body inderdaad in het browservenster verschijnt, en de titel in de titelbalk.

Meer html-codes leren

Er zijn veel handleidingen geschreven over hoe je html-bestanden maakt. Ik ga dat dus niet opnieuw doen, maar verwijs gewoon naar de bestaande handleidingen. Hieronder geef ik dan nog extra tips.

Handleidingen/cursussen in het Nederlands:

Cursus in het Engels:

Natuurlijk heb ik zelf toch ook nog wel wat tips, die ik hieronder nog neer zet, ook voor eigen gebruik.

Richtlijnen

Als je een webpagina wilt bouwen, gebruik je de richtlijnen van ‘W3C’, het ‘World Wide Web Consortium’. W3C heeft de codetalen ontwikkeld waarmee men webpagina's kan opstellen, zoals HTML en CSS.

Door je aan dit soort regels te houden wordt in elk soort webbrowser de inhoud en opbouw van je pagina duidelijk aan je bezoekers.

Commentaar

Commentaar is een stukje tekst dat je in de code van je webpagina zet, dat niet getoond wordt aan de bezoeker in de webbrowser. Als je in de code dit commentaar erbij zet, kan dat handig zijn om uit te leggen wat je bijvoorbeeld in het erop volgende stukje code doet, zodat je later weer begrijpt hoe je het kunt aanpassen.

Commentaar in html:

<!-- commentaar -->

Commentaar in php, css en javascript:

/* commentaar */

Beeldschermresoluties

Het is verstandig om bij het ontwerpen van je site niet alleen te kijken naar hoe de site er op je eigen beeldscherm uit ziet, maar rekening te houden met veelgebruikte beeldschermresoluties. Daardoor hoeven mensen die een lage resolutie / klein scherm hebben, niet de hele tijd heen en weer te 'scrollen' als ze de teksten op je site lezen. (De inhoud van het venster bewegen met de schuifbalken onder of opzij, met het scrollwieltje op de muis of met de pijltjestoeten omdat de inhoud anders 'buiten je beeldscherm valt'.)
Let hierbij vooral op de breedte: naar beneden scrollen is nog niet zo erg, maar opzij scrollen wordt door veel mensen heel vervelend gevonden. Je kunt dus beter een smalle, 'hoge' site hebben dan een brede, 'lage' site.
Hier een lijstje met de meest gebruikte beeldschermresoluties op het www in de wereld, van 22 juni 2008:

resolutie in pixels %
1024 x 768 54,02
800 x 600 24,66
1280 x 1024 14,10
1152 x 864 4,00
640 x 480 0,60
1600 x 1200 0,80
1152 x 870 0,10

Bron: www.onestat.com/html/aboutus_pressbox31.html, nu (22 dec. 2013) niet langer beschikbaar.
En hier nog een zeer betrouwbare bron met lijstjes e.d.:
www.w3schools.com/browsers/browsers_display.asp, maar let op, dit zijn de statistieken van de bezoekers van de w3c-site, en dat is hoogstwaarschijnlijk niet representatief voor de gemiddelde webgebruiker!
En zie ook: gathering.tweakers.net voor allerlei discussies van webbouwers over dit onderwerp.
Er is ook nog screenresolution.org, maar het is me niet zo duidelijk hoe betrouwbaar die statistieken zijn: alleen de schermresoluties van de bezoekers van die site worden gebruikt, en dat is misschien ook niet representatief voor de gemiddelde webgebruiker.

Een netbook (mini-laptop) heeft meestal een resolutie van zo'n 1024 x 600 pixels, een heel enkele uitzondering slechts 800 x 480. (Bron: Wikipedia, Kieskeurig, Computerland op 3 mei 2009.)
Een iPad heeft een schermresolutie van 1024 x 768 pixels (versie 1 en 2 en iPad Mini 1) of van 2048 x 1536 pixels (versie 3, 4 en Air en iPad Mini 2).
Veel moderne smartphones hebben een schermresolutie van 1920 x 1080 pixels. (22 dec. 2013)

Toegankelijkheidslinks

Ik probeer er altijd voor te zorgen dat door mij gemaakte webpagina's voor zoveel mogelijk mensen toegankelijk zijn, dus ook bijvoorbeeld voor mensen die blind of slechtziend zijn, mensen die kleurenblind zijn, mensen met een verstandelijke handicap, mensen die door bijv. autisme of ADHD snel overprikkeld raken, etc.
Allerlei mensen en organisaties houden zich bezig met de toegankelijkheid van internet voor iedereen.
Hieronder vind je enkele links.

Checkers

websites waar je de code etc. van je webpagina's kan laten controleren:

 

Speciale tekens

Overzichten van de code voor speciale tekens in HTML, bijvoorbeeld een e met een dakje (â, code: &acirc;) of een ampersand (&, code: &amp;) of een tilde (~, code: &#126;).
Door de codes voor speciale tekens te gebruiken zorg je dat je bezoekers in elk soort webbrowser, en ook gespecialiseerde software voor bijvoorbeeld gehandicapte interenetters, de inhoud en opbouw van de pagina duidelijk blijven.

CSS

CSS betekent ‘Cascading Style Sheets’. Hiermee maak je de opmaak van een pagina los van de inhoud. Hierdoor hoef je de opmaak van je hele site, bestaande uit meerdere pagina's, maar op één plek te wijzigen, en het is ook veel toegankelijker voor mensen die bijvoorbeeld slechtziend zijn.

Programma's

Programma's die ik gebruik bij het bouwen van webpagina's:

Firefox-extensions voor webbouwers

Voor de webbrowser Firefox kun je speciale plugins installeren, die heel handig zijn voor webbouwers.

Zoekmachines

Je wilt natuurlijk dat je website heel hoog komt te staan in de zoekresultaten van zoekmachines zoals Vinden.nl en Google.nl enzovoort. Houd dan de volgende richtlijnen in de gaten:

Nog meer tips over zoekmachines:

 

Overige links

Veel tips en forums om vragen te stellen en informatie/ervaringen uit te wisselen:

Valid HTML 4.01! Valid CSS!

top

Home (Laura)

ADHD en Borderline
    ADHD
    Borderline
    Overlap
    Wilskracht
    Is ADHD een hype?
    Boeken over ADHD
    Links ADHD en Borderline
    Schuld van de ouders?

Tips
    Algemeen
    PDA/Palm
    Software (met downloads!)
    Internet-veiligheid
    Webbouwen

Arbeidsongeschikt
    Herkeuring
    Reïntegratielogboek

Allerlei
    Boeken
    Blog
    Films
    Foto's
    Gastenboek
    Gastenboek-archief
    Geschiedenis Ratje-toe.nl
    Muziek
    Muziek instuderen met MidiPlay
    Recepten
    Trouwerij Laura en Mark!
    Vakantie
    Vrienden
    Zon

Zoeken binnen Ratje-toe.nl: