HTML: il testo

Screeshot di una pagina HTML

In questo articolo mostrerò come gestire il testo dal punto di vista dell’HTML. Se hai appena iniziato a scrivere codice per le pagine Web ti consiglio la lettura di questo articolo introduttivo: HTML: Sintassi e primi tag .

Intestazioni

Nell’HTML abbiamo sei livelli per le intestazioni

<h1> Intestazione principale </h1>
<h2> Intestazione di livello 2 </h2>
<h3> Intestazione di livello 3 </h3>
<h4> Intestazione di livello 4 </h4>
<h5> Intestazione di livello 5 </h5>
<h6> Intestazione di livello 6 </h6>
output dei tag hn
output dei tag hn

Paragrafi

<p> 
    Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit. 
    Sed in mollis eros, vel pulvinar erat. 
    Curabitur id ex a tellus lacinia pellentesque. 
</p>
<p> Nunc gravida purus sit amet velit iaculis commodo. 
        Etiam quis arcu cursus, pharetra eros eu, bibendum nibh. 
        Curabitur risus nisi, porttitor eu fermentum sed, 
        vestibulum mattis ligula. Integer sit amet nulla pulvinar,
        suscipit felis eget, tincidunt velit.
        Donec dapibus dictum luctus.
    
</p>

Notiamo che non importa come formattiamo il paragrafo all’interno del tag p. Il risultato sarà in ogni caso il seguente. Questo prende il nome di white space collapsing.

output del tag p
output del tag p

Testo di esempio per utilizzarlo nei paragrafi

Spesso quando si crea un mock-up (prototipo) di un sito Web si utilizza del testo placeholder per rendere meglio l’idea di come saranno le diverse pagine. Prova ad immaginare un sito con tutti i tag ma vuoti…. direi proprio che non sarebbe un granché da presentare al nostro cliente. A fine articolo trovi il link ad un generatore di testo che potrai poi copiare ed incollare. La stessa tecnica viene utilizzata anche per le immagini.

Stili del testo

    <p> Ecco un esempio del:  <b>grassetto</b></p>
    <p> Invece qui un esempio del <i>corsivo</i></p>
    <p> <u>Il sottolineato</u></p>
    <p> <strike>Il barrato</strike></p>
    <p><tt>Qui stiamo scrivendo con una spaziatura fissa</tt></p>
output dei tags per i vari stili di testo
output dei tags per i vari stili di testo

Apice e pedice

<p> Lista della spesa: <br/>
    H<sub>2</sub>O <br/>
    Blocco appunti della Moleskin<sup>TM</sup>
</p>
output dei tag sup e sub
output dei tag sup e sub

TAG semantici

I tag semantici non modificano la struttura del documento web ma aggiungo informazioni extra alle pagine. Di seguito le implementazioni:

   <p>
    <strong>Attenzione:</strong> il <em>coding</em> è una cosa seria.
    <!-- strong indica che la parola/frase ha una forte importanza -->
    <!-- em indica che la parola/frase è enfatizzata-->
   </p>
   <blockquote cite="https://www.goodreads.com/author/quotes/92867.Linus_Torvalds">
    Microsoft isn't evil, they just make really crappy operating systems
    <br>
    - LinusTorvalds
   </blockquote>
   <!-- blockquote per citazioni-->
   <p>
    L'<abbr title="Ingegnere">Ing.</abbr> Paolo Rossi lavora alla 
    <acronym title="National Aeronautics and Space Administration">NASA</acronym>
    <!-- abbr per un'abbreviazione -->
    <!-- acronym per un acronimo -->
   </p>
   <p><dfn>Ingegnere</dfn>: Laureato in ingegneria abilitato alla professione,
    che soprintende al progetto e alla realizzazione di costruzioni 
    (edilizie, stradali, idrauliche, ecc.) oppure ad attività industriali:
     i. edile, navale, elettronico, minerario, meccanico, nucleare.
    <!-- dfn per le definizioni-->
   </p>
output di alcuni tag semantici
output di alcuni tag semantici

Possiamo utilizzare il tag semantico address per contenere le informazioni di contatto dell’autore della pagina:

 <address>
    <p><a href="mailto:test@example.com">
        test@example.com
        </a>
    </p>
    <p>1600 Amphitheatre Pkwy, Mountain View, CA 94043, Stati Uniti</p>
 </address>
output del tag address
output del tag address

LINKS utili

Pubblicato da Carlo Contardi

Carlo Contardi, docente di informatica e sviluppatore Full Stack, condivide la sua passione per la programmazione e l’informatica attraverso il suo blog Space Coding. Offre preziosi consigli e soluzioni pratiche a chi vuole imparare a programmare o migliorare le proprie abilità. 🚀👨‍💻

Translate »