Corso laboratorio multimediale, classi prime, istituto salesiano San Zeno, cfp grafica e comunicazione

1. HTML
corso base
Concetti fondamentali
Matteo Ziviani - scuolagrafica.sanzeno.org
Il linguaggio descrittivo per il Web
*
Laboratorio Multimediale
Classi prime
PRIMA PARTE

2. La tecnologia utilizzata
I siti web sono composti da tre elementi
fondamentali
• Client
• Server
• Network
Gli standard per il web sono regolati dal World Wide Web Consortium (W3C) che definiscono le regole
base per le tecnologie, le reti e i relativi protocolli.

3. Definizione di sito
Un sito web o sito Internet, è un insieme di pagine web
correlate, ovvero una struttura ipertestuale di documenti
che risiede su un server web.
index.html
chi-sono.html
contatti.html
news.html
prodotti.html
sito

4. Struttura tecnica
di una pagina web (client side)
• La struttura HTML è la base della pagina
web e serve per descrivere gli elementi (es.
se noi utilizziamo il tag <h1> il contenuto
verrà descritto come titolo principale)
• I CSS servono per definire come verrà
presentato l’html (tipo di font, colore,
posizione ecc..)
• Il JAVASCRIPT serve per inserire
interattività tra utente e html/css
• L’HTML è la struttura, non deve essere
complessa e deve avere senso anche senza
il rendering dei css o javascript
• I CSS e i JAVASCRIPT è consigliato tenerli
in file separati .css o .js
• Separare sempre la presentazione dalla
struttura
immagini
audio/video
ecc...

5. Markup Languages
• Il fondamento di ogni pagina web è il markup
che nel caso del web è HTML.
• Un documento HTML è un file di testo
• Per visualizzare le pagine web si utilizza un
software chiamato Browser

6. Il Browser
• Il programma usato per navigare e visualizzare le
pagine web si chiama BROWSER
• Svolge principalmente due compiti:
• scarica i vari file che si trovano su un
computer remoto (il server) e che fanno
riferimento a un certo indirizzo
• legge i documenti scritti in html e a seconda delle
indicazioni contenute le renderizza

7. L’HTML Hypertext Markup
Language
• È il linguaggio di descrizione utilizzato per le pagine web
• Gli elementi HTML descrivono cos’è quella determinata
informazioni, non come verrà visualizzata e/o stampata.
• I contenuti di un documento, siano essi testi, immagini, suoni,
animazioni o quant’altro, sono formattati attraverso l’ausilio di
marcatori o tag. (tag=munire di un etichetta)
• Con l’HTML si definisce solo la struttura e non la grafica

8. Esempio di HTML come
struttura

9. Esempio di HTML come
struttura
Pagina identica senza
la grafica CSS e solo la
struttura HTML

10. Estensioni dei File
.html
Il nome del file deve comprendere come estensione (elemento finale del nome)
la stringa .html (attenzione al punto)
dove-siamo.html

11. Grammatica dei TAG
• All’interno di ogni pagina è presente una serie di marcatori (TAG) a cui viene affidata la
visualizzazione e che hanno differenti nomi a seconda del loro significato (semantica).
<tag>contenuto del tag </tag>

12. Grammatica dei TAG
• All’interno di ogni pagina è presente una serie di marcatori (TAG) a cui viene affidata la
visualizzazione e che hanno differenti nomi a seconda del loro significato (semantica).
<tag>contenuto del tag </tag>apertura
/ inizio chiusura
/ fine
Esempio (h1 = titolo)
<h1>contenuto del tag </h1>il titolo inizia
da qui Il titolo
finisce qui
contenuto del tag

13. Grammatica dei TAG
• Alcuni tag non hanno bisogno di una chiusura
TAG ELEMENTO
non è obbligatoria la chiusura
<tag />
I tag scritti in questa modalità sono: link, meta, img, hr, br

14. Grammatica dei TAG #2
• In alcuni elementi è possibile inserire degli attributi che servono per descrivere e
caratterizzare il TAG. Gli attributi vanno inseriti all’interno del tag di apertura e sono seguiti
da uguale (<TAG attributo=“value” >). Il valore dell’attributo deve essere tra virgolette “”.
<tag attributo=“valore”>contenuto del tag </tag>
<tag attributo=“valore” />
esempio con più di un attributo
<tag attributo=“valore” attributo=”valore” ecc...>contenuto del tag </tag>

15. Esempio
<img src=“logo-nike.gif” alt=”logo nike” />
<h1 class=“testo-rosso” > </h1>
tag attributo attributovalore valore
tag
inizio
tag
fine
attributo valore

16. ESERCIZI SULLA GRAMMATICA
• Scrivi correttamente i seguenti tag con i relativi attributi
Tag Chiusura Attributi Valore
1 h1 si
2 p si style color:red;
3 img no width
height
300px
200px
4 br no
5 meta no name
content
robots
index
6 strong si id testo-colorato
7 em si class enfasi

17. Nidificazione dei Tag
• I Tag possono essere annidati l'uno dentro l'altro.
• Molto importante è l’ordine di apertura e chiusura dei tag.
RICORDA LE PARENTESI DELLE ESPRESSIONI DI MATEMATICA
errato
<tag> testo <tag2>testo </tag></tag2>
corretto
<tag> testo <tag2>testo </tag2></tag>

18. Nidificazione dei Tag
<tag>
<tag2>contenuto del tag</tag2>
<tag3>contenuto del tag</tag3>
</tag>

19. Semantica
RICORDA
I tag aggiungono un significato a quello che
contengono
Scegli sempre il tag corretto in funzione del contesto e del significato che vuoi
dare al contenuto
<h1> Esercizio 1 esempio </h1>
“Esercizio 1 esempio” marcato con <h1> prende il
significato di titolo principale della pagina
H1 = Titolo principale

20. La struttura di una pagina
HTML
• Per rendere un documento valido bisogna inserire prima del tag di apertura
la dichiarazione del DOCTYPE per definire il tipo di documento
<!DOCTYPE html>

21. • Successivamente si utilizza il tag <html>
<!DOCTYPE html>
<html>
</html>
La struttura di una pagina
HTML

22. La struttura di una pagina
HTML
• All’interno dell’html la prima sezione è quella di intestazione. La HEAD
contiene informazioni non visibili dagli utenti, ma che definiscono il modo in
cui il documento deve essere letto e interpretato
<!DOCTYPE html>
<html>
<head>
</head>
</html>

23. La struttura di una pagina
HTML
• All’interno dell’html dopo la <head> deve essere inserito il corpo della
pagina, BODY che racchiude il contenuto vero e proprio del documento
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

24. Head
I tag dell’intestazione
Matteo Ziviani – scuolagraficasanzeno.com

25. L’intestazione
• All’interno dell’intestazione è obbligatorio inserire il tag TITLE, che
identifica il titolo della pagina web)
• In questo titolo è necessario inserire parole chiave per l’indicizzazione del
motore di ricerca e inoltre bisogna inserire nel titolo l’effettivo contenuto
della pagina
<head>
<title>titolo della pagina</title>
</head>

26. Il meta tag per i caratteri
• Per poter interpretare correttamente i caratteri è necessario specificare il
meta con la codifica dei caratteri specifica
<meta charset=”mappacaratteri” />
La mappa caratteri più utilizzata che comprende lettere accentate e caratteri
speciali è la UTF-8
<meta charset=”utf-8” />

27. I meta tag
• I meta tag hanno valenza minima
• alcuni sono specifici per i motori di ricerca, altri per attivare alcune opzioni
dei browser o per i dispositivi mobile.
• La struttura dei meta tag è:
<meta name="TYPE" content="Contenuto" />
I meta tag dedicati ai motori di ricerca sono due (TYPE):
• DESCRIPTION: Questo meta tag permette di inserire una descrizione dei
contenuti della pagina web in cui esso appare.
• ROBOTS: i valori di content possono essere INDEX, FOLLOW, NOINDEX,
NOFOLLOW” sono consigli per i motori di ricerca sul come procedere per
l’indicizzazione.
Il meta tag ROBOTS è un utile strumento per controllare i comportamenti degli spider, ma non è l'unico. Un altro mezzo
è l’utilizzo del file robots.txt

28. Meta description
<title>Case a Verona - idealista</title>
<meta name=”description” content=”1.391 case a Verona...” />

29. Stili CSS
Per poter collegare uno stile css esterno nella <head> è necessario utilizzare il
tag <link>
<link rel=”stylesheet” href=”percorso” media=”screen” />
Nell’attributo href va specificato il percorso di dove si trova il file css mentre
nell’attributo media si specifica per quale media deve essere applicato lo stile
(screen, print, all ecc…)
Se si vuole implementare uno stile internamente si utilizza, sempre nella <head> il
tag <style>
• <style > </style>

30. Body
I tag del corpo
Matteo Ziviani – scuolagraficasanzeno.com

31. Rappresentazione dei tag
• Tutti i tag che si vanno ad inserire sono rappresentati come dei rettangoli (box)
indipendentemente che questi siano paragrafi, titoli, tabelle, immagini ecc…
BOX RETTANGOLARI

32. Rappresentazione dei tag

33. Classificazione dei tag
• Dall’immagine precedente si può vedere che i box non sono tutti uguali, infatti questi
possono essere distinti in tag BLOCCO o INLINE (in linea)
Gli elementi blocco sono box che
possono contenere altri elementi, sia di
tipo blocco che di tipo inline. Quando un
elemento blocco è inserito nel documento
viene automaticamente creata una nuova
riga nel flusso del documento.
Gli elementi inline non possono contenere
elementi blocco, ma solo altri elementi
inline . Quando sono inseriti nel documento
non danno origine ad una nuova riga.

34. Tag di testo
34
tag esempio definizione
h1, h2, h3, h4, h5, h6 <h1>titolo</h1> Titoli, i numeri definiscono una
importanza ed una gerarchia
(tag blocco)
p <p>testo</p> testo di paragrafo (tag blocco)
br <br /> a capo forzato
strong <p>
<strong>testo</strong>
</p>
bold, enfasi (tag inline)
em <p>
<em>testo</em>
</p>
italic, enfasi (tag inline)
Quelli presentati sono una sintesi.
Altri tag si possono trovare sul pdf “html cheatsheet”

35. Esercizi
Svolgere i seguenti esercizi
1.1
1.2
Matteo Ziviani – scuolagrafica.sanzeno.org

36. Tag di immagine, link e lista
36
tag attributi esempio definizione
img src, alt <img src=”img.jpg” alt=”altalena” /> immagine (tag inline)
a href, target <a href=”index.html”>Home</a> collegamento interno o esterno
(tag inline)
ol, ul <ol> ... </ol>
<ul> ... </ul>
Definiscono il tipo di lista,
ordinata o non ordinata
(tag blocco)
li <ol>
<li>Home</li>
</ol>
elemento della lista
(tag blocco)
Quelli presentati sono una sintesi.
Altri tag si possono trovare sul pdf “html cheatsheet”

37. Immagini
In html è possibile inserire pochi formati immagine. I più comuni sono JPG, PNG
(8 e 24 bit) e GIF.
Formato Trasparenza Semi-trasparenza Animazione Colori
GIF Si No Si 256 (8bit)
PNG-8 Si No No 256 (8bit)
PNG-24 Si Si No ≈ 16 milioni (24 bit)
JPEG No No No ≈ 16 milioni (24 bit)

38. Come scegliere il formato

39. Risoluzione errori - immagini
L’immagine non si visualizza?
1. Controlla se il formato immagine è corretto
2. Controlla il nome del file (togliere gli spazi e i caratteri speciali,
verificare che sia presente anche l’estensione)
3. Controlla il tag immagine se è scritto correttamente e controlla
l’attributo src (spesso si scrive scr che è errato)
4. Verificare se il file si trova nella cartella giusta e se si è scritto il
percorso correttamente (vedi slide precedenti)

40. Percorsi (Path)
• Per poter collegare i vari media correttamente (css, immagini, video, audio
ecc…) è molto importante definire correttamente il percorso del file.
• Quando si scrive un percorso bisogna sempre tenere in considerazione la
posizione del file di origine
cartella sito
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare l’immagine
“logo-nike.gif” nel file
“index.html”
Origine index.html
File da collegare logo-nike.gif
Percorso (che strada
devo fare partendo
dall’origine per arrivare
al file da collegare?)

41. Percorsi (Path)
• Per poter collegare i vari media correttamente (css, immagini, video, audio
ecc…) è molto importante definire correttamente il percorso del file.
• Quando si scrive un percorso bisogna sempre tenere in considerazione la
posizione del file di origine
cartella sito
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare l’immagine
“logo-nike.gif” nel file
“index.html”
Origine index.html
File da collegare logo-nike.gif
Percorso (che strada
devo fare partendo
dall’origine per arrivare
al file da collegare?)
images/logo-nike.gif

42. Percorsi (Path)
• Il concetto di path può essere anche espresso con il diagramma di Eulero-Venn
se al file index.html dobbiamo collegare il file logo-nike.gif dentro la cartella images
la path sarà: images/logo-nike.gif
index.html
cartella sito
CSS images
grafica.css logo-nike.gif

43. Percorsi (Path)
PATH
images/logo-nike.gif

44. Percorsi (Path) #2
cartella sito
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare la pagina
“index.html” alla pagina
“dove-siamo.html”
Origine index.html
File da collegare dove-siamo.html
Percorso (che strada
devo fare partendo
dall’origine per arrivare
al file da collegare?)

45. Percorsi (Path) #2
cartella sito
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare la pagina
“index.html” alla pagina
“dove-siamo.html”
Origine index.html
File da collegare dove-siamo.html
Percorso (che strada
devo fare partendo
dall’origine per arrivare
al file da collegare?)
dove-siamo.html

46. Percorsi (Path) #2
index.html
cartella sito
CSS images
grafica.css logo-nike.gif
dove-siamo.html

47. Percorsi (Path) #3
cartella sito
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare il file
“grafica.css” alla pagina
“index.html”
Origine index.html
File da collegare grafica.css
Percorso (che strada
devo fare partendo
dall’origine per arrivare
al file da collegare?)

48. Percorsi (Path) #3
cartella sito
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare il file
“grafica.css” alla pagina
“index.html”
Origine index.html
File da collegare grafica.css
Percorso (che strada
devo fare partendo
dall’origine per arrivare
al file da collegare?)
css/grafica.css

49. Percorsi (Path) #3
index.html
cartella sito
CSS images
grafica.css logo-nike.gif
dove-siamo.html

50. Percorsi (Path) #4
cartella sito
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare l’immagine
“logo-nike.gif” al file
“grafica.css”
Origine grafica.css
File da collegare logo-nike.gif
Percorso (che strada
devo fare partendo
dall’origine per arrivare
al file da collegare?)

51. Percorsi (Path) #4
cartella sito
index.html
css
dove-siamo.html
grafica.css
images
logo-nike.gif
Descrizione Collegare l’immagine
“logo-nike.gif” al file
“grafica.css”
Origine grafica.css
File da collegare logo-nike.gif
Percorso (che strada
devo fare partendo
dall’origine per arrivare
al file da collegare?)
../images/logo-nike.gif

52. Percorsi (Path) #3
index.html
cartella sito
CSS images
grafica.css logo-nike.gif
dove-siamo.html

53. Esercizio Percorsi Inversi
Definisci la struttura delle cartelle dei seguenti percorsi
1. www.google.com/images/albero.jpg
2. images.facebook.com/imm/5/matteo.png
3. www.youtube.com/video/playlist/lezione1.mp4

54. Soluzione 1
www.google.com
albero.jpg
1. www.google.com/images/albero.jpg
images

55. Soluzione 2
images.facebook.com
matteo.png
2. images.facebook.com/imm/5/matteo.png
imm
5

56. Soluzione 3
www.youtube.com
lezione1.mp4
3. www.youtube.com/video/playlist/lezione1.mp4
video
playlist

57. Esercizio
Svolgere il seguente esercizio
1.3
Matteo Ziviani – scuolagrafica.sanzeno.org

58. Tag tabella
58
tag attributi esempio definizione
table <table>... </table> definisce la tabella
(tag blocco)
tr <table>
<tr>...</tr>
</table>
riga di una tabella
td, th colspan,
rowspan
<table>
<tr>
<th>cella</th>
<td>cella</td>
</tr>
</table>
td: cella di una tabella
th: cella di titolazione
caption <table>
<caption>didascalia</caption>
</table>
didascalia della tabella
Quelli presentati sono una sintesi.
Altri tag si possono trovare sul pdf “html cheatsheet”

59. Esempio tabella
Proviamo a costruire questa tabella

60. Esempio tabella #1
1. Definire la tabella
con il tag <table>
<table>
</table>

61. Esempio tabella #2
2. Dichiarare da quante
righe è composta <tr>
<table>
<tr>
</tr>
<tr>
</tr>
</table>

62. Esempio tabella #2
3. Dichiarare il numero
di celle <td> per ogni riga
<table>
<tr>
<td> </td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td>
</tr>
</table>

63. Esercizio
Converti la seguente tabella in html utilizzando i tag fondamentali
<table> <tr> <td>

64. Esercizio #2
Analizzando il codice html disegna la tabella descritta
1. <table>
2. <tr>
3. <td> c1 </td> <td> c2</td> <td> c3</td>
4. </tr>
5. <tr>
6. <td> c4 </td> <td> c5</td> <td> c6</td>
7. </tr>
8. <tr>
9. <td> c7 </td> <td> c8</td> <td> c9</td>
10. </tr>
11. </table>

65. Esercizio #2 soluzione
Analizzando il codice html disegna la tabella descritta
1. <table>
2. <tr>
3. <td> c1 </td> <td> c2</td> <td> c3</td>
4. </tr>
5. <tr>
6. <td> c4 </td> <td> c5</td> <td> c6</td>
7. </tr>
8. <tr>
8. <td> c7 </td> <td> c8</td> <td> c9</td>
10. </tr>
11. </table>

66. Esercizio #2 soluzione
Analizzando il codice html disegna la tabella descritta
1. <table>
2. <tr>
3. <td> c1 </td> <td> c2</td> <td> c3</td>
4. </tr>
5. <tr>
6. <td> c4 </td> <td> c5</td> <td> c6</td>
7. </tr>
8. <tr>
8. <td> c7 </td> <td> c8</td> <td> c9</td>
10. </tr>
11. </table>

67. Esercizio #2 soluzione
Analizzando il codice html disegna la tabella descritta
1. <table>
2. <tr>
3. <td> c1 </td> <td> c2</td> <td> c3</td>
4. </tr>
5. <tr>
6. <td> c4 </td> <td> c5</td> <td> c6</td>
7. </tr>
8. <tr>
8. <td> c7 </td> <td> c8</td> <td> c9</td>
10. </tr>
11. </table>

68. Nominare i tag
Esistono attributi comuni a tutti i tag.
Uno di questi è id che permette di mettere un nome ad un tag
<TAG id=“nome”>contenuto del tag </TAG>
Il nome permette una miglior comprensione del codice ma soprattutto permette di poter
associare correttamente gli stili CSS.
REGOLE
1. il primo carattere non può essere un numero
2. non deve contenere spazi
3. non deve contenere lettere accentate, caratteri speciali
4. deve essere univoco all’interno del documento html

69. Esercizio
Svolgere il seguente esercizio
1.4
Matteo Ziviani – scuolagrafica.sanzeno.org

70. Matteo Ziviani – scuolagrafica.sanzeno.org
Corsi per adulti in ambito
grafico e web
m.ziviani@sanzeno.org
fcs.sanzeno.org
Alcuni corsi
Html e CSS base/avanzato
Wordpress base/avanzato
Javascript e jQuery
SASS
Bootstrap
ecc...