Struttura del testo

TAG

In HTML5, i “tag” sono elementi di markup utilizzati per definire la struttura e il contenuto di una pagina web. Un tag HTML è costituito da un nome racchiuso tra parentesi angolari (<>), ad esempio <tag>. I tag HTML vengono utilizzati per descrivere gli elementi della pagina, come testo, immagini, link, form, tabelle, ecc.

E’ molto semplice scrivere una pagina HTML direttamente in codice sorgente utilizzando i tag. Tim Berners Lee (creatore del linguaggio HTML e del protocollo HTTP) ha affermato:

« Non ho mai previsto che il codice sorgente di HTML (cioè la roba con le parentesi angolate) fosse visibile agli utenti. Un browser/editor avrebbe fatto vedere o editare all’utente soltanto il linguaggio di una pagina di ipertesto, come se stesse usando un word processor. Per me, e credevo anche per gli altri, l’idea di chiedere al pubblico di battere a mano le parentesi era inaccettabile quanto chiedere a qualcuno di scrivere un documento in Microsoft Word stendendo il formato in codice binario. Ma la leggibilità dell’HTML si rivelò una manna inaspettata. Con mia grande sorpresa molte persone familiarizzarono alla svelta con i tag, e iniziarono a scrivere direttamente propri documenti in HTML »
Tim Berners Lee

IDE

Come sviluppare un sito web in linguaggio HTML 5? Per farlo è necessario utilizzare un ambiente integrato di sviluppo (IDE). Gli ambienti di sviluppo più noti sono:

Notepad++
NoteTab
CoffeeCup
Visual Studio Code
Atom
Sublime Text 3
Android Studio
Brackets

Struttura delle pagina

Ogni pagina html ha la seguente struttura minimale:

<!DOCTYPE html>
<html>
  <head>
     <title> Pagina di esempio </title>
  </head>

  <body>
   ...
   </body>
</html>

Un browser potrebbe visualizzare anche altri tipi di linguaggi come XHTML, SVG ed altri. Per questo motivo il documento si inizia sempre con un tag detto DOCTYPE che sta ad indicare che il documento sarà scritto in linguaggio HTML

Il tag HTML anche detto TAG di root contiene tutti gli altri tag del documento html.

La sezione head contiene informazioni sul documento stesso. Questa sezione può contenere molte informazioni sulla pagina. Queste informazioni includono il titolo della pagina, il linguaggio con il quale è scritta ed altre informazioni descrittive. Gli elementi descrittivi si chiamano anche META ELEMENTS e permettono appunto di descrivere la pagina.

La sezione body contiene il corpo della pagina web ovvero ciò che sarà visualizzato nel browser.

TAG di struttura

Lo scopo di questa guida non è presentare tutti i tag ma studiare il linguaggio attraverso alcuni di essi. Illustriamo i principali tag per la struttura del testo in un documento HTML:

Paragrafo
Titoli
Blockquote
Break Line
Horizontal Row

Paragrafi <p>

Il paragrafo è l’unità di base entro cui suddividere un testo. Il tag <p> lascia una riga vuota prima della sua apertura e dopo la sua chiusura:

<!DOCTYPE html>
<html>
  <head>
     <title> Pagina di esempio </title>
  </head>

  <body>
     <p> Argomenti da presentare </p>
     <p> Argomenti da presentare </p>
   </body>
</html>

Questo codice produrrebbe la seguente pagina:

Titoli <h1>

Ogni documento parte con un titolo. E’ possibile utilizzare differenti dimensioni per i titoli. HTML inoltre usa differenti dimensioni per i titoli attraverso gli elementi <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Quando viene mostrato un titolo viene anche aggiunta una linea prima e dopo lo stesso.

<!DOCTYPE html>
<html>
  <head>
     <title> Heading Page</title>
  </head>

  <body>
     <h1> This is heading one </h1>
     <h2> This is heading two </h2>
     <h3> This is heading three </h3>
     <h4> This is heading four </h4>
     <h5> This is heading five </h5>
     <h6> This is heading six </h6>
  </body>
</html>

Break Line <br>

Quando viene usato l’elemento <br> il testo va a capo e parte dalla riga successiva. Questo tag è un esempio di elemento vuoto che non necessita di apertura e chiusura e non ha niente come contenuto all’interno di esso.

<!DOCTYPE html>
<html>
  <head>
     <title> Pagina di esempio </title>
  </head>

  <body>
     <p> 
         Hello<br>
         You delivered yout assignment on time. <br> Thanks <br>
         Mahnaz
     </p>
   </body>
</html>

Blockquote <blockquote>

<!DOCTYPE html>
<html>
  <head>
     <title> Pagina di esempio </title>
  </head>

  <body>
     <blockquote>
       <p>[...] fatti non foste per viver come bruti. ma per seguir virtute e canoscenza</p>
       <cite> Inferno Canto XXVI - </cite>
     </blockquote>
   </body>
</html>

Linee orizzontali <hr>

Le linee orizzontali sono solitamente usate per dividere le varie sezioni di un documento. Il tag <hr> crea quindi una linea dalla corrente posizione nel documento al margine destro.

<!DOCTYPE html>
<html>
  <head>
     <title> Pagina di esempio </title>
  </head>

  <body>
      <p> this is paragraph one and should be on top </p>
      <hr>
      <p> this is paragraph two and should be on bottom </p>
   </body>
</html>