Corso di HTML5 e CSS
4 likes1,705 views
Il documento tratta del corso di HTML5 e CSS, introducendo i concetti fondamentali di HTML come la sua definizione, struttura, elementi e tag essenziali. Viene discusso il significato di metadati, la formattazione di testo, le immagini, i link e la personalizzazione dello stile degli elementi. Si evidenzia l'importanza del markup per la creazione di pagine web organizzate e ben strutturate.
Corso di HTML5 e CSS
- 1. Corso di HTML5 e CSS Master in Sviluppo di Applicazioni Web, Mobile e Social Media @parallelitSalvatore Cordiano #masem
- 2. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 2 Sommario • Cos’è HTML? • La struttura dei documenti HTML • I tag • I CSS • Le novità di HTML5 e CSS3
- 3. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 3 Cos’è HTML HTML: HyperText Markup Language (linguaggio di demarcazione di ipertesti) • E’ un linguaggio per l’organizzazione di documenti (formattazione, annotazioni semantiche). • Non è un linguaggio di programmazione (non consente di rappresentare algoritmi per la soluzione di problemi generici). • E’ il linguaggio del Web. • Tutti i contenuti veicolati attraverso il World Wide Web (WWW) sono rappresentati in HTML. • Sebbene non sia un linguaggio di programmazione, il risultato delle elaborazioni dei programmi per il web, qualunque sia il linguaggio di programmazione usato, è trasmesso in HTML.
- 4. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 4 Esempio <html>! <head>! <title>Esempio MaSeM</title>! </head>! <body> ! MaSeM! </body>! </html>! ! • La demarcazione del documento avviene attraverso i tag. • I tag denotano l’inizio (tag di apertura) e la fine (tag di chiusura) di un elemento. • Ad ogni tag di apertura deve corrispondere un tag di chiusura (in alcuni casi tag di apertura e chiusura potrebbero coincidere. • I tag possono essere innestati, definendo una struttura gerarchica del documento. • html, head e body sono i tag di più alto livello.
- 5. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 5 La struttura delle pagine HTML <html>! <head>! <title>Esempio MaSeM</title>! </head>! <body> ! MaSeM! </body>! </html>! ! • L’elemento html è la radice della struttura del documento. • Ogni elemento, fatta eccezione per la radice, ha un elemento padre, ovvero un elemento all’interno del quale è contenuto. • Gli elementi che non hanno figli, sono detti foglie. • Questa struttura dati è detta Document Object Model (DOM).
- 6. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 6 Caratteristiche degli elementi HTML Ogni elemento di un documento html può possedere: • Un contenuto: altri elementi e/o testo. • Degli attributi: definiscono proprietà dell’elemento.
- 7. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 7 I tag indispensabili* • html • Definisce l’intero documento html. • L’attributo lang consente di specificare la lingua del documento. • head • E’ l’intestazione del documento e definisce caratteristiche, proprietà e “risorse” per la visualizzazione del contenuto. • Non definisce alcun contenuto da visualizzare nella pagina. • title • Deve essere inserito nell’elemento head. • Definisce il titolo del documento. • Il titolo non compare nel documento, ma sarà visualizzato dal browser nella barra del titolo. • body • Definisce i contenuti che vengono visualizzati nella pagina. ! ! *indispensabili per visualizzare correttamente una pagina non vuota su tutti i browser
- 8. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 8 I metadati • Rappresentano informazioni relative ai dati contenuti nella pagina. • Gli elementi contrassegnati con meta consentono la definizione di metadati. • Gli elementi meta devono essere inseriti all’interno dell’elemento head L’elemento meta con attributo charset=“utf-8” consente di visualizzare correttamente nel browser i caratteri non-standard (sempre che il file sia codificato in utf-8). • L’elemento meta con attributi name=“description” e content=“descrizione del sito...” permette di inserire una (breve) descrizione del contenuto della pagina, che sarà usata dai motori di ricerca. • L’elemento meta con attributI name=“keywords” e content=“elenco delle parole chiave...” permette di specificare un insieme di parole chiave relative al contenuto della pagina, che sarà usato dai motori di ricerca.
- 9. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 9 Esempio <!DOCTYPE html>! <html lang=“it”>! <head>! <meta charset=“utf-8” />! <meta name="description"! content=“Altro esempio del corso” />! <meta name=“keywords”! content=“esempio,html5” />! <title>Questo è il titolo della pagina</title>! </head> <body> In questo documento posso scrivere direttamente la è, senza usare &egrave; </body> </html>
- 10. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 10 Il tag per il caricamento di risorse Il tag link “informa” il browser della presenza di risorse esterne collegate al documento • Deve essere inserito nell’elemento head. • L’attributo rel specifica la relazione della risorsa con il documento. • L’attributo href specifica la localizzazione della risorsa. • L’attributo type specifica il tipo di risorsa. ! Esempio: <link rel=“shortcut icon” href=“favicon.ico” type=“image/png” /> ! <link rel=“stylesheet” href=“stile.css” type=“text/css” />
- 11. Reggio Calabria, 4 aprile 2014 HTML5 e CSS 11 I tag per i titoli di sezione I tag h1, h2, h3, h4, h5, h6 consentono di definire i titoli di sezione Maggiore è il numero che segue la h, maggiore sarà la specificità del contenuto che segue il titolo. ! Esempio: <h1>Capitolo 1</h1>! …! <h2>Sezione 1.1</h2>! … ! Passando da h1 ad h6 si ha una riduzione progressiva della dimensione del carattere con cui viene visualizzato il contenuto dell’elemento. I tag deve essere usati in modo coerente ai contenuti, non con solo scopo estetico.
- 12. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 12 Il tag per la definizione dei paragrafi Il tag p consente di definire un paragrafo. I paragrafi sono separati con un ritorno a capo inserito automaticamente nel browser.
- 13. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 13 Esempio <!DOCTYPE html>! <html lang=“it”>! <head>! <meta charset=“utf-8” /> <title>Esempio 03</title> <link rel=“shortcut icon” href=“favicon.png” type=“image/png” />! </head>! <body>! <h1>Capitolo 1</h1> <p>Questo capitolo contiene due sezioni.</p> <h2>Sezione 1</h2> <p>Questa è la sezione 1.</p> <h2>Sezione 2</h2> <p>Questa è la sezione 2.</p> <p>Potremmo continuare con altre sezioni, ma ci fermiamo qui.</p>! </body>! </html>
- 14. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 14 I tag per la formattazione di base (1) I tag per la formattazione di base racchiudono porzioni di testo la cui visualizzazione sarà diversa “dal normale”. Il tag b consente di visualizzare una porzione di testo in grassetto (bold). Il tag i consente di visualizzare una porzione di testo in corsivo (italic). Il tag u consente di visualizzare una porzione di testo sottolineata (underline). I tag big e small consentono di visualizzare una porzione di testo ingrandita o rimpicciolita rispetto al resto – l’applicazione dei tag è “cumulativa”. I tag sup e sub consentono di visualizzare una porzione di testo come apice o pedice.
- 15. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 15 I tag per la formattazione di base (2) Alcuni tag hanno una funzione semantica, che si ripercuote sulla formattazione: • strong specifica al browser che il contenuto deve essere rafforzato – i browser, tipicamente, useranno il grassetto per scrivere il contenuto dell’elemento. • em specifica al browser che il contenuto deve essere enfatizzato – i browser, tipicamente, useranno il corsivo per scrivere il contenuto dell’elemento. • cite specifica al browser che il contenuto è una citazione – i browser, tipicamente, useranno il corsivo per scrivere il contenuto dell’elemento. • address specifica al browser che il contenuto rappresenta un indirizzo email – i browser, tipicamente, useranno il corsivo per scrivere il contenuto dell’elemento. • code e tt specificano al browser che il contenuto rappresenta un frammento di codice o di testo battuto a macchina (typewriter text) – i browser, tipicamente, useranno i caratteri monospaziati per scrivere il contenuto dell’elemento.
- 16. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 16 I tag per la formattazione di base (3) • blockquote e q definiscono citazioni da riportare in blocco o in linea, rispettivamente: • L’attributo cite consente di specificare un url che rappresenta la fonte della citazione. • L’attributo lang consente di specificare la lingua in cui è scritto il testo citato. • abbr specifica al browser che il contenuto rappresenta un’abbreviazione (o un acronimo): • L’attributo title consente di specificare il testo completo del quale il contenuto del tag è abbreviazione. • L’attributo title è utilizzabile con molti tag, e tipicamente produce nei browser la visualizzazione di un tooltip quando si posiziona il mouse sul contenuto visualizzato. • ins e del rappresentano porzioni di contenuto aggiunto ed eliminato – i browser tipicamente sottolineeranno il testo aggiunto e barreranno quello eliminato.
- 17. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 17 Ritornare a capo e inserire spazi • Ritornare a capo nella scrittura del documento html o inserire una sequenza di spazi non produce alcun effetto sul documento visualizzato. • I browser ignorano il ritorno a capo e le sequenze di spazi. • Il tag br specifica al browser che occorre andare a capo nella visualizzazione del contenuto – il tag non ha contenuto, quindi si può aprire e chiudere contemporaneamente (<br />). • La stringa denota lo spazio vuoto - il browser inserisce gli spazi vuoti definiti dall’entità anche se sono in sequenza. • l tag pre consente di definire un’eccezione al comportamento del browser con i ritorni a capo e gli spazi. • Il contenuto del tag pre è assunto essere preformattato: i ritorni a capo e gli spazi saranno visualizzati così come presenti all’interno del file scritto con l’editor. • Il tag hr consente di andare a capo inserendo una linea orizzontale.
- 18. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 18 Esempio (1) <body>! <b>Grassetto</b> e <strong>strong</strong><hr />! <i>Corsivo</i> ed <em>enfatizzato</em><br />! <u>Sottolineato</u>, <big>grande</big> e <small>piccolo</ small><br />! <big><big>grande grande</big></big> e ! <small><small>piccolo piccolo</small></small><br />! <code>! 5<sup>2</sup>=25; la formula chimica dell'acqua è H<sub>2</sub>O! </code>! Potete trovarla su <cite>Wikipedia</cite>! <br />! Il mio indirizzo email è <address>[email protected]</address>! <q lang=“en” cite=“http://www.brainyquote.com”>Women are made to be loved, not understood</q> (Oscar Wilde)
- 19. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 19 Esempio (2) <blockquote lang=“it”>! Non è mai stato chiaro che non si sarebbe fermato (il <abbr title=“World Wide Web”>www</abbr>). Durante la sua crescita esponenziale si sarebbe potuto fermare in ogni momento. Non siamo m! ai stati fiduciosi fino al 1993. (Tim Berners-Lee - Fondatore del World Wide Web)! </blockquote>! Quest’estate <ins>non</ins> andremo in vacanza <del>alle Hawaii</ del>! <pre>! E per finire... ...! .... ....! un bel testo preformattato ! </pre></body>
- 20. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 20 Elementi block ed elementi in-line Gli elementi del body possono avere una visualizzazione block-style o in- line. La visualizzazione a blocco impone un ritorno a capo automatico rispetto all’elemento precedente. La visualizzazione in linea consente la visualizzazione del contenuto del nuovo elemento senza andare a capo. Esempio: Visualizzazione a blocco: p, h1,..., h6, address, pre, hr. Visualizzazione in linea: b, i, u, big, small, sup, sub, strong, em, cite, abbr, ins, del, br, code, tt.
- 21. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 21 Le immagini (1) Il tag img consente di inserire un’immagine nel documento. • Quando il browser incontra questo tag, scarica l’immagine dalla locazione specificata attraverso l’attributo src, e la visualizza nel browser. • L’attributo alt consente di specificare un testo alternativo per i browser (o gli utenti) che non possono visualizzare le immagini. • L’attributo title funziona anche sulle immagini ed il suo valore viene visualizzato come tooltip posizionandosi col mouse sull’immagine. • Gli attributi width e height consentono di specificare le dimensioni di visualizzazione dell’immagine. • Può essere specificato anche uno solo dei due valori, l’altro sarà impostato proporzionalmente. • L’immagine, in ogni caso, è scaricata nelle dimensioni originali.
- 22. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 22 I link (1) l tag a (anchor) permette di definire i link, ovvero collegamenti ad altre pagine, a porzioni specifiche della stessa pagina (o di altre pagine), dette ancore, e più in generale a risorse accessibili attraverso URL. • L’attributo href consente di specificare la destinazione del collegamento. • L’attributo target permette di specificare dove sarà visualizzata la destinazione. <a href=“http://www.google.com” target=“_blank” >Google</a>! Per definire un’àncora nel documento occorre usare il tag a con il solo attributo name. Esempio: <h2><a name=“sezione1”>Sezione 1</a></h2>! ● collegamento ad un’àncora interna al documento: <a href=“#sezione1”>Vai alla sezione 1</a>! ● collegamento ad un’àncora di un altro documento: <a href=“pagina.html#sezione1”>Sezione 1 di Esempio 6</a>
- 23. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 23 I link (2) L’elemento a può contenere un’immagine: <a href=“http://www.posytron.com/” target=“_blank”>! <img src=“foto.png” />! </a>
- 24. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 24 Personalizzare lo stile degli elementi • Per ogni elemento visualizzabile è possibile definire l’attributo style. • L’attributo style specifica un elenco di coppie proprietà-valore. • Tra la proprietà e il valore viene inserito il carattere ‘:’. • Tra le coppie viene inserito il carattere ‘;’. Esempio: <body style=“color: white; background: blue; text-align: center;”>! • Alcune proprietà raggruppano più proprietà e il loro valore può essere specificato come esempio di valori. • border: 1px solid red; sostituisce border-width: 1px; border-style: solid; border-color: red;! • Alcuni elementi hanno uno stile definito implicitamente (ad esempio h1 è più grande ed è in grassetto). • Lo stile degli elementi si applica sugli elementi discendenti (innestati) a meno che per questi lo stile non sia implicitamente (o esplicitamente) (ri)definito.
- 25. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 25 Esempio <body style="font-family: Verdana; font-size: 12px; background: blue; color: white; text-align: justify;”>! <h1>Capitolo 1</h1>! <p>Questo capitolo contiene due sezioni.</p>! <h2>Sezione 1</h2>! <p>Questa è la sezione 1.</p>! <h2 style=“text-decoration: underline; font-weight: bold;”>Sezione 2</h2>! <p style=“color: yellow;”>Questa è la sezione 2.</p> <p style=“text-align: left”>Questa è ancora la sezione 2.</p> ! </body>
- 26. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 26 Denominazione degli elementi Ogni elemento del documento html può essere identificato attraverso l’attributo id. Esempio: <p id=“paragrafo1”>Questo è il primo paragrafo</p>! ● Ogni elemento del documento html può essere associato ad una o più classi attraverso l’attributo class. <p id=“paragrafo1” class=“prove”>Questo è il primo paragrafo</p>! ● L’ id consente di identificare un elemento specifico per effettuare elaborazioni (client-side) sull’elemento e per definire comportamenti specifici o regole di formattazione specifiche per l’elemento. ● Le classi consentono di identificare un insieme di elementi per effettuare elaborazioni (client-side) sugli elementi della classe e per definire comportamenti specifici o regole di formattazione specifiche per gli elementi.
- 27. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 27 Il tag style • Nell’head del documento è possibile definire un insieme di regole di stile attraverso il tag style. • Ogni regola definisce l’ambito di applicazione e un elenco di coppie proprietà-valore. • L’ambito di applicazione può essere relativo a: • tutti gli elementi di un certo tipo (ad esempio il body, tutti i p, tutti gli a); • tutti gli elementi di una certa classe; • l’elemento con uno specifico id. • Gli ambiti possono essere combinati (ad esempio tutti i link negli elementi di una specifica classe). • La regola può essere limitata allo stato di un elemento (ad esempio il colore del link quando il mouse è sopra il link).
- 28. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 28 I CSS I CSS (Cascading Style Sheet) sono file di testo che contengono regole di stile (vengono pertanto detti, in italiano, fogli di stile). Consentono di applicare lo stesso stile a diverse pagine di un sito, senza ripetere le regole in ogni file html. Le regole di un foglio di stile possono essere importate per essere utilizzate in un file html attraverso il tag link. <link rel=“stylesheet” href=“stile.css” type=“text/css” />
- 29. Reggio Calabria, 11 aprile 2014 HTML5 e CSS 29 Bibliografia • HTML5 e CSS3 per il world wide web, Quickstart. • http://diveintohtml5.info/ • http://www.iana.org/assignments/media-types • http://www.whatwg.org/ • http://www.w3c.org/ • http://www.wufoo.com/html5 • http://www.css3generator.com/ • http://www.w3schools.com/ • Materiale didattico delle lezioni di HTML5 e CSS del prof. Giuseppe Massimiliano Mazzeo (UNICAL).