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.
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:
- Webmees van Hans Werksman: www.xs4all.nl/~werksman/webmees, met heel veel info en uitleg over html, css, php, xml, etc.
- Handleiding HTML van Hans de Jong: www.handleidinghtml.nl. Uitgebreiden uitleg over html en css.
- Naast de Webmees is er ook een Webmeesteres! Ook hier veel info en beginnershandleidingen html, php, etc.
- Gratis lessen html, css, php, photoshop, etc.: www.design-web.nl.
- Cursus van HCC magazine: www.hccmagazine.nl. Klik in de linkerbalk op ‘cursussen’: o.a. cursussen HTML, internet en Dreamweaver (met daarin o.a. ook CSS).
- Cursussen van de Nationale Mediasite: www.nationalemediasite.nl/cursus.php. O.a. html, css, etc.
Cursus in het Engels:
- www.w3schools.com
Alle cursussen van W3C zelf.
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.
- Als allereerste regel van je HTML-document geef je aan welke code je gebruikt, bijvoorbeeld HTML 4.01, en ook waar je de regels voor die code kunt vinden. Bijvoorbeeld:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
of
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Je kunt vinden welke code je moet gebruiken op www.w3schools.com/tags/tag_doctype.asp - Meteen daaronder geef je de hoofdtaal van het document aan:
<html lang="dut"> - Bovendien moet je aangeven welke ‘characterset’ je gebruikt voor je document. Voor documenten in het Nederlands of Engels is dat over het algemeen iso-8859-1. Je geeft dat aan door in de <head> de volgende regel op te nemen:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - Als je in een klein stukje van je document een andere taal gebruikt dan de hoofdtaal, moet je dat ook aangeven:
bijv.: <SPAN lang="fr"> en aan het eind </span>
Alle codes voor de talen zijn te vinden op: http://www.loc.gov/standards/iso639-2/php/code_list.php
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.
- www.anysurfer.be, met handige checklist.
- www.drempelsweg.nl
- www.accessibility.nl
- Een korte, gratis ‘curus’ webpagina's geschikt maken voor blinden door Anneke Klein, 2008: www.kellerhuis.com/cursus/gratis/toegankelijkheid-blinden.html
- Toegankelijkheidsrichtlijnen van W3C; "Web Content Accessibility Guidelines 1.0", 1999: www.w3.org/TR/WAI-WEBCONTENT
- Een eerste introductie in het toegankelijk maken van een website door W3C: www.w3.org/WAI/gettingstarted/Overview.html.nl
- Toegankelijkheidskenmerken van CSS, W3C-notitie 1999: www.angelica.dds.nl/W3C/translations/CSS-access.html
- www.w3c.nl/Vertalingen/2001/Curriculum/index.htm
- Aangevelingen toegankelijkheid Webcontent 1999, W3C: www.w3c.nl/Vertalingen/2000/WAI-WEBCONTENT/WAI-WEBCONTENT-NL.html
- IJkpuntlijst van W3C, verkort: www.w3c.nl/Vertalingen/2000/WAI-WEBCONTENT/ijkpunt-lijst.html
- IJkpuntlijst van W3C, volledig: www.w3c.nl/Vertalingen/2000/WAI-WEBCONTENT/volledige-ijkpunt-lijst.html
Checkers
websites waar je de code etc. van je webpagina's kan laten controleren:
- HTML-validator van W3C: validator.w3.org
- CSS-validator van W3C: jigsaw.w3.org/css-validator
- Link-checker van W3C: validator.w3.org/checklink
- HTML Tidy: een programma om op je computer je hele site op valide code te laten controleren, in plaats van pagina voor pagina. tidy.sourceforge.net
- WebXACT: webxact.watchfire.com (Vandaag, 22 dec. 2013, is deze pagina offline. Ik check het later opnieuw, en haal het hier nog niet weg.)
WebXACT is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues.
Zie toegankelijkheidslinks - Kleurenblindheids-check: www.vischeck.com
Hiermee kun je zien hoe iemand die kleurenblind is jouw site zou zien. Door de kleuren volgens hun advies aan te passen, blijft de site ook voor kleurenblinden leesbaar. - Blindheids-check: Veel blinden gebruiken een braille-regel, en een webbrowser die alleen de tekst van een pagina weergeeft, zonder opmaak, bijvoorbeeld de webbrowser Lynx.
Met een Lynx-test kun je zien hoe een webpagina in Lynx wordt weergegeven, en dan zelf nagaan of de volgorde logisch is, en of de hyperlinks duidelijk zijn, of er geen informatie gemist wordt doordat de plaatjes ontbreken, etc. Hiervoor kun je bijvoorbeeld één van de Firefox-extensions gebruiken.
- Browsercheck: hier kun je checken hoe je website er uit ziet in allerlei verschillende webbrowsers.
Speciale tekens
Overzichten van de code voor speciale tekens in HTML, bijvoorbeeld een e met een dakje (â, code: â) of een ampersand (&, code: &) of een tilde (~, code: ~).
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.
- www.htmlhelp.com/reference/css: een pagina met veel tutorials en informatie over css.
- www.csszengarden.com: een pagina met heel mooie voorbeelden van wat je met css kunt bereiken.
- www.w3.org/Style/CSS/learning: hulp bij het leren van css van W3C zelf.
Programma's
Programma's die ik gebruik bij het bouwen van webpagina's:
- HTML-editor: Crimson Editor, www.crimsoneditor.com
- Adobe Dreamweaver
- CSS-editor: TopStyle. Zelf gebruik ik TopStyle Lite, de gratis versie. Te downloaden op www.software.akker-huis.nl of www.softpedia.com.
- Voor beginners is er ook de WYSIWYG Webeditor: Nvu, www.nvu.com
LET OP: niet geschikt voor gebruik met pagina's die php-code bevatten!
Firefox-extensions voor webbouwers
Voor de webbrowser Firefox kun je speciale plugins installeren, die heel handig zijn voor webbouwers.
- Web Developer: chrispederick.com/work/webdeveloper
Voegt een extra werkbalk toe met veel handige ‘tools’ voor webbouwers, zoals een 'resizer' om te zien hoe je site er met een andere beeldschermresoluties uit ziet, een link-checker, een html-validator, een css-validor, een toegankelijkheids-richtlijnen-checker, etc.
- HTML Validator, users.skynet.be/mgueury/mozilla
Nog een gereedschapje om de HTML-code te controleren, met de hulp van het checker-progamma Tidy van W3C. Als je ook al de Firefox-extension Web Developer hebt lijkt deze extension dus overbodig, maar wat deze extension extra biedt is ook handig: in de statusbalk van de browser wordt meteen terwijl je de pagina aan het bekijken bent getoond of de code van de pagina in Tidy foutmeldingen oplevert, waarschuwingen, of geen van beide. Het is ook mogelijk de code door deze extension te laten ‘opschonen’ je kunt de nieuwe code dan direct in je eigen bronbestanden plakken, de aangepaste bestanden op de webserver zetten, en je pagina is helemaal foutenvrij!
- Fangs: www.standards-schmandards.com/projects/fangs
Toont de pagina zoals die gelezen wordt door een zogeheten ‘screen reader’, een programma dat de inhoud van het scherm in pure tekst omzet en die uitvoert naar een brailleregel of een voorleesprogramma.
- Yellowpipe Lynx Viewer Tool, www.yellowpipe.com/yis/tools/lynx/rightlynx (Vandaag, 22 dec. 2013, is deze pagina offline. Ik check het later opnieuw, en haal het hier nog niet weg.)
Toont de pagina zoals die gelezen wordt door de webbrowser ‘Lynx’, een puur-tekst browser. (Maar wel een beetje anders dan de meeste moderne screen readers.)
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:
- Zorg dat de website zoveel mogelijk aan de webrichtlijnen voldoet, zoals hiervoor beschreven, want als de website goed toegankelijk is voor alle soorten mensen, machines en webbrowsers, is ie ook zo goed mogelijk toegankelijk voor de robots van de zoekmachines, die het web afspeuren naar nieuwe websites en wijzigingen in bestaande websites.
- De titel van de pagina moet de lading dekken, en ook de kopjes zijn belangrijk (H1 en H2): die worden door de zoekmachines gezien als de belangrijkste indicatie van de inhoud.
- Zorg dat je 'keywords' ook goed de lading dekken. Je doet dat door deze code in de head op te nemen:
<meta name="Keywords" content="en hier plaats je dus je (door komma's gescheiden) keywords">
De keywords zijn de woorden die zoekmachines gebruiken om jouw site in de zoekresultaten te zetten als iemand op zo'n woord zoekt. Dus als je 'webrichtlijnen' in je keywords zet, en iemand zoekt in Google op 'webrichtlijnen', dan komt jouw site in de lijst met zoekresultaten. Overigens werd hier veel misbruik van gemaakt door webmasters, en daarom letten zoekmachines hoe langer hoe minder op de keywords. - Hoe meer verschillende andere sites naar jouw site linken, hoe hoger jouw site in de lijst met zoekresultaten komt. Vraag dus aan bevriende mensen/bedrijven met een site of ze een link naar jouw site willen plaatsen.
- Je kunt je site bij verschillende zoekmachines aanmelden. (Bij elke zoekmachine staat wel ergens een link 'about', 'webmasters', 'aanmelden' of 'add your site' met daar extra informatie over hoe je je site kunt aanmelden.) Maar het duurt altijd wel even voor de aanmelding verwerkt is; een paar weken kan het altijd wel duren.
- Gebruik liever geen speciaal programma om je site bij 'alle' zoekmachines tegelijk aan te melden. Vaak zijn deze programma's spyware of virussen, werkt het aanmelden niet, of alleen bij heel onbelangrijke zoekmachines. Veel zoekmachines hebben ook een hekel aan dergelijke programma's, en zetten je site juist lager in de zoekresultaten als hij op deze manier wordt aangemeld!
- Google maakt graag gebruik van een sitemap. XML-sitemaps kan je helpen bij het maken van een sitemap.
Nog meer tips over zoekmachines:
Overige links
Veel tips en forums om vragen te stellen en informatie/ervaringen uit te wisselen:
- hcc.nl (met forum)
- gathering.tweakers.net (heel goed forum)
- naarvoren.nl
- htmlhelp.com
- htmlgoodies.com
- sbrady.com/hotsource
- drunkmenworkhere.org/memetree.php is een pagina waar een boom groeit van alle webpagina's die naar elkaar linken. Als je op je eigen site een link maakt naar deze pagina, dan krijg je je eigen tak aan de boom.
