• News
  • Alcuni buoni consigli per iniziare a scrivere un sito in HTML5

Alcuni buoni consigli per iniziare a scrivere un sito in HTML5

Web Design
Alcuni buoni consigli per iniziare a scrivere un sito in HTML5

Quando si è ai primi passi con la programmazione web è bene conoscere le basi di HTML5 per evitare di fare errori e rischiare di compromettere ore e ore di lavoro.

Il primo errore da evitare è utilizzare la sintassi corretta del doctype prima del tag di apertura html che indicherà al browser che la nostra pagina web è sviluppata in HTML 5.

Ora entriamo in modo più approfondito in questo argomento e vediamo cosa possiamo fare.

Template HTML5

Esistono tantissime possibilità di realizzare template in HTML5 perché dipenderà dal layout che vorremmo creare per il nostro sito web.

Prima di passare al codice della pagina è bene conoscere quali sono i tag principali che possiamo utilizzare  per costruire la struttura di un sito:

  • body
  • main
  • header
  • nav
  • section
  • article
  • aside
  • footer

Per maggiori informazioni sugli elementi HTML5 clicca qui.

Adesso che abbiamo acquisito alcune informazioni passiamo alla parte pratica. Partiamo da un template standard che può aiutarvi a fare pratica e a far ordine tra gli elementi visti in precedenza. 

Ecco un esempio di pagina in HTML5 per principianti. Ora potete lavorare sulla struttura in modo corretto. 

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <header>
      <nav>
        <img src="logo.jpg" alt="Logo">
        <ul>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
          <li><a href="#">link</a></li>
        </ul>
      </nav>
    </header>
    <main>
    <section>
      <h1>
        Titolo del mio articolo
      </h1>
      <article>
        <p>
          Testo del mio articolo
        </p>
      </article>
      <aside>
        <p>
          Barra laterale
        </p>
      </aside>
    </section>
    </main>
    <footer>
      Copyright
    </footer>
  </body>
</html>

Ora sapete come usare HTML5 per creare una struttura base. Ma non fermiamoci qui, andiamo a conoscere altri elementi utili.

Esempio di form in HTML5

Spesso quando si è alle prime armi si ha sempre paura di sbagliare, per fortuna nel web è possibile correggere velocemente i propri errori e migliorare il proprio codice.

Ora vedremo un pezzo di codice di un form in HTML5 base, utile per creare il vostro form di contatti.

<form action="" method="post" class="form-contatti">
  <div>
    <label for="nome">Nome: </label>
    <input type="text" name="nome" id="nome" required>
  </div>
  <div>
    <label for="email">Email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div>
    <input type="submit" value="Invia">
  </div>
</form>

(Attenzione: per poter far funzionare correttamente questo form è necessario implementare il codice attraverso l’attributo action)

HTML5 e CSS3

L’accoppiata HTML5 e CSS3 è diventata famosa per le infinite possibilità di personalizzazione e di animazione insieme a JavaScript puro o altre librerie jQuery. Potete trovare esempi di tutti i generi su YouTube o semplicemente cercando sui motori di ricerca. 

Vi segnaliamo un esempio di HTML 5 e CSS3 molto suggestivo:

Insomma l’unico limite è la fantasia.

Vorresti una guida in HTML 5?

Perché non vieni a scoprire il nostro corso di HTML5 a Torino. In sole 10 lezioni potrai conoscere tutte le regole e le strategie per creare il tuo sito in HTML 5!



Articoli recenti