Pagina met links

background-image

CSS → CSS-background-image

netters.nl/de-patrijspoort-theorie
Uitstekend Nederlandstalig artikel over background-images

Browser support

CSS → Browser support

caniuse.com/
Handige tabel met wat globaal in welke browser (al) werkt van css 3, svg en html 5.

css3.info.preview
Online testen welke browser wat van css 3 ondersteunt. Laat goed zien waarom in de praktijk helaas voorlopig nog niet alles is te gebruiken...

css3.info/selectors-test/
Online testen welke selectors in welke browsers werken.

dev.l-c-n.com/CSS3-selectors/
Browser support tabel css3-selectors.

developer.apple.com/safari/ (Supported css Properties)
Officiële lijst van door Safari ondersteunde css-eigenschappen.

developer.mozilla.org/en/CSS_Reference (Mozilla Developer Center)
Uitgebreid overzicht van attributen, selectors, enz., in Firefox. Geeft ook aan wat in andere browsers wordt ondersteund.

en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)
Uitgebreide browser support tabel, inclusief css 3.

findmebyip.com/litmus
Uitgebreide tabel met wat werkt van css3.

msdn.microsoft.com/ (Microsoft Developer Network)
Browser support tabel van Microsoft voor Internet Explorer.

opera.com/docs/specs/
Opera's officiële pagina's over wat welke versie van Opera ondersteunt.

quirksmode.org/css/contents
Browser support tabel CSS 2.1 en 3.

reference.sitepoint.com/css (Sitepoint CSS Reference)
Uitgebreide handleiding met welke browser wat ondersteunt.

webdevout.net/browser-support-css
Uitgebreide browser support tabel met css 2.1 en 3. Bovenaan de pagina kun je kiezen welke browsers moeten worden weergegeven.

Bugs en hacks

CSS → Bugs en hacks

CSS-dropshadow

CSS → CSS-dropshadow

webtoolkit.info/css-drop-shadow
CSS-dropshadow (schaduwrandjes).

CSS-imagemap

CSS → CSS-imagemap

Op deze site vind je voorbeelden van css-imagemaps onder Afbeelding → Imagemap

frankmanno.com/ideas/css-imagemap/
CSS-imagemap.

Float

(X)HTML → Float

css-technik.de/css-examples/
Float: Die Theorie. Duitstalig. Uitstekend artikel. Het originele Engels is alleen nog tegen betaling te lezen. Tja.

Fonts

CSS → Fonts

apaddedcell.com/web-fonts
Zeer uitgebreid overzicht van (standaard) op Linux, Mac en Windows geïnstalleerde fonts.

code.google.com/webfonts/
Gratis te gebruiken webfonts van Google.

codestyle.org/servlets/FontStack
Online testen op hoeveel systemen een of meer fonts zijn geïnstalleerd, en hoeveel bezoekers op het generieke font terugvallen.

cufon.shoqolate.com/generate/ (cufón - fonts for the people)
Online fonts uit je eigen computer omzetten naar webfonts. Gebruikt JavaScript.

dustinbrewer.com/
Tabel met standaard op Linux, Mac en Windows geïnstalleerde fonts.

facelift.mawhorter.net (Facelift Image Replacement)
Fonts uit je eigen computer gebruiken, terwijl de site toch goed toegankelijk blijft. Gebruikt JavaScript, PHP en css. Deze techniek staat bekend als FLIR.
Handleiding: divitodesign.com/typography

fontsquirrel.com
Grote hoeveelheid gratis met te gebruiken webfonts. Online eigen fonts omzetten naar webfonts.

html5rocks.com/tutorials/webfonts/quick/
Duidelijke handleiding over de css3-eigenschap @font-face.

kernest.com
Webfonts, waaronder veel gratis. Na registratie kunnen de fonts worden gedownload in de formaten die de verschillende browsers nodig hebben.

mikeindustries.com/blog/sifr/ (Scalable Inman Flash Replacement)
Fonts uit je eigen computer gebruiken, terwijl de site toch goed toegankelijk blijft. Gebruikt Flash en JavaScript. Deze techniek staat bekend als sIFR
Nederlandstalige handleiding: netters.nl/artikelen/
En nog eentje: gigadesign.be
Uitgebreide Engelstalige handleiding: wiki.novemberborn.net/sifr3

openfontlibrary.org/media/
Webfonts die vrij gebruikt kunnen worden.

stevesouders.com/blog/
Uitstekend overzichtsartikel over @font-face met veel links naar andere artikelen.

typekit.com
Fonts gebruiken die elders op een server staan. Niet gratis.

typetester.org/
Online allerlei eigenschappen van een font uitproberen, zoals grootte, leading en tracking.

webfonts.info/wiki/
Overzicht van fonts die gebruikt kunnen worden met @font-face, voorbeelden van code, support in browsers, enz..

Forms, buttons, e.d.

CSS → Forms, buttons, e.d.

456bereastreet.com/archive/
Uitgebreid overzicht van hoe CSS uitpakt op forms, buttons, enz. in diverse browsers.

formassembly.com/theme-editor (The Form Garden)
Voorbeelden van forms.

smashingmagazine.com
Pagina met voorbeelden van formulieren met links naar uitleg e.d.

Lay-outs

CSS → Lay-outs

Op deze site vind je voorbeelden van lay-outs onder Lay-out

blog.html.it/layoutgala/
Grote serie CSS-lay-outs.

css-discuss.incutio.com/wiki/
Lay-outs met drie kolommen.

cssplay.co.uk/layouts/ (Stu Nicholls | CSSplay)
CSS-lay-outs.

dynamicdrive.com/style/layouts/
Aantal CSS-lay-outs.

ex-designz.net/template/
Grote collectie CSS-lay-outs.

free-css-templates
CSS-lay-outs.

freecsstemplates.org
Grote collectie CSS-lay-outs

freelayouts.com/websites/html-templates
CSS-lay-outs, onderverdeeld in allerlei soorten.

freewebtemplates.com/templates/
Grote collectie CSS-lay-outs.

html-site.nl/css_templates
Templates in HTML met CSS. Nederlandstalig.

layouts4free.com/
Grote collectie CSS-lay-outs.

layouts.irommyers.com
Zeer overzichtelijk ingedeelde site met lay-outs.

opendesigns.org/view-designs/
Open Source-lay-outs.

openwebdesign.org/search
Lay-outs zoeken met behulp van allerlei criteria.

oswd.org (Open Source Web Design)
Enorme collectie open source lay-outs

oswt.co.uk/browse_designs (Open Source Web Templates)
Enorme collectie Open Source-CSS-lay-outs.

positioniseverything.net/articles/onetruelayout/
Poging de Enige Echte Perfecte lay-out te maken.

solucija.com/home/templates/free
CSS-lay-outs.

templates/arcsin.se/category/website-templates/
CSS-lay-outs.

thenoodleincident.com/tutorials/box_lesson/boxes
CSS-lay-outs.

web-garden.be/cursushtml/
Twee- en driekoloms CSS-lay-outs. Nederlandstalig.

Menu's, lists

CSS → Menu's, lists

Op deze site vind je voorbeelden van menu's onder Menu

13styles.com/
CSS-menu's.

alvit.de/css-showcase/
Links naar sites met CSS-navigatie-technieken, zoals menu's.

css.maxdesign.com.au/listamatic/
Dezelfde list op heel veel verschillende manieren weergegeven.

css.maxdesign.com.au/listamatic2/
Geneste lists.

cssplay.co.uk/menus/ (Stu Nicholls | CSSplay)
Tientallen menu's, waaronder hele originele.

cssplay.co.uk/menus/menu_builder_flyout (Stu Nicholls | CSSplay)
Online css-uitklapmenu maken.

ex-designz.net/template/
Menu's.

exploding-boy.com/
Verticale menu's.

instantshift.com
Links naar handleidingen over menu's en knoppen.

netters.nl/artikelen/
Nederlandstalige uitleg over Suckerfish dropdown menu.

nontroppo.org/
Menu met tabs.

simplebits.com/bits/minitabs
Menu met tabs.

simplebits.com/bits/minitab_shapes
Menu met tabs.

simplebits.com/bits/tab_rollovers
Menu met tabs.

Online wijzigingen uitproberen

CSS → Online wijzigingen uitproberen

Alle nieuwere browsers hebben inmiddels (meer of minder) mogelijkheden om online op elke site dingen uit te proberen. Die staan bij Gereedschap → Debuggen.

css3generator.com
Online border-radius, box-shadow, text-shadow, rgba, multiple columns, box resize, box sizing, gradient, transform, outline, transitions, selectors en @font-face (en inmiddels mogelijk meer) uitproberen. Dit zijn onderdelen van css3. Deze zijn in sommige browsers (deels) nog experimenteel. De nog experimentele eigenschappen hebben daarom in verschillende browsers verschillende voorvoegsels. De uitprobeersels worden automatisch aangepast voor de verschillende browsers, zelfs voor Internet Explorer. Dit laatste alleen voorzover Internet Explorer 'n eigen manier heeft om iets te doen.

css3please.com
Online border-radius, box-shadow, gradient, rgba, transform, transition, text-shadoe en @font-face (en inmiddels mogelijk meer) uitproberen. Dit zijn onderdelen van css3 en is grotendeels nog experimenteel. Daarom hebben verschillende browsers verschillende voorvoegsels e.d. De uitprobeersels worden automatisch aangepast voor de verschillende browsers en zelfs voor Internet Explorer. Dit laatste alleen voorzover Internet Explorer 'n eigen manier heeft om iets te doen.

htmlplayground.com/
Online css3 uitproberen, waaronder column, border-radius, @font-face, text-overflow, text-stroke, transition, transform, animation, gradient en selectors.

reference.sitepoint.com/css
Uitgebreide handleiding met welke browser wat ondersteunt en mogelijkheid online dingen uit te proberen.

w3schools.com/css/css_examples
CSS online uitproberen.

westciv.com
Online een aantal nieuwe css3-eigenschappen uitproberen:
Lineaire gradients: westciv.com/tools/gradients
Radiale gradients: westciv.com/tools/radialgradients
text-shadow: westciv.com/tools/shadows
box-shadow: westciv.com/tools/boxshadows
text-stroke: westciv.com/tools/textStroke
transform: westciv.com/tools/transforms

Overzicht eigenschappen (properties), cursussen, tips

CSS → Overzicht eigenschappen (properties), cursussen, tips

BELANGRIJK: Het gebruik van frames en tabellen voor opmaak wordt al meer dan tien jaar sterk afgeraden. Een deel van de hieronder staande cursussen gebruikt helaas deze technieken nog. Omdat ze, afgezien daarvan, goed zijn, vermeld ik ze hier toch. De nadelen van frames en tabellen voor opmaak vind je onder de links hier gelijk boven.

Frames zijn in html5, dat momenteel al geleidelijk aan wordt ingevoerd, gewoon helemaal verboden. Als je nu dus nog frames gebruikt, blokkeer je het gebruik van alle leuke nieuwe mogelijkheden uit html5.

Tabellen zijn bedoeld voor overzichten met getallen, kalenders, e.d., niet voor opmaak. Tabellen voor opmaak zijn 'n nachtmerrie om te wijzigen, meestal volstrekt ontoegankelijk voor spraakbrowsers e.d. en meestal ook niet goed voor 'n hoge plaats in de index van zoekmachines.

Het over-, overgrote deel van de cursussen op internet is echt van een bedroevende kwaliteit en/of zwaar verouderd. Aan zo'n cursus heb je helemaal niets, integendeel. Je leert technieken waar je tegenwoordig helemaal niets meer aan hebt, en die je later weer voor het grootste deel af moet leren. De cursussen hieronder zijn kwalitatief goed.

Een aantal van onderstaande cursussen gebruikt helaas een 'transitional' doctype. Dit is bedoeld voor bestaande sites die met al tien jaar verouderde technieken zijn gemaakt. Het maakt het gebruik van al tien jaar afgeraden tags mogelijk. In html5 zijn deze tags helemaal verboden. Als je nu nog deze tags gebruikt, bezorg je jezelf dus echt ongelooflijk veel extra werk als je over wilt schakelen naar html5. Gebruik een 'strict' doctype, dit blokkeert het gebruik van verouderde tags, zodat je probleemloos naar html5 over kunt stappen.

css-discuss-incutio
Inhoudspagina gigantische verzameling links naar alle denkbare onderwerpen.

dev.opera.com/articles/
The Web Standards Curriculum: uitstekende cursus html, css en JavaScript.

developer.mozilla.org/en/CSS_Reference
Mozilla's uitgebreide overzicht van wat Firefox ondersteunt aan attributen, selectors, enz. Heeft ook verwijzingen naar wat andere browsers ondersteunen, en op welke (afwijkende) manier die dat doen.

handleidinghtml.nl/start
Handleiding CSS, inclusief welke browser wat ondersteunt. Nederlandstalig.

home.tiscali.nl/developerscorner/ (Golden Rules of CSS)
Lijstje met uiterst handige tips om problemen en extra werk te voorkomen.

mijnhomepage.nl/csscursus/
Nederlandstalige cursus.

penguin.theopalgroup.com/cgi/bin/css3explainer
Online uitleg over wat 'n bepaalde (ingewikkelde) selector betekent in 'normale' mensentaal.

reference.sitepoint.com/css
Uitgebreide handleiding met welke browser wat ondersteunt en mogelijkheid online dingen uit te proberen.

sceneone.nl/
Nederlandstalige HTML- en CSS-tutorials.

sitemasters.be/tutorials/5/1/CSS
Nederlandstalige CSS-tutorials.

w3.org/Style/CSS/current-work
Stand van zaken met betrekking tot css 3.

w3.org/TR/CSS21/
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. Officiële specificatie CSS 2.1.

w3schools.com/css/
CSS-tutorial (met overzicht van selectors enz.).

web-garden.be/cursus-html/
Nederlandstalige cursus HTML/CSS (beste Nederlandstalige cursus die ik ken).

webontwikkelaar.nl/css/cursus/
Nederlandstalige cursus, ook heel duidelijk.

wpdfd.com/issues/70/css_from_the_ground_up/
Engelstalige cursus.

Printen

CSS → Printen

css-discuss.incutio.com/wiki/Print_Stylesheets
Artikel over de problemen bij het maken van 'n lay-out voor printen.

css-voorbeelden.nl/artikelen/printen/
Nederlandstalig artikel over het gebruik van css bij het printen.

Quirks mode

CSS → Quirks mode

hsivonen.iki.fi/doctype
Welk doctype zorgt voor almost standards, standards en quirks mode?

quirksmode.org/css/quirksmode
Uitleg over quirks mode, strict mode, e.d.

rgba omzetten naar Microsoft-filter-troep

CSS → rgba omzetten naar Microsoft-filter-troep

kimili.com/ (RGBa & HSLa CSS Generator for Internet Explorer)
css3 eigenschappen rgba en hsla automatisch omzetten naar filter-string voor Internet Explorer.

Ronde hoeken

CSS → Ronde hoeken

Op deze site vind je voorbeelden van ronde hoeken onder Kader

green-beast.com/experiments/css_smart_corners
Meegroeiende ronde hoeken met behulp van plaatjes.

home.tiscali.nl/developerscorner/liquidcorners/ (Flexibele ronde hoeken)
Uitgebreide Nederlandstalige tutorial over het maken van ronde hoeken. Met links naar een serie voorbeelden.

html.it/articoli/nifty/index
Ronde hoeken zonder gebruik van plaatjes.

netters.nl/artikelen/
Nederlandstalig artikel over ronde hoeken met slechts één plaatje.

Validators

CSS → Validators

htmlhelp.com/tools/csscheck
WDG CSS-validator. Geeft heel duidelijke meldingen, maar is zo uitgebreid dat je er wat moedeloos van wordt... Wel uiterst leerzaam en volledig.

jigsaw.w3.org/css-validator/
W3C CSS-validator. Geeft vaak raadselachtige meldingen, maar is wel redelijk beknopt.

Forums

Flash → Forums

flashfocus.nl/forum/
Forum over het maken van sites met de nadruk op flash. Registratie alleen mogelijk als je zelf flash gebruikt. Nederlandstalig.

vintagesworld.be/forum
Forum over flash. Nederlandstalig.

Scripts

Flash → Scripts

fatscripts.com/Flash/
Scripts.

hotscripts.com/category/flash/fla_archives/
Links naar scripts.

senocular.com/flash/source/
Scripts.

Tutorials, voorbeelden

Flash → Tutorials, voorbeelden

actionscript.org/resources/categories/Tutorials
Tutorials.

flashperfection.com/
Tutorials.

good-tutorials.com/tutorials/flash/
Links naar tutorials.

hotscripts.com/category/flash/tutorials-tips/
Links naar tutorials.

smartwebby.com/Flash/
Tutorials.

tutorial-index.com/
Tutorials.

vintagesworld.be/tutorials/
Flash-tutorials. Nederlandstalig.

w3schools.com/flash/
Korte cursus.

Achtergrond of gradient maken

Gereedschap → Achtergrond of gradient maken

bgpatterns.com
Online achtergrond-afbeeldingen (tiles) maken.

patterncooler.com
Online achtergrond-afbeeldingen (tiles) maken.

stripegenerator.com/
Online achtergrond-afbeeldingen (tiles) maken.

tools.dynamicdrive.com/gradient
Online gradient (in kleur verlopende achtergrond) maken.

Afbeelding bewerken en optimaliseren

Gereedschap → Afbeelding bewerken en optimaliseren

aviary.com/tools/peacock
Online allerlei effecten (op een bestaande) afbeelding) aanbrengen.

aviary.com/tools/phoenix
Online afbeelding maken of bewerken met Gimp-achtige tool.

pixlr.com/editor/
Uitgebreid online afbeelding maken of bewerken.

smushit.com/ysmush.it
Bestand optimaliseren (zo klein mogelijk maken).

sumopaint.com/home/
Online afbeelding maken of bewerken met Gimp-achtige tool.

Animaties maken

Gereedschap → Animaties maken

animationonline.com/
Online bewegende banner, knop, kader, e.d. maken.

gickr.com/
Online animatie van eigen afbeeldingen maken.

picasion.com/
Online animatie van eigen afbeeldingen maken.

Banner maken

Gereedschap → Banner maken

bannersketch.com
Online banner maken.

coder.com/creations/banner/
Online banner maken.

Bewaking site

Gereedschap → Bewaking site

changedetection.com/monitor
Meldt als een pagina op 'n site is veranderd.

dingitsup.com (Ding It's Up)
Per e-mail melding krijgen als site weer online is.

downforeveryoneorjustme.com/
Is 'n site alleen voor mij down of voor iedereen?

webbuddy.nl/
Meldt per mail als site offline is. Nederlandstalig.

Debuggen

Gereedschap → Debuggen

Favicon maken

Gereedschap → Favicon maken

favicon.cc/
Zelf online tekenen of afbeelding uploaden.

tools.dynamicdrive.com/favicon/
Online favicon maken van eigen afbeelding.

websonic.nl/webtools/webtools_favicongenerator
Online favicon maken van eigen afbeelding.

Formulier maken

Gereedschap → Formulier maken

jotform.com
Online formulier maken.

Grafiek maken

Gereedschap → Grafiek maken

g.raphaeljs.com
Diverse soorten grafieken maken (en makkelijk bijwerken) met behulp van JavaScript.

nces.ed.gov/nceskids/createagraph/
Online grafiek maken en opslaan als afbeelding.

HTTP Request en Response Header bekijken

HTTP Request en Response Header bekijken

web-sniffer.net
Toont inhoud HTTP Request en Response Header. Laat verder code van pagina e.d. zien. Prima manier om te controleren of server juiste foutcodes zoals 'n 404 verzendt.

Imagemap maken

Gereedschap → Imagemap maken

maschek.hu/imgemap/imgmap
Online imagemap maken.

Kleuren

Gereedschap → Kleuren

aviary.com/tools/toucan
Online kleurenpalet maken.

colorschemedesiger.com/
Kleurenschema ontwerpen met behulp van kleurenwiel. Kan ook testen op voldoende contrast voor kleurenblinden.

december.com/html/spec/colorshades
Uitgaande van een basiskleur worden online drie bijbehorende lichtere kleuren getoond.

ficml.org/jemimap/style/color/wheel
Uiterst handig kleurenwiel om makkelijk 'n kleur uit te zoeken.

html-site.nl/colorpicker
Online kleurcombinaties uitproberen. Nederlandstalig.

javascripter.net/faq/hextorgb
Waarde converteren van en naar hexadecimaal, RGB en CMYK.

kimili.com/ (RGBa & HSLa CSS Generator for Internet Explorer)
css3 eigenschappen rgba en hsla automatisch omzetten naar filter-string voor Internet Explorer.

slayeroffice.com/tools/color_palette/
Online kleurenreeks maken van twee keer vijf bij elkaar horende kleuren.

Knoppenmakers

Gereedschap → Knoppenmakers

buttonator.com/
Online knoppenmaker.

lucazappa.com/brilliantMaker/buttonImage
Online knoppenmaker met mogelijkheid voor twee afbeeldingen in één knop.

mycoolbutton.com/
Online knoppenmaker.

web20badges.com/
Online badge maken.

Kolommen maken

Gereedschap → Kolommen maken

developerscorner.nl/ (Online Page Creator for Dummies)
Online twee kolommen en header maken.

neuroticweb.com/recursos-3-columns-layout
Online code voor drie kolommen, header en footer maken.

pagecolumn.com
Online code voor een tot vijf kolommen, header en footer maken.

pagecolumn.com/4_col_generator
Online code voor vier kolommen maken.

Label maken

Gereedschap → Label maken

acme.com/labelmaker/
Online label zoals uit lettertang komt maken.

Links controleren

Gereedschap → Links controleren

2bone.com/links/linkchecker
Online links controleren van één pagina.

htmlhelp.com/tools/valet/ (WDG Web Design Group)
Online links controleren van 'n hele site. Kan 'n tijdje duren, maar 't gebeurt ongelooflijk grondig en uitgebreid. Alleen de url van de site hoeft maar te worden opgegeven, de pagina's worden automatisch gevonden.

validator.w3.org/checklink (W3C)
Online links controleren van 1 tot maximaal 150 pagina's. Geeft heel gedetailleerde info over fouten en suggesties hoe die te herstellen.

Locale server draaien

Gereedschap → Locale server draaien

usbwebserver.net/nl/
Gratis locale server, hoeft niet geïnstallerd te worden. Gebundeld pakket van Apache, PHP, MySQL, MiniRelay en phpMyAdmin. Uiterst handig om PHP en dergelijke uit te proberen.

Logo maken

Gereedschap → Logo maken

cooltext.com/
Online logo maken.

creatr.cc/creatr/
Online logo maken.

simwebsol.com/ImageTool/
Online logo maken.

web2.0stylr.com/stylr
Online logo maken.

Lorem Ipsum (opvultekst) maken

Gereedschap → Lorem Ipsum (opvultekst) maken

blindtextgenerator.com/lorem-ipsum
Online Lorem Ipsum-tekst genereren.

lipsum.com/
Online Lorem Ipsum-tekst genereren.

lorem-ipsum.info/generator3
Online Lorem Ipsum-tekst genereren.

Meerdere versies van Internet Explorer draaien

Gereedschap → Meerdere versies van Internet Explorer draaien

De link die hier stond naar portable versies van Internet Explorer komt niet meer terug. De door mij geteste versies bleken zonder uitzondering bijzonder slecht of niet te werken. Daarnaast kreeg je regelmatig als extra bonus Trojaanse paarden, virussen, wormen en zelfs eenmaal 'n giraf gratis meegeleverd. Kortom: niet doen.

De enige versie van Internet Explorer 8 (toen nog 'n bèta) die goed werkte, staat niet meer online.

expression.mocrosoft.com (Expression Web SuperPreview)
Verschillende versies van Internet Explorer gelijktijdig bekijken.

finalbuilds.edskes.net/iecollection (Final Builds Site)
Pakket met Internet Explorer 1.0 t/m 8.0. Je kunt kiezen welke je wilt installeren.
WAARSCHUWING: er zijn nogal wat verhalen dat het installeren van dit programma je bestaande Internet Explorer-installatie kan beschadigen. Bij mij persoonlijk maakte het Internet Explorer 7 onbruikbaar. Maar er zijn minstens evenveel verhalen dat het prima werkt. Wel iets om even over na te denken voor je dit installeert.

microsoft.com/ (Internet Explorer Application Compatibility VPC Image)
Images van Internet Explorer 6, 7 en 8 om binnen Virtual PC te draaien.

my-debugbar.com/wiki/IETester/HomePage
Programma om site te testen in Internet Explorer 5.5, 6, 7 en 8.

spoon.net/browsers/
Internet Explorer 6, 7 en 8, Safari, Google Chrome, Opera en Firefox naast elkaar draaien, volgens xenocode zonder ze te installeren.
De extensie voor Firefox die dit heel simpel mogelijk zou moeten maken, liet alleen Firefox crashen. Maar dat deed hij dan ook heel consequent...
Er wordt wel degelijk iets geïnstalleerd, 'n sandbox waarbinnen kennelijk de browsers draaien.
Internet Explorer 6, 7 en 8 draaiden goed naast elkaar, maar er waren wel kleine verschillen tussen Internet Explorer 6 en 7 die volledig zelfstandig draaien en deze versies binnen 'n sandbox. Geen grote verschillen, maar ze zijn er dus wel, althans in juli 2009 toen ik dit bekeek.

tredosoft.com/IE7_standalone
Internet Explorer 6 en 7 naast elkaar draaien.

Menu en list maken

Gereedschap → Menu en list maken

accessify.com/tools-and-wizards/ (List-O-Matic)
Online list met uitgebreid menu maken.

cssmenumaker.com
Online allerlei css-menu's maken.

cssplay.co.uk/menus/menu_builder_flyout (Stu Nicholls | CSSplay)
Online css-uitklapmenu maken.

lab.mattvarone.com/navbar/
Online navigatie-balk met afbeelding maken.

purecssmenu.com
Online uitklapmenu met meerdere niveaus maken. Gebruikt alleen css en werkt ook in Internet Explorer 6.

Metatags genereren

Gereedschap → Metatags genereren

mijnhomepage.nl/metatag
Online metatags genereren.

Outliner

Gereedschap → Outliner

gsnedders.html5.org/outliner/
html 5 outliner. Online outline met behulp van de nieuwe html 5 tags zichtbaar maken.

Regular Expression testen

Regular Expression testen

regexpal.com/
Online Regular Expression testen.

Ronde hoeken maken

Gereedschap → Ronde hoeken maken

roundedcornr.com/
Online ronde hoeken genereren.

spiffycorners.com/
Online ronde hoeken genereren.

tools.sitepoint.com/spanky/
Online ronde hoeken genereren.

wigflip.com/cornershop/
Online ronde hoeken genereren.

Snelheid van de site testen

Gereedschap → Snelheid van de site testen

websiteoptimization.com/services/analyze
Online testen hoe snel de verschillende onderdelen van 'n site laden.

zoompf.com/
Online testen hoe snel de site laadt. Met gedetailleerde informatie en links naar artikelen met oplossingen.

Sprite maken

Gereedschap → Sprite maken

spritegen.website-performance.org/
Online sprite maken.

spriteme.org (SpriteMe)
Online sprites maken van bestaande achtergrond-afbeeldingen in een bestaande pagina. Inclusief de benodigde css.

Tabbladen maken

Gereedschap → Tabbladen maken

tabsgenerator.com
Online tabbladen maken.

Tekstbrowser simuleren

Gereedschap → Tekstbrowser simuleren

delorie.com/lynxview
Laat online site zien zoals 'n tekstbrowser (Lynx) hem ziet. Je moet wel 'n bestandje op je site plaatsen als bewijs dat 't echt jouw site is.

w3.org/cgi-bin/html2txt (W3C)
Zet online html om in platte tekst zonder enige opmaak, behalve 'n indeling in alinea's. Prima manier om te zien of de inhoud logisch is opgebouwd.

Thumbnails maken

Gereedschap → Thumbnails maken

thumbalizr.com/
Maakt online afbeelding van een site. Grootte van thumbnail tot schermvullend.

thumber.bigplain.com/
Online afbeelding verkleinen tot zelf gekozen maat.

Tijdelijk online zetten

Gereedschap → Tijdelijk online zetten

webdevout.net/test/
Tijdelijk 'n pagina online zetten, zodat anderen hem kunnen bekijken en bewerken.

Vector editor

Gereedschap → Vector editor

aviary.com/tools/raven (Raven Vector Editor)
Online vector editor.

Voortgangsindicator maken

Gereedschap → Voortgangsindicator maken

ajaxload.info/
Online bewegende voortgangsindicator maken.

loadinfo.net/
Online bewegende voortgangsindicator maken.

webscriptlab.com/
Online bewegende voortgangsindicator maken.

Weergave testen

Gereedschap → Weergave testen

asisness.com/Tools/screensize
Online de pagina bekijken in 'n hele reeks verschillende resoluties.

browsers.evolt.org/
Groot archief van te downloaden oude browsers.

browsershots.org/
Test online je pagina in heel veel verschillende browsers op allerlei besturingssystemen met behulp van 'n screenshot. De screenshot toont alleen wat op het scherm staat.

ipinfo.info/netrenderer (IE NetRenderer)
Laat online zien hoe de pagina er in Internet Explorer 5.5 t/m 8 uitziet, met zelfs de verschillen tussen diverse versies.

wysiwyg-editor

Gereedschap → wysiwyg-editor

Verreweg het beste is om zelf html, css, enz. te leren schrijven.

Drie veel gebruikte programma's van Microsoft zijn in ieder geval zonder meer ongeschikt: FrontPage, Publisher en Word.

Publisher en Word stoppen er code in die alleen voor Internet Explorer werkt. Waarom je Word niet moet gebruiken staat hier duidelijk uitgelegd: MS Word-document opslaan als HTML-pagina? Niet doen!

FrontPage maakt code die vaak alleen goed werkt in Internet Explorer. In alle andere browsers zie je 't vaak helemaal verkeerd of soms zelfs helemaal niets. Ook in Internet Explorer 8 geeft 't vaak problemen. Microsoft zelf raadt al jaren aan het niet meer te gebruiken.

Als je om een of andere reden zelf geen html, css, enz. wilt leren, is Kompozer 'n goede gratis wysisyg-editor. Kompozer is de opvolger van nvu, dat niet meer wordt onderhouden.

kompozer.net/download
Downloadpagina van Kompozer.

handleiding.helpmij.nl
Beknopte Nederlandstalige handleiding.

mozbrowser.nl/forum/
Nederlandstalig forum over Kompozer.

kompozer.nl/
Uitgebreide Nederlandstalige cursus.

en.wikipedia.org/wiki
Vergelijkend overzicht van groot aantal wysiwyg-editors.

DOM

JavaScript, DOM → DOM

quirksmode.org/compatibility
Diverse compatibiliteits-tabellen voor 'n hele rits browsers.

w3schools.com/html5/html5_ref_eventattributes (HTML5 Event Attributes)
Overzicht van HTML5 event-attributen. LET OP: deze werken (nog lang) niet in alle browsers!

w3schools.com/tags/ref_eventattributes
Overzicht van HTML-event-attributen.

Scripts en bibliotheken

JavaScript, DOM → Scripts en bibliotheken

a1javascripts.com/
Allerlei gratis JavaScripts. Van elk script is een werkend voorbeeld aanwezig.

accessibility.nl/amenu/
Toegankelijk uitklapmenu met Nederlandstalige uitleg.

aplus.rs/adxmenu/examples/
Menu's.

developer.yahoo.com/yui/ (Yahoo! User Interface Library)
Bibliotheek met van alles en nog wat.

dojotoolkit.org/
Bibliotheek met allerlei functies.

dynamicdrive.com/
Grote hoeveelheid JavaScripts met werkende voorbeelden.

freescripts.com/Javascript
Grote hoeveelheid links naar JavaScripts op andere sites.

hesido.com/ (fleXcroll)
Scrollbar aanpassen in alle browsers (niet alleen in Internet Explorer). Begint met 'n waarschuwing dat dit meestal 'n slecht idee is, waar ik het helemaal mee eens ben.

hotscripts.com/category/javascript/scripts-programs/
Grote verzameling scripts met uitgebreide beschrijving.

huddletogether.com/projects/ (Lightbox)
Slideshow met effecten.

java-scripts-net
Scripts.

javascript.internet.com
Grote verzameling scripts.

javascriptkit.com/cutpastejava
JavaScripts met werkende voorbeelden.

jquery.com/
Bibliotheek met allerlei functies.

krijnhoetmer.nl/stuff/
Allerlei JavaScripts met werkende voorbeelden.

mastercode.nl/forum/
Scripts met uitgebreide Nederlandstalige uitleg.

mochikit.com/
Bibliotheek met allerlei functies.

moofx.mad4milk.net/
Bibliotheek met allerlei functies voor animaties.

mootools.net/
JavaScript framework.

openjsan (JavaScript Archive Network)
Bibliotheken en software.

prototypejs.org/
JavaScript Framework.

robsdomein.nl/scripts/javascripts
JavaScript met werkende voorbeelden. Nederlandstalig.

script.aculo.us/
Bibliotheek met functies voor animaties.

scriptsearch.com/JavaScript/
Links naar JavaScripts op andere sites.

simplythebest.net/scripts/
JavaScripts met werkende voorbeelden.

sitemasters.be/scripts/2/JS
JavaScripts met vaak uitleg hoe ze werken. Nederlandstalig.

udm4.com/
Toegankelijk dropdownmenu in allerlei uitvoeringen.

users.skynet.be/javascript/
JavaScripts met werkende voorbeelden. Nederlandstalig.

w3schools.com/js/ (JavaScript Examples)
Online wijzigingen in JavaScripts uitproberen.

webtoolsnation.be/javascripts
JavaScripts met werkende voorbeelden. Nederlandstalig.

wmcity.nl/scripts (WebmasterCity)
JavaScripts. Nederlandstalig.

Tutorials, voorbeelden

JavaScript, DOM → Tutorials, voorbeelden

dev.opera.com/articles/
The Web Standards Curriculum: uitstekende cursus html, css en JavaScript.

developer.mozilla.org/en/JavaScript
Links naar allerlei uiterst nuttige onderwerpen, zoals wat nieuw is in welke versie van JavaScript, afwijkingen van Internet Explorer van ECMAScript, enz.

good-tutorials.com/tutorials/javascript
Tutorials.

mijnhomepage.nl/javascript/
Beknopte Nederlandstalige cursus.

reference.sitepoint.com/javascript
Zeer overzichtelijke JavaScript referentie met voorbeelden en compatibiliteit met browsers.

tutorialized.com/tutorials/Javascript/1
Grote hoeveelheid handleidingen over allerlei onderwerpen.

w3schools.com/dhtml/
DHTML Tutorial.

w3schools.com/dhtml/dhtml_examples
DHTML-voorbeelden.

w3schools.com/htmldom/
HTML DOM Tutorial en overzicht.

w3schools.com/js/
JavaScript Tutorial en overzicht.

Validators

JavaScript → Validators

jslint.com
JavaScript-validator.

Emulators

Mobieltjes → Emulators

blackberry.com/developers/downloads
BlackBerry Simulators.

developer.android.com/sdk/
Android SDK, inclusief emulator.

developer.apple.com/iphone
iPhone SDK, waaronder een iPhone simulator. Alleen voor OS X.

iwebkit.net
Framework om sites voor de iPhone, iPad en iPod Touch te maken.

mobiforge.com/testing/ (A Guide to Mobile Emulators)
Uitgebreid overzichtsartikel over emulators.

opera.com/developer/tools/
Opera Mobile emulator.

opera.com/mobile/demo
Opera Mini Simulator.

phonegap.com/
Open source development framework om cross-platform mobiele apps te bouwen in html en JavaScript, met gebruikmaking van de mogelijheden van iPhone/iTouch, iPad, Google Android, Palm, Symbian and Blackberry SDKs.

wiki.mozilla.org/Fennec
Moet uitgroeien tot de mobiele Firefox.

Forum

Mobieltjes → Online bouwen

sitepoint.com/forums/
Forum speciaal voor mobiele apparaten.

Online bouwen

Mobieltjes → Online bouwen

mobisitegalore.com
Online mobiele site maken. Met uitgebreide uitleg.

Theorie

Mobieltjes → Theorie

alistapart.com/articles/ (Return of the Mobile Stylesheet)
Overzichtsartikel over stylesheets en dergelijke.

iphoneweblog.blogspot.com
Bouw je eigen iPhone website.

mobiforge.com
Site met handleidingen, forum, enz.

w3.org/TR/mobile-bp
W3C-specificatie voor mobiele sites.

w3.org/TR/mobileOK-basic10-tests
Beschrijving van de tests die bij bovenstaande specificatie horen.

Validators

Mobieltjes → Validators

ready.mobi/launch/
Test op groot aantal dingen en meldt wat er mis is.

validator.w3.org/mobile/ (W3C mobileOK Checker)
Controleren of site geschikt is voor mobieltjes.

Forums

PHP → Forums

phpfreakz.nl/forum
Forum met de nadruk op PHP. Nederlandstalig.

phphulp.nl/php/forum/
Forum met de nadruk op PHP. Nederlandstalig.

Scripts

PHP → Scripts

developertutorials.com/scripts/
PHP-scripts.

freescripts.com/PHP/
Links naar sites met PHP-scripts.

hotscripts.com/category/php/scripts-programs/
Honderden scripts en links naar sites met PHP-scripts.

php.resourceindex.com/
Links naar sites met scripts.

phpclasses.org/browse/
Gigantische hoeveelheid classes.

phpfreakz.nl/library
Scripts. Nederlandstalig.

phphulp.nl/php/scripts/
Scripts. Nederlandstalig.

px.sklar.com/
PHP-scripts.

robsdomein.nl/scripts/php_scripts
Gratis scripts. Nederlandstalig.

scripts.com/php-scripts/
Enorme lijst met links naar sites met PHP-scripts.

scriptsearch.com/PHP/
Links naar sites met scripts.

simplythebest.net/scripts/
Links naar sites met PHP-scripts.

sitemasters.be/scripts/1/PHP
PHP-scripts. Nederlandstalig.

wmcity.nl/scripts (WebmasterCity)
Diverse PHP-scripts. Nederlandstalig.

zend.com/code/codex
Groot aantal PHP-scripts.

Tutorials, voorbeelden

PHP → Tutorials, voorbeelden

developerscorner.nl/csshunter/phpsite
Zeer duidelijke en uitgebreide Nederlandstalige handleiding over het gebruik van php voor het invoegen van code. Dit voorkomt de nadelen van de zwaar verouderde (en in de toekomst niet meer toegestane) frames. Hier staat het begin van de handleidiing.

good-tutorials.com/tutorials/php
Links naar tutorials.

mastercode.nl/forum/
Nederlandstalige handleidingen. Ook handleidingen over phpBB2 en phpBB3.

php.net
Officiële site van PHP met veel documentatie.

php.resourceindex.com/
Links naar sites met handleidingen en voorbeelden.

phphulp.nl/php/tutorials/
Tutorials. Nederlandstalig.

tutorialized.com/tutorials/PHP/1
PHP-tutorials.

w3schools.com/php/default
PHP-tutorial en overzicht.

Algemene tests

Toegankelijkheid → Algemene tests

accessibility.nl (Web Accessibility Toolbar)
Toolbar voor Internet Explorer 7 en 8 met allerlei functies om te testen op toegankelijkheid.
Nederlandstalige handleiding voor deze toolbar.

contentquality.com (Cynthia Says)
Test online je pagina op problemen met toegankelijkheid. Heel overzichtelijk.

w3.org/WAI/ER/tools/ (Web Accessibility Initiative)
Links naar elke bekende toegankelijkheidstest, met uitgebreide toelichting bij elke link.

w3.org/WAI/UA/TS/html401
Mogelijkheid om online te testen welke browser wat ondersteunt op het gebied van toegankelijkheid.

wave.webaim.org/
Test online je pagina op problemen met toegankelijkheid. Resultaten worden grafisch weergegeven met icoontjes.

wave.webaim.org/icons
Uitleg van de icoontjes van de hierboven staande test-site.

webrichtlijnen.nl/toetsen/
Online testen of 'n pagina aan de webrichtlijnen van de Nederlandse overheid voldoet. Nederlandstalig.

Blinden en slechtzienden

Toegankelijkheid → Blinden en slechtzienden

addons.mozilla.org/nl/ (Fangs Screen Reader Emulator)
Extensie bij Firefox. Simuleert een screenreader.

addons.mozilla.org/nl/ (Yellowpipe Lynx Viewer Tool)
Extensie voor Firefox waarmee je Lynx kunt imiteren. Lynx is een tekstbrowser die de pagina laat zien zoals een spraakbrowser en dergelijke de pagina ook zien.

csant.info/lynx.htm
Installatie-programma voor Lynx op Windows. Lynx is een tekstbrowser die de pagina ongeveer laat zien zoals een spraakbrowser en dergelijke hem zien.

freedomscientific.com/ (JAWS for Windows Screen Reading Software)
Dit is een echte screenreader, met alle toeters en bellen. Je kunt een gratis proefversie downloaden. Deze is veertig minuten te gebruiken, daarna moet je je computer opnieuw opstarten. Als je het een beetje handig aanpakt, is veertig minuten lang zat om een pagina op toegankelijkheid te testen.

juicystudio.com/services/luminositycontrastratio
Controleren of contrast tussen twee kleuren groot genoeg is.

w3.org/WAI/Resources/Tablin
Laat online zien hoe tekstbrowsers, spraakbrowsers, spiders, e.d. 'n tabel lezen en weergeven (en waarom je dus geen tabellen moet gebruiken voor lay-out!).

webbie.org.uk
In Windows kun je het gratis programma WebbIE installeren. WebbIE laat de pagina zien zoals een spraakbrowser en dergelijke hem zien. (Site is Engelstalig, programma heeft een Nederlandstalige versie.)

webformator.com
Gratis uitbreiding bij Internet Explorer, die de pagina laat zien zoals een spraakbrowser en dergelijke hem zien. (Site is Duitstalig, programma heeft een Nederlandstalige versie.)

Forums, richtlijnen, links, artikelen en dergelijke

Toegankelijkheid → Forums, richtlijnen, links, artikelen en dergelijke

accessibility.nl/internet/achtergronden/voordelen
Voordelen van toegankelijk bouwen.

accessibility.nl/internet/uitleg/ijkpunten
Uitleg Webrichtlijnen en Drempelvrij richtlijnen.

forum.accessibility.nl/
Nederlandstalig forum over toegankelijkheid.

forums.htmlhelp.com
Engelstalig forum over het maken van sites met nadruk op toegankelijkheid.

w3.org/WAI/Resources
Links van W3C naar van alles over toegankelijkheid.

webrichtlijnen.nl
Uitmuntende, zeer leesbare Nederlandstalige handleiding over het toegankelijk maken van 'n site. Dit helpt dus ook om hoger te komen in de index van 'n zoekmachine. Dit zijn de officiële richtlijnen van de overheid, waaraan geleidelijk aan overheidssites moeten gaan voldoen. Echt 'n uitstekende handleiding.

Kleurenblindheid

Toegankelijkheid → Kleurenblindheid

colorfilter.wickline.org
Laat online je pagina zien zoals die bij allerlei soorten kleurenblindheid wordt gezien.

coloracle.cartography.ch
Gratis programma om in je eigen computer kleurenblindheid te simuleren. Java, dus geschikt voor Linux, Windows en OS X.

vischeck.com/vischeck/vischedkURL
Laat online je pagina zien zoals die bij allerlei soorten kleurenblindheid wordt gezien.

Browser support

(X)HTML → Browser support

caniuse.com/
Handige tabel met wat globaal in welke browser (al) werkt van css 3, svg en html 5.

developer.apple.com/mac/library/
Apple's officiële pagina's over wat Safari van html ondersteunt.

en.wikipedia.org/wiki/
Tabel welke browser wat ondersteunt van html5.

findmebyip.com/litmus
Uitgebreide tabel wat in welke browser werkt van html 5.

handleidinghtml.nl/start
Handleiding HTML, inclusief welke browser wat ondersteunt. Nederlandstalig.

opera.com/docs/specs/
Opera's officiële pagina's over wat welke versie van Opera ondersteunt.

reference/sitepoint.com/html
Uitgebreide handleiding inclusief welke browser wat ondersteunt.

webdevout.net/browser-support-html
Uitgebreide browser support tabel met html 4.01 en XHTML1.0 en 1.1. Bovenaan de pagina kun je kiezen welke browsers moeten worden weergegeven.

Canvas

(X)HTML → Canvas

developer.mozilla.org/en/Canvas_tutorial
<canvas> (HTML 5) tutorial .

diveintohtml5.org/canvas
Handleiding over het canvas-element (HTML 5).

excanvas.sourceforge.net (ExplorerCanvas)
Maakt het gebruik van <canvas> (HTML 5) in Internet Explorer mogelijk.

Charsets, unicode, entiteiten

(X)HTML → Charsets, unicode, entiteiten

alanwood.net/unicode/ (Alan Wood's Unicode Resources)
Alle tekens uit unicode. Kunnen online bekeken worden. Veel andere info over unicode.

css-voorbeelden.nl/artikelen/html/head/
charset, tekenset, utf-8, entiteiten, accenten, en dergelijke.

css-voorbeelden.nl/artikelen/lijsten/
Lijsten met utf-8-codes en entiteiten.

evolt.org/entities/
Entiteiten ISO 8859-1.

fileformat.info/info/unicode/
Zeer uitgebreide informatie over utf-8 zoals welk font welk teken ondersteunt en zelfs welke fonts in je eigen computer welke tekens ondersteunen.

htmlhelp.com/reference/html40/entities/
Tabellen om te controleren of je browser entiteiten, decimale en hexadecimale codes goed weergeeft.

iana.org/assignments/character-sets
Overzicht en beschrijving van charsets.

ltg.ed.ac.uk/~richard/utf-8
Zoeken op naam en zoeken op en converteren tussen decimale, octale en hexadecimale utf-8 code.

kostis.net/charsets/
Tekensets uit heel veel charsets. Laat online de inhoud van elke charset zien.

unicode.org/charts/ (The Unicode Consortium)
Unicode - Lettertekens. Te downloaden pdf-bestanden.

Doctype (DTD)

(X)HTML → Doctype (DTD)

w3.org/QA/04/valid-dtd-list
Lijst met geldige doctypes (DTD's).

w3schools.com/dtd/
DTD Tutorial en overzicht.

Embed, object, video, audio

(X)HTML → Embed, object, video, audio

camendesign.com/code/video_for_everybody
Zonder gebruik van JavaScript of flash in alle browsers video tonen. Maakt gebruik van het video-element uit HTML 5 en, als dat niet aanwezig is, alternatieve manieren. Het installeren van een plug-in is niet nodig, werkt ook zonder JavaScript.

diveintohtml5/video
Uitgebreide uitleg van het video-element (HTML 5).

html5rocks.com/tutorials/audio/quick
Voorbeeld van het html 5-element <audio>, met fall-back voor browsers die het niet ondersteunen.

html5rocks.com/tutorials/video/basics/
Uitgebreide handleiding voor het html 5-element <video>.

joliclic.free.fr/html/object-tag/en/
Uitgebreide uitleg van object-element in HTML strict. Met testmogelijkheden.

longtailvideo.com/
Flash embedden.

student.oulu.fi/~sairwas/object-test/
Test-site voor het object-element in HTML 4.0.

w3schools.com/media/
Multimedia tutorials en online uitproberen.

Favicon

(X)HTML → Favicon

en.wikipedia.org/wiki/Favicon
Overzichtsartikel met links naar meer artikelen, browser support, enz.

Frames

(X)HTML → Frames

webrichtlijnen.nl/handleiding/
Uitstekend overzicht van de nadelen van frames. Nederlandstalig.

Landcodes

(X)HTML → Landcodes

loc.gov/standards/iso639-2/php/English_list
ISO-landcodes. Officieel is deze lijst verouderd, maar de nieuwe lijst is voor 'n normale geest niet te gebruiken. Zie hieronder voor 'n gereedschap voor de nieuwe lijst.

people.w3.org/rishida/utils/subtags
Online zoekmogelijkheid voor de nieuwe officiële lijst met landcodes. Met behulp hiervan kun je de chaos van de nieuwe lijst te lijf.

Li, ol en ul

(X)HTML → Li, ol en ul

sceneone.nl/tekst/list
Opmaak en positionering van ol, ul en li. Nederlandstalig.

MIME-types

(X)HTML → MIME-types

reference.sitepoint.com/html/mime-types-full
Lijst van mime-types zoals onder andere kan worden gebruikt bij formulieren.

Online wijzigingen uitproberen

(X)HTML → Online wijzigingen uitproberen

Voor Firefox bestaat 'n aantal extensies waarmee je op elke site online dingen kunt uitproberen. Die staan bij Gereedschap → Debuggen → Firefox. Verder heeft inmiddels elke browser mogelijkheden ingebouwd om online dingen uit te kunnen proberen op 'n willekeurige site.

htmlplayground.com/
Online wijzigingen in HTML 5 uitproberen, waaronder <audio>, <video>, <section>, <article>, <header>, <footer>, <nav>, <hgroup> en diverse nieuwe mogelijkheden van <input>.

w3schools.com/html/html_examples
HTML-voorbeelden online uitproberen.

Overzicht elementen, cursussen, tips

(X)HTML → Overzicht elementen, cursussen, tips

BELANGRIJK: Het gebruik van frames en tabellen voor opmaak wordt al meer dan tien jaar sterk afgeraden. Een deel van de hieronder staande cursussen gebruikt helaas deze technieken nog. Omdat ze, afgezien daarvan, goed zijn, vermeld ik ze hier toch. De nadelen van frames en tabellen voor opmaak vind je onder de links hier gelijk boven.

Frames zijn in html5, dat momenteel al geleidelijk aan wordt ingevoerd, gewoon helemaal verboden. Als je nu dus nog frames gebruikt, blokkeer je het gebruik van alle leuke nieuwe mogelijkheden uit html5.

Tabellen zijn bedoeld voor overzichten met getallen, kalenders, e.d., niet voor opmaak. Tabellen voor opmaak zijn 'n nachtmerrie om te wijzigen, meestal volstrekt ontoegankelijk voor spraakbrowsers e.d. en meestal ook niet goed voor 'n hoge plaats in de index van zoekmachines.

Het over-, overgrote deel van de cursussen op internet is echt van een bedroevende kwaliteit en/of zwaar verouderd. Aan zo'n cursus heb je helemaal niets, integendeel. Je leert technieken waar je tegenwoordig helemaal niets meer aan hebt, en die je later weer voor het grootste deel af moet leren. De cursussen hieronder zijn kwalitatief goed.

Een aantal cursussen gebruikt helaas een 'transitional' doctype. Dit is bedoeld voor bestaande sites die met al tien jaar verouderde technieken zijn gemaakt. Het maakt het gebruik van al tien jaar afgeraden tags mogelijk. In html5 zijn deze tags helemaal verboden. Als je nu nog deze tags gebruikt, bezorg je jezelf dus echt ongelooflijk veel extra werk als je over wilt schakelen naar html5. Gebruik een 'strict' doctype, dit blokkeert het gebruik van verouderde tags, zodat je probleemloos naar html5 over kunt stappen.

dev.opera.com/articles/
The Web Standards Curriculum: uitstekende cursus html, css en JavaScript.

dev.w3.org/html5/spec/
Ontwerp-specificatie html 5.

handleidinghtml.nl/start
Overzicht van alle html-elementen. Nederlandstalig.

html-site.nl/html_referentie
Alle elementen van XHTML 1.0 met uitleg. Nederlandstalig.

ivobrugge.be/cursusweb/html4
Nederlandstalige cursus html.

mijnhomepage.nl/xhtml/
Nederlandstalige cursus over verschil tussen xhtml en html.

modernmarkup.nl/html-css/referentie/elementen/
Overzicht van alle elementen met voorbeelden. Nederlandstalig.

sceneone.nl/
HTML- en CSS-tutorials. Nederlandstalig.

w3.org/TR/html401/
Officiële specificatie html 4.01.

w3schools.com/tags/
Overzicht van HTML 4.01 en XHTML 1.0 tags.

w3schools.com/html5/html5_reference
Overzicht van HTML 5, inclusief verschillen met HTML 4.01 en dergelijke.

web-garden.be/cursus-html/
Nederlandstalige cursus HTML/CSS (beste Nederlandstalige cursus die ik ken).

Tabellen

(X)HTML → Tabellen

webrichtlijnen.nl/handleiding/
Overzicht van de voor- en nadelen van het gebruik van tabellen voor opmaak. Nederlandstalig.

URL-encoding

(X)HTML → URL-encoding

w3schools.com/tags/ref_urlencode
URL-encoding Reference (Dat zijn die % in url's).

Validators

(X)HTML → Validators

htmlhelp.com/tools/validator
WDG (X)HTML-validator. Kan online site tot honderd pagina's in één keer doen. Alleen de index hoeft ingevoerd te worden, de andere pagina's vindt 't ding zelf. Is wel ontzettend streng en uitgebreid. Valideert geen html5.

validator.nu
Online bij één pagina tegelijk html5 valideren.

validator.w3.org
W3C-validator voor HTML, (X)HTML, SMIL, MathML, enz. Online één pagina tegelijk testen. Is wat soepeler dan de validator hierboven. W3C is de organisatie die de officiële standaard voor html, css, enz. bij houdt. Kan ook html5 valideren.

Algemene artikelen en forums

Zoekmachines → Algemene artikelen en forums

edwords.nl/kennisbank/handleidingen/
Artikel over zoekmachine-optimalisatie en flash.

seoguru.nl/zoekmachine-handleiding
Handleiding over optimaliseren van 'n site voor zoekmachines. Nederlandstalig.

Bing

Zoekmachines → Bing

Tja, hier stonden links naar Bing Webmaster. Maar Microsoft heeft zijn centrum voor webmasters 'verbeterd' met Silverlight. Hierdoor is het voor veel browsers en systemen onbereikbaar geworden. Op mijn Linux-systeem krijg ik een schitterende lege pagina. En ik ga geen links neerzetten naar pagina's die ik niet kan bekijken. Overigens mis je hier werkelijk helemaal niets aan. Google geeft vele malen meer informatie dan Bing.

Ik controleer deze pagina regelmatig, en als het ooit weer werkt, komen de links weer terug.

Google

Zoekmachines → Google

google.com/support/forum/
Nederlandstalig forum van Google.

google.com/support/webmasters/
Webmasterhulpprogramma's.

google.com/support/webmasters/
Richtlijnen voor webmasters.

google.com/support/webmasters/
Welke meta tags Google gebruikt.

google.nl/webmasters/
Google centrum voor Webmasters. Om site te beheren, met 'n hele reeks hulpmiddelen daarvoor.

google.com/webmasters/docs (Google's Search Engine Optimization Starter Guide)
LET OP: dit is een pdf-bestand dat gelijk begint te downloaden. Handleiding van Google voor een zoekmachine-vriendelijke site.
Nederlandse vertaling. Dit is de officiële vertaling van Google, ook in pdf-formaat.
Een onofficiële Nederlandse vertaling kan online worden gelezen op marketbizz.nl/seo-guide-nl. Aan deze vertaling zijn nog behoorlijk wat nuttige aanvullende tips van 'n ervaren zoekmachine-specialist toegevoegd.

google.com/webmasters/docs/ (Google SEO Report Card)
LET OP: dit is een pdf-bestand dat gelijk begint te downloaden. Checklist die door Google is gebruikt om de sites van Google zelf te optimaliseren voor zoekmachines.

googlewebmastercentral.blogspot
Blog van Google met veel info over wat je wel en niet moet doen.

Hulpmiddelen

Zoekmachines → Hulpmiddelen

backlinkwatch.com
Overzicht van backlinks met wat extra info over de links.

rexswain.com (Rex Swain's HTTP Viewer)
Laat exact zien wat de server naar een gebruiker verstuurt, inclusief álle codes e.d. Je kunt zelf de user agent opgeven, dus dat kan bijvoorbeeld ook googlebot zijn.

seo-browser
Laat online zien hoe 'n spider van 'n zoekmachine de pagina ziet.

robots.txt

Zoekmachines → robots.txt

mcanerin.com/EN/search-engine/robots-txt
robots.txt automatisch aanmaken.

robotstxt.org/robotstxt (The Web Robots Pages)
Site over robots.txt.

seoking.nl/
Uitstekende uitleg over robots.txt. Nederlandstalig.

tool.motoricera.info/robots-checker
Test op fouten en legt (in gewone taal) uit wat er aan opdrachten in staat.

Yahoo!

Zoekmachines → Yahoo!

help.yahoo.com/1/us/yahoo/search/basics/
Yahoo! Search Content Quality Guidelines.

XML-sitemap

Zoekmachines → XML-sitemap

auditmypc.com/xml-sitemap
Online XML-sitemap maken zoals gebruikt door Google, Yahoo! en Microsoft. Werkt prima, maar gebruikt Java, dus het laden kan even duren.

webmasterwebtools.com/sitemap-validation/
Online XML-sitemap valideren.