Il tag body

Se avete letto i nostri precedenti articoli su come strutturare una pagina HTML e il tag head siete pronti per il passo  successivo, ossia inserire i contenuti del vostro sito in un documento HTML. Nel tag <body> vengono inseriti tutti i contenuti di una pagina quali titoli, paragrafi, tabelle, link, immagini, video e molto altro ancora. Al tag <body> appartiene la sola funzione di indicare i contenuti della pagina web mentre l’aspetto grafico viene gestito dai fogli di stile CSS. Non tutti sanno che anche i browser hanno un proprio foglio di stile predefinito, per cui i vostri contenuti avranno delle caratteristiche estetiche preimpostate. Per sovrascrivere queste caratteristiche vi basterà creare il vostro foglio di stile e includerlo nel tag head. Vediamo ora insieme tutti i tag e i loro attributi.

Titoli

Ecco subito il codice HTML d’esempio:

<h1>Sono il titolo principale</h1>
<h2>Sono il titolo di secondo livello</h2>
<h3>Sono il titolo di terzo livello</h3>
<h4>Sono il titolo di quarto livello</h4>
<h5>Sono il titolo di quinto livello</h5>
<h6>Sono il titolo di sesto livello</h6>

Esistono sei livelli di titoli (heading) che vanno dall'<h1> all'<h6>. I numeri dei titoli indicano la loro importanza a livello semantico, pertanto devono essere utilizzati in ordine crescente. Il tag <h1> viene utilizzato per indicare l'argomento principale della pagina e deve essere il primo titolo ad essere utilizzato.

<html>
   <head>
      <title>La mia pagina web</title>
   </head>
   <body>
       <h1>XODUS Blog</h1>
       <h2>Il blog sul web marketing, i social media, le tecnologie e il web design</h2>
       <p>Oggi vi parleremo dei tag del body...</p>
   </body>
</html>

Vediamo l’esempio.

Paragrafi

Il tag <p> (paragraph) serve ad organizzare il testo della pagina in paragrafi.

<html>
   <head>
       <title>La mia pagina web</title>
   </head>
  <body>
      <p>Conoscete l'ultima tecnologia acquistata da facebook? Si chiama Oculus rift ed è un
         visore per la realt&agrave; virtuale.</p>
      <p>Inventato da Palmer Luckey con la sua societ&agrave; Oculus VR, ha suscitato subito
         grande interesse nonostante il dispositivo non fosse perfetto. Infatti causava effetti
         indesiderati come nausea e giramenti di testa.</p>
      <p>All'inizio di quest'anno &egrave; stato sviluppato un nuovo prototipo per risolvere questo
         problema ma la vera domanda &egrave;, cosa ne far&agrave; il fondatore di facebook?</p>
  </body>
</html>

Vediamo l’esempio.

Anchor

Il tag <a> (anchor) viene usato per inserire link a risorse esterne ed interne alla pagina, chiamate ancore. Inoltre questo tag viene utilizzato per creare i collegamenti tra tutte le pagine interne di un sito web, come spesso avviene nei menu. I browser impostano caratteristiche estetiche predefinite ai link (blu i link non visitati, viola i link visitati e rosso il link che viene tenuto cliccato), che possono essere modificate con i CSS.

Questo tag presenta diversi attributi interessanti con cui si può personalizzare il link:

Attributo Valore Descrizione

href

URL

Specifica l’URL della pagina a cui è indirizzato il link.

target

_blank

_parent

_self

_top

framename

Si può specificare dove aprire la nuova pagina (se in un’altra scheda, come pop-up, nella stessa scheda ecc...). Se l’attributo non viene utilizzato il browser apre la nuova pagina nella scheda stessa, sostituendo la pagina corrente. Questo sistema deve essere utilizzato per le pagine interne. Consigliamo invece il valore “_blank” per aprire pagine di siti esterni in una nuova scheda.

title

testo

Passando con il puntatore sul link, senza cliccare, uscirà un’etichetta con un testo da voi specificato. Con questo testo potete spiegare la destinazione del link. Serve per migliorare l’accessibilità ed essere utile ai non vedenti, che utilizzano screen-reader per navigare in internet. E’ anche utile per i motori di ricerca che lo utilizzano per indicizzare la pagina.

<html>
    <head>
       <title>La mia pagina web</title>
    </head>
    <body>
        <a href="http://www.xodusweb.com/blog/" target="_blank" title="vai alla home di Xodus Blog">
          Visita XODUS Blog!
         </a>
    </body>
</html>

Vediamo l’esempio.

Tra il tag di apertura e di chiusura bisogna inserire la parola, la frase o l’immagine (con il tag <img>) che diventerà un link.

Come linkare un’immagine:

<a href="http://www.xodusweb.com/blog/">
   <img src="../images/mare.jpg" width="400" height="250" alt="paesaggio marittimo">
</a>

Vediamo l’esempio.

Immagini

Le immagini vengono inserite con il tag <img> (image). Le immagini possono essere incorporate direttamente dal server web dove si trova il vostro sito oppure da altri siti e server web. Questo tag supporta diversi attributi:

Attributo Valore Descrizione
src URL Specifica l’URL dell’immagine.
alt testo Questo attributo è fondamentale per l’accessibilità, in particolare per i non vedenti. Infatti permette, a chi utilizza uno screen-reader o il display braille, di leggere il testo in sostituzione della foto. Inoltre è molto importante per l’indicizzazione della pagina web nei motori di ricerca.
title testo Passando con il puntatore sul link, senza cliccare, uscirà un’etichetta con un testo da voi specificato. Con questo testo potete spiegare la destinazione del link. Serve per migliorare l’accessibilità ed essere utile ai non vedenti, che utilizzano screen-reader per navigare in internet. E’ anche utile per i motori di ricerca che lo utilizzano per indicizzare la pagina.
align

top

bottom

middle

left

right

Specifica l’allineamento dell’immagine rispetto i contenuti del box di appartenenza.

Non è supportato dall’HTML 5.
border pixel. Ad esempio border=”50” Specifica la larghezza del bordo intorno all’immagine.
width Pixel.Ad esempio: width=”50” Serve per indicare la larghezza dell’immagine.
height Pixel. Ad esempio: height=”50” Serve per indicare la lunghezza dell’immagine.

N.B. Il browser riesce a determinare la dimensione di un'immagine solo dopo il suo caricamento. Per cui se non vengono specificate le dimensioni della foto con gli attributi width e height, questa si ridimensiona successivamente il caricamento. Può essere molto fastidioso per l’utente, oltre al fatto che risulta poco professionale.

<html>
    <head>
       <title>La mia pagina web</title>
    </head>
    <body>
      <img src="../images/conchiglia.jpg" width="250" height="250" alt="conchiglia sulla spiaggia">
   </body>
</html>

Vediamo l’esempio.

A capo

Il tag <br> (line “break”) viene utilizzato all’interno di un testo per indicare al browser quando deve andare a capo. Se non si utilizza il testo va lo stesso a capo, ma solo quando arriva al margine destro del box che lo contiene.

<html>
   <head>
        <title>La mia pagina web</title>
   </head>
   <body>
           <p>Negli ultimi anni abbiamo visto sempre pi&ugrave; nuove tecnologie che neanche <br>
              nei nostri sogni pi&ugrave; incredibili abbiamo mai immaginato</p>
   </body>
</html>

Vediamo l’esempio.

Barre orizzontali

Il tag <hr> (thematic break) viene utilizzato per inserire una barra orizzontale all’interno del sito. Solitamente viene utilizzata per separare varie sezioni, con tematiche diverse, oppure il footer (l’ulltimo box piè di pagina, dove sono raggruppate diverse informazioni sulla pagina e il proprietario) dal resto dei contenuti.

<html>
   <head>
        <title>La mia pagina web</title>
   </head>
   <body>
     <hr>           
   </body>
</html>

Liste

In un documento HTML i contenuti si possono organizzare anche in liste. L’HTML mette a disposizione ben 3 tipi di liste: le liste numerate (<ol>), le liste non numerate (<ul>) e le liste di definizione (dl).  

Liste numerate

Gli elenchi numerati, con numeri arabi (1, 2, 3…), sono composti dal tag genitore <ol> (ordered list) e i singoli tag per ogni punto elenco <li> (list items). Con l’attributo “type” potete sostituire i numeri arabi con i numeri romani o l’alfabeto. I valori supportati da “type” sono “a” per l’alfabeto minuscolo, “A” per l’alfabeto maiuscolo, “i” per i numeri romani minuscoli e “I” per i numeri romani maiuscoli.  

Attributo Valore Descrizione
type

a

A

i

I

Specifica il tipo di punto elenco.

<html>
   <head>
        <title>La mia pagina web</title>
   </head>
   <body>
       <ol type="a">
             <li>Sono il primo dell'elenco</li>
             <li>Sono il secondo dell'elenco</li>
             <li>Sono il terzo dell'elenco</li>
       </ol>
   </body>
</html>

Vediamo l’esempio.

Liste non numerate

Gli elenchi non numerati sono composti dal tag genitore <ul> (unordered list) e i singoli tag per ogni punto elenco <li> (list items). I browser elencano i punti con pallini, che possono essere rimossi con i CSS. Con l’attributo “type” possiamo modificare i pallini, basta utilizzare i valori “circle” per inserire dei cerchi e “square” per inserire quadrati. Questo attributo non è supportato dall’HTML 5.

Attributo Valore Descrizione
type

disc

square

circle

Specifica il tipo di punto elenco.

Non è supportato dall’HTML 5
<html>
   <head>
        <title>La mia pagina web</title>
   </head>
   <body>
           <ul type="disc">
             <li>Sono il primo dell'elenco</li>
             <li>Sono il secondo dell'elenco</li>
             <li>Sono il terzo dell'elenco</li>
       </ul>
   </body>
</html>

Vediamo l’esempio.

Consigliamo di utilizzare questo tag per organizzare i menu di navigazione del vostro sito web.

Sottoelenchi

E’ possibile anche inserire un ulteriore elenco di un determinato punto elenco. Basta aggiungere in uno dei tag contenitore (<ol><ul>) un altro tag contenitore e i relativi punti elenchi.

<html>
   <head>
        <title>La mia pagina web</title>
   </head>
   <body>
        <ul type="circle">
            <li>Sono il primo punto dell'elenco</li>
            <li>Sono il secondo punto dell'elenco</li>
            <li>Sono il terzo punto dell'elenco</li>
                <ul type="square">
                    <li>Sono il primo punto del punto elenco tre</li>
                    <li>Sono il secondo punto del punto elenco tre</li>
                    <li>Sono il terzo punto del punto elenco tre</li>
                </ul>
             <li>Sono il quarto punto dell'elenco</li>
             <li>Sono il quinto punto dell'elenco</li>
        </ul>
   </body>
</html>

Vediamo l’esempio.

Liste di definizione

Gli elenchi di definizioni sono composti dal tag genitore <dl> (description list). Racchiude al suo interno due tag: <dt> (defines terms) dove inserire il termine da definire e <dd> (describes each term) dove inserire la definizione.

<html>
   <head>
        <title>La mia pagina web</title>
   </head>
   <body>
        <dl>
            <dt>Termine da definire</dt>
            <dd>Definizione del termine</dd>
        </dl>
   </body>
</html>

Vediamo l’esempio.

Sequenze di escape

Vi è mai capitato di leggere nei siti web frasi con errori ortografici nelle lettere accentate? Ad esempio “La pazienza è la virtù dei forti”. Questo succede quando non vengono utilizzate le seguenze di escape. Sono codici da sostituire a tutte le vocali accentate e ai caratteri speciali, nei testi del vostro documento HTML. Ma perchè si devono utilizzare? La spiegazione è molto semplice. I siti viaggiando su una rete mondiale possono essere visitati da qualsiasi utente, in qualsiasi luogo, ma non tutti i paesi utilizzano lo stesso alfabeto. Nei dispositivi non vengono installati tutti gli alfabeti, per cui non sono di grado di interpretare caratteri diversi dai propri. Il problema è stato risolto con le sequenze di escape. Ogni lettera speciale o accentata è stata trasformata in un codice, che viene interpretato correttamente da tutti i browser web, in tutto il mondo. Le seguenze di escape sono sempre composte dalla “&” iniziale e dal “punto e virgola” finale.

Ecco le seguenze di escape da utilizzarsi per le vocali accentate:

Carattere minuscolo Sequenza di escape Carattere maiuscolo Sequenza di escape
à &agrave; À &Agrave;
á &aacute; Á &Aacute;
è &egrave; È &Egrave;
é &eacute; É &Eacute;
ò &ograve; Ò &Ograve;
ó &oacute; Ó &Oacute;
ù &ugrave; Ù &Ugrave;
ú &uacute; Ú &Uacute;
ì &igrave; Ì &Igrave;
í &iacute; Í &Iacute;
<html>
   <head>
       <title>La mia pagina web</title>
   </head>
   <body>
       <h1>Quale sar&agrave; la prossima tecnologia che cambier&agrave; il mondo?<h1>
       <p>Negli ultimi anni abbiamo visto sempre pi&ugrave; nuove tecnologie che neanche nei nostri sogni pi&ugrave; incredibili abbiamo mai immaginato</p>
   </body>
</html>

Alessia Garraffa

Possiamo esserti utili?

Ti è piaciuto questo articolo? Vuoi saperne di più? Non esitare a scriverci!

EMail   *
Nominativo/Azienda   *
Telefono
Messaggio   *
Vuoi iscriverti alla newsletter?
Accettazione Privacy Policy   *