Tecnologia per la comunicazione Tomasco Ermenegildo
Strati di una pagina web Comportamento (JS) Presentazione (CSS) Contenuto (HTML)
Strati di una pagina web HTML per definire il contenuto delle pagine web CSS per specificare il layout delle pagine web JavaScript per definire il comportamento delle pagine web
Struttura documento HTML <!DOCTYPE html> <html lang="it"> <head> <title>Tecnologia per la comunicazione</title> <meta name="description" content="Modulo formativo ..."> <meta name="keywords" content="HTML5, CSS, Javascript, XML"> <meta name="author" content="Ermenegildo Tomasco"> <link rel="stylesheet" href=“stile.css"> </head> <body> <h1>La mia prima pagina</h1> <p>Il mio primo pragrafo.</p> </body> </html> <tagname attibuti>contenuto</tagname>
HTML5 Hyper Text Markup Language
Comunicazione
Alcuni tag e attributi <html lang="it"> <br> <p title="Introduzione al corso">Il corso di "Tecnologia per la comunicazione" si propone di fornire allo studente</p> <a href="http://www.google.com">Google</a> <img src="images/img1.jpg" alt="Fiat 500" width="150" height="142"> <input type="button" value="Clicca qui" id="mybutton"> Cambiare URL Modificare il nome dell’immagine Modificare le dimensioni dell’immagine Modificare il testo del bottone
Alcuni tag e attributi <video width="320" height="240" controls muted loop poster="multimedia/HTML5.png"> <source src="multimedia/HTML5.mp4" type="video/mp4"> <source src="multimedia/HTML5.ogg" type="video/ogg"> Il tuo browser non supporta il tag video </video> <audio controls autoplay loop> <source src="multimedia/TheSoundofSilence.ogg" type="audio/ogg"> <source src="multimedia/TheSoundofSilence.mp3" type="audio/mpeg"> Il tuo browser non supporta il tag audio </audio> Cambiare URL Modificare il nome dell’immagine Modificare le dimensioni dell’immagine Modificare il testo del bottone
Elementi di formattazione del testo Attribuire uno speciale significato al testo <b>Grassetto</b>. <i>Corsivo</i>. <ins>Sottolineato</ins>. <mark>Marcato</mark>. <em>Accentuato</em>. <small>Piccolo</small>. <del>Errore</del>. <strong>Importante</strong>. Normale<sub>pedice</sub>. Normale<sup>apice</sup>. Scrivere il testo: Ciao Mario, come stai? Io sto bene, anche se fa un freddo caldo esagerato.
Stili HTML: CSS Inline – attributi di stile nei tag in HTML <h1 style="color:blue;font-family:verdana;font-size: 24pt; text-align:center">La mia prima pagina</h1> Interni – viene inserita una sezione <head><style> elementi di stile </style> </head> Esterni – vengono usati uno o più fogli di stile .CSS esterni <link rel="stylesheet" href="styles.css">
Stili HTML: CSS - Interni esempio Interni <!DOCTYPE html> <html> <head> <style> body {background-color:lightgray} h1 {color:blue} p {color:green} </style> </head> <body> <h1>La mia pagina web</h1> <p>Testo colorato</p> <p>Paragrafo 2</p> </body> </html> Modificare il background color Settare il font size 14px per il paragrafo
Stili HTML: CSS - Esempio color:blue; font-family:verdana; font-size:24px; } p { font-family:courier; font-size:16px; border:1px solid black; padding:10px; margin:30px; p#p01 { p.error { color:red; p.noborder { border:0px; styles1.css <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles1.css"> </head> <body> <h1>La mia prima pagina</h1> <p>Il mio primo paragrafo.</p> <p class="error">Pagina non trovata</p> <p id="p01">Io sono blu</p> <p class="error">Immagine piccola</p> <p class="noborder"><img src="images/img1.jpg" alt="fiat 500" style="float:left;width:259px;height:194px">La fiat 500</p> </body> </html> esempio.htm Inserire il css esterno inline
Nuovi elementi semantici HTML5 Definiscono blocchi interpretati da un browser a prescindere dall’aspetto grafico <section> <article> <aside> <header> <footer> <hgroup> <nav>
Javascript: cosa possiamo fare? JavaScript è il linguaggio di programmazione per HTML Accedere agli elementi HTML Cambiare il valore di un attributo HTML Cambiare gli stili Rimuovere/Aggiungere elementi e attributi HTML Gestire eventi in una pagina HTML
HTML DOM (Document object model) DOM standard per l’accesso ai documenti Definisce: Gli elementi HTML come oggetti Le proprietà degli elementi HTML I metodi per accedere agli elementi HTML Gli eventi per tutti gli elementi HTML
Javascript: esempi JavaScript può essere utile per: Leggere/Modificare una proprietà di un elemento HTML es. modificare l’HTML di un paragrafo Validazione di un input form es lunghezza di una stringa maggiore di 6 caratteri Visualizzare del contenuto dinamico in una pagina es. Visualizzare il risultato di una operazione Gestione di eventi onChange, onClick, onLoad,...
I form HTML I form HTML sono usati per raccogliere dati dall’utente. <form action=“invia.php" method="GET" target="_blank"> ……. </form> Form esempio