Corso di base con lo scopo di comprendere le regole dell'HTML, XML e XHTML, avendo cura degli standard, della semantica e dell'accessibilità.

1. Linguaggio HTML per l'editoria Diego La Monica ARPAT 17-03-2010

3. Membro di IWA/HWG

4. Membro del Consiglio Direttivo di IWA Italy da Febbraio 2009

5. Membro del Gruppo di Lavoro Protocols & Format istituito dal W3C per conto di IWA/HWG

7. I tag e la loro rappresentazione

8. Differenze tra le grammatiche HTML e XHTML

9. La suddivisione di una pagina

10. Strutturare una pagina che si descriva

12. Come si può descrivere lo stile di un elemento

13. Una cascata di... colori.

14. Separare l'informazione dalla sua presentazione

15. Rendere l'idea cross-browser.

16. L'accessibilità sempre in testa!

17. Modulo 1 (eXtensible) HyperText Markup Language

19. È un linguaggio di strutturazione dei contenuti

20. Non sono necessari editor per la composizione di una pagina HTML anche se aiutano e rendono veloce lo sviluppo

21. È un documento di testo opportunamente strutturato e servito al browser tipicamente come text/html (tramite l’estensione .htm o .html)

23. Un tag è identificato da una parola chiave racchiusa tra parentesi triangolari

24. Un tag può essere vuoto o può contenere informazioni aggiuntive

25. Un tag può contenere altre informazioni, e quindi eventuali altri tag al suo interno <li> <img> <p>Testo</p> <p>Testo <em>in corsivo</em> </p>

27. ASPETTO RAPPRESENTATIVO : Attributi che alterano l'aspetto estetico di un elemento: (border, backcolor, background, forecolor, …)

28. GESTIONE DEGLI EVENTI : Attributi che consentono di programmare il comportamento all'occorrenza di determinati eventi (onclick, onfocus, onblur … )

30. Ogni tag ha il suo scopo

32. La nuova edizione (l’evoluzione) è HTML 5 ancora in stato di Working Draft

34. XML è più rigoroso: ogni tag aperto deve essere necessariamente chiuso

35. Esiste una differenza tra documenti XML ben strutturati e documenti XML validi.

36. XML è una grammatica di base, ciascuna implementazione è un particolare dialetto che aderisce a precise regole.

38. È una grammatica XML per descrivere documenti HTML

40. XHTML 1.0 Strict per chi produce un contenuto HTML seguendo la “strutturazione formale” di XML

42. Informazioni utili per il browser

43. Informazioni per i motori di ricerca

44. Schematizzare una pagina Esistono diverse varianti di una rappresentazione comunque sintetizzata in questo schema Intestazione Corpo Piè di pagina

47. Indicare un titolo (es. <title>Titolo della pagina</title> )

48. Una FavIcon

49. È buona prassi inserire l'autore della pagina

50. Indicazioni sulla lingua del documento

51. Indicazioni sui contenuti della pagina

52. Indicare la durata del documento ( solo per il web )

53. Strutturare il documento Significa progettare un documento di testo con i corretti accorgimenti. Ciascun capitolo di un libro viene identificato da un numero di capitolo formattato secondo un preciso stile (un intestazione di secondo livello) mentre il titolo di un libro corrisponderà concettualmente ad un'intestazione di primo livello. Una casa con le finestre al posto delle porte non sarebbe una buona casa. Un sito non strutturato rispettando il valore semantico di ciascun elemento, non sarebbe un buon sito.

55. Professionisti non in grado e/o non disponibili ad informare gli altri.

56. Il mancato o parziale supporto dei browser ai fogli di stile .

58. Come si può descrivere lo stile di un elemento

59. Una cascata di... colori.

60. Separare l'informazione dalla sua presentazione

61. Rendere l'idea cross-browser.

62. L'accessibilità sempre in testa!

63. Uno sguardo al futuro: HTML 5 vs. XHTML 2

64. Cos'è uno stile? È una regola che descrive la presentazione di uno o più elementi (tag) presenti su un documento. border: 1px solid red; Background-color: #ffe; Font-size: 2em; Color: #800;

65. Stilizzare un elemento - 1 Stile “in linea”. <div style=&quot;border: 1px solid red&quot;> Lorem Ipsum dolor sit amet </div>

66. Stilizzare un elemento - 1 Stile “sulla pagina”. <style type=&quot;text/css&quot;> div{ border: 1px solid red; Color: #f00; Background-color: #ffe; } </style>

67. Stilizzare un elemento - 3 Stile “separato dalla pagina”. <link rel=&quot;stylesheet&quot; href=&quot;mioStile.css&quot; media=&quot;screen&quot; />

68. Descrivere lo stile di un tag h1{ display: block; text-indent: 1em; } div{ font-family: Verdana, Arial, Sans-serif; font-size: 0.8em; }

69. Attributi speciali id e class <div id=&quot;mio-div&quot; >Lorem Ipsum</div> <div class=&quot;altro-elemento&quot; > Dolor Sit </div> <p class=&quot;altro-elemento&quot; > Amet </p>

70. Stile in base a id e class #mio-div{ ← In base all'ID … } . altro-elemento{ ← In base alla Classe … }

71. Una cascata di colori p{ … } ← Applicato a tutti i paragrafi div p{ … } ← Applicato a tutti i paragrafi che sono sotto un DIV div p.myclass{ … } ← Applicato a tutti i paragrafi con classe myclass sotto un DIV

72. Separare la presentazione dal contenuto “ Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati. ” DM 8 Luglio 2005 – Requisito n. 11 <link rel=”stylesheet” type=”text/css” href=”myStyle.css” /> Oppure: <style type=&quot;text/css&quot;> @import &quot;myStyle.css&quot; </style>

73. Rendere l'idea cross-browser Ciascun browser interpreta alcune caratteristiche dei CSS indicate nella documentazione W3C in modo arbitrario. Talvolta le caratteristiche vengono implementate solo da alcuni di essi. border-radius: 5px; ← Specifica per angoli arrotondati in CSS3 -moz-border-radius: 5px; ← Versione dello stile definita da Mozilla ( non consente la validazione del CSS ) -webkit-border-radius:5px ← Versione supportata da Safari e Chrome ( non consente la validazione del CSS )

74. Cross-browser... un po' opaco... Una caratteristica trattata secondo interpretazione soggettiva è la trasparenza: opacity: 0.9; ← Indica che l'opacità dell'oggetto è del 90%. Su Internet Explorer non funziona… Filter: opacity(alpha=90); ← Versione funzionante per IE... ma il CSS non viene validato

75. Per pochi... solo per IE... Per consentire a Internet Explorer di caricare dei contenuti che gli altri browser non dovranno interpretare è necessario utilizzare dei tag di commento strutturati in modo particolare: <!--[if lte IE 6]> <p>Paragrafo visto da IE 6 e precedenti</p> <![endif]-->

76. … e per tutti gli altri? Secondo Microsfot per servire delle parti di HTML a tutti browser ad eccezione di IE è necessario utilizzare la seguente sintassi: <![if !IE]> … <![endif]> Ma il markup diventerà invalido... Soluzione? <!--[if !IE]>--> … <!--<![endif]-->