1. L’HTML e gli strumenti di editing: Notepad++ e i browser

Esercizi

  1. Verifica di avere a disposizione Notepad++ nel tuo computer, se sei a scuola, o scaricalo e installalo, se sei a casa.
  2. Verifica di visualizzare le estensioni dei file nel computer in cui lavori. Se non le vedi modifica le impostazioni di windows in modo da visualizzarle.
  3. Crea un nuovo file di testo in una tua cartella di esercizi. Rinominalo “prova1mia.htm”.  Aprilo con Notepadd++ e scrivici “primo testo html”. Apri il file con un qualsiasi browser. Modifica il file inserendoci il testo “prima modifica” , salvalo  e ricaricalo nel browser.

2. I TAG HTML e l’indentazione : grassetto (B), sottolineato (U) e inclinato (I)

Esercizio

Crea una nuova pagina chiamandola tag.htm. Aprila con notepad++ e scrivici il testo “Nel mezzo del cammin di nostra vita”. Carica nel browser. Metti in grassetto la parola “cammmin” e in inclinato la parola “vita”. Infine sottolinea tutta la frase indentando il codice.
Ricarica la pagina per verificare le modifiche.

3. Andare  a capo: BR, P e la chiusura dei tag autoconclusivi

Esercizi

In un nuovo file html inserisci il seguente testo rispettando gli a capo  e utilizando  solo il tag BR:

Un due tre
quattro cinque sei

un saltino e sono
sulle gambe di costei.

4. La struttura di una pagina HTML: i tag HTML, HEAD, BODY E TITLE


Esercizi

In un nuovo file html inserisci la struttura completa di una pagina vuota. Inserisci nel corpo di pagina il testo di una canzone che ti piace a tua scelta, inserendo tutti gli a capo opportuni. Dai alla pagina il titolo (title) della canzone.

5. I titoli da H1 ad  H6

Esercizi

In un nuovo file titoli.html inserisci la struttura completa di una pagina vuota.
Inserisci nel corpo di pagina un testo a tua scelta, dando a parte del testo la formattazione “titolo”, (almeno da H1 ad H4).

 

6. Elenchi puntati e numerati; OL, UL e LI


Esercizi
Crea una nuova pagina “elenchi.htm”.
Inserisci la struttura vuota ma completa della pagina e il titolo di pagina (title) “Elenchi”.
Inserisci il codice html per i due seguenti elenchi:

  • Tiramisù
  • Crostata alle mele
  • Pan della nonna
  1. Ferrari
  2. Ford
  3. Opel
  4. Fiat

7. Inserire e allineare un’immagine: IMG SRC e ALIGN. Gli indirizzi delle immagini


Esercizi
Scarica un’immagine a tuo piacere da internet. Inseriscila in un file html posizionandola nella stessa cartella della pagine html.  Sposta l’immagine nella sottocartella “foto” e correggi la pagina html perchè carichi ancora correttamente l’immagine. Che valore dovresti usare per l’attributo src  se volessi utilizzare proprio l’immagine che si trova nel sito da cui l’hai presa, senza scaricarla?

8. Linee orizzontali e importanza di larghezza e altezza degli oggetti nelle pagine web.

Esercizi
Crea una nuova pagina “dimensioni.html”.
Inserisci il codice HTML per inserire una linea orizzontale larga il 50% della pagina, seguita da un’immagine a tua scelta larga il 20% della pagina, da una linea orizzontale larga 300 pixel e da un’immagine a tua scelta alta 250 pixel..

 

9. Inserire un link  A HREF


Esercizi
Crea una nuova pagina “link.html”.
Inserisci il codice HTML per un link che mostri il testo “Ministero della Pubblica Istruzione” e che porti alla pagina http://www.istruzione.it.

 

10. Inserire un link  mailto:

Esercizi

Crea una nuova pagina “maito.html”.
Inserisci il codice HTML per un link mailto che mostri il testo “Contatti ” e che punti all’indirizzo info@trenitalia.it

11. I  commenti


Esercizi

Crea una nuova  “commenti.html”.
Inserisci nella pagina il seguente contenuto :

Date ricevimenti generali:

  • lunedì 12/12/2014 ore 15-18
  • sabato 17/04/2015 ore 15-18

e dopo l’elenco inserisci il commento “devo ricordarmi di verificare le date dei ricevimenti”.

 

12. Le tabelle: TABLE, TR, TD e border


Esercizi

Crea una nuova pagina  “tabelle.html”.
Inserisci nella pagina il codice necessario per le seguenti tabelle.
Atttenzione: ignora l’aspetto estetico che è diverso da quello delle tabelle che realizzerai.

Giallo
Rosso
Nero

 

 

 

Milano Torino Roma

 

Cane Gatto Topo
Leone Aquila Cavallo

13. Unire celle di tabella: colspan e rowspan


Esercizi
Crea una nuova  pagina “tabelleirregolari.html”.
Inserisci nella pagina il codce necessario per le seguenti tabelle.
Atttenzione: ignora l’aspetto estetico che è diverso da quello delle tabelle che realizzerai.

Anna Marco
Studenti

 

Uno Dati
Due