Translate

Scrivere come testo del codice HTML all'interno di una pagina web

Ad un blogger o ad un webmaster può capitare di dover presentare come semplice testo del codice che, senza opportuni accorgimenti,invece verrebbe automaticamente decodificato come tale e non visualizzato come si vorrebbe.
Ovviare all'inconveniente è abbastanza semplice: basta fare le seguenti sostituzioni dei due caratteri che identificano e racchiudono i tags dell'HTML cioè < e >

Sostituiamo il carattere < con la sequenza &lt; ed il carattere > con la sequenza &gt;.

Con questo trucchetto, tutto ciò che è racchiuso tra le due sequenze ( che a video verrano rese come <> ) non verrà decodificato come codice ma come semplice testo e pertanto visualizzato correttamente sulla pagina web.

Ad esempio, vogliamo fare in modo che il seguente codice venga visuallizzato come testo:

<div style="text-align: center;"><a href="http://www.bit-notes.blogspot.com" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img border="0" style="cursor: pointer;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Gntrlx6biS-s0LLArFBuxqHtezx30piUfNjiuf2gfzH-p7x3nlx2s2tI7qx_HMm1EPY7Q56X5hDcgaNJIoaBUveAIdFiVGStror1bsBYIuIEREo4sf2aXAjVYEke4DSiYHJs/s200/banner-bitnotes.png"/></a></div>

dovremo sostituire così:

&lt;div style="text-align: center;"&gt;<a href="http://www.bit-notes.blogspot.com" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"&gt;&lt;img border="0" style="cursor: pointer;" alt="" src="http://https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Gntrlx6biS-s0LLArFBuxqHtezx30piUfNjiuf2gfzH-p7x3nlx2s2tI7qx_HMm1EPY7Q56X5hDcgaNJIoaBUveAIdFiVGStror1bsBYIuIEREo4sf2aXAjVYEke4DSiYHJs/s200/banner-bitnotes.png"/&gt;&lt;/a>&lt;/div&gt;

Se non facciamo le sostituzioni e scriviamo direttamente il codice così com'è, otterremo a video il seguente risultato:


che non va bene se dobbiamo utilizzare il codice a scopi didattici o divulgativi oppure se esso deve essere utilizzato per essere inserito in un'altra pagina web con un copia/incolla.

Pubblicato da