Scrivere in maniera pulita il codice

Indentazione e Struttura del Codice

Abbiamo visto i tag più comuni, ma ce ne sono molti altri di cui parleremo in seguito, ma vorrei prima parlarvi di un argomento molto importante nei linguaggi di programmazione ossia l'indentazione e come scrivere in maniera "pulita" il codice in modo che anche un altro programmatore possa capire ciò che è stato fatto.

L'indentazione viene utilizzata da tutti i linguaggi di programmazione, per questo quando vedete un sito Web o il codice di un App noterete che ogni riga ha uno spazio precedente al codice a seconda della sua importanza: i tag principali o le funzioni sono alla sinistra del documento html o di un'applicazione scritta in un determinato linguaggio di programmazione, mentre i tag "figli" o le relative istruzioni di quella funzione sono spostati verso destra.

Questo è lo standard W3C per scrivere codice in maniera leggibile, è molto importante l’indentazione nei linguaggi di programmazione (soprattutto il Python dove se il codice non è indentato non funziona proprio) ma, anche se non è obbligatorio in HTML, è consigliabile utilizzarla anche per creare Siti Web.

Uniamo questo discorso con come si scrive una pagina HTML, abbiamo visto all’inizio un esempio di pagina HTML ma magari molti di voi vorrebbero iniziare a creare pagine web e iniziare ad addentrarvi nel mondo dell'informatica.

Iniziamo dall’inizio, per prima cosa ci vuole una dichiarazione della versione HTML che stiamo usando seguito dal tag principale (root) html, poi head con i meta tag e il body con la parte visibile in una pagina html, ovviamente useremo l'indentazione per farvi comprendere come si dovrebbe scrivere una pagina html:


<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <title>Primo Sito Web</title>
  </head>
  <body>
    <h1>Primo Sito Web</h1>
    <p>Questa è la mia prima pagina HTML</p>
  </body>
</html>

Differenze tra HTML 4.01 e HTML 5

L'HTML 5 rispetto alle versioni precedenti aggiunge dei tag per creare una struttura della pagina più specifica, ad esempio il tag header per la "testata", il footer per il piè di pagina, il main per il corpo della pagina, l’aside per aggiungere una colonna laterale. Prima di questi tag in HTML 4.01 venivano usati i div per dividere la pagina in più parti inserendo come attributi id o class per specificare che tipo di div fossero.

Noterete un diverso modo di scrivere il codice soprattutto sulla dichiarazione del documento e anche il charset tra le due versioni, non è importante saper scrivere il codice in HTML 4.01 al giorno d’oggi ma questo confronto è per farvi capire come cambia il modo di scrivere una pagina HTML.

Nella versione 4.01 c’erano 3 DOCTYPE distinti: la versione strict era quella priva di tag deprecati (sostituiti o eliminati dallo standard 3WC), la versione loose dove era invece possibile usare tag deprecati e la frameset dove si potevano inserire parti di un’altra pagina in una pagina HTML.

Strict:


<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Loose:


<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset:


<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Per definire la versione del set di caratteri utilizzato venivano aggiunti due attributi come http-equiv e il content, anche loro come il tag frameset ormai deprecati nella versione HTML 5.

Una pagina HTML utilizzando l’HTML 4.01 Strict:


<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html";  charset = "UTF-8">
  </head>
  <body>
    <div id="header">
      <img src="logo.jpg" alt="logo" />
    </div>
    <div id="main">
      <h1>Mio Sito Web</h1>
      <p>Questo è il mio primo Sito Web</p>
    </div>
    <div id="aside">
      <ul>
        <li>Home</li>
        <li>Pictures</li>
        </li>Video</li>   
      </ul>
    </div>
    <div id="footer">
      <h2>Questo è un footer</h2>  
    </div>
  </body>
</html>

Lo Stesso codice in HTML 5 sarebbe invece così:

  
  <!DOCTYPE html> 
  <html>
    <head>
      <meta charset = "UTF-8">
    </head>
    <body>
      <header>
        <img src="logo.jpg" alt="logo" />
      </header>
      <main>
        <h1>Mio Sito Web</h1>
        <p>Questo è il mio primo Sito Web</p>
      </main>
      <aside>
        <ul>
          <li>Home</li>
          <li>Pictures</li>
          </li>Video</li>   
        </ul>
      </aside>
      <footer>
        <h2>Questo è un footer</h2>  
      </footer>
    </body>
  </html>

Come potete notare l'HTML 5 aggiunge nuovi tag rispetto alla versione 4.01, per creare i vari blocchi della pagina web non si usa più div id="nome blocco" ma i tag header, main, aside e footer per gestire le varie sezioni della pagina


<header> = Parte superiore della pagina (testata), dove generalmente troviamo logo e il titolo del Sito Web.
<main> =  Parte principale della pagina, qui troviamo tutto il contenuto visibile (paragrafi, foto, video).
<aside> = Parte laterale della pagina, spesso utilizzata per inserire social o pubblicità ma anche per inserire un menù di navigazione.
<footer> = Parte inferiore della pagina (piè di pagina), si utilizza per inserire il copyright, la partita iva o varie informazioni sul sito web, l’azienda o l’autore del Sito.

Molto più facile scrivere codice in HTML 5, non trovate?

Prev 6/6 Next