Il linguaggio HTML Introduzione Formattazione Multimedialità.

Presentazione sul tema: "Il linguaggio HTML Introduzione Formattazione Multimedialità."— Transcript della presentazione:

1 Il linguaggio HTML Introduzione Formattazione Multimedialità

2 Introduzione all’HTML Hyper (“aiper”) Text(“text”) Markup(“marcap”) Language(“lenguig”) 2

3 Introduzione all’HTML L’HTML è un linguaggio che serve per costruire ipertesti. L’ipertesto è un documento che è collegato agli altri ipertesti attraverso i collegamenti ipertestuali detti hyperlink (“aiper-linc”) o link (“linc)”. Logo di Html 5 3

4 L’ipertesto Nell’ipertesto ci sono delle parole che permettono di visualizzare altri documenti 4

5 L’ipertesto Esempio di link Ogni sito internet è formato da ipertesti 5

6 Il Tag... Oppure Tag con corpo ed attributi Tag con attributi e senza corpo Il linguaggio HTML è basato sul TAG. 6

7 Rossi Esempi di tag Rossi Esempio di tag con nome COGNOME e corpo Rossi Esempio di tag con nome COGNOME e senza corpo Esempio di tag con nome COGNOME, corpo Rossi ed attributo nazione con valore “italia” 7

8 Struttura di un documento HTML … … Sezione contenente informazioni descrittive quali il titolo ed i metatag Sezione contenente la struttura visibile della pagina Inizio del tag radice del documento Fine del tag radice del documento 8

9 Il tag HEAD TITOLO DELLA PAGINA Tra i tag più importanti che la sezione HEAD può contenere ci sono i tag: TITLE e META 9

10 Il tag META Il tag META contiene informazioni generali sul contenuto della pagina quali: la descrizione generica della pagina, il nome dell’autore, le parole chiavi necessarie per i motori di ricerca: Per maggiori informazioni: http://www.w3schools.com/html5/tag_meta.asphttp://www.w3schools.com/html5/tag_meta.asp Aggiorna la pagina ogni 10 secondi Dopo 10 secondi visualizza la pagina http://www.corriere.it 10

11 Il tag BODY Il tag BODYcontiene tutta la parte visibile del documento. Es.: Visualizza una pagina con sfondo grigio e con colore del testo bianco … Es.: Visualizza una pagina avente come sfondo l’immagine ‘ sistema_distribuito.gif’ … 11

12 Il tag BODY Es. : Imposta il colore dei link non visitati ( link ) a verde, il colore dei link attivi (link appena cliccati in attesa del caricamento della pagina) ( alink ) ed il colore dei link visitati ( vlink ) a marrone: … 12

13 I caratteri speciali Alcuni browser non visualizzano alcuni caratteri così come vengono scritti nel documento, ma è necessario scriverli in un modo particolare detto sequenza di escape (“eschèip”). < corrisponde a < > corrisponde a > è corrisponde a è &eacute: corrisponde a é Per maggiori informazioni: http://www.w3schools.com/tags/ref_entities.asp http://www.w3schools.com/tags/ref_entities.asp 13

14 Il tag FONT Serve per definire il tipo di carattere, il colore e la dimensione del testo interno al tag. Es. Visualizza il testo interno al tag con carattere verdana, colore verde e dimensione 1 Questo è un testo Es. Visualizza il testo interno al tag con carattere tahoma, colore red e dimensione 2 Questo è un testo Per maggiori informazioni: http://www.w3schools.com/tags/tag_font.asp http://www.w3schools.com/tags/tag_font.asp 14

15 Il tag BR Serve per dare un ritorno a capo al testo perchè se viene inserito un invio nel codice sorgente del documento, non viene visualizzato. Testo prima dell’invio Testo dopo l’invio Oppure Testo prima dell’invio Testo dopo l’invio 15

16 I tag di formattazione del carattere Serve per sottolineare un testo. Testo sottolineato Testo sottolineato Testo in corsivo Testo in corsivo testo in grassetto testo in grassetto Testo pedice Testo apice testo barrato 16

17 Il tag Serve per delimitare un paragrafo. Delimita il testo del paragrafo con un invio. Questo è un esempio di paragrafo. 17

18 Il tag Esempio 1: testo allineato a sinistra Esempio 2: testo centrato Esempio 3: testo allineato a destra Esempio 4: testo giustificato 18

19 Il tag Il tag CENTER serve per centrare il testo: testo centrato 19

20 Il collegamento ipertestuale Il tag serve sia a definire link interni, link esterni e punti di destinazione di un link interno (detto ancora). Es 1: Crea un link a www.libero.it rendendo cliccabile il testo ‘Vai a libero’www.libero.it Vai a libero http://www.libero.it Es 2: Crea un link a www.libero.it rendendo cliccabile il testo ‘Vai a libero’ ed inserisce il tooltip ‘ Clicca per andare a Repubblica ’www.libero.it <A HREF=“http://www.gazzetta.it”http://www.gazzetta.it TITLE=“Clicca per andare a Repubblica”> Vai a Repubblica Per maggiori informazioni: http://www.w3schools.com/html/html_links.asp http://www.w3schools.com/html/html_links.asp 20

21 Il collegamento ipertestuale Es 3: Crea un’ancora di nome sommario e con testo ‘ Sommario pagina ’ Sommario pagina Es 4: Crea un link interno all’ancora ‘ sommario ’ presente nella stessa pagina Vai al sommario della pagina Es 5: Crea un link all’ancora ‘ sommario ’ presente nella pagina di indirizzo ‘www.libero.it’ Vai al sommario della pagina Per maggiori informazioni: http://www.w3schools.com/html/html_links.asp http://www.w3schools.com/html/html_links.asp 21

22 Il collegamento alla e-mail Es 1: Apre una nuova e-mail con il client di posta elettronica predefinito impostando il destinatario a ‘mario.rossi@libero.it’ Scrivi a Mario Es 2: Apre una nuova e-mail con il client di posta elettronica predefinito impostando il destinatario a ‘mario.rossi@libero.it’ e con oggetto ‘Auguri’ Scrivi a Mario Per maggiori informazioni: http://www.w3schools.com/html/html_links.asp http://www.w3schools.com/html/html_links.asp 22

23 Le immagini In HTML, le immagini vengono visualizzate dal tag. Es 1: Visualizza un’immagine a grandezza originale di nome ‘sistema.gif’ presente nella stessa cartella del documento ed imposta il testo alternativo (ALT) utile in caso di immagine mancante o di lettura da parte di uno screen reader: Es 2: Visualizza un’immagine di altezza 50 pixel (mantenendo le proporzioni) e di nome ‘sistema.gif’ presente nella cartella ‘immagini’ Es 3: Visualizza un’immagine di larghezza 300 pixel (mantenendo le proporzioni) e di indirizzo http://www.w3schools.com/images/h_logo.gif Per maggiori informazioni: http://www.w3schools.com/html/html_images.asp http://www.w3schools.com/html/html_images.asp 23

24 Le immagini Come rendere cliccabile un’immagine con URL http://www.google.it/intl/en_com/images/srpr/logo1w.png e se cliccata si connette alla pagina http://www.google.it: http://www.google.it/intl/en_com/images/srpr/logo1w.png http://www.google.it http://www.google.it <IMG SRC=“http://www.google.it/intl/en_com/images/srpr/logo1w.png” BORDER=“0” TITLE=“Logo di Google” /> Border=“0” impedisce che venga visualizzato il bordo attorno all’immagine. Per maggiori informazioni: http://www.w3schools.com/html/html_images.asp http://www.w3schools.com/html/html_images.asp 24

25 Gli audio Il tag AUDIO permette l’inserimento di un file audio (.mp3,.ogg,.wav). Es.: inserisce l’audio horse.mp3, visualizza la barra di controllo ( controls ), parte automaticamente la riproduzione ( autoplay ) e ripete la riproduzione di continuo ( loop ): Il tuo browser non supporta il tag AUDIO. Se il browser non riconosce il tag AUDIO allora visualizza la frase ‘Il tuo browser non supporta il tag AUDIO’. 25

26 I video Il tag VIDEO permette l’inserimento di un file video (.mp4, WebM,.ogg). Es. 1: inserisce il video movie.mp4, visualizza la barra di controllo ( controls ), parte automaticamente la riproduzione ( autoplay ) e ripete la riproduzione di continuo ( loop ): <VIDEO src="movie.mp4“ controls autoplay loop width="320" height="240“ poster=“ http://www.conoscereweb.com/wp-content/uploads/2013/07/ciao.jpg ”> Il tuo browser non supporta il tag VIDEO. Se il browser non riconosce il tag VIDEO allora visualizza la frase ‘Il tuo browser non supporta il tag VIDEO’. 26

27 I video Es. 2: inserisce il video movie.mp4 in un riquadro di larghezza 320px ed altezza 240px: Il tuo browser non supporta il tag VIDEO. Es. 3: inserisce il video movie.mp4 con i controlli (play/pause) ( controls ) e visualizza l’immagine ciao.jpg durante il caricamento del video ( poster ): <VIDEO src="movie.mp4" controls poster=“ http://www.conoscereweb.com/wp-content/uploads/2013/07/ciao.jpg ”> 27

28 Le animazioni Il tag EMBED permette di inserire animazioni (flash). Ad es. inserisce l’animazione helloworld.swf in un riquadro largo 300px ed alto 250px : <EMBED src="helloworld.swf" width="300" height="250“ /> 28

29 Gli IFrame Il tag IFRAME permette di inserire la pagina di un altro sito all’interno del documento corrente. Ad es. : Il tuo browser non supporta gli iframe visualizza la homepage del sito corriere.it in un riquadro largo 300px ed alto 250px 29

30 I video di YouTube I video di YouTube si possono incorporare in una pagina attraverso il tag IFRAME. Il relativo codice lo si può ottenere da Condividi/Codice da incorporare. Ad es. Incorpora un video con url https://www.youtube.com/embed/U3I3fIxndfw ( src ), dimensioni 420x315 ( width x height ), senza bordi ( frameborder ) e con la possibilità di metterlo a tutto schermo ( allowfullscreen ).https://www.youtube.com/embed/U3I3fIxndfw 30