HTML & MARKUP LANGUAGES 2. Informatica e grafica per il web docente: Gabbiadini Alessandro 1

Transcript

1 HTML & MARKUP LANGUAGES 2 Informatica e grafica per il web docente: Gabbiadini Alessandro 1

2 BODY Qui è racchiuso il contenuto vero e proprio del documento che viene visualizzato dal browser. Il contenuto della pagina verrà strutturato a seconda dei tag utilizzati: Titoli - h1 e Sottotitoli - h2, h3, h4, h5, h6 Testi - p ed elenchi - ul-ol-li Immagini - img Link - a Tabelle - table Blocchi contenitore - div Nuovi html5 - nav-main-header-footer-section-article Informatica e grafica per il web docente: Gabbiadini Alessandro 2

3 ATTRIBUTI Oltre alla definizione del contenuto è possibile definire una serie di attributi a ciascun tag. Sintassi: <tag attributo= valore >contenuto</tag> Alcuni attributi sono specifici per determinati tag (href, src...), altri invece possono essere specificati per qualsiasi tipo di tag (id, class...) es. <a href= miapagina.htm class= blu >Mia pagina</a> es. <p class= blu >Mio paragrafo</p> es. <img src= miaimmagine.jpeg > Informatica e grafica per il web docente: Gabbiadini Alessandro 3

4 TAG <A> : ANCHOR LINK The <a> tag defines a hyperlink, which is used to link from one page to another. (w3schools) Il tag <a> (anchor / link / collegamento) trasforma il documento in un ipertesto: sono il ponte che consente di passare da una pagina all altra. L attributo più importante è href (hypertext reference) che definisce la destinazione del collegamento. Sintassi: <a href= url-di-destinazione >testo visualizzato</a> Informatica e grafica per il web docente: Gabbiadini Alessandro 4

5 TAG <A> / DESTINAZIONE La destinazione di un link può essere:»» un url (che può essere relativa o assoluta) <a href= pagina.html >url relativo</a> <a href= http: / >url assoluto</a>»» un indirizzo mail <a href= mailto:nome@sito.com >nome@sito.com</a>»» un ancora <a href= #ancora >ancora</a> Informatica e grafica per il web docente: Gabbiadini Alessandro 5

6 URL ASSOLUTI / PERCORSI ASSOLUTI Descrivere un percorso assoluto significa indicare per esteso l indirizzo di un certo documento, elencando tutte le directory e sottodirectory che dobbiamo attraversare per raggiungerlo. <a href= http: / >link</a> Informatica e grafica per il web docente: Gabbiadini Alessandro 6

7 URL RELATIVI / PERCORSI RELATIVI Sviluppando un sito si fa spesso riferimento a documenti situati nel sito stesso, per fare questo è possibile usare i percorsi relativi. I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento. <a href= pagina2.html >link</a> Informatica e grafica per il web docente: Gabbiadini Alessandro 7

8 URL RELATIVI / PERCORSI RELATIVI Nel file brochure.html per scrivere un collegamento con url relativa Stesso livello <a href= sitiweb.html >Siti web</a> Livello superiore <a href=../prodotti.html >Prodotti</a> File all interno di una cartella contenuta nel livello superiore <a href=../servizi/consulenza.html >Consulenza</a> Nel file servizi.html scrivere un collegamento contenuto in una cartella di livello inferiore basterà inserire il nome della cartella seguito da uno slash <a href= servizi/consulenza.html >Consulenza</a> <a href= prodotti/sitiweb.html >Siti web</a> Informatica e grafica per il web docente: Gabbiadini Alessandro 8

9 ATTENZIONE AI PERCORSI ASSOLUTI IN LOCALE! Informatica e grafica per il web docente: Gabbiadini Alessandro 9

10 IMPORTANTE: NOMI DEI FILE È consigliabile non lasciare spazi vuoti nei nomi dei file (gli spazi vuoti non sempre vengono interpretati correttamente), meglio ovviare a questa necessità con un trattino basso (cioè _ ) o un trattino alto ( - ). Ad esempio: mio_file.html / mio-file.html Maiuscole e minuscole possono fare la differenza (in ambiente Unix spesso la fanno), quindi controllate il modo in cui avete scritto i file. Non usare lettere accentate visto che possono essere codificate in maniera diversa su piattaforme diverse (una à scritta in ambiente Windows può essere letta come una Ö in ambiente MacOs). Non usare simboli e punteggiatura visto che spesso sono usati per funzioni specifiche nella barra degli indirizzi (lo slash / indica un cambio di una cartella, il? serve a inserire una serie di parametri aggiuntivi ecc.) Informatica e grafica per il web docente: Gabbiadini Alessandro 10

11 ORGANIZZAZIONE DEL SITO»» File homepage: 1) deve chiamarsi index.htm o index.html (tutto minuscolo!) altrimenti, nel momento in cui si carica il sito online, il sito non funziona. 2) deve trovarsi nella cartella root del sito ossia non deve essere contenuto in una sottocartella.»» Sottocartelle che suddividono i contenuti non html (immagini, file da scaricare, pdf, javascript ecc.) eventualmente è possibili creare sottocartelle anche per i file html»» Sottocartella per i file css se esistono più fogli stile css Informatica e grafica per il web docente: Gabbiadini Alessandro 11

12 TAG <IMG> : INSERIAMO LE IMMAGINI Informatica e grafica per il web docente: Gabbiadini Alessandro 12

13 TAG <IMG> : FORMATI IMMAGINE I formati immagine per il web sono:»jpeg» Joint Photographic Experts Group Esempio di immagine WBMP»GIF» Graphics Interchange Format»PNG» (PNG-8 e PNG-24) Portable Network Graphics Esistono inoltre i formati:»wbmp» Wireless Bitmap: formato monocromatico (pixel bianchi e neri) usato da dispositivi wireless (per esempio dispositivi WAP). Esempio di immagine SVG»SVG» Scalable Vector Graphics: formato per immagini vettoriali. Informatica e grafica per il web docente: Gabbiadini Alessandro 13

14 TAG <IMG> : FORMATI IMMAGINE JPEG / ideale per fotografie e immagini complesse con tanti colori e cambi tonali, compressione con perdità: la riduzione delle dimensioni dei file è ottenuta riducendo la qualità dell immagine; non supporta la trasparenza. GIF / ideale per loghi, testi e altre immagini grafiche, compressione senza perdità, ma supporta fino a 256 colori, quindi se l immagine ha più di 256 colori avrò una perdita di qualità, per questo non è adatto per immagini fotografiche con milioni di colori, supporta la trasparenza a 1 bit (quindi un pixel potrà essere o completamente trasparente o completamente opaco) e l animazione. PNG-8 / è l equivalente del formato GIF ma senza animazione. PNG-24 / ideale per qualsiasi tipo di immagine, compressione senza perdità e la qualità dell immagine è molto alta, supporta la trasparenza a 8-bit, la dimesione (peso) del file è piuttosto alta, soprattutto nel caso di immagini fotografiche. Informatica e grafica per il web docente: Gabbiadini Alessandro 14

15 TAG <IMG> : FORMATI IMMAGINE Inutile provare dunque a inserire un file.psd (formato nativo di Photoshop) all interno della vostra pagina HTML: con grande probabilità il browser non caricherà il file (dovete infatti prima convertire il file in uno dei formati precedentemente indicati). È importante ricordare che il codice HTML fornisce delle indicazioni al browser su come visualizzare il testo e le immagini - ed eventualmente i video e i suoni - all interno della pagina: il testo (come abbiamo visto) è scritto direttamente nel file HTML, le immagini invece sono caricate insieme alla pagina. Informatica e grafica per il web docente: Gabbiadini Alessandro 15

16 TAG <IMG> : SINTASSI Sintassi: <img src= logo.gif alt= descrizione /> (xhtml) <img src= logo.gif alt= descrizione > (html5) Informatica e grafica per il web docente: Gabbiadini Alessandro 16

17 LE TABELLE: TAG <TABLE> <TR> <TH> <TD> Ogni tabella è composta da:»un» tag <table> che definisce dove inizia e finisce la tabella»uno» o più tag <tr> TableRules che definiscono le righe della tabella»uno» o più tag <td> TableData all interno di ciascuna riga che definiscono le celle per riga»eventualmente» uno o più tag <th> TableHeader per la prima riga che definiscono le celle-intestazione <table> <tr> <th>intestazione 01</th> <th>intestazione 02</th> </tr> <tr> <td>dato 01</td> <td>dato 02</td> </tr> <tr> <td>dato 01</td> <td>dato 02</td> </tr> </table> Informatica e grafica per il web docente: Gabbiadini Alessandro 17

18 LE TABELLE: GLI ATTRIBUTI COLSPAN E ROWSPAN Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne). In questo caso si utilizza l attributo colspan sul <td>, specificando come valore il numero di celle che devono essere occupate. Sintassi: <td colspan= 3 >contenuto cella</td> Tramite l attributo rowspan (da riferirsi sempre a <td>) è invece possibile creare delle celle che occupino più di una riga. Sintassi: <td rowspan= 3 >contenuto cella</td> Informatica e grafica per il web docente: Gabbiadini Alessandro 18

19 TAG <DIV> : BLOCCO CONTENITORE Il tag <div> descrive un blocco logico, un box contenitore, che ci permette di creare la griglia di impaginazione. Può essere visto come un rettangolo contenitore di contenuti o altre strutture. Vengono usati per suddividere i contenuti di una pagina web e organizzarli nello spazio tramite i css. Sintassi <div> some content here </div> Esempio <div> <h2>titolo</h2> <p>contenuto</p> </div> Il blocco div impone un a capo, ma - a differenza del paragrafo non lascia spazi prima e dopo la sua apertura. Informatica e grafica per il web docente: Gabbiadini Alessandro 19

20 DIv esterno per la pagina DIV per header DIV per il logo DIV per il menu DIV per il content DIV per la left column DIV per la right column DIV per il pre-footer DIV per il footer Informatica e grafica per il web docente: Gabbiadini Alessandro 20

21 ATTRIBUTO ID Ogni elemento HTML può avere associato un attributo id attraverso il quale determinare univocamente un elemento nella pagina. Non ci devono essere due elementi con il medesimo id. Viene utilizzato spesso per differenziare in modo univoco i div che strutturano la pagina. Sintassi <div id= menu > voci di menu qui </div> Informatica e grafica per il web docente: Gabbiadini Alessandro 21

22 TAG <SPAN> : CONTENITORE PER ELEMENTI IN LINEA Per raggruppare un gruppo di elementi in linea (esempio una parte di testo) può essere utile utilizzare il tag <span> per separarli dal resto. Non inserisce nessun a capo. Il tag <span> non aggiunge nessun cambiamento visivo o grafico agli elementi che raggruppa di default. Il tag <span> fornisce un modo per formattare una parte del testo o una parte del documento. Quando non abbiamo un tag a cui fare riferimento, il tg span serve da segnaposto (lo vedremo meglio in seguito) Sintassi <p> </p> The <span attributi>quick Brown Fox</span> Jumps OverThe <span attributi>lazy Dog</span> Informatica e grafica per il web docente: Gabbiadini Alessandro 22

23 ATTRIBUTO CLASS Ogni elemento HTML può avere associato un attributo class con uno o più valori. L attributo class serve per attibuire stili uguali a tutti gli elementi con quella classe. <p class= rosso > Paragrafo con classe rosso </p> <p class= rosso strillo > Paragrafo con classe rosso e classe strillo </p> Informatica e grafica per il web docente: Gabbiadini Alessandro 23

24 ID VS CLASS Ogni elemento nella medesima pagina puo avere uno ed un solo ID associato. Gli elementi possono avere classi multiple associate <div id= content class= classe1 classe2 classe3 > oggetto identificato come content a cui sono associate 3 classi </div> Informatica e grafica per il web docente: Gabbiadini Alessandro 24

25 DOMANDE? Informatica e grafica per il web docente: Gabbiadini Alessandro 25