In het kader van het voldoen aan de webrichtlijnen van overheidssites houd ik me bezig met het omzetten van bestaande web content, css en javascript zodat deze blijven werken en voldoen aan de XHTML Strict standaard die in de webrichtlijnen voorgeschreven is. De aanpassingen op bestaande sites die nodig zijn om alleen al aan de eis van XHTML Strict te voldoen wordt vaak onderschat. Men denkt dat men er met het veranderen van een paar tags wel is, op deze pagina zal ik tevens een opsomming geven van alle problemen waar ik zelf tegenaan gelopen ben en de mogelijke oplossingen.

Scheiding van structuur van een document en de presentatie.

Toen ik ooit 20 jaar geleden begon met SGML was het uitgangspunt al we alleen de structuur van documenten zouden “taggen” en dat we dit alleen zouden doen op basis van structuur en het kunnen definiëren van een los onderdeel, in plaats van de opmaak van dat onderdeel. In de naamgeving van het onderdeel mocht ook nooit iets van de opmaak terug komen, dus tags zoals vettekop of cursiefonderschrift waren uit den boze. De bedoeling was om het uniform gecodeerde document van zeer verschillende opmaakt te kunnen voorzien voor de verschillende uitgaven en verschillende media.

Toen HTML ontstond (als vereenvoudigde DTD binnen de SGML standaard) was die scheiding tussen opmaak en structuur als iets aan het vervagen aangezien er speciale tags en attributen kwamen die duidelijk voor opmaak bedoeld waren zoals de tags B,I,U, FONT maar ook attributen als COLOR en BGCOLOR. In de daarop volgende HTML standaarden werd dit alleen maar erger omdat steeds meer websites mooie en bijzondere vormgeving wilden waarvoor soms erg lelijke en ingewikkelde HTML code gebruikt werd. De meest misbruikte tag is in dit opzicht wel de table tag. Veel ontwerpers probeerden met veel elkaar omsluitende tabellen de vormgeving te forceren, waardoor de HTML code één grote niet te onderhouden spaghetti code werd. Het W3C zag dat dit een weg zonder einde zou zijn en greep terug op de oorspronkelijke concepten van scheiding tussen structuur en opmaak.

XHTML (en in het bijzonder XHTML Strict) is deze stap. Bij XHTML zijn (bijna) alle tags en attributen die met opmaak te maken hadden verdwenen en is het de bedoeling om door middel van XHTML de structuur van de onderdelen op de internet pagina te definiëren en via CSS (Cascading Stylesheets) de opmaak hier aan toe te voegen. Een goed voorbeeld uit HTML zijn de H1 t/m H5 tags waarmee headings (kopregels) aangegeven kunnen worden. Maar binnen XHTML zijn de div en de span tag de belangrijkst tags geworden, waarbij de class of de id aangeeft welk onderdeel deze div of span omvat. Via CSS kan dan aan deze div of span opmaak en zelfs positionering binnen het document gedefinieerd worden. De div en span zijn in basis gelijk, maar de div is standaard een zogenaamd “block” element en de span is standaard een “inline” element. Voor een onderdeel in de lopende tekst gebruikt u dus een span en voor een complete alinea een div.

Wanneer uw website goed opgezet is op deze wijze en u de website een nieuwe stijl en vormgeving wilt geven, hoeft u in de meeste gevallen alleen maar de stylesheet aan te passen. Ik ben zelf een enorme fan van CSS en op de site van http://www.csszengarden.com/tr/dutch/ is te zien wat er allemaal mogelijk is met een goed XHTML ontwerp in combinatie met CSS (Stylesheets).

Doctype XHTML Strict

Wanneer u het Doctype omzet naar XHTML Strict zal er meer gebeuren in uw browser dan u zo op het eerste gezicht denkt. Behalve dat het complete DOM model ineens anders werkt, andere variabelen kent en oude variabelen ineens niet meer kent, zal ook de positionering van elementen veranderen. Ook uw javascript dient ineens “strict” te zijn en alle kleine foutjes in de css die in de Transitional mode nog wel werken, geven ineens een ander resultaat. Ik heb sites en pagina’s compleet zien omvallen door simpelweg het Doctype aan te passen. Een andere uitdaging is om de pagina’s nog steeds browser compatible te houden. In css en DOM model zitten er nog steeds hinderlijke verschillen tussen verschillende browsers.

In XHTML is het verplicht om een Doctype te gebruiken, in HTML was dit nog geen verplichting. De Doctype declaration komt altijd op de eerste regel te staan, dus voor de tag. De Doctype wordt door browsers en validators (programma's die de code van een pagina controleren op fouten) gebruikt om na te gaan welke syntax voor het XHTML document gebruikt moet worden. Voor de XHTML Strict variant moeten we de volgende Doctype gebruiken:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Verschillen tussen HTML en XHTML Strict

De volgende elementen mogen helemaal niet meer voorkomen:

applet, basefont, center, dir, font, iframe, isindex, menu, noframes, s, strike, u.

De volgende Attributen van tags mogen niet meer gebruikt worden:

Attribuut alink is niet meer toegestaan binnen body. Attribuut background is niet meer toegestaan binnen body. Attribuut bgcolor is niet meer toegestaan binnen body, table, td, th, tr. Attribuut border is niet meer toegestaan binnen img, object, maar mag nog wel bij table. Attribuut clear is niet meer toegestaan binnen br. Attribuut language is niet meer toegestaan binnen script. Attribuut link is niet meer toegestaan binnen body. Attribuut name is niet meer toegestaan binnen form, img, maar mag nog wel bij a, button, input, map, meta, object, param, select, textarea. Attribuut noshade is niet meer toegestaan binnen hr. Attribuut nowrap is niet meer toegestaan binnen td, th. Attribuut start is niet meer toegestaan binnen ol. Attribuut target is niet meer toegestaan binnen a, area, base, form, link. Attribuut text is niet meer toegestaan binnen body. Attribuut type is niet meer toegestaan binnen li, ol, ul, maar mag nog wel bij a, button, input, link, object, param, script, style. Attribuut value is niet meer toegestaan binnen li, maar mag nog wel bij button, input, option, param. Attribuut vlink is niet meer toegestaan binnen body.

De volgende elementen mogen niet meer voorkomen binnen een bepaalde context:

#PCDATA is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element a is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element abbr is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element acronym is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element b is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element bdo is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element big is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element br is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element button is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element cite is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element code is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element dfn is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element em is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element i is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element img is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element input is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element kbd is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element label is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element map is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element object is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element q is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element samp is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element select is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element small is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element span is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element strong is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element sub is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element sup is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element textarea is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element tt is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript. Element var is niet meer als losse tag toegestaan binnen blockquote, body, form, noscript.

De eerste stappen voor het omzetten van HTML naar XHTML

Een van de eerste dingen die u moet controleren en aanpassen is of uw bestaande HTML code well-formed is, dit houdt in dat:

• Alle elementen moeten gesloten worden
  • Incorrect: <p>Dit is een paragraaf.<p>Dit is nog een paragraaf.
  • Correct: <p>Dit is een paragraaf.</p><p>Dit is nog een paragraaf.</p>
• Ook lege elementen moeten gesloten worden
  • Incorrect: <br>
  • Correct: <br />
• Elementen moeten correct genest worden
  • Incorrect: <em><strong>Dit is tekst met nadruk.</em></strong>
  • Correct: <em><strong>Dit is tekst met nadruk.</strong></em>
• Attribuutwaarden moeten tussen aanhalingstekens
  • Incorrect: <td rowspan=3>
  • Correct: <td rowspan="3">
• Alle elementen en attributen moeten met kleine letters geschreven worden
  • Incorrect: <BODY><P ID="iets">Wikipedia</P></BODY>
  • Correct: <body><p id="iets">Wikipedia</p></body>
• Attributen mogen niet geminimaliseerd worden
  • Incorrect: <textarea readonly>READ-ONLY</textarea>
  • Correct: <textarea readonly="readonly">READ-ONLY</textarea>
• style- en script-elementen zijn #PCDATA en zullen dus geparsed worden. Speciale karakters, zoals <, moeten gecodeerd worden als entiteit of binnen een CDATA blok geplaatst worden
  • Incorrect: <script type="application/x-javascript">if (i < j) document.write("kleiner");</script>
  • Correct: <script type="application/x-javascript"><![CDATA[if (i < j) document.write("kleiner");]]></script>

Mogelijke problemen en de oplossingen.

Javascript DOM variable document.body.scrollTop geeft altijd de waarde nul (0) terug in strict mode en dient nu vervangen te worden door document.documentElement.scrollTop. Om alles ook browser compatible te houden kunt u beter de volgende code gebruiken:

var topper;

  if (!document.body.scrollTop) {
    topper = document.documentElement.scrollTop + 5;
  }
  else {
    topper = document.body.scrollTop + 5;
  }

Het rechtstreeks toekennen van een waarde aan een DOM element ( FloatDiv.style.top = '33px' ) werkt ook niet meer, dit dient u de vervangen door:

document.getElementById("FloatDiv").style.top = (topper + 10) + 'px';

Het border attribuut bij een IMG tag is niet meer toegestaan, op de meeste sites staat deze er wel om een ongewenste rand rond het plaatje te voorkomen. Het meest eenvoudige is het om alle border="0" attributen bij de IMG tag te verwijderen en in de css de volgende algemene regel op te nemen. Meestal zal ik NOOIT css opmaak op hoofd elementen toepassen, in dit geval is het wel handig, bij specifieke tags waar de border wel nodig is kan deze geplaatst worden en met !important over de algemene standaard heen gaan:

img { border: none; }

Aangezien de center tag niet meer is toegestaan en voor het omzetten vaak toch een snelle oplossing nodig is kan er een center div gemaakt worden, waarbij in de bestaande code de center tags omgezet kunnen worden naar center div. Strict genomen is dit niet correct omdat we toch een opmaak style in plaats van een structuur tag gebruiken maar voor conversie van oude code is dit een goede oplossing.

oud:
<center>Dit is gecentreerd <img src="test.gif" alt="test gifje"/></center>

nieuw:
<div class="center">Dit is gecentreerd <img src="test.gif" alt="test gifje"/></div>

css:
div.center { text-align: center; }

Dit is een demonstatie hoe u met behulp van eenvoudige divs en css een alternatief heeft voor een tabel met tekst in twee kolommen:

<html>
<head>
<title>Kolommen zonder tabel</title>
</head>
<body>

<style type="text/css">

div.outercontainer_001 { 
  width: 100%;
  border: 1px dotted blue;
  display: block;
} 

div.innercontainer_001 {
  width: 49%;
  float: left;
  margin: 4px;
  padding: 2px;
  border: 1px solid gray;  
}

div.innercontainer_002 {
  width: 49%;
  float: right;
  margin: 4px;	
  padding: 2px;	
  border: 1px solid gray; 	
}

</style>

<p>Dit is een demonstatie hoe u met behulp van eenvoudige divs en css een alternatief heeft 
voor een tabel met tekst in twee kolommen.</p>

<div class="outercontainer_001">
<div class="innercontainer_001">
Dit is de eerste kolom met wat tekst er in zodat we een beethe 
wrap krijgen en het ook nog wat lijkt. Deze kolom heeft als css attribuur float: left;
</div>
<div class="innercontainer_002">
Dit is de tweede kolom met wat tekst er in zodat we een beethe 
wrap krijgen en het ook nog wat lijkt. Deze kolom heeft als css attribuur float: right;
</div>
</div>

</body>
</html>

Basiscursus XHTML, CSS en Javascript
Peter Kassenaar & Peter Doolaard

In 'Basiscursus XHTML, CSS en Javascript' wordt de beginnende webpagina-ontwerper de basisvaardigheden bijgebracht. Elk deel is eerder apart verschenen*, maar nu samengevoegd tot een compleet handboek. XHTML is de taal die voornamelijk de structuur van een webdocument beschrijft. Hiermee kun je tekst als bijvoorbeeld een koptekst of hyperlink definieren. Met deze basiscursus kunnen beginners grip krijgen op het ontwerp en de werking van je webpagina. Cascading Style Sheets is een programmeertaal om webpagina's vorm te geven. Na uitleg over hoe CSS werkt, wordt o.a. ingegaan op selectors, opmaken met CSS en het schrijven van stijlbladen. Een vrij complete handleiding voor 'programmeurs' met HTML-ervaring met handvatten voor verdieping (o.a. links naar websites). Javascript wordt gebruikt als uitbreiding en aanvulling op HTML. Javascript maakt het mogelijk om webpagina's te verlevendigen. De lesstof is duidelijk omschreven en bevat veel opmerkingen en tips voor de programmeur. Door de samenvattingen na elk hoofdstuk is het boek ook geschikt als naslag voor de wat meer gevorderde lezer. Bij elk deel zijn oefeningen opgenomen en elk hoofdstuk wordt afgesloten met een korte samenvatting. Alle delen zijn geillustreerd met veel schermafdrukken in zwart-wit.

HTML XHTML en CSS het complete handboek
-

Of ze nu handmatig zijn gecodeerd of gegenereerd met een editor, of ze statisch zijn of dynamisch, de meeste webpagina's hebben als basis HTML. Hoe meer u weet van deze taal en zijn afgeleide vormen XHTML en CSS, des te soepeler, creatiever en effectiever zal uw website zijn. Deze nieuwe uitgave behandelt de laatste updates en verbeteringen van alle drie. U leert welke hulpmiddelen tot een speciaal resultraat leiden, hoe CSS consequente opmaak mogelijk maakt, hoe u HTML efficiënt codeert en gebruikt, en nog veel meer.

Het beste van CSS
Ward van der Put

Cascading Style Sheets (CSS) is in stilte uitgegroeid tot dé internetstandaard voor het vormgeven van webpagina's en websites. CSS is zelfs onmisbaar geworden voor het visuele ontwerp van moderne websites. In Het beste van CSS leert u de belangrijkste CSS-technieken die professionele webdesigners bijna dagelijks gebruiken. Dankzij de heldere uitleg en de vele voorbeelden is het boek geschikt voor zowel beginners als gevorderden. Ervaren webdesigners vinden in Het beste van CSS veel actuele ontwikkelingen. Het boek gaat uitgebreid in op innovaties in CSS3. Daarnaast bespreekt het de ondersteuning van CSS in de nieuwste generatie webbrowsers, waaronder Windows Internet Explorer 7 en Mozilla Firefox 2. - Overstappen van HTML op Extensible HTML (XHTML) met CSS - Verschillen en overeenkomsten tussen CSS1, CSS2, CSS 2.1 en CSS3 - Hoogwaardige beeldschermtypografi e toepassen - Technieken van professionals voor kleurenpaletten - Opmaaktabellen en frames vervangen door CSS - Hacks voor maximale snelheid en optimale compatibiliteit - Dynamic HTML (DHTML) gebruiken voor interactieve effecten - Duidelijke CSS-broncode en voorbeelden in kleur Ward van der Put (1969) is zelfstandig consultant in elektronisch uitgeven en website-usability. Hij is auteur en co-auteur van meer dan dertig boeken over onder andere grafi sche vormgeving, webdesign en webdevelopment. In dit boek deelt hij veel van zijn praktijkervaring als adviseur van middelgrote en grote bedrijven en overheidsinstanties.

Webdesign
Hedwyg van Groenendaal

Bij het maken van een website komt niet alleen de techniek kijken, maar is een doordacht ontwerp essentieel voor het succes ervan. Deze cursus webdesign richt zich op het maken van een professionele website met behulp van een zogenaamd Internet Project Plan. Dit plan wordt in de loop van het boek uitgewerkt en omvat analyse en planning, het vaststellen van de doelgroep, organiseren van informatie, functioneel ontwerp, grafisch ontwerp, technisch ontwerp, een onderhoudsplan en promotie van de website. De afsluitende hoofdstukken behandelen juridische aspecten, standaarden in webdesign en specifieke afwegingen voor het opzetten van een interne bedrijfswebsite. De tekst is voorzien van vele schermafbeeldingen in kleur die vormgeving in bestaande websites illustreren en wordt aangevuld door interviews met experts binnen het vakgebied. De schrijfster heeft meer dan twaalf jaar ervaring op dit gebied en is oprichter van een eigen internet-bedrijf en -opleidingscentrum. In dit boek zet ze een degelijk en compleet plan uiteen voor het in teamverband opzetten van een grote (bedrijfs)website.