HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte"

Stefano Colonna
6 anni fa
Visualizzazioni

1 HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte

2 In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo sfondo della pagina (colore o immagine) modificare la formattazione del testo modificare le proprietà dei caratteri creare paragrafi e allineare il testo inserire i titoli di una sezione mandare a capo il testo inserire una immagine inserire un collegamento ipertestuale (link) inserire un elenco puntato o numerato inserire una tabella

3 Struttura della pagina HTML <body>

4 Titolo pagina HTML <title> </title> <title> la mia prima pagina HTML </title> <body>

5 Impostare lo sfondo della pagina La mia prima pagina HTML <title> pagina 1 </title> <body bgcolor= orange > La mia prima pagina HTML <title> pagina 1 </title> <body backcolor= sfondo.gif > La mia prima pagina HTML La mia prima pagina HTML

6 Formattazione del testo Cagliari Cagliari <b> Cagliari </b> <i> Cagliari </i> Cagliari <u> Cagliari </u> Cagliari <s> Cagliari </s>

7 Proprietà dei caratteri (<font>) Cagliari è una bella città Cagliari è una bella città Cagliari è una bella città <font face= green > Cagliari è una bella città</font> <font face= red > Cagliari è una bella città</font> Cagliari è una bella città Cagliari è una bella città Cagliari è una bella città <font size= 5 > Cagliari è una bella città</font> <font size= 7 > Cagliari è una bella città</font> Cagliari è una bella città Cagliari è una bella città Cagliari è una bella città <font face= arial > Cagliari è una bella città</font> <font face= courier > Cagliari è una bella città</font>

8 Mandare il testo a capo Cagliari è una bella città. Il clima è mite tutto l anno. <title> pagina 1 </title> <body> Cagliari è una bella città. Il clima è mite tutto l anno. Cagliari è una bella città. Il clima è mite tutto l anno. <title> pagina 1 </title> <body> Cagliari è una bella città. <br />Il clima è mite tutto l anno.

Paragrafi e allineamento del testo Cagliari è la principale città della Sardegna, con un'area metropolitana di circa mezzo milione di abitanti.

9 Paragrafi e allineamento del testo Cagliari è la principale città della Sardegna, con un'area metropolitana di circa mezzo milione di abitanti. <p align= left > Cagliari è la principale </p> Cagliari è la principale città della Sardegna, con un'area metropolitana di circa mezzo milione di abitanti. <p align= right > Cagliari è la principale </p> Cagliari è la principale città della Sardegna, con un'area metropolitana di circa mezzo milione di abitanti. <p align= center > Cagliari è la principale </p> Cagliari è la principale città della Sardegna, con un'area metropolitana di circa mezzo milione di abitanti. <p align= justify > Cagliari è la principale </p>

Intestazione di paragrafi/sezioni Paragrafo uno Paragrafo due Paragrafo tre Paragrafo quattro Paragrafo cinque Paragrafo sei <title> intestazioni </title>

10 Intestazione di paragrafi/sezioni Paragrafo uno Paragrafo due Paragrafo tre Paragrafo quattro Paragrafo cinque Paragrafo sei <title> intestazioni </title> <body> <h1> Paragrafo uno </h1> <h2> Paragrafo due </h2> <h3> Paragrafo tre </h3> <h4> Paragrafo quattro </h4> <h5> Paragrafo cinque </h5> <h6> Paragrafo sei </h6>

11 height (= altezza) Immagini <img /> <img src= koala.jpg /> <img src= koala.jpg width= 600 height= 400 /> width (= larghezza)

12 LINK (<a>) Vai alla pagina 2 <title> pagina 1 </title> <body> Vai alla <a href= pagina2.html > pagina 2 </a> Questa è la pagina due <title> pagina 2 </title> <body> Questa è la pagina 2

ELENCHI (<ul>, <ol>) Elenco delle nazioni: Italia Francia

13 ELENCHI (<ul>, <ol>) Elenco delle nazioni: Italia Francia Germania <title> ELENCHI </title> <body> Elenco delle nazioni: <ol> <li>italia</li> <li>francia</li> <li>germania</li> </ol> Elenco delle nazioni: 1. Italia 2. Francia 3. Germania <title> ELENCHI </title> <body> Elenco delle nazioni: <ul> <li>italia</li> <li>francia</li> <li>germania</li> </ul>

14 TABELLE (<table>) cella1 cella2 cella1 cella3 cella2 cella4 cella3 cella4 cella3 cella4 <title> tabelle </title> <body> <table border= 1 > <tr><td>cella1</td><td>cella2</td></tr> <tr><td>cella3</td><td>cella4</td></tr> </table> cella1 cella3 cella2 cella4 cella1 cella3 cella2 cella4

15 Riassunto (1) Una pagina HTML è definita utilizzando delle etichette (o marcatori) dette tag; ogni parte della pagina è identificata da un particolare tag La maggior parte degli elementi utilizzano una coppia di tag (tag di apertura e tag di chiusura); il tag di chiusura è identificato dalla presenza del carattere / (slash) Il tag di apertura contiene spesso degli attributi che ne specificano le proprietà Una pagina HTML è delimitata dai tag e Una pagina HTML è composta da due sezioni dette head e body La sezione di testa è delimitata dai tag e La sezione del corpo è delimitata dai tag <body> e La sezione head precede quella di body; entrambe sono contenute tra i tag e Per impostare un colore di sfondo si aggiunge l attributo bgcolor al tag <body>; per impostare una immagine di sfondo si aggiunge l attributo background al tag <body> Il titolo della pagina viene inserito tra i tag <title> e </title>; i tag <title> </title> a loro volta sono inserisce dentro la sezione head Per modificare la formattazione del testo si utilizzano i tag <b></b> (grassetto), <i></i> (corsivo), <u></u> (sottolineato), <s></s> (barrato) Per modificare le proprietà del carattere si utilizzano i tag <font> e </font> con gli attributi face (set di caratteri), color (colore), size (dimensione) Il testo può essere raggruppato in paragrafi inserendolo tra i tag <p> e </p>; l allineamento orizzontale del testo di un paragrafo può essere modificato utilizzando l attributo align (con i valori left right center justify)

16 Riassunto (2) Per mandare a capo il testo si utilizza il tag <br /> N.B. per questo tag non è previsto il corrispondente tag di chiusura Per inserire il titolo di un paragrafo o di una sezione si usano i tag <h1..6></h1..6> N.B. la dimensione del carattere decresce da <h1> verso <h6> Per creare un collegamento ipertestuale si deve inserire la parola attiva (hotword) tra i tag <a href= > </a>; l attributo href è obbligatorio e serve per indicare l indirizzo della pagina alla quale si riferisce il link Per inserire una immagine utilizza il tag <img src= /> ; l attributo src è obbligatorio e serve per indicare il nome ed il percorso (path o URL) del file immagine che deve essere caricato N.B. per questo tag non è previsto il corrispondente tag di chiusura Per inserire un elenco puntato si utilizzano i tag <ul> e </ul>; per ogni voce dell elenco deve essere compresa tra i tag <li> e </li> Per inserire un elenco numerato si utilizzano i tag <ol> e </ol>; per ogni voce dell elenco deve essere compresa tra i tag <li> e </li> Una tabella è definita tra i tag <table> e </table> e viene costruita per righe; ogni riga inizia con il tag <tr> e termina con il tag </tr>; all interno di ogni riga devono essere definite le celle desiderate il contenuto di ogni singola cella deve essere inserito tra i tag <td> e </td>

17 Risorse on-line Guida HTML (video corso a cura di Pier Roberto Lucisano) Parte 1: Tutorial HTML (video corso a cura di Francesca Gallesio)

18 Tabella dei colori I colori possono essere specificati utilizzando, alternativamente, il codice RGB in formato esadecimale preceduto dal simbolo # Es. #FFFFFF equivale al bianco, #FF0000 equivale al rosso il codice mnemonico Es. lightblue, white, red, etc. Tabella di esempio: Consulta una tabella di colori più completa

Documenti analoghi

Linguaggio per ipertesti

Linguaggio per ipertesti Un linguaggio per descrivere gli ipertesti è l HyperText Markup Language (HTML) Non è il solo (VRML,XML,...) l HTML è un linguaggio di formattazione e permette di formattare del