1D 2025/2026
HTML
GIT
git config --global user.name "Nome Cognome"
git config --global user.email "n.cognome@donboscosandona.it"
Cos'è HTML
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Creare un file
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Elementi e tag
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
git config --global user.name "Nome Cognome" git config --global user.email "n.cognome@donboscosandona.it"
Cos'è HTML
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Creare un file
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Elementi e tag
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Un file HTML deve essere di base rinominato index con estensione html, ovvero index.html
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Trovi il comando equivalente (Go Live) nella barra di stato:
Elementi e tag
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?
Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo <p></p> = paragrafo <div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao <p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario <div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:
<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Per andare a capo in un paragrafo si utilizza il tag solo in apertura <br>. esempio:
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Per mettere in grassetto del testo usa il tag <b></b>, per metterlo in corsivo uso <i></i> e per sottolinearlo uso <u></u>.
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Se premo il link "questo è un link", verrò portato alla pagina www.google.com.
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo