Premi “Invio” per saltare al contenuto

Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I

Altri tag HTML

Questo articolo è parte della collana Realizzare Giochi in HTML5

Altri articoli in questa collana:

  1. Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I (Corrente)
  2. Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
  3. Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi

I tag disponibili nel linguaggio HTML sono numerosi. Molti tag che in passato hanno goduto di grande successo sono stati vietati nell’ultima versione, anche se la maggior parte dei browser continua a mostrare correttamente il contenuto dei tag obsoleti come <font>, <b>, <marquee>, <center>, il loro uso è vietato dalle specifiche HTML5 che indicano chiaramente che il contenuto deve essere nettamente separato dalla presentazione.

Nel moderno web utilizziamo i tag come contenitori e definiamo il loro aspetto utilizzando il linguaggio CSS.

Il tag più comune è <div>, che rappresenta un blocco di contenuto senza nessuna caratteristica grafica predefinita.

Tutti i tag supportano un attributo style=”” che permette di definirne l’aspetto grafico e di presentazione.

Modifichiamo l’esempio precedente e aggiungiamo un contenitore <div> attorno al testo, la pagina rimarrà visivamente identica.

<!doctype html>
<html lang="it">
  <head>
    <meta charset="UTF-8">
    <title>Una pagina HTML</title>
  </head>
  <body>
    <div>
      Ciao Mondo!
    </div>
  </body>
</html>

Aggiungendo qualche regola CSS al <div> appena creato ecco che tutto cambia:

<!doctype html>
<html lang="it">
  <head>
    <meta charset="UTF-8">
    <title>Una pagina HTML</title>
  </head>
  <body>
    <div style="color: red; text-align: center; transform: rotate(12deg); position: absolute; top: 50%; left: 50%;">
      Ciao Mondo!
    </div>
  </body>
</html>

Il contenuto dell’attributo style=”” è chiamato stile in linea, non è molto elegante ma al momento ci è stato utile per osservare gli effetti del CSS su un elemento qualsiasi.

Il risultato dovrebbe assomigliare a questo:

ciaomondo-css.html
loading spinner

Continua a leggere questa collana:

4 Commenti

  1. darioamato 3 Novembre 2016

    tutorial carino ed efficace. E’ logico che hai appena buttato giù il prologo di un vero e proprio “romanzo” noto come developing di un videogame. Stima per il risultato.

    loading spinner
    • Daniele Alessandra 3 Novembre 2016

      Grazie Dario, l’idea è proprio quella di realizzare una guida completa a partire praticamente da zero. Se questa serie di articoli avrà successo pensavo di inserire successivamente strumenti sempre più completi: da CreateJS a Unity3D. Vedremo come si evolverà, tu torna spesso a trovarmi ;)

      loading spinner
      • darioamato 3 Novembre 2016

        inoltre ho notato con mio grande poiacere che hai una Repository molto interessante su GitHub, sarebbe molto interessante un post su come creare un componente per github e le linee guida per pubblicare correttamente (tipo plugin js o wordpress)

        loading spinner
        • Daniele Alessandra 3 Novembre 2016

          Ottimo suggerimento, già dal prossimo articolo creerò un Repository per chi volesse seguirmi e così gli utenti più intraprendenti potranno partecipare direttamente alla stesure del codice ;)

          loading spinner

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *