HTML5: i Tag

Scritto da ambrix on . Postato in Corsi Programmazione, NotInHome, Web Design

logo html

Lezione 02 Nel linguaggio HTML5, i TAG più comuni e diffusi e usati dai programmatori del web.

Come abbiamo visto nell’introduzione su HTML5, i TAG sono i mattoncini necessari alla costruzione di un sito web. Ve ne sono tantissimi in giro per il web. Andiamoli a scovare.

Vediamo cosa accade nel seguente codice:

<html>
 <body>
  I miei film anni 80 preferiti
  Ritorno al Futuro
  Indiana Jones
  Ghostbusters
  Grosso guaio a Chinatown
 </body>
</html>

Come risultato avremo il testo racchiuso nel body, senza andare a capo. Infatti il ritorno a capo viene visto come uno semplice spazio bianco.

I miei film anni 80 preferiti Ritorno al Futuro Indiana Jones Ghostbusters Grosso guaio a Chinatown

Per un visitatore della nostra homepage, non sarà sicuramente un’esperienza indimenticabile! Potremmo, tuttavia, pensare di utilizzare un  heading tag , come ad esempio <h1>:

<html>
 <body>
  <h1>I miei film anni 80 preferiti</h1>
  Ritorno al Futuro
  Indiana Jones
  Ghostbusters
  Grosso guaio a Chinatown
 </body>
</html>

Ottenendo:

I miei film anni 80 preferiti

Ritorno al Futuro Indiana Jones Ghostbusters Grosso guaio a Chinatown

In questo modo stiamo iniziando a rendere più leggibile il testo. Potremmo quindi pensare di dare più o meno enfasi ai vari titoli utilizzando altri heading tag:

<html>
 <body>
  <h1>I miei film anni 80 preferiti</h1>
  <h2>Ritorno al Futuro</h2>
  <h3>Indiana Jones</h3>
  <h4>Ghostbusters</h4>
  <h5>Grosso guaio a Chinatown</h5>
 </body>
</html>

In questo modo otteniamo:

I miei film anni 80 preferiti

Ritorno al Futuro

Indiana Jones

Ghostbusters

Grosso guaio a Chinatown

 

I tag di heading, vanno in ordine decrescente, dal più importante h1 al meno importante h6. In genere quando si incontra un heading tag, si ha buona probabilità che esso sia seguito da un  paragrafo  <p>. Inoltre, al fine di migliorare la leggibilità, introdurremo il tag <br> che forza a capo la visualizzazione del testo.

<html>
 <body>
  <h1>I miei film anni 80 preferiti</h1>
  <p>Ritorno al Futuro <br>
  Indiana Jones <br>
  Ghostbusters <br>
  Grosso guaio a Chinatown</p>
 </body>
</html>

In tal caso otteniamo una lettura più compatta del testo:

I miei film anni 80 preferiti

Ritorno al Futuro
Indiana Jones
Ghostbusters
Grosso guaio a Chinatown

Si noti come il tag <br> non necessita di chiusura: lo si usa semplicemente alla fine del testo, per quante volte si desidera andare a capo. Esiste anche un tag che si usa propriamente per enfatizzare un testo. Infatti con <em> possiamo dare enfasi ad una parola:

<html>
 <body>
  <h1>I miei film anni 80 preferiti</h1>
  <p>Ritorno al Futuro <br>
  Indiana Jones <br>
  Ghostbusters <br>
  Grosso guaio a <em>Chinatown</em></p>
 </body>
</html>

In questo modo stiamo dando enfasi alla parola Chinatown:

I miei film anni 80 preferiti

Ritorno al Futuro
Indiana Jones
Ghostbusters
Grosso guaio a Chinatown

C’è anche un tag per rendere il testo in  grassetto : il tag <strong>.

<html>
 <body>
  <h1>I miei film anni 80 preferiti</h1>
  <p>Ritorno al Futuro <br>
  Indiana <strong>Jones</strong> <br>
  Ghostbusters <br>
  Grosso guaio a <em>Chinatown</em></p>
 </body>
</html>

I miei film anni 80 preferiti

Ritorno al Futuro
Indiana Jones
Ghostbusters
Grosso guaio a Chinatown

Finora abbiamo visto i tag che appaiono nella pagina web di esempio, tuttavia c’è un tag che non è visualizzato nel sito web. È il tag <head>. Questo tag viene utilizzato per aggiungere informazioni speciali come il titolo del sito o lo stile della pagina. Pertanto, diamo un titolo al nostro sito. Per farlo, abbiamo bisogno di aggiungere il tag <title> all’interno del tag <head>.

<html>
 <head>
 <title>Il mio sito Web</title>
 </head>
 <body>
  <h1>I miei film anni 80 preferiti</h1>
  <p>Ritorno al Futuro <br>
  Indiana <strong>Jones</strong> <br>
  Ghostbusters <br>
  Grosso guaio a <em>Chinatown</em></p>
 </body>
</html>

I miei film anni 80 preferiti

Ritorno al Futuro
Indiana Jones
Ghostbusters
Grosso guaio a Chinatown

Come è ben evidente, nulla è cambiato rispetto alla precedente visualizzazione. Tuttavia, abbiamo dato informazioni aggiuntive al codice, che potranno essere utili, ad esempio, alla indicizzazione della pagina sui motori di ricerca.

C’è una parte importante del codice di un sito web che abbiamo trascurato finora: il  doctype . Il doctype indica al browser quale versione di HTML stiamo utilizzando.

<!doctype html>
<html>
 <head>
 <title>Il mio sito Web</title>
 </head>
 <body>
  <h1>I miei film anni 80 preferiti</h1>
  <p>Ritorno al Futuro <br>
  Indiana <strong>Jones</strong> <br>
  Ghostbusters <br>
  Grosso guaio a <em>Chinatown</em></p>
 </body>
</html>

Ogni sito web, dovrebbe iniziare con <!doctype html>. In questo modo stiamo realizzando una pagina web davvero impeccabile.

Dopo aver letto la miniguida sui TAG in HTML5, potrebbe interessarti dare un’occhiata all’articolo Links e Multimedia.

Ritorna alla precedente <– []–> Vai alla successiva

Per Richieste, Avvisi e Lasciti Ereditari

Disclaimer

I contenuti di questo Blog (testi, immagini, foto, etc.) sono di mia creazione, tranne nei casi dove espressamente indicato.