HTML

UNITA' 3 IL TESTO

Indice| Indietro | Avanti

Competenze: Scrivere una pagina web con intestazioni e paragrafi.

Contenuti: I tag b, i, br, hr, p, h1, h2, h3 ...
Il tag style e la sintassi css

Il testo della pagina web può essere caratterizzato, dividendolo in paragrafi, dando intestazioni alle divese sezioni o evidenziando alcune parole o frasi con tag appropriati.

Il tag b (come bold)

Abbiamo già incontrato questo tag nella lezione precedente!
Codice Output
<b> Ciao </b> a tutti!!!
 Ciao a tutti!!!
Questo è del testo semplice (non formattato) Questo è del testo semplice (non formattato)
<b> Questo è testo in grassetto </b> Questo è testo in grassetto


Il tag i (come italic)

Come potete constatare, è facile da capire!
Code Output
<i> Ciao </i> a tutti!!!
 Ciao a tutti!!!
<i> Questo è testo in corsivo </i> Questo è testo in corsivo
<b><i> Questo è testo in grassetto corsivo </i></b> Questo è testo in grassetto corsivo


Possiamo usare i tag HTML anche nel forum o in bacheca!!

I tag br e hr

Codice Output
Che cosa produce questo <br /> tag? Che cosa produce questo
tag?
Che cosa produce questo <hr /> tag? Che cosa produce questo
tag?


Il tag p (come paragrafo)

Il tag p delimita una sezione di testo come un paragrafo, inserendo automaticamente un "a capo" all'inizio e alla fine del paragrafo.

Codice Output
Testo semplice.
<p> Questo è un paragrafo. Non occorre il tag br! </p>		 Testo semplice.

Questo è un paragrafo. Non occorre il tag br!



I tag h1, h2, h3 ...

Questi tag caratterizzano una porzione di testo come una intestazione di primo, secondo, terzo .. livello

Codice Output
<h1> Intestazione 1 </h1>

Intestazione 1

<h2> Intestazione 2 </h2>

Intestazione 2

<h3> Intestazione 3 </h3>

Intestazione 3



Assegniamo uno stile personale ai tag

Possiamo assegnare uno stile personale ai tag p, h1, h2 ... o anche all'intero body.
E' buona norma che lo stile della pagina sia separato dal contenuto: le informazioni relative all'aspetto tipografico della pagina possono essere inserite nel tag STYLE.
Questo tag può essere sistemato nella sezione HEAD della pagina.

<head>
<style>.. </style>
</head>

All'interno del tag STYLE, occorre indicare il selettore, cioè l'elemento cui vogliamo assegnare uno stile personale (il paragrafo p, l'intestazione h1, l'intera pagina body...), poi indicare (tra parentesi graffe) alcune proprietà e il rispettivo valore da assegnare.

Esempi di proprietàValori possibili
font-size (grandezza dei caratteri)large, medium, small, x-small...
font-family (font di caratteri)Arial, Verdana, Times New Roman....
text-align (allineamento del testo)left, right, center

La sintassi (sintassi CSS) è la seguente: selettore {proprietà1:valore; proprietà2:valore; }

Un esempio
<head>
<style>
h1 {font-size:large; font-family:Arial; text-align:center; }
p {font-size:x-small; font-family:Arial; text-align:left; }
</style>
</head>

Esercizi interativi

Per fare pratica vai al sito w3schools!

Scrivi la tua presentazione web!

  1. Apri il tuo file index.htm con un editor di testo.
  2. Scrivi una breve presentazione di te stesso o un altro breve testo.
  3. Dividi il testo in paragrafi (tag p) e dai una intestazione (tag h1).
  4. Se vuoi, personalizza i tuoi tag con uno stile (tag style nella sezione head).
  5. Salva il file modificato.
  6. Carica il file nella tua area di lavoro nei Laboratori
    (Il vecchio file sarà automaticamente cancellato e sostituito con il nuovo!)
  7. Scrivi un messaggio nel forum "Il testo" per avvertire che la tua pagina è pronta!


Ludovica Battista

Indice| Indietro | Avanti