Corso HTML per l'editoria
Download as ODP, PDF0 likes297 views
Corso di base con lo scopo di comprendere le regole dell'HTML, XML e XHTML, avendo cura degli standard, della semantica e dell'accessibilit.
More Related Content
What's hot (20)
Viewers also liked (19)
Similar to Corso HTML per l'editoria (20)
More from Diego La Monica (16)
Corso HTML per l'editoria
- 1. Linguaggio HTML per l'editoria Diego La Monica ARPAT 17-03-2010
- 2. Chi sono? Sviluppo applicazioni intranet
- 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
- 6. Modulo 1 (X)HTML Cos竪 HTML
- 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
- 11. Modulo 2 Stili e Crossbrowsing Cos'竪 uno stile?
- 12. Come si pu嘆 descrivere lo stile di un elemento
- 13. Una cascata di... colori.
- 14. Separare l'informazione dalla sua presentazione
- 16. L'accessibilit sempre in testa!
- 17. Modulo 1 (eXtensible) HyperText Markup Language
- 18. Cos'竪 HTML HTML = HyperText Markup Lanaguage
- 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 lestensione .htm o .html)
- 22. I tag e la loro rappresentazione Un tag 竪 un informazione che struttura un contenuto presente nella pagina.
- 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>
- 26. Grammatica dei tag Ciascun tag ha una serie di caratteristiche (attributi) che ne descrivono l'aspetto semantico e rappresentativo: ASPETTO SEMANTICO : Attributi aumentano la comprensione dell'elemento (alt, longdesc. Title )
- 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 )
- 29. La sintassi di HTML Non 竪 rigorosa
- 30. Ogni tag ha il suo scopo
- 31. Esistono diverse versioni di HTML Lultima ufficiale 竪 HTML 4.01
- 32. La nuova edizione (levoluzione) 竪 HTML 5 ancora in stato di Working Draft
- 33. La sintassi di XML XML = eXtensible Markup Language
- 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.
- 37. La sintassi di XHTML XHTML = eXtensible HyperText Markup Language
- 38. una grammatica XML per descrivere documenti HTML
- 39. Esistono diverse versioni di questo dialetto: XHTML 1.0 Transitional pensato per consentire una graduale migrazione dei contenuti prodotti in HTML 4.01 verso la nuova grammatica.
- 40. XHTML 1.0 Strict per chi produce un contenuto HTML seguendo la strutturazione formale di XML
- 41. La struttura di un documento Le informazioni contenute in un documento web sono (o lo possono essere) rivolte a tre diversi fruitori (target della pagina): Informazioni rivolte agli utenti
- 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
- 45. Suddividere una pagina Una pagina web 竪 tipicamente progettata con le seguenti sezioni: Intestazione Logo e altre informazioni primarie Corpo Contenuti generali (con struttura che tipicamente va da 1 a 4 colonne) Pi竪 di pagina Recapiti aziendali copyright e Partita IVA
- 46. Strutturare un buon header Elementi che aiutano a strutturare un buon header: La codifica della pagina ( UTF-8, UTF-16 )
- 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.
- 54. Uno stile che... fa la differenza Fino al 2004 (ma ancora oggi) molti professionisti utilizzavano ForeColor e BackgroundColor o il tag Font per formattare i contenuti di una pagina. Anche l'elemento Table ancora oggi viene impropriamente utilizzato per la strutturazione di layout per il web. Cosa ha contribuito a tutto ci嘆? Il non aggiornamento professionale dei web-designer
- 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 .
- 57. Modulo 2 Stili e Crossbrowsing Cos'竪 uno stile?
- 58. Come si pu嘆 descrivere lo stile di un elemento
- 59. Una cascata di... colori.
- 60. Separare l'informazione dalla sua presentazione
- 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="border: 1px solid red"> Lorem Ipsum dolor sit amet </div>
- 66. Stilizzare un elemento - 1 Stile sulla pagina. <style type="text/css"> div{ border: 1px solid red; Color: #f00; Background-color: #ffe; } </style>
- 67. Stilizzare un elemento - 3 Stile separato dalla pagina. <link rel="stylesheet" href="mioStile.css" media="screen" />
- 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="mio-div" >Lorem Ipsum</div> <div class="altro-elemento" > Dolor Sit </div> <p class="altro-elemento" > 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="text/css"> @import "myStyle.css" </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]-->