heeft het Zelfstudiehandboek websites ontwikkelen geschreven. bekijk de inhoudsopgave, de voorbeeldbestanden en de extra tips en noteer vooral de errata :-(

Ontwikkelaars tips

Iedere dag verschijnt hier een nieuwe korte tip bij het Zelfstudiehandboek Websites Ontwikkelen met HTML, CSS en Dreamweaver die ook op Twitter verschijnt.

138. De webdeveloper toolbar in Firefox maakt het eenvoudig om je pagina te onderzoeken en biedt ook diverse validators jt.ws/c2
137. De validator in Dreamweaver (werkbalk Document, Opmaaktags controleren) kan ook een hele site tegelijk checken.
136. In Deamweaver kan je het DocType van een pagina eenvoudig omzetten met menu Bestand, Converteren (File, Convert).
135. Is je DocType XHTML 1.0 Transitional en wil je weten of je HTML klopt met Strict? Ga dan in de validator naar More Options Document Type
134. De meldingen van de validator zijn zeker in het begin erg cryptisch en soms intimiderend. Weet dat 1 fout vaak meerdere meldingen geeft.
133. Het is een goede gewoonte om de grammatica van je HTML te checken met de validator van het W3C jt.ws/c1
132. Dreamweaver biedt uitstekende CSS-layouts aan met een leerzame beschrijving erbij. Je vindt ze in het dialoogvenster voor een nieuwe pagina.
131. Een absoluut element kan eigenlijk op iedere plek in de code staan zolang het maar binnen zijn eigen (relative) containing block blijft.
130. Een AP zal zich positioneren tov zijn containing block. Dat is een parent met position:relative en bij afwezigheid daarvan is dat de body.
129. Een absoluut gepositioneerd element (AP) is in feite een aparte laag die zich niets aantrekt van de onder- (of boven)liggende elementen.
128. Position:absolute plaatst een element waar je maar wilt, ook bovenop een ander element. Met bijv top:4em en left:10em geef je de positie aan
127. Als je een afbeelding wilt laten meeschalen met de lettergrootte plaats je deze in de HTML-code. Geef 'm dan in CSS een afmeting in ems.
126. Als een afbeelding dient als illustratie, dus niet van belang is voor de content van de site, heeft het de voorkeur deze te plaatsen in CSS.
125. Een afbeelding die in HTML-code een width en height heeft, kan daarnaast in CSS ook afmetingen in ems krijgen waardoor deze meeschaalt
124. Gebruik maten in ems om mee te schalen met font-size, px voor vaste maten, % als de maat afhangt van de vensterbreedte. Geef fonts altijd %
123. Je kunt de afstand tussen listitems verhogen met padding, margin, maar ook met line-height. In ems schaalt deze mee met de font-size.
122. Overweeg of het zinvol is om padding en margin in ems in te geven; meeschalen met de lettergrootte van tussenruimtes kost wel schermruimte.
121. De formule om ems op een plek met font-size: 80% te berekenen is ((aantal pixels:16) : 80) x 100. Een getal in decimalen kan ook bv 6.35
120. Handige formule om afmetingen in pixels om te rekenen naar ems: aantal pixels gedeeld door 16. Dit werkt bij een lettergrootte van 100%
119. Als een lezer de lettergrootte in de browser aanpast, zal een layout met afmetingen in ems meeschalen.
118. In een elastic layout staan de afmetingen van elementen in CSS in ems. Een em is zo groot als de letter M die is ingesteld voor dat element.
117. Met overflow:hidden blijven geneste margins en floated blocks binnen een block-level div: ze steken niet meer uit en de div rekt met ze mee.
116. Met overflow:auto krijgt een box een scrollbalk als de inhoud er niet in past. In een klein venster kan dit een dubbele scrollbalk geven.
115. Als een vaste hoogte niet te vermijden is, gebruik dan ems ipv pixels zodat de hoogte van box tenminste met de lettergrootte meeschaalt.
114. Het is een goede gewoonte om een box te laten meerekken met de inhoud. Vermijd dus vaste hoogtes.
113. Een AP (Absolute Positioned element) krijgt van Dreamweaver altijd een z-index. Deze is overbodig als de volgorde in de code voldoet.
112. Gebruik z-index alleen om volgorde van stapeling aan te passen; om lagen te stapelen in volgorde van de code voldoet absoluut positioneren.
111. Wees zuinig met display: none, Google kan je verdenken van spam. Als je inhoud bestemd voor SEO verbergt kan je site uit de index verdwijnen
110. Met visibility kan je een element onzichtbaar maken; de ruimte blijft dan wel open. Met display:none komt ook de ruimte van het element vrij
109. Met display: none geef je aan dat de browser het element niet moet tonen. Let op dat veel screenreaders het dan ook niet zullen voorlezen.
108. Met width: auto maak je een eerdere width ongedaan en zal het element zijn standaardbreedte weer aannemen.
107. In Dreamweaver CS5 ontbreekt de validator, maar met deze extensie jt.ws/cf vind je 'm terug via menu Bestand (File).
106. Wist je dat je in Dw ook code kunt valideren? De meldingen zijn vaak duidelijker dan in de validator van het W3C. Zie de werkbalk Document.
105. Vanaf Dw CS4 kan je in paneel Properties (Eigenschappen) ook CSS ingeven. Id's toekennen aan een element kan nu ook vanuit datzelfde paneel.
104. De code navigator (vanaf Dw CS4) is een aanrader als het gaat om nakijken welke CSS op een bepaalde plek in een pagina van toepassing is.
103. Als je javascript:; gebruikt als tekst in een nowherelink ipv een hekje, voorkom je dat in sommige browsers de pagina naar de top springt.
102. Ook tekst die dient als kop van de site hoeft niet in een eigen div alleen omdat het de kop is: een h1 kan dezelfde CSS krijgen als een div
101. Een afbeelding die dient als kop hoeft niet speciaal in een eigen div te staan zolang hij maar in het containing block van de site staat.
100. Laat je niet verleiden tot overbodige divs: de ul van een menu bijv. is een block-level element en kan dezelfde CSS krijgen als een div.
99. Gebruik voor layouten als eerste de natuurlijke flow van de pagina. Wil je meer, gebruik dan float. Kies pas als laatste voor positioneren.
98. Position: static is de normale positie van een element en geef je in om een overerfde positie te overschrijven.
97. Een element met position: fixed is en blijft gepositioneerd tov het browservenster als er wordt gescrold (werkt niet in IE6 en ouder).
96. Je kunt ook negatieve waardes ingeven voor top, right, bottom en left. Dit werkt ook in IE6 (negatieve marges werken daar namelijk niet in).
95. Een element absoluut gepositioneerd met top, right, bottom en left zal zijn afmeting aanpassen aan het containing block (werkt niet in IE6)
94. Een element met position: relative in combinatie met bijv. een top en een left zal zich positioneren tov zijn eigen oorspronkelijke positie.
93. Geef een element met z-index altijd ook een position absolute, relative of fixed, anders zal het niet werken.
92. Position: relative dient om een element tov zichzelf te positioneren, het te markeren als containing block of om z-index mogelijk te maken.
91. Gebruik position: absolute uitsluitend als je echt absoluut wilt positioneren, dus altijd icm minstens twee coordinaten zoals top en left.
90. Eyeopener: heb je ooit al eens gedacht bij position: relative dat relative hier wel eens familielid zou kunnen betekenen?
89. Een element met position: absolute zal zich ten opzichte van de body plaatsen als er geen parent is met een position: relative.
88. Geef een containing block een position: relative en een ingesloten element met position: absolute zal zich ten opzichte daarvan positioneren
87. Geef een verouderde pagina zonder DocType niet zomaar een DocType want je hebt grote kans dat de weergave dan juist fout gaat.
86. Een pagina zonder DocType wordt door de browser herkend als verouderd en wordt dan op bijpassende wijze (quirk modus) geinterpreteerd.
85. Als een tabel zich ervoor leent (omdat er eigenlijk niet echt zowel kols als rows nodig zijn) is een definitielijst een goede vervanging
84. Minder bekend zijn definitielijsten. Gebruik deze als het een opsomming van termen en hun beschrijving betreft, zoals in een woordenboek.
83. Als de browser de door jou in Dw ingestelde list-style-position niet weergeeft, controleer dan of de eigenschap wel voluit is geschreven.
82. Een achtergrondplaatje als opsommingsteken voorkomt weergaveverschillen in de browsers. Maar deze schaalt niet mee met de lettergrootte.
81. Geef lijsten altijd een margin-left en een padding-left naar eigen inzicht, en voorkom zo weergaveverschillen van lijsten in de browsers.
80. Adresgegevens zijn een opsomming van naam, straat enz. Een menu is een opsomming van links. Plaats beide daarom in een lijst ipv met breaks.
79. Live View is een voorvertoning van de pagina in de browser binnen Dreamweaver. Vergeet niet om Live View na gebruik weer uit te zetten
78. Heb je voor de alinea een lettergrootte ingesteld van bv. 85% en wil je de tekst in de tabel gelijk hebben? Geef de tabel dan diezelfde 85%.
77. Onverklaarbare tussenruimte in een tabel? Laat de sluittag van de cel op de inhoud aansluiten en laat de tr- en td-tags op elkaar aansluiten
76. De inhoud van een cel staat standaard vertikaal gecentreerd. Geef om verassingen te voorkomen, standaard vertical-align: top in voor een td.
75. Een cel rekt mee met de inhoud ook al heeft deze een vaste breedte of hoogte. Let dus goed op de afmetingen van de inhoud van een cel.
74. Om te voorkomen dat 2 woorden na elkaar op verschillende regels komen te staan 'plak' je ze aan elkaar met een non-breaking space.
73. Met samengestelde kiezers heb je minder classes en id's nodig. De code wordt daarmee schoner en leesbaarder.
72. Geef de tabel een class en je kunt de ingesloten cellen vormgeven met een samengestelde kiezer: voorkom dat ze een eigen class nodig hebben.
71. Weerhoud jezelf van schuiven met tabelranden in het documentvenster van Dreamweaver, je maakt hiermee ongewenste attributen aan in de code.
70. Een uitgebreide tabel is voor de browser eenvoudiger om op te bouwen dan een tabel die bestaat uit meerdere ingesloten tabellen.
69. Let op dat je in Dw bij het maken van een tabel geen breedtes, randen, padding en spacing ingeeft: allemaal vormgeving die thuishoort in CSS
68. Gebruik tabellen alleen voor tabulaire data: inhoud die rijen en kolommen nodig heeft met koppen in zowel horizontale als vertikale richting
67. Springen de cellen van een tabel-in-de-maak alle kanten op in Dreamweaver? Maak eerst de tabel helemaal af, dan valt vaak alles op z'n plek.
66. Gebruik een universele kiezer (sterretje) alleen als dat echt nodig is omdat echt alle elementen hiermee door de browser worden afgewerkt.
65. Als je een sterretje gebruikt als kiezer, geef je aan dat de CSS-regel geldt voor alle elementen in de site (universele kiezer).
64. Gebruik !important bij uitzondering omdat het speciale eigenschappen van gebruikerstylesheets zoals dat in Firefox mogelijk is, blokkeert.
63. !important na de waarde van een CSS-regel geeft aan dat deze voorrang heeft en niet overschreven kan worden: p { color: 000 !important; }
62. Test je werk online in de verschillende versies van IE met IETester jt.ws/c0 of op bit.ly/pRHT
61. Een rootrelative link begint met een / en beschrijft het pad vanuit de root ipv vanuit de pagina
60. Dreamweaver werkt de link in een conditional comment niet automatisch bij als je de pagina verplaatst. Gebruik daarom een rootrelatieve link
59. Plaats een conditional comment na de links van de andere stylesheets. Zo overrulet de CSS die alleen gelezen wordt door IE de andere CSS.
58. Met conditional comments kan je extra stylesheets toevoegen met uitsluitend die CSS die de afwijkingen in IE (vaak vooral IE 6 en 7) aanpakt
57. Check je site eerst steeds in Firefox. Dit komt, zolang je geen gekke dingen doet, meestal overeen met de andere bekende browsers.
56. Stel browsers waarin je wilt testen in de voorkeuren van Dw in. Gebruik daarna de wereldbol in de werkbalk Document voor de voorvertoning.
55. Onder menu Bewerken, Sneltoetsen (Edit, Keyboard Shortcuts) maak je in Dreamweaver je eigen sneltoetsen aan (Mac: onder menu Dreamweaver).
54. Goed uitgangspunt voor je ontwerp in Photoshop is een hoogte boven de vouw van je website van ca. 550-600 pixels.
53. Pleidooi voor een nieuwe max-breedte van 930px voor een webpagina! Want op een 24' beeldscherm passen 2 vensters naast elkaar van 960px.
52. Je kunt een element meerdere klassen geven. Plaats dan de namen van de kiezers achter elkaar, bijv..
51. Gebruik uitsluitend class voor een stijl die op meerdere plaatsen in een pagina gebruikt gaat worden. Gebruik in alle andere gevallen id.
50. Voorzie je stylesheet van commentaar om dingen toe te lichten. Alles wat tussen /* en */ staat, wordt door de browsers genegeerd.
49. Een block element centreer je horizontaal met margin:auto. Met text-align:center centreer je de inhoud van een element (en deze overerft!).
48. Bij voorkeur blijft bij een rij floated blocks er altijd één zonder float en width. Deze past zich aan de beschikbare ruimte aan.
47. Een block-level-parent rekt standaard niet mee met zijn ingesloten floated block. Een parent met float of overflow:hidden rekt wel mee.
46. Tekst staat altijd om een floated block heen. Tekst is inline en alleen blocklevel elementen zoals bijv. div, h1, p, negeren floated blocks.
45. Floated blocks staan niet meer in de flow van de pagina, ze zweven erboven. De block-level elementen in de pagina negeren de floated blocks
44. Een floated block is een zwevend inline-block element: uiterst links of rechts op de regel (of aansluitend bij al aanwezige floated blocks).
43. Terminologie uit mijn boek: containing block is de (grand)parent ten opzichte waarvan een element absoluut gepositioneerd staat.
42. Terminologie uit mijn boek: een floated block is 'n block-level element met een float (deze is vervolgens niet meer helemaal block-level).
41. Meer weten over inline en block elementen? jt.ws/cn
40. Problemen bij layouten zijn vaak op te lossen door te kijken welke elementen inline of block-level zijn. Dit kan ongewenst gedrag verklaren.
39. Een inline element kan slechts inline elementen insluiten. Inline heet ook wel text-level. Tekst is ook inline: alle letters naast elkaar.
38. Een block-level element kan block en inline elementen insluiten. Uitgezonderd h1, h2 enz en p die slechts inline elementen kunnen bevatten.
37. In CSS kan je met de eigenschap display een block-level element veranderen in inline of inline-block en andersom.
36. Bij inline-block elementen werken width en een height wel (block) maar ze staan toch naast elkaar (inline). Bijv. img en floated blocks.
35. Inline elementen zijn zo breed als hun inhoud en staan naast elkaar. Width of height geven heeft geen zin. Bijv a, br, em, strong, span.
34. Blocklevel elementen gebruiken de volledig beschikbare breedte en krijgen pas een width als nodig. Bv h[..], p, ul, li, div, form, fieldset
33. Je kunt elementen verdelen in 2 groepen: inline en block. Inline elementen staan naast elkaar, block elementen beginnen op een nieuwe regel.
32. Let op dat je een border altijd een style (bijv. solid) geeft; met alleen een width en/of een color wordt de border niet weergegeven.
31. Beter om een element met een width geen padding en borders te geven maar aan de inhoud ervan. Let er dan wel op dat deze geen width krijgt.
30. Het boxmodel telt padding en borders bij de width van een element op, de box wordt dus breder (overigens niet in IE 5.5 en ouder).
29. Top en bottom marges van aangrenzende blocks overlappen elkaar, je ziet dus geen verschil als je een van beide marges op 0 zet.
28. Als je afmetingen in ems ipv in pixels instelt, is de maat afhankelijk van de lettergrootte die de lezer heeft ingesteld.
27. Gebruik altijd procenten voor de lettergrootte zodat ook lezers met oudere browsers een grotere letter kunnen instellen.
26. Br-tags zijn bestemd voor regeleindes. Goed gebruik is bij een gedicht: plaats een break na iedere versregel. Groepeer de versregels in p's.
25. Structureer je tekst met alinea's. Browsers geven deze standaard witruimte met margin-top en -bottom.
24. Het is slecht gebruik om br-tags te gebruiken om witruimte in tekst te maken: witruimte is wat je ziet op het beeldscherm dus maak je in CSS
23. Het element em benadrukt tekst en is dus betekenisvol voor Google en screenreaders. Deze zien het element i als vormgeving en betekenisloos.
22. Met het element b maak je tekst alleen maar vet, strong benadrukt tekst. Dit geeft betekenis en de browsers maken de tekst toch ook vet.
21. Het gekozen font en color van de body gelden in beginsel voor de hele inhoud. Geef dit daarom pas in voor andere elementen als het afwijkt.
20. Als je voor de body de marges op 0 zet dan overschrijf je de marges voor left, right en top die de browsers zelf standaard geven.
19. Kies in de voorkeuren van Dreamweaver om CSS te schrijven in steno. Bijv. margin: 0 10px 0 20px ipv voor iedere kant een aparte declaratie.
18. IE 6 en 7 kennen geen min-height en min-width maar als je speciaal voor deze browsers een height en een width ingeeft werkt dat hetzelfde.
17. Geef een webpagina bij voorkeur geen vaste hoogte maar laat de inhoud de hoogte bepalen. Een min-height kan wel.
16. Zorg dat links in een tekst onderstreept zijn of op een andere manier herkenbaar zijn voor kleurenblinde bezoekers.
15. Als je geen tooltip wilt zien in IE, plaats dan een leeg attribuut title. Dat ziet er zo uit: title="".
14. Gebruik het attribuut title voor tooltips: de tekst komt in beeld als de muis boven bijv. een afbeelding, link, formulieritem blijft hangen.
13. Voorkom onnodige informatie die de screenreader moet voorlezen: laat het attribuut alt liever leeg als de afbeelding slechts illustratief is
12. Het attribuut alt is een verplicht alternatief voor een afbeelding die niet gezien kan worden, het attribuut title is een aanvulling.
11. De lettergrootte van de lezer bepaalt hoeveel letters er op een regel passen. Een regeleinde (break) kan daardoor net verkeerd uitkomen.
10. Een bestandsnaam zoals deze-naam.html wordt door de zoekmachines gelezen als 2 woorden en deze_naam.html als 1 woord.
9. Spaties in bestandsnamen maken lelijke URL's: de meeste browsers geven bijv. naam pagina.html weer als naam%20pagina.html.
8. Gebruik geen hoofdletters in bestandsnamen. Omdat links hoofdlettergevoelig zijn is het een goede gewoonte om kleine letters te gebruiken.
7. De keuze van een h1 of een h2 staat los van de lettergrootte. Kies geen h2 omdat de h1 te groot is: pas dan in CSS de grootte van de h1 aan.
6. Zorg dat alle inhoud tussen HTML-tags staat, hiermee geef je betekenis aan die inhoud en kan je tekst benadrukken (semantiek).
5. Met HTML-elementen geef je de structuur van de HTML-pagina aan (html, head, body) en van de inhoud (h1, h2, h3, h4, p enz).
4. Hou inhoud en vormgeving gescheiden: de HTML-pagina is bestemd voor de inhoud van de pagina, plaats de vormgeving met CSS in de stylesheet.
3. Geef je webpagina een DocType zodat de browser, je HTML-editor en de validator weten hoe je code te interpreteren, schrijven en controleren.
2. Voeg aan iedere kiezer met a:hover ook a:focus toe zodat ook lezers die geen muis gebruiken maar het toetsenbord, zien welke link ze kiezen.
1. De carousel is aan het eind gekomen en daarmee ook weer aan het begin. De bestaande tweets zullen worden uitgebreid met nieuwe.

Handige tips? Geef hier je mening!

• Tips voor HTML, CSS en Dreamweaver en interessante links
• Meer weten? Verdiep uw kennis met de links uit het boek en meer.
• • Iedere dag een tip
  • Interessante links
  • Meer over RSS