Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

Html: i tag di uso frequente

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:

Titoli HTML

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 &egrave; un primo paragrafo... </p>
<p>Questo &egrave; un secondo paragrafo...</p>

I browser visualizzerà così i due paragrafi:

Paragrafi HTML

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 &egrave; un paragrafo
questa riga dovrebbe andare a capo
cos&igrave; 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 &egrave; un paragrafo <br/>
questa riga dovrebbe andare a capo <br/>
cos&igrave; 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:

DIV e SPAN

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Ti potrebbe piacere anche

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×