Home
  1. Informatica
  2. Creare siti web
  3. Tag di formattazione del testo nella pagina HTML

Tag di formattazione del testo nella pagina HTML

Come si scrive titolo e sottotitolo, il paragrafo, come si cita una frase e come si rende corsivo e grassetto un testo

Costruisci la prima pagina HTML usando gli attributi tag più comuni e più usati nella formattazione del testo.

    Livello: Iniziale 
 

Dopo aver appreso l'uso del Doctype e quali sono gli attributi principali che compongono una pagina web, vediamo quali attributi si usano per formattare il testo di una pagina html.

In questa lezione imparerai a usare tutti gli elementi essenziali per inserire titoli e sottotitoli, i paragrafi e molti altri elementi utili a rendere visivamente ben organizzati i testi dei tuoi articoli e le pagine in generale del sito internet che desideri progettare.

Titoli e sottotitoli

Ciascuna pagina ha sempre un titolo. Esso serve a spiegare all'utente cosa tratta ciò che leggerà. I titoli e sottotitoli si scrivono usando i tag che seguono:

<h1></h1>
<h2></h2>
<h3></h3>

Possiamo arrivare fino ad h6. In questa pagina del corso, ad esempio, ho utilizzato h1 come titolo, h2 come sottotitolo e h3 per i titoli dei vari paragrafi. Questi sono i tag headings maggiormente usati. In base alle esigenze, si possono usare tutti gli altri previsti.

Il loro uso è molto importante sia per organizzare al meglio i nostri articoli — formattazione —, sia per aiutare i motori di ricerca a comprendere il contenuto delle nostre pagine. I bot leggono i titoli e sottotitoli presenti nella pagina e ne comprendono la struttura e di cosa trattano.

I paragrafi

Per scrivere il contenuto testuale delle pagine, si usa il tag <p>. Esso contiene le parole che leggi proprio ora ed è utile a dividere gli articoli in paragrafi. Si scrive come segue:

<p></p>

Al suo interno inseriamo il testo, il quale comparirà a video così come è stato impostato.

Per dare un minimo di "forma" ai paragrafi, non può bastare il solo uso del tag <p>. Per indentare il primo rigo e rendere il paragrafo giustificato, come i paragrafi di questa pagina, è necessario fornire al browser alcune informazioni aggiuntive. Aggiungiamo un po' di codice al foglio di stile:

p {padding:0px 20px 12px 10px;text-indent:3%;text-align:justify}

Il codice CSS sopra riportato informa il browser di impostare una certa distanza in basso tra un paragrafo e l'altro, e rispetto al margine sinistro e destro della pagina. Informa che il testo ha il primo rigo indentato del 3% rispetto allo spazio disponibile e che il testo del paragrafo deve apparire all'utente giustificato.

Attributo di accapo

il Tag <br>, si usa all'interno del tag di paragrafo e non solo, per mandare il testo accapo senza chiudere il paragrafo. L'uso di un doppio tag <br>, lascia un rigo vuoto prima del successivo rigo di testo.

Gli attributi di corsivo e grassetto

Gli attributi per il corsivo sono <i></i> e <em></em>. Quale la differenza. Usando il primo tag indichi al browser e al motore di ricerca che si tratta di un testo semplice. Nel secondo caso che il testo corsivo ha una sua importanza nel testo.

Gli attributi per il grassetto sono <b></b> e <strong></strong>. Come per i tag del corsivo, il primo indica che il testo è solo in grassetto, nel secondo caso che il testo è in grassetto perché ha una certa rilevanza.

Gli attributi delle citazioni

Se il testo da scrivere prevede l'inserimento di una citazione, come di un libro o il parlato di una intervista, puoi usare vari attributi. Il primo è il tag <q></q>. Ponendo il tag a inizio e fine del testo, il browser mostra le virgolette all'inglese " ".

Quando il testo è più lungo di un breve periodo, si usa il <blockquote></blockquote>. Questo attributo indenta tutto il testo rispetto alla posizione del paragrafo che precede e segue.

Mentre il tag <q> si usa all'interno del tag <p>, il <blockquote> è a se stante.

Se il tuo interesse è scrivere il nome di un'opera d'arte, il titolo di un libro e così via, si usa il tag <cite>. Il testo inserito in questo tag, appare leggermente corsivo: italic.

Gli acronimi

Poniamo il caso di dover scrivere un testo circa l'Organizzazione delle Nazioni Unite. Potremmo optare per la versione abbreviata, con l'uso dell'acronimo ONU. Come indicare, ai motori di ricerca principalmente, che si tratta di un acronimo e qual è il suo significato? Come segue:

<p>Questo articolo spiega le funzioni dell' <abbr title="Organizzazione delle Nazioni Unite">ONU</abbr></p>

Il testo incluso nel title sarà visualizzato al passaggio del mouse, da quei browser che lo prevedono.

Paragrafo preformattato

Ecco come inserire nell'articolo un testo preformattato senza l'uso di altri attributi:

<pre></pre>

Il testo contenuto nel tag <pre> viene visualizzato a video così come scritto dal webmaster, conservando gli spazi tra un rigo e l'altro, quando previsti. Copia in una pagina html, l'esempio riportato a fine pagina per vedere il funzionamento.

L'indirizzo dell'azienda

E se volessimo scrivere l'indirizzo della società nella pagina contatti, quale tag usare? Il tag <address></address>, all'interno del quale scriviamo le informazioni di contatto dell'azienda.

Esempio

Ti lascio con un esempio. Ricopia tutto il codice in una pagina html creata con Expression Web 4 o altro editor. Salva la pagina html e aprila con il tuo browser per analizzarla. Poi divertiti a sperimentare e creare la tua prima pagina html.

<h1>Questo è il titolo di pagina</h1>
<h2>Mentre questo è il sottotitolo dell'articolo</h2>
<p>Ora inseriamo i vari paragrafi che compongono la pagina web</p>
<p><em>Questo testo è in corsivo</em>, mentre <strong>questo testo è in grassetto</strong></p>

<h3>Usiamo ora gli attributi per citare del testo</h3>
<p><q>La tana della squadra del Baffo era la più in disordine e puzzolente del caposaldo</q>. Tratto dal libro <cite>Il Sergente nella Neve, di Mario Rigoni Stern</p>

<blockquote>Il tenete entra nell'isba più vicina. Sono povere isbe, più povere delle solite, piccole e fredde anche a guardarle. Ma il tenente esce subito impugnando la pistola.</blockquote>

<h3>Uso degli acronimi</h3>
<p>Acronimo della città di New York: <abbr title="New York">NY</abbr>.</p>
<p><abbr title="Attività Sportive Confederate">ASC</abbr></p>

<h3>Indirizzo dell'azienda</h3>
<address>
Società Sportiva<br>
Via dell'acqua, 22<br>
CAP 00000 - Città dello Sport<br>
email:[email protected]
</address>

<h3>Paragrafo preformattato</h3>
<pre>
Al primo punto troviamo quanto segue...
Al secondo punto troviamo specificato che...
Al terzo punto abbiamo le seguenti informazioni...
</pre>

 

Leggi Pure

⟩⟩ TransferWise Opinioni: La mia Esperienza | Recensione Reale    ⟩⟩ Ledger Nano S Promo Code e Promozioni    ⟩⟩ Promozioni e Nuovi Listing su CEX.io Exchange    ⟩⟩ Come conseguire la Certificazione G Suite    ⟩⟩ OneDrive for Business: Come Funziona, Caratteristiche, Costi