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.
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>
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à virtuale.</p>
<p>Inventato da Palmer Luckey con la sua società 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 è stato sviluppato un nuovo prototipo per risolvere questo
problema ma la vera domanda è, cosa ne farà il fondatore di facebook?</p>
</body>
</html>
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>
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>
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>
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ù nuove tecnologie che neanche <br>
nei nostri sogni più incredibili abbiamo mai immaginato</p>
</body>
</html>
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>
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).
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>
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>
Consigliamo di utilizzare questo tag per organizzare i menu di navigazione del vostro sito web.
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>
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>
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 |
|---|---|---|---|
| à | à | À | À |
| á | á | Á | Á |
| è | è | È | È |
| é | é | É | É |
| ò | ò | Ò | Ò |
| ó | ó | Ó | Ó |
| ù | ù | Ù | Ù |
| ú | ú | Ú | Ú |
| ì | ì | Ì | Ì |
| í | í | Í | Í |
<html>
<head>
<title>La mia pagina web</title>
</head>
<body>
<h1>Quale sarà la prossima tecnologia che cambierà il mondo?<h1>
<p>Negli ultimi anni abbiamo visto sempre più nuove tecnologie che neanche nei nostri sogni più incredibili abbiamo mai immaginato</p>
</body>
</html>
Alessia Garraffa