HTML training center: proviamo online l’HTML

Abbiamo scritto qualche riga di codice HTML oppure vogliamo visualizzare un banner senza ancora caricarlo nei nostri blog o siti?

No problem, possiamo utilizzare Html training center, non dobbiamo fare altro che copiare in codice HTML nel riquadro e cliccare sul pulsante “View”… fatto questo si aprira’ una nuova finestra che vi mostrerà in anteprima come apparirà nel browser il codice appena inserito.

Questa pagina messa in piedi dal sottoscritto (lo javascript non è di mia proprietà, è liberamente scaricabile da internet) è completamente gratuita.

E’ possibile vedere come funziona questo script a questo indirizzo:

http://programmifree.myblog.it/archive/2010/07/31/html-come-scrivere-esponenti-e-pedici-nel-nostro-sito-o-blog.html

HTML: Come inserire un link in un’immagine

Ecco come inserire un link in una foto usando il linguaggio html…

Il piu’ classico dei casi in cui si usa una tecnica del genere è per creare i codici HTML dei nostri banner, per questa guida analizzeremo questo caso, ovviamente possiamo estendere questo metodo per qualsiasi immagine (sia essa icona, banner o una qualsiasi fotografia).

Tutto quello che ci occorre è una foto e un indirizzo web da associare alla fotografia… eccoli:

banner.png

Questa immagine è caricata nel web all’indirizzo: //programmifree.myblog.it/images/banner.png

l’indirizzo web che vogliamo collegare alla foto è: http://programmifree.myblog.it

Di sicuro ci occorre utilizzare il tag <a> e il tag <img>, maggiori informazioni possiamo trovarle qui:

http://www.w3schools.com/TAGS/tag_a.asp

http://www.w3schools.com/TAGS/tag_img.asp


Sulla base di quanto acquisito leggendo le guide sui tag <a> e <img> proviamo a scrivere questo codice:

<a href=”http://programmifree.myblog.it/ target=”_blank><img src=”//programmifree.myblog.it/images/banner.png/></a>

Ora cerchiamo di tradurre in lingua italiana questa porzione di codice HTML:

<a href=”http://programmifree.myblog.it/ target=”_blank>

significa da questo punto in poi crea un link (il tag <a>) all’indirizzo http://programmifree.myblog.it/ (specificato da href) ed aprilo in una nuova finestra del browser predefinito (target=”_blank”)

<img src=”//programmifree.myblog.it/images/banner.png/>

significa inserisci l’immagine (tag <img>) caricata nell’indirizzo web //programmifree.myblog.it/images/banner.png (specificato da src che significa “source”)

</a>

significa fine degli effetti del tag <a>

Vediamo ora l’effetto che crea questo codice HTML:


 



pdf.gif