(Creata pagina con "= Gioco a bivi: Avventura nel castello = Si trae ispirazione dal gioco in 5 righe di html, diffuso dal Dojo di Galway. Si tratta di costruire un percorso a scelte multiple tr...") |
(gioco a bivi HTML) |
||
Riga 116: | Riga 116: | ||
</body> | </body> | ||
</html></pre> | </html></pre> | ||
− | <span style="line-height: 1.6;">Si vede come le impostazioni generali di stile possano essere definite nella sezione </span>'''<head>'''''<b><span style="line-height: 1.6;">,</span></b>''<span style="line-height: 1.6;">inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag </span>'''<h1>''' e '''<body>'''<span style="line-height: 1.6;">.</span> | + | <span style="line-height: 1.6;">Si vede come le impostazioni generali di stile possano essere definite nella sezione </span>'''<head>'''''<b><span style="line-height: 1.6;">,</span></b>''<span style="line-height: 1.6;">inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag </span>'''<h1>''' e '''<body>'''<span style="line-height: 1.6;">.[[Category:HTML]]</span> |
Versione delle 17:11, 29 ago 2014
Gioco a bivi: Avventura nel castello
Si trae ispirazione dal gioco in 5 righe di html, diffuso dal Dojo di Galway. Si tratta di costruire un percorso a scelte multiple tramite link a diverse pagine html. Inizialmente si dà priorità alla logica del gioco usando pochi tag html e nessun elemento di stile, per inserire successivamente ulteriori elementi html e di stile che permetteranno di abbellire le pagine.
Passo 1: Logica del gioco
È il momento di creare una cartella per contenere i vari file che saranno necessari, dopodiché si parte realizzando la pagina index.html con il seguente codice:
index.html:
<html> <body> <p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/> Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/> <img src="castello.jpg" /></p> <a href ="entra.html">Entra</a> o <a href="salta.html"> Salta </a> </body> </html>
Questa pagina dà due scelte, di passare alla pagina entra.html, o alla pagina salta.html che sono le seguenti:
entra.html:
<html> <body> <p>Sei dentro al castello<br/> Complimenti</p> <img src="sala.jpg" /><br/> <a href ="index.html">Torna Fuori</a> </body> </html>
salta.html:
<html> <body> <p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p> <img src="coccodrillo.jpg" /><br/> <a href ="index.html">Ricomincia</a> </body> </html>
Le pagine fanno riferimento a immagini che sono nella stessa cartella dei file html, e devono ovviamente essere già state predisposte.
A questo punto i ragazzi possono estendere o complicare la logica aumentando il numero di scelte, e il numero di livelli.
Passo 2: abbellimento grafico
Si inseriscono sia nuovi tag html, che elementi di stile, in particolare:
<head>, <title>, <style>, <h1> come tag;
diversi elementi di stile per gestire colore dei font, colore di sfondo e caratteristiche grafiche dei link.
index.html diventa:
<html> <head> <title>Avventura nel castello</title> <style> p { color: white; font-size: 16px; } a { text-decoration: none; color: blue; } </style> </head> <body style="background-color:black"> <h1 style="color:lightblue">Avventura nel castello</h1> <p>Sei davanti a un castello circondato da un fossato pieno di coccodrilli.<br/> Puoi <i>entrare</i> nel castello o <i>saltare</i> nel fossato<br/> <img src="castello.jpg" /></p> <p><a href ="entra.html">Entra</a> o <a href="salta.html">Salta</a></p> </body> </html>
Su questa falsariga si modificano entra.html e salta.html, facendo usare le funzioni di copia e incolla. Si mette in evidenza che è sufficiente copiare e incollare il tag <style> per replicare le caratteristiche grafiche della pagina index.html sulle altre
entra.html:
<html> <head> <title>Avventura nel castello - Hai vinto!</title> <style> p { color: white; font-size: 16px; } a { text-decoration: none; color: blue; } </style> </head> <body style="background-color:black"> <h1 style="color:green">Avventura nel castello - Hai vinto!</h1> <p>Sei dentro al castello<br/> Complimenti</p> <img src="sala.jpg" /><br/> <a href ="index.html">Torna Fuori</a> </body> </html>
salta.html:
<html> <head> <title>Avventura nel castello - Hai perso!</title> <style> p { color: white; font-size: 16px; } a { text-decoration: none; color: blue; } </style> </head> <body style="background-color:red"> <h1 style="color:black">Avventura nel castello - Hai perso!</h1> <p>Sei stato un ottimo pasto per il coccodrillo, che ti ringrazia con affetto</p> <img src="coccodrillo.jpg" /><br/> <a href ="index.html">Ricomincia</a> </body> </html>
Si vede come le impostazioni generali di stile possano essere definite nella sezione <head>,inserendole una sola volta, mentre le impostazioni specifiche di un tag vadano inserite nel tag stesso, come nei tag <h1> e <body>.