Cl Calendario dl del corso

Transcript

1 Cl Calendario dl del corso 12/02/ Introduzione al mondo WEB Concetti fondamentali e struttura di un sito e delle pagine pg web Gli URL, i link, le immagini I linguaggi HTML e CSS 16/02/ I principi fondamentali del mondo WIKI I vari motori e servizi WIKI Il motore mediawiki Registrazione ad un servizio mediawiki gratuito 1

2 19/02/ Il linguaggio wikitext I comandi fondamentali formattazione del testo, struttura di una pagina, i link 23/02/ Layout Avanzato Template, immagini, categorie, pagine speciali Creazione di un sito di esempio, un catalogo di libri. 26/02/ Utilizzo di un altro servizio web2.0 per la creazione di siti non wiki Registrazione a google site Principi fondamentali Creazione di un semplice sito di esempio. 2

3 Riferimenti Alberto Piotto Sito web del corso (per documentazione ed esercizi) 3

4 Il WEB Nasce nel 1991 al CERN da Tim Berners-Lee Inizialmente progettato per la gestione di documentazione scientifica Successivamente utilizzato per molte altre cose (siti commerciali, pubblicità, siti personali, educational ecc...) Si basa sul concetto di pagine ipertestuali collegate tra loro da link Negli ultimi anni si sta evolvendo verso la filosofia del WEB 2.0 Attualmente va di moda la filosofia che tutti possono creare e pubblicare pagine sul web Conoscere l HTML non è fondamentale, ma necessario per fare qualcosa di più di un commento su facebook o di un post su un forum. 4

5 La prima pagina WEB della storia 5

6 Cosa c è dietro una pagina WEB Le pagine web sono scritte nel linguaggio HTML che definisce i contenuti informativi e strutturali del documento. Solitamente per ogni pagina c è un file HTML L aspetto grafico è definito da uno o più file scritti in linguaggio CSS che stabiliscono che aspetto devono avere i contenuti HTML (il CSS può anche essere integrato nell HTML per semplicità). Immagini, filmati, animazioni, suoni ecc sono tutti componenti separati e tenuti insieme dal file HTML Ognuno di questi componenti ha un proprio URL che lo identifica in maniera univoca nella rete. 6

7 Cosa c è dietro una pagina web 7

8 Il codice HTML 8

9 I fogli CSS 9

10 Immagini, animazioni e altri componenti 10

11 HTML Definisce i contenuti e la struttura di questi. E composto dal desto e dai TAG, che non vengono mostrati dal browser ma interpretati, sono cioè dei comandi dati al browser <html> <head> <title>pagina di prova</title> </head> <body> <h1>pagina di esempio</h1> <p>questa è una pagina di prova per spiegare come è fatto l html </p> </body> </html> 11

12 Esempio Esempio 1 12

13 HTML E scritto in plain text ascii, quindi creabile e modificabile con un qualsiasi editor e non necessita di programmi specifici Contiene testo e TAG I tag si riconoscono perché sono racchiusi dalle parentesi < e > Ha una struttura annidata (tag che contengono altri tag) La formattazione del codice è libera, sono i tag a regolare la visualizzazione, quindi spazi, a capo, tabulazioni nel codice sono ininfluenti. Anche se non è sempre così, l idea è che i tag (e in generale il codice HTML) non dovrebbero controllare direttamente l aspetto grafico della pagina, ma solo quello strutturale. 13

14 TAG <nometag parametro1= valore parametro2= valore > testo <tag2> altro testo </tag2> </nometag> Ogni tag ha il relativo tag di chiusura e l ordine di chiusura è inverso rispetto quello di apertura, sono cioè annidati. Se il tag non ha contenuto va comunque chiuso, in caso la chiusura può essere integrata nel tag di apertura <nometag parametro1= valore parametro2= valore /> 14

15 Struttura base di una pagina <html> <head> <title>titolo</title> </head> <body> <h1>titolo grande</h1> <p>paragrafo</p> <h2>sottotitolo</h2> <p>paragrafo di testo</p> <ul> <li>lista 1</li> <li>lista 2</li> </ul> </body> </html> Intestazione, non visibile contiene metadati che descrivono la pagina Corpo, la parte visibile della pagina Esempio di una lista 15

16 Struttura base di una pagina Esempio 2 16

17 I tag di struttura I titoli sono contenuti nei tag di titolo e sono suddivisi per livelli (<h1>, <h2>, <h3>, <h4> ) I singoli paragrafi di testo sono contenuti in un tag <p> Il termine di un paragrafo causa l interruzione della riga, una riga vuota e l inizio del nuovo paragrafo. Se si va a capo nel codice questo non influisce nella visualizzazione, se si vuole andare a capo senza però creare un nuovo paragrafo si deve usare il tag <br /> [ ] <p>anche se nel codice si va a capo nella visualizzazione viene ignorato</p> <p>per andare a capo senza iniziare un nuovo paragrafo <br /> Utilizzare il tag br </p> [ ] 17

18 I tag di struttura Esempio 3 18

19 I tag del testo Il testo sta all interno di titoli, paragrafi, liste e tabelle All interno del testo si possono utilizzare dei tag per rafforzare o enfatizzare alcune parti [ ] [ ] <h1>titolo grande</h1> <p> Questa è la parte testo. Alcune parti possono essere <strong>molto importanti</strong> quindi si devono rafforzare. Per fare questo si usano <em>tag specifici</em> </p> 19

20 I tag del testo Esempio 4 20

21 I Rientri Quando si vuole rientrare un blocco di testo si usa il tag <blockquote>. Questi tag possono essere anche annidati, per fare rientri a più livelli. [ ] [ ] <h1>titolo grande</h1> <p>testo normale</p> <blockquote> Citazione </blockquote> <p>testo normale</p> 21

22 I Rientri Esempio 5 22

23 Le liste Quando si fa una lista va dichiarata con il tag OL se è numerata, UL se è puntata. Gli elementi della lista vanno dichiarati con il tag LI Una lista può contenere a sua volta una lista di secondo livello [ ] <h1>esempio di lista numerata</h1> <ol> <li>primo elemento</li> <li>secondo elemento</li> </ol> <h2>esempio di lista puntata</h2> <ul> <li>primo elemento</li> <li>secondo elemento</li> </ul> [ ] 23

24 Le liste Esempio 6 24

25 Le tabelle Nascono per visualizzare dati tabellari Successivamente essendo l unico modo per creare colonne e aree sullo schermo sono diventate l elemento base per creare il layout delle pagine Attualmente si raccomanda di usare altri tag (div) ma essendo questi molto complessi e non ancora del tutto standard l uso delle tabelle è ancora attuale. Le tabelle sono create con 3 tag principali <table> Tabella <tr> Riga <td> colonna 25

26 Le tabelle [ ] <table border= 1 > <tr> <td>cella 1-1</td> <td>cella 2-1</td> </tr> <tr> <td>cella 1-2</td> <td>cella 2-2</td> </tr> <table> [ ] 26

27 Le tabelle Esempio 7 27

28 Le larghezze delle tabelle e delle celle La tabella nel suo insieme e le singole celle possono avere una larghezza dichiarata utilizzando il parametro width Il valore può essere un numero che rappresenta la dimensione effettiva in pixel o una percentuale che rappresenta la larghezza in rapporto alla larghezza della pagina. Questo parametro può essere messo nel tag table o td Non è bene mischiare definizioni in % con definizioni in pixel Se si definisce la larghezza della stessa colonna in più tag td verrà preso in considerazione il valore più grande. Per evitare comportamenti indefiniti è bene che la somma delle colonne dia 100% o il numero di pixel della tabella 28

29 Le larghezze delle tabelle e delle celle Definizione in percentuale [ ] <table border= 1 width= 100% > <tr> <td width= 25% >Cella 1-1</td> <td width= 75% >Cella 2-1</td> </tr> <tr> <td>cella 1-2</td> <td>cella 2-2</td> </tr> <table> [ ] 29

30 Le larghezze delle tabelle e delle celle Definizione in percentuale Esempio 8 30

31 Le larghezze delle tabelle e delle celle Definizione in pixel [ ] <table border= 1 width= 300 > <tr> <td width= 200 >Cella 1-1</td> <td width= 100 >Cella 2-1</td> </tr> <tr> <td>cella 1-2</td> <td>cella 2-2</td> </tr> <table> [ ] 31

32 Le larghezze delle tabelle e delle celle Definizione in pixel Esempio 9 32

33 Strutture complesse con le tabelle E possibile unire delle celle sia in orizzontale che in verticale. L unione viene vista come una cella che si estende sopra le altre, e si imposta con i parametri rowspan (per saltare righe) e colspan (per saltare colonne). Il valore indica il numero totale t di celle su cui la singola casella si estende, quindi ad esempio rowspan= 1 è come se non ci fosse. Quando si usano questi parametri bisogna ricordarsi di omettere le celle che sono state unite per fa tornare i conti. 33

34 Strutture complesse con le tabelle Questa cella ha rowspan= 3 Questa cella ha colspan= 2 uno due tre quattro cinque sei 34

35 Strutture complesse con le tabelle Risultato dell unione uno due tre quattro cinque sei 35

36 Strutture complesse con le tabelle <table border= 1 width= 100% > <tr> <td rowspan= 3 >uno</td> / <td>due</td> <td>tre</td> </tr> <tr>  <td colspan= 2 >quattro</td> </tr> <tr>   <td>cinque</td> <td>sei</td> </tr> <table> 36

37 Strutture complesse con le tabelle Esempio 10 37

38 Link ad altre pagine Per rendere una porzione di testo un link, ovvero cliccabile per accedere ad un altra pagina il testo va racchiuso tra tag <a>. Per definire il link di destinazione utilizzare il parametro href. Per evitare errori inserire sempre il link nel formato completo (incluso ) [ ] <p>esempio di link, <a href= > Università ca Foscari di venezia</a> cliccando si va alla home page di </p> [ ] 38

39 Link ad altre pagine Esempio 11 39