Altri tag HTML
This post is part of the series Realizzare Giochi in HTML5
Other posts in this series:
- Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I (Current)
- Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
- 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:
Continue reading this series:
Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
4 replies on “Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I”
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.
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 ;)
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)
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 ;)