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

Ontwikkelaars tips

160. Voor #mobileweb heeft het W3C een aparte validator: http://cigo.nl/c8.
159. Device targeting voor stylesheets voor mobieltjes kan ook zonder scripting en vind je op http://cigo.nl/c7
158. Een alternatieve HTML-pagina voor #mobileweb heeft device targeting nodig: http://cigo.nl/c6
157. #mobileweb: voor een goede webpagina op een mobieltje heb je aparte stylesheets nodig en toch bij voorkeur ook een aangepaste inhoud.
156. De browser zorgt ervoor dat op iedere afgedrukte pagina de paginatitel, url en datum komt te staan. Ook dit valt buiten jouw controle.
155. Omdat de printermarges onbekend zijn, weet je ook niet hoeveel inhoud er op een pagina past. Page-breaks met CSS worden hierdoor ongewenst.
154. Over printermarges heb je geen controle, dat regelt de lezer zelf. Als je de body een margin:0 geeft voorkom je wel onnodige extra marges.
153. Elementen naast elkaar zijn vaak een probleem bij printen: dat los je op met float:none en position:static in de stylesheet voor print.
152. In een printversie kan je de navigatie, strepen onder links en (achtergrond)afbeeldingen weglaten. Pixels kan je omzetten naar millimeters.
151. Hoe ziet een print van jouw webpagina eruit? Maak een aparte stylesheet voor print en plaats in de link het media-attribuut met waarde print
150. Plaats, bij vervanging, de nieuwe favicon dubbel: ook onder een andere naam plus een link in de head http://cigo.nl/c5
149. Het voldoet om favicon.ico op het hoogste niveau in de root te plaatsen. In oudere IE-versies moet de lezer de pagina bookmarken.
148. Een favicon zal pas in IE zichtbaar zijn als het een echt ico-formaat is. Google op 'favicon generator online' om een favicon te maken.
147. Procenten en ems kan je ingeven met decimale waardes, gebruik wel een punt ipv een komma. En kleiner dan een pixel zal het nooit worden :-)
146. Pas als tekstvelden en tekstgebieden dezelfde fonts en font-size hebben, ziet een gelijke breedte in ems er in alle browsers ook gelijk uit.
145. Voor een textarea zijn cols en rows verplichte attributen. Desondanks kan je met CSS de breedte en hoogte ingeven voor een tekstgebied.
144. In formulieritems is het name-attribuut een formcontrole naam, daarom kan in dat geval de waarde verschillen van die van een id.
143. Het element label is inline en mag niet los in het element form staan, wel in een fieldset; ook een goede reden om deze vooral te gebruiken
142. Voor een button, bijv. een verzendknop, is het beter om een title-attribuut in de inputtag te plaatsen in plaats van een label te gebruiken.
141. Ipv een for-attribuut kan je ook in het formulieritem zelf een title-attribuut met als waarde de id-naam van het formulieritem plaatsen.
140. Een attribuut 'for' in de labeltag met als waarde de id-naam van het bijbehorende formulieritem, is goed voor de toegankelijkheid.
139. Semantiek: met het element legend geef je de titel aan de fieldset, met het element label koppel je een naam (niet id) aan een formulieritem
138. Het is een goede gewoonte om in een formulier de velden te groeperen met een of meer fieldsets. Zet zonodig met border: 0 de randen uit.
137. Dw geeft het niet als optie maar een invulveld kan background-color: transparent hebben. Je moet het zelf intypen dus let op de spelling.
136. Hou er rekening mee dat een mailadres op een webpagina een goede kans loopt op spam. Oplossingen en meer hierover op http://cigo.nl/c4
135. Een formulier heeft echt geen tabel nodig voor de layout. De formulieritems kan je met CSS precies zo positioneren als jou het beste uitkomt
134. Een hidden field is niet zo verborgen als de naam suggereert. De inhoud ervan wordt niet in de browser getoond maar staat gewoon in de code.
133. Het attribuut name is niet toegestaan in de formtag maar hoort wel in de andere elementen in het formulier te staan voor de verwerking ervan
132. Safari geeft een ontwikkelmenu vergelijkbaar met Firebug via Voorkeuren, Opera via menu Extra en Chrome via menu Weergave
131. Gebruik naast de webdeveloper toolbar ook Firebug om je werk te onderzoeken, de codes te bekijken en fouten op te sporen http://cigo.nl/c3
130. De webdeveloper toolbar in Firefox maakt het eenvoudig om je pagina te onderzoeken en biedt ook diverse validators http://cigo.nl/c2
129. De validator in Dreamweaver (werkbalk Document, Opmaaktags controleren) kan ook een hele site tegelijk checken.
128. In Deamweaver kan je het DocType van een pagina eenvoudig omzetten met menu Bestand, Converteren (File, Convert).
127. 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
126. De meldingen van de validator zijn zeker in het begin erg cryptisch en soms intimiderend. Weet dat 1 fout vaak meerdere meldingen geeft.
125. Het is een goede gewoonte om de grammatica van je HTML te checken met de validator van het W3C http://cigo.nl/c1
124. Dreamweaver biedt uitstekende CSS-layouts aan met een leerzame beschrijving erbij. Je vindt ze in het dialoogvenster voor een nieuwe pagina.
123. Een absoluut element kan eigenlijk op iedere plek in de code staan zolang het maar binnen zijn eigen (relative) containing block blijft.
122. Een AP zal zich positioneren tov zijn containing block. Dat is een parent met position:relative en bij afwezigheid daarvan is dat de body.
121. Een absoluut gepositioneerd element (AP) is in feite een aparte laag die zich niets aantrekt van de onder- (of boven)liggende elementen.
120. 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
119. 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.
118. 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.
117. Als een afbeelding in de HTML-code een width en een height heeft, kan deze desondanks in CSS ook afmetingen in ems krijgen en dus meeschalen
116. 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 %
115. Je kunt de afstand tussen listitems verhogen met padding, margin, maar ook met line-height. In ems schaalt deze mee met de font-size.
114. Overweeg of het zinvol is om padding en margin in ems in te geven; meeschalen met de lettergrootte van tussenruimtes kost wel schermruimte.
113. 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
112. Om afmetingen in pixels om te rekenen naar ems is deze formule handig: aantal pixels x 0,0625. Dit werkt bij een lettergrootte van 100%.
111. Als een lezer de lettergrootte in de browser aanpast, zal een layout met afmetingen in ems meeschalen.
110. 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.
109. 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.
108. 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.
107. Als een vaste hoogte niet te vermijden is, gebruik dan ems ipv pixels zodat de hoogte van box tenminste met de lettergrootte meeschaalt.
106. Het is een goede gewoonte om een box te laten meerekken met de inhoud. Vermijd dus vaste hoogtes.
105. Een AP (Absolute Positioned element) krijgt van Dreamweaver altijd een z-index. Deze is overbodig als de volgorde in de code voldoet.
104. Gebruik z-index alleen om volgorde van stapeling aan te passen; om lagen te stapelen in volgorde van de code voldoet absoluut positioneren.
103. 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
102. 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
101. 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.
100. Met width: auto maak je een eerdere width ongedaan en zal het element zijn standaardbreedte weer aannemen.
99. 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.
98. Vanaf Dw CS4 kan je in paneel Properties (Eigenschappen) ook CSS ingeven. Id's toekennen aan een element kan nu ook vanuit datzelfde paneel.
97. De code navigator in Dw CS4 is een aanrader als het gaat om nakijken welke CSS op een bepaalde plek in een pagina van toepassing is.
96. Als je javascript:; gebruikt als tekst in een nowherelink ipv een hekje, voorkom je dat in sommige browsers de pagina naar de top springt.
95. 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
94. 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.
93. 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.
92. Gebruik voor layouten als eerste de natuurlijke flow van de pagina. Wil je meer, gebruik dan float. Kies pas als laatste voor positioneren.
91. Position: static is de normale positie van een element en geef je in om een overerfde positie te overschrijven.
90. Een element met position: fixed is en blijft gepositioneerd tov het browservenster als er wordt gescrold (werkt niet in IE6 en ouder).
89. Je kunt ook negatieve waardes ingeven voor top, right, bottom en left. Dit werkt ook in IE6 (negatieve marges werken daar namelijk niet in).
88. Een element absoluut gepositioneerd met top, right, bottom en left zal zijn afmeting aanpassen aan het containing block (werkt niet in IE6)
87. Een element met position: relative in combinatie met bijv. een top en een left zal zich positioneren tov zijn eigen oorspronkelijke positie.
86. Geef een element met z-index altijd ook een position absolute, relative of fixed, anders zal het niet werken.
85. Position: relative dient om een element tov zichzelf te positioneren, het te markeren als containing block of om z-index mogelijk te maken.
84. Gebruik position: absolute uitsluitend als je echt absoluut wilt positioneren, dus altijd icm minstens twee coordinaten zoals top en left.
83. Eyeopener: heb je ooit al eens gedacht bij position: relative dat relative hier wel eens familielid zou kunnen betekenen?
82. Een element met position: absolute zal zich ten opzichte van de body plaatsen als er geen parent is met een position: relative.
81. Geef een containing block een position: relative en een ingesloten element met position: absolute zal zich ten opzichte daarvan positioneren
80. Geef een verouderde pagina zonder DocType niet zomaar een DocType want je hebt grote kans dat de weergave dan juist fout gaat.
79. Een pagina zonder DocType wordt door de browser herkend als verouderd en wordt dan op bijpassende wijze (quirk modus) geinterpreteerd.
78. Als een tabel zich ervoor leent (omdat er eigenlijk niet echt zowel kols als rows nodig zijn) is een definitielijst een goede vervanging
77. Minder bekend zijn definitielijsten. Gebruik deze als het een opsomming van termen en hun beschrijving betreft, zoals in een woordenboek.
76. Als de browser de door jou in Dw ingestelde list-style-position niet weergeeft, controleer dan of de eigenschap wel voluit is geschreven.
75. Een achtergrondplaatje als opsommingsteken voorkomt weergaveverschillen in de browsers. Maar deze schaalt niet mee met de lettergrootte.
74. Geef lijsten altijd een margin-left en een padding-left naar eigen inzicht, en voorkom zo weergaveverschillen van lijsten in de browsers.
73. Adresgegevens zijn een opsomming van naam, straat enz. Een menu is een opsomming van links. Plaats ze daarom in een lijst ipv met breaks.
72. Live View is een voorvertoning van de pagina in de browser binnen Dreamweaver. Vergeet niet om Live View na gebruik weer uit te zetten
71. 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%.
70. 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
69. De inhoud van een cel staat standaard vertikaal gecentreerd. Geef om verassingen te voorkomen, standaard vertical-align: top in voor een td.
68. 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.
67. Om te voorkomen dat 2 woorden na elkaar op verschillende regels komen te staan 'plak' je ze aan elkaar met een non-breaking space.
66. Met samengestelde kiezers heb je minder classes en id's nodig. De code wordt daarmee schoner en leesbaarder.
65. Geef de tabel een class en je kunt de ingesloten cellen vormgeven met een samengestelde kiezer: voorkom dat ze een eigen class nodig hebben.
64. Weerhoud jezelf van schuiven met tabelranden in het documentvenster van Dreamweaver, je maakt hiermee ongewenste attributen aan in de code.
63. Een uitgebreide tabel is voor de browser eenvoudiger om op te bouwen dan een tabel die bestaat uit meerdere ingesloten tabellen.
62. 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
61. Gebruik tabellen alleen voor tabulaire data: inhoud die rijen en kolommen nodig heeft met koppen in zowel horizontale als vertikale richting
60. 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.
59. Gebruik een universele kiezer (sterretje) alleen als dat echt nodig is omdat echt alle elementen hiermee door de browser worden afgewerkt.
58. Als je een sterretje gebruikt als kiezer, geef je aan dat de CSS-regel geldt voor alle elementen in de site (universele kiezer).
57. Gebruik !important bij uitzondering omdat het speciale eigenschappen van gebruikerstylesheets zoals dat in Firefox mogelijk is, blokkeert.
56. !important na de waarde van een CSS-regel geeft aan dat deze voorrang heeft en niet overschreven kan worden: p { color: 000 !important; }
55. Test je werk online in de verschillende versies van IE met IETester http://cigo.nl/c0 of op bit.ly/pRHT
54. Dreamweaver werkt de link in een conditional comment niet automatisch bij als je de pagina verplaatst. Gebruik daarom een rootrelatieve link
53. Plaats een conditional comment na de links voor de andere stylesheets. Zo overrulen de IE styles (als IE) de andere styles en niet andersom.
52. Je kunt Internet Explorer een aparte stylesheet geven met afwijkende stijlen. Plaats de link naar die stylesheet in een conditional comment.
51. Check je site eerst vooral in FireFox. Vaak is dit gelijk met andere browsers. Als IE later afwijkt werk je dat bij met conditional comments
50. Stel browsers waarin je wilt testen in de voorkeuren van Dw in. Gebruik daarna de wereldbol in de werkbalk Document voor de voorvertoning.
49. Onder menu Bewerken, Sneltoetsen (Edit, Keyboard Shortcuts) maak je in Dreamweaver je eigen sneltoetsen aan (Mac: onder menu Dreamweaver).
48. Goed uitgangspunt voor je ontwerp in Photoshop is een hoogte boven de vouw van je website van ca. 550-600 pixels.
47. Pleidooi voor een nieuwe max-breedte van 930px voor een webpagina! Want op een 24' beeldscherm passen 2 vensters naast elkaar van 960px.
46. Je kunt een element meerdere klassen geven. Plaats dan de namen van de kiezers achter elkaar, bijv. class="accent extra".
45. Gebruik uitsluitend class voor een stijl die op meerdere plaatsen in een pagina gebruikt gaat worden. Gebruik in alle andere gevallen id.
44. Voorzie je stylesheet van commentaar om dingen toe te lichten. Alles wat tussen /* en */ staat, wordt door de browsers genegeerd.
43. Een block element centreer je horizontaal met margin:auto. Met text-align:center centreer je de inhoud van een element (en deze overerft!).
42. Een containing-block-met-een-float zal altijd meerekken met de afmetingen van een ingesloten-floated-block.
41. Een ingesloten-div-met-een-float zal altijd onder of naast zijn parent-die-kleiner-is uitsteken.
40. Een floated block is 'n block-level element met een float. Containing block: de parent waar een element absoluut gepositioneerd tov staat.
39. Margin-left en -right van naast elkaar liggende floated blocks overlappen elkaar niet.
38. 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
37. Een floated block is een zwevend inline-block element: uiterst links of rechts op de regel (of aansluitend bij al aanwezige floated blocks).
36. Problemen bij layouten zijn vaak op te lossen door te kijken welke elementen inline of block-level zijn. Dit kan ongewenst gedrag verklaren.
35. Een inline element kan slechts inline elementen insluiten. Inline heet ook wel text-level. Tekst is ook inline: alle letters naast elkaar.
34. Een block-level element kan block en inline elementen insluiten. Uitgezonderd h1, h2 enz en p die slechts inline elementen kunnen bevatten.
33. In CSS kan je met de eigenschap display een block-level element veranderen in inline of inline-block en andersom.
32. Bij inline-block elementen werken width en een height wel (block) maar ze staan toch naast elkaar (inline). Bijv. img en floated blocks.
31. 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.
30. Block-level elementen gebruiken de volledige breedte en krijgen pas een width als nodig. Bv h1 (..), p, ul, li, div, form, fieldset
29. Je kunt elementen verdelen in 2 groepen: inline en block. Inline elementen staan naast elkaar, block elementen beginnen op een nieuwe regel.
28. 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.
27. 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.
26. 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).
25. Top en bottom marges van na elkaar volgende blocks overlappen, je ziet dus geen verschil als je een van beide marges op 0 zet.
24. Als afmetingen in ems ipv in pixels instelt, is de maat afhankelijk van de lettergrootte die de lezer heeft ingesteld.
23. Gebruik altijd procenten voor de lettergrootte en regelhoogte zodat ook lezers met oudere browsers een grotere letter kunnen instellen.
22. Br-tags zijn bestemd voor regeleindes. Goed gebruik is bij een gedicht: plaats een break na iedere versregel. Groepeer de versregels in p's.
21. Structureer je tekst met alinea's. Browsers geven deze standaard witruimte met margin-top en -bottom.
20. 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
19. HTML: met b maak je tekst vet, strong benadrukt tekst (die de browser dan vet maakt). Benadrukken is beter want vet maken doe je met CSS.
18. 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.
17. 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.
16. 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.
15. 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.
14. Geef een webpagina bij voorkeur geen vaste hoogte maar laat de inhoud de hoogte bepalen. Dit geeft de minste beperkingen voor de inhoud.
13. Zorg dat links in een tekst onderstreept zijn zodat ze ook herkenbaar zijn voor kleurenblinde bezoekers.
12. Als je geen tooltip wilt, plaats dan een leeg attribuut title. Dat ziet er zo uit: title="".
11. Gebruik het attribuut title voor tooltips: de tekst komt in beeld als de muis boven bijv. een afbeelding, link, formulieritem blijft hangen.
10. Voorkom onnodige informatie die de screenreader moet voorlezen: laat het attribuut alt liever leeg als de afbeelding slechts illustratief is
9. Tekst in het attribuut alt is een alternatief voor een afbeelding die niet gezien kan worden, tekst in het attribuut title is een aanvulling
8. De lettergrootte van de lezer bepaalt hoeveel letters er op een regel passen. Een regeleinde (break) kan daardoor net verkeerd uitkomen.
7. Een bestandsnaam zoals deze-naam.html wordt door de zoekmachines gelezen als 2 woorden en deze_naam.html als 1 woord.
6. Gebruik geen hoofdletters in bestandsnamen. Omdat links hoofdlettergevoelig zijn is het een goede gewoonte om kleine letters te gebruiken.
5. 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.
4. Zorg dat alle inhoud tussen HTML-tags staat, hiermee geef je betekenis aan die inhoud en kan je tekst benadrukken (semantiek).
3. 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).
2. Hou inhoud en vormgeving gescheiden: de HTML-pagina is bestemd voor de inhoud van de pagina, plaats de vormgeving in de stylesheet.
1. Geef je webpagina een DocType zodat de browser, je HTML-editor en de validator weten hoe je code te interpreteren, schrijven en controleren.

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.
• Vragen? Ga dan naar het forum bij het boek.
• • Iedere dag een tip
  • Interessante links
  • Meer over RSS