Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
Tecnologia per la comunicazione
Tomasco Ermenegildo
2
Strati di una pagina web
Comportamento (JS) Presentazione (CSS) Contenuto (HTML)
3
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
4
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>
5
HTML5 Hyper Text Markup Language
6
Comunicazione
7
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=" <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
8
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
9
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.
10
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">
11
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
12
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
13
Nuovi elementi semantici HTML5
Definiscono blocchi interpretati da un browser a prescindere dall’aspetto grafico <section> <article> <aside> <header> <footer> <hgroup> <nav>
14
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
15
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
16
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,...
17
I form HTML I form HTML sono usati per raccogliere dati dall’utente.
<form action=“invia.php" method="GET" target="_blank"> ……. </form> Form esempio
Presentazioni simili
