10. Operare sulla marcatura

Poichè nel nostro layout di partenza i contenuti venivano all'ultimo posto, nel layout che vogliamo ottenere sposteremo i contenuti in avanti. Per fare questo, creeremo un layout a due colonne, inserendo il menu di navigazione ed il motore di ricerca nella colonna laterale, che verrà dopo i contenuti nel sorgente. Alla fine della pagina inseriremo un piè di pagina a chiusura del nostro layout.

Come abbiamo visto nel precedente seminario, per abituarci ad una migliore correttezza formale, useremo la DTD XHTML 1.1 e serviremo il nostro documento come application/xhtml+xml. Parallelamente, osserveremo i nostri progressi in un secondo documento servito come text/html e avente lo stesso DOCTYPE del documento originale di partenza. Si ricorda che per i file statici l'estensione dovrà essere .xht o .xhtml per il primo tipo ed .html (e simili) per il secondo.

Quindi inizieremo il nostro nuovo documento scrivendo:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "
  3. http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
  5. <head>
  6. <title>Layout a due colonne</title>
  7. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  8. ...omissis
  9. </head>

Usiamo la codifica UTF-8 per sfruttare al massimo la gamma di caratteri esistenti sul Web, avendo così a disposizione un insieme molto più vasto della tradizionale codifica ISO-8859-1. Questo ci permette di affrontare una futura internazionalizzazione delle nostre pagine con minore ansia.

La marcatura per il contenuto effettivo del nostro documento sarà quindi:

  1. <div id="wrapper">
  2. <div id="header"><h1>CSS Zibaldone</h1></div>
  3. <div id="top">
  4. <ul id="breadcrumbs">
  5. <li><strong>Sei qui:</strong></li>
  6. <li><a href="#">Home</a></li>
  7. <li><a href="#">Articoli</a></li>
  8. <li><strong>Post con stile</strong></li>
  9. </ul>
  10. <p id="change-style"><a href="#">Layout accessibile</a>
  11. <a href="#">Normale</a></p>
  12. </div>
  13. <div id="content">
  14. <div id="gutter">
  15. <h2>Post con stile</h2>
  16. <p>...</p>
  17. ...omissis...
  18. <ol class="code">
  19. <li><code>.post {</code></li>
  20. <li class="indent1"><code>width: 65%;</code></li>
  21. <li class="indent1"><code>margin: 0;</code></li>
  22. <li class="indent1"><code>font-size: 80%;</code></li>
  23. <li class="vspace"><code>}</code></li>
  24. ...omissis
  25. </ol>
  26. </div>
  27. </div>
  28. <div id="sidebar">
  29. <div id="navcontainer">
  30. <ul id="nav">
  31. <li><a href="#">Home</a></li>
  32. <li><strong>Articoli</strong></li>
  33. <li><a href="#">Traduzioni</a></li>
  34. <li><a href="#">Altro</a></li>
  35. <li><a href="#">Appunti sui CSS</a></li>
  36. <li><a href="#">L'autore</a></li>
  37. </ul>
  38. </div>
  39. <form action="http://www.google.com/custom" method="get">
  40. <p><input value="css-zibaldone.com" name="as_sitesearch" type="hidden" />
  41. <input value="it" name="hl" id="hl" type="hidden" />
  42. <input type="text" name="q" id="q" size="31" maxlength="255" value="" />
  43. <input type="submit" name="cmdcerca" id="cmdcerca" value="Cerca" /></p>
  44. </form>
  45. </div>
  46. <address>Gabriele Romanato</address>
  47. </div>

Possiamo verificare il lavoro svolto sinora nella versione XHTML e nella versione HTML del nostro documento.