Programmazione Web 1

correzione serie 1
KARIM MOUSSALLI – SCUOLA SPECIALIZZATA SUPERIORE D’ARTE APPLICATA
2022 - 2023
COSA È HTML ➢ Hyper Text Mark-up Language
➢ È un linguaggio di mark-up (marcatori) che
utilizza dei tags per strutturare ed organizzare la
visualizzazione dei contenuti ipertestuali sullo
schermo del browser
Linguaggi per ➢ HTML
sviluppare ➢
➢
Utilizzato per dare una struttura ad un sito web
Dice al browser cosa mostrare
una pagina ➢ CSS
web? ➢
➢
Cascading Style Sheets
Utilizzato per dare uno stile alla struttura HTML
HTML
➢ Rende un sito web professionale
CSS
➢ Dice al browser come mostrare
JavaScript
➢ JavaScript
➢ Utilizzato per aggiungere interattività e
funzionalità tra un utente ed una pagina web
Struttura ➢ Browser
➢ È il programma utilizzato per navigare nella

della rete ➢
rete
Inserendo l’URL nella barra degli indirizzi,
invierà una richiesta della pagina html alla

Internet ➢ Host
rete

Browser & Host & Router

➢ È un computer sparso all’interno della rete
che ospita la pagina html richiesta dal
browser
➢ Router
➢ Sono una serie di computer collegati tra di loro
➢ Instradano le richieste avanti ed indietro dal
browser verso l’host
Elemento ➢ Sono dei tags che hanno un
contenuto
contenitore ➢ Questo contenuto può essere di tipo testuale o
altri elementi annidati.
<tag>contenuto</tag>
➢ La sintassi corretta di un elemento contenitore
è la seguente:
<tag di apertura>contenuto</tag di chiusura>
➢ Ad esempio:
<p>Questo è un paragrafo</p>
<b>Scritta in grassetto</b>
<u>Scritta sottolineata</u>
Elemento ➢ Sono dei tags che non hanno
un contenuto
vuoto ➢ La sintassi corretta di un elemento vuoto è la
seguente:
<tag />
<nome del tag />
➢ Ad esempio:
<hr />
<img src="logo.png" />
Elementi ➢ Sono degli elementi che stanno
all’interno di altri elementi
annidati contenitori
➢ Ad esempio:
<p><b>grassetto</b><u>sottolineato</u></p>
 Correggi (I)
<p>Questo è un esempio di <b>paragrafo</b><p/>

La sintassi corretta del tag di chiusura è </p>

 Correggi (II)
<p>Mi piace andare al mare, ci sono tanti <u>pesci</u>

Il tag <p> è un elemento contenitore

Un elemento contenitore è composto da un tag di
apertura, un contenuto ed un tag di chiusura
 Correggi (III)
<p>Quando vado in <b>vacanza<u> sono </b>contento</u></p>

Il tag <b> ed il tag <u> sono annidati all’interno del tag <p>
Gli elementi vengono annidati con ordine
Il tag aperto più di recente è sempre il tag successivo a
chiudere
Nel nostro esercizio il tag di chiusura </b> appare dopo il
tag di apertura <u>
 Correggi (IV)
<p>Sto imparando il linguaggio html</p>.

Tutti i testi che stanno al di fuori dei tags (in questo caso il
punto sta fuori dal tag <p>) verranno visualizzati come non
parte del elemento.
Se proviamo a scrivere questa linea di codice in un file
html, notiamo che il punto si troverà fuori dal paragrafo, su
una nuova linea.
 Correggi (V)
<p>Questo<b>esercizio<b><u>è</u><b>facile</b>!</p>

1) La sintassi corretta per un tag di chiusura è </b>

2) Mancano gli spazi tra le parole
Nel caso in cui inseriamo questo codice in un file html,
avremo tutto appiccicato come se fosse una parola
con caratteri sottolineati ed in grassetto:
Questoesercizioèfacile!
 Correggi (VI)
<p>Il tag seguente è una linea orizzontale:</p></hr>

La sintassi corretta per un elemento vuoto è la seguente:

<hr />
 Correggi (VII)
<p>Vuoi visitare google? <a href=http://www.google.com></a></p>

1) Mancano le virgolette (o apici) attorno al valore

dell’attributo di nome href
2) Manca il contenuto del tag <a>
Se dovessimo inserire un elemento contenitore, senza
un contenuto, il browser non mostrerà nulla.
In questo caso il risultato sarebbe:
Vuoi visitare google?
 Correggi (VIII)
<hr width=50% />
Mancano le virgolette (o apici) attorno al valore
dell’attributo di nome width
Sintassi ➢ La sintassi corretta di un
attributo è:
corretta nome_attributo="valore_attributo"
➢ Gli attributi vengono inseriti
attributo di all’interno del tag di apertura di un
elemento
un tag ➢ Il nome dell’attributo viene
separato dal valore dell’attributo
tramite il carattere =
➢ Il valore dell’attributo si trova
sempre tra virgolette o apici
Esercizio 3A
Esercizio 3A I. La struttura ad albero ha una
cartella Root di nome sito.
Questa cartella contiene due
file html ed una immagine
II. logo.png
III. contatti.html
IV. /home.html
V. /logo.png
Esercizio 3B I. La struttura ad albero ha una
cartella Root di nome sito.
Questa cartella contiene due
file html ed una cartella di
nome immagini.
La cartella immagini a sua
volta contiene un file png di
nome logo
Esercizio 3B II. immagini/logo.png
III. immagini/logo.png
IV. /immagini/logo.png
Esercizio 3C
Esercizio 3C

I. contatti.html
II. media/immagini/logo.png
III. media/immagini/img_home.png
IV. media/pagine/news.html
V. media/video/video_contatti.mpeg
Esercizio 3C

VI. ../immagini/logo.png
VII. ../video/video_news.mpeg
VIII. ../../contatti.html
IX. /media/pagine/news.html
X. /media/video/video_news.mpeg