Html: i tag di uso frequente
- Maggio 12, 2011
- by
- Donatantonio
Tag contenitori.
Come visto in un articolo precedente nulla vieta di scrivere direttamente all’interno del tag body il testo di ciò che vogliamo appaia a schermo.
Risulta più pratico racchiudere il testo in appositi tag a seconda della funzione che il testo sta svolgendo.
La nostra pagina html risulterà più semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere un effetto grafico più gradevole e rispondente alle diverse esigenze.
Vediamo i principali tag-contenitori da utilizzare per formattare il testo.
Titoli.
Esistono 6 differenti livelli di titolo che si ottengono utilizzando i seguenti tag:
- <h1>
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
La “h” sta per “heading“, cioè titolo e ogni livello indica una grandezza diversa.
Dall'<h1>, che è il più importante, si va via via degradando fino all'<h6> che rappresenta il titolo con grandezza minore.
Gli heading, così come altri tag contenitori, appartengono alla famiglia degli elementi di blocco. Tali elementi sono così chiamati perché una volta definiti creano un blocco attorno a sé, di conseguenza vanno a capo e risultano distanziati dagli elementi che li circondano.
Analizziamo il seguente codice html:
<html>
<head>
<title>TITOLI</title>
</head>
<body>
<h1>Esame di informatica</h1>
<h2>Esame di informatica</h2>
<h3>Esame di informatica</h3>
<h4>Esame di informatica</h4>
<h5>Esame di informatica</h5>
<h6>Esame di informatica</h6>
</body>
</html>
Nella pagina html abbiamo definito 6 titoli con ugual testo ma grandezza diversa, utilizzando in successione i tag da h1 ad h6.
Ciascun titolo verrà automaticamente portato a capo rispetto al precedente e di default sarà applicato un margine (inferiore e superiore) che differisce seppur minimamente da browser a browser.
Di seguito viene mostrato il risultato in Internet Explorer:
Paragrafi.
I browser non riconoscono da soli la formattazione del testo, bensì è necessario indicargliela tramite appositi tag html. In caso contrario il browser si limiterà a visualizzare a video i caratteri uno dietro all’altro senza alcuna regola.
Il paragrafo rappresenta l’unità di base entro cui suddividere un testo.
Il tag <p> lascia una riga vuota prima della sua apertura e dopo la sua chiusura. La sintassi è la seguente:
<p>Questo testo è in un paragrafo…</p>
Il tag </p> di chiusura può essere omesso ma è buona norma abituarsi ad inserirlo sempre, soprattutto nel caso in cui siano necessari più paragrafi in successione.
Analizziamo il seguente esempio di codice html:
<p>Questo è un primo paragrafo... </p> <p>Questo è un secondo paragrafo...</p>
I browser visualizzerà così i due paragrafi:
Il tag <p> possiede inoltre un importante attributo presente nella maggior parte degli elementi di blocco che prende il nome di align.
Specificando ad esempio:
<p align=‘right’>Questo è un paragrafo…</p>
il testo contenuto all’interno del paragrafo sarà allineato a destra. In alternativa il testo potrà essere allineato a sinistra (left), al centro (center) oppure giustificato (justify).
Andare a capo.
Si sarà notato che andando a capo nel codice html all’interno di un paragrafo, questo non riproduce lo stesso effetto visualizzato nel browser. Ad esempio scrivere come segue non produce l’effetto desiderato:
<p> Questo è un paragrafo questa riga dovrebbe andare a capo così come questa riga… </p>
Il tag <br/> permette invece di inserire un interruzione di riga, quindi un a capo. Essendo questo un tag vuoto e non un contenitore come <p>, nella sintassi verrà definito senza contenuto e quindi senza la coppia di tag di apertura e chiusura.
L’esempio precedente è così riformulato grazie al tag <br>:
<p> Questo è un paragrafo <br/> questa riga dovrebbe andare a capo <br/> così come questa riga… </p>
Utilizzando semplicemente una coppia di tag <br> si ottiene di conseguenza una linea bianca.
Il div e lo span.
Il tag <div> definisce un blocco di testo che va a capo ma, a differenza del paragrafo, non lascia spazi prima e dopo la sua apertura.
Il DIV grazie alla sua enorme versatilità viene definito nel linguaggio HTML come l’elemento di tipo blocco per eccellenza. E’ utilizzato più che per contenere semplice testo soprattutto per la suddivisione strutturale delle pagine html.
La sintassi del DIV è la seguente:
<div>Questo è un testo all’interno di un blocco div.</div>
Lo <span> invece è un contenitore generico che può essere annidato ad esempio all’interno dei <div>.
A differenza dei tag <p> e <div> si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.
Lo <span> è un elemento molto utilizzato soprattutto insieme ai fogli di stile (CSS), ad esempio per definire delle aree di testo particolari come quelle per segnalare errori o informazioni all’utente.
Se non viene associato ad uno stile la sua presenza risulta nulla e dipendente esclusivamente dallo stile del tag che lo contiene.
Analizziamo quindi il seguente codice HTML:
<div> Questo testo è all’interno di un blocco.<br/> E’ possibile inserire immagini, link o altri oggetti all’interno di un div.<br/> Inoltre un div può contenere uno span che a sua volta contiene ad esempio una parola o una frase.<br/> <span>Questo testo è in uno span.</span> </div>
E’ stato definito un div che contiene esclusivamente testo formattato grazie a dei <br> e prima della chiusura uno span con del testo. Da notare la nidificazione dello span nel div.
Il risultato dell’esempio precedente è così visualizzato dal browser:
