Embed Size (px)
Citation preview
1
Partiamo col sottolineare che non è linguaggio di programmazione, ma di markup, è anche un insieme di tecnologie, ovvero l’unione di tutte le più recenti novità relative allo sviluppo web e alla creazione di web applications.
Video guida: http://www.oilproject.org/corso/corso-di-introduzione-html5-5638.html
Cosa è HTML 5?
2
I tag sono elementi basilari nella strutturazione di una pagina html, corrispondenti a notazioni testuali che delimitano o marcano porzioni di contenuto e ne definiscono la funzione.
Il nome del tag è racchiuso da parentesi angolari in apertura: <header> In chiusura deve avere lo / che precede il nome stesso: </header> Quindi avremo una struttura simile <header>…</header> Alcuni tag hanno la chiusura interna alla prima dichiarazione:
<img src="immagine.jpg" />
I TAG HTML 5: cosa sono
3
4
I TAG FONDAMENTALI
5
Ogni pagina html, indipendentemente dal suo contenuto, dovrà obbligatoriamente avere: il tag di prologo <!doctype> i due tags di definizione <html></html> i due tags per la testata <head></head> un tag per il titolo <title></title> ed il corpo <body></body>
Iniziamo…
6
Inizio codice html vero e proprio, tutto ciò che sarà posto all'interno di questo elemento e fino al relativo tag di chiusura, sarà inteso come struttura di un documento in html. Solitamente questa parte viene precompilata automaticamente dagli editor <!doctype html > <head></head> <body></body> </html>
<!doctype html> … </html>
7
Sempre posta all’inizio della pagina, è la sezione in cui trovano posto tutti quei tags che impartiscono direttive al browser quali: titolo, Meta Tags o meta comandi, richiami ai fogli di stile (CSS), scripts, ed altro ancora. Tutto ciò che si trova all'interno della struttura head non viene visualizzato nella pagina ma interpretato dal browser, una zona destinata ad uso esclusivo dei soli comandi che impartiscono direttive ben specifiche <head> <meta charset="utf-8"> <title> Titolo del sito </title> <link rel="stylesheet" href="style.css" media="screen"> </head>
<head> … </head>
8
Tag fondamentale per la costruzione di una pagina in HTML: posizionato dopo la chiusura dell’ <head></head>, è il contenitore di tutti gli elementi del layout, a sua volta dentro il tag <html></html> <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css src="style.css" ></style> <title>Titolo della pagina</title> </head> <body> <article> <h1>Titolo articolo</h1> <p>Contenuto dell'articolo</p> </article> <footer> <p>Crediti e informazioni sul sito</p> </footer> </body> </html>
<body> … </body>
9
Il tag <header> però può essere usato all’interno degli articoli. Identifica l’intestazione di una sezione di testo e introduce a parti di contenuto di varia natura. <article> <header> <h1>Titolo articolo</h1> </header> <p>Contenuto dell'articolo</p> <footer> <p>Informazioni riguardo l'autore</p> </footer> </article>
<header> … </header>
10
Indica una sezione autonoma in un documento, pagina, applicazione o sito; infatti è riutilizzabile in parte o interamente in diverse pagine.
<article> <header> <h1>Titolo articolo</h1> </header> <p>Contenuto dell'articolo</p> <footer> <p>Informazioni riguardo l'autore</p> </footer> </article>
<article> … </article>
11
Rappresenta una sezione di pagina che contiene link (collegamenti) ad altre pagine o a parti interne dello stesso documento; quindi è una sezione contenente link di navigazione. <nav> <ul> <li>Questo è un link</li> <li>Questo è un link</li> <li>Questo è un link</li> <li>Questo è un link</li> [...] </ul> </nav> <ul></ul> indica una lista non ordinata (unordered list) <li></li> sono gli elementi di una lista (list item)
<nav> … </nav>
12
Sezione costituita da informazioni che sono marginalmente correlate all’elemento principale che la contiene, ma che potrebbero essere considerate distinte da quest’ultimo. Ad esempio, possiamo immaginarlo come un contenitore di approfondimento in cui possiamo inserire gruppi di link, pubblicità, form, etc <aside> <h1>Contenuti di approfondimento</h1> <nav> <h2>Link a pagine correlate al contenuto</h2> <ul> <li>Informazione correlata al contenuto</li> <li>Informazione correlata al contenuto</li> </ul> </nav> <section> <h2>Pubblicità</h2> [immagini pubblicitarie] <section> </aside>
<aside> … </aside>
13
Elemento che serve a raggruppare porzioni di pagina che hanno qualcosa in comune, ma se pensiamo più strettamente ai post, meglio utilizzare il tag <article>. Possiamo quindi definirlo un contenitore che serve a raggruppare porzioni di contenuto, organizzati per temi. <aside> <h1>Contenuti di approfondimento</h1> <nav> <h2>Link a pagine correlate al contenuto</h2> <ul> <li>Informazione correlata al contenuto</li> <li>Informazione correlata al contenuto</li> </ul> </nav> <section> <h2>Pubblicità</h2> [immagini pubblicitarie] <section> </aside>
<section> … </section>
14
Se posto in chiusura della pagina, contiene le informazioni sul fondo del layout, come i crediti, i menu riepilogativi, etc. Se inserito all’interno di un articolo, indica la porzione di chiusura del testo, come l’autore. <article> <header> <h1>Titolo articolo</h1> </header> <p>Contenuto dell'articolo</p> <footer> <p>Informazioni riguardo l'autore</p> </footer> </article>
<footer> … </footer>
15
I TAG PER I CONTENUTI
16
Rappresentano i titoli degli articoli, delle pagine o delle sezioni. Possiamo avere sino a 6 tipi di titoli, con caratteri e colori diversi. Le dimensioni dovrebbero essere decrescenti, a partire da <h1>, il titolo più importante, sino ad arrivare a <h6>, molto piccolo. Non abbiamo vincoli di stile! <article> <header> <h1> Titolo articolo </h1> </header> <p>Contenuto principale</p> <footer> <h2> Commento dell’autore </h2> <p>Contenuto secondario</p> </footer> </article>
<h1> … </h1>, <h2> … </h2>, etc…
17
Innanzitutto il tag <p>, ovvero il paragrafo. All’interno di esso sono contenute quelle porzioni di testo che tipicamente noi interpretiamo come paragrafi: piccoli brani formati da uno o più periodi, distanziati tra loro tramite apposita spaziatura.
<p> Scrivere un racconto è un'arte. Dai personaggi alla trama, all'uso della punteggiatura, ecco alcune regole da seguire per mettere a punto la propria abilità nel narrare in forma breve, con pratici consigli e tutti i tranelli da evitare. </p> <p> C’è chi dice che il racconto sia una delle forme letterarie più difficili, e io mi sono sempre chiesta il perché di questa convinzione, visto che a me pare uno dei modi più spontanei e fondamentali dell’espressione umana […] </p>
<p> … </p>
18
Il tag strong è un tag inline, cioè formatta in grassetto senza passare dai fogli di stile (CSS). Può essere applicato solo ai testi:
<strong> Scrivere un racconto è un'arte. </strong> Dai personaggi alla trama, all'uso della punteggiatura, ecco alcune regole da seguire per mettere a punto la propria […] </p>
<em> … </em> Il tag em è un tag inline e dona enfasi come <strong>, ma in questo caso trasforma il testo in corsivo:
<em> C’è chi dice che il racconto sia una delle forme letterarie più difficili, e io mi sono sempre chiesta il perché di questa convinzione, visto che a me pare uno dei modi più spontanei e fondamentali dell’espressione umana […] </em>
<strong> … </strong>
19
<strong><em> C’è chi dice che il racconto sia una delle forme letterarie più difficili, e io mi sono sempre chiesta il perché di questa convinzione, visto che a me pare uno dei modi più spontanei e fondamentali dell’espressione umana […] </em></strong>
Insieme…
20
Definisce un’immagine “contenuto” e possiede i tre attributi. - src: il percorso dell’immagine da visualizzare - testo alternativo (alt): necessario per mostrare un alternativa in mancanza del caricamento dell’immagine o per i non vedenti - larghezza e altezza: sempre meno utilizzati perché queste grandezze sono definite tramite CSS
<img src=“miacartella/immagine.jpg" alt="testo alternativo" width="100" height="50" />
<img … />
21
Definisce un link, un collegamento che può essere assoluto o relativo. - Link assoluto: il percorso completo con HTTP://www.nomesito.it/...,
perché il link non risiede sul nostro server
<a href="http://www.appuntidigrafica.com/" title="Sito esterno">Il mio sito personale e vecchiotto</a>
- Link relativo: il percorso relativo e interno al progetto, che punta a
pagine che vengono cercate sul server dove risiede il sito, pertanto è sufficiente mettere il percorso (o path) dove risiede la pagina ricercata
<a href="../paginadelmiosito.html" title="Link interno">Pagina del sito</a>
<a href … /> … </a>
22
Se non specifichiamo il parametro TARGET, il link aprirà una pagina sopra quella che stiamo visitando. <a href="../paginadelmiosito.html" title="Link interno">Pagina del sito</a> Se specifichiamo il target e vogliamo che il link apra una nuova finestra del browser, lasciando sotto la nostra, allora dobbiamo aggiungere TARGET="_BLANK"
<a href="http://www.appuntidigrafica.com/" title="Sito esterno target="_blank" >Il mio sito personale e vecchiotto</a>
<a href … /> … </a>
23
Contenitore generico, che con HTML 5 ha perso di importanza. Permette di raggruppare contenuti, senza la pretesa di collegamenti o correlazioni di tipo semantico. Al div possiamo applicare degli stili in linea, molto utili in casi di urgenza! <div class=“left"> <p>Contenuto testuale</p> <img src=“immagine.jpg” /> </div>
<div> … </div>
In questo caso scriviamo lo stile in linea: <div style=“float:left;"> <p>Contenuto testuale</p> <img src=“immagine.jpg” /> </div>
Nel foglio di stile (CSS) sarà dichiarato: .left{float:left;} Ovvero l’aspetto grafico della classe LEFT
Nel foglio di stile (CSS) NON sarà dichiarato alcuno stile per questo specifico div, se non in senso generico e attribuibile a tutti i div del sito
24
I TAG PER I CONTENUTI MULTIMEDIALI
25
Tag utilizzato per inserire video nelle pagine HTML 5. src è la posizione e il nome della sorgente video, funziona allo stesso modo del parametro src del tag <img> id è il nome univoco che si assegna al tag <video id="iltuovideo" src="HTML5Sample.mov"> </video> Può essere parametrizzato, con altezza e larghezza o numero di volte che si desidera far ripetere la produzione (loop), autoplay, controls e preload. <video id="sampleMovie" src="HTML5Sample.mov" preload controls="none" autoplay></video>
Se ho più video, HTML 5 mi permette di annidarli: <video id="sampleMovie" width="640" height="360" preload controls> <source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' /> </video>
<video> … </video>
26
Tag utilizzato per inserire file audio nelle pagine HTML 5. src è la posizione e il nome della sorgente audio <audio src="audio.mp3"> </audio> Anche in questo tag possiamo parametrizzare la riproduzione, la comparsa dei pulsanti di controllo e gestire più file contemporaneamente. <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Il tuo browser non supporta il tag audio. </audio>
<audio> … </audio>
27
UN ESEMPIO DI LISTATO
28
Esempio di listato di una pagina HTML 5
29
Risorse e link
Video Guida HTML 5: http://www.oilproject.org/corso/corso-di-introduzione-html5-5638.html Tutorial e Quiz: http://www.w3schools.com/html/default.asp Guida CSS3: http://www.html.it/guide/guida-css3/ Tutorial per costruire una pagina web: http://tutorialzine.com/2010/02/html5-css3-website-template/ Free HTML Editor: Coffe Cup http://www.coffeecup.com/free-editor/ L’amministratore dovrebbe essere sempre e solo uno!
30
![[HTML, Css] HTML & Css Learning](https://img.pdfslide.tips/doc/110x75/55cf9813550346d0339570eb/html-css-html-css-learning.jpg)
