Archivi categoria: Linguaggi, HTML

HTML: Come creare un traduttore per il nostro sito o blog

Vediamo come realizzare un traduttore personalizzato per il nostro sito internet o blog.

La tecnica che utilizzero’ per la creazione del traduttore è la seguente:

Collocare le immagini (in formato icona) delle varie lingue in cui voglio che venga tradotto il sito o blog e ad ogni bandiera associare il link del traduttore di google nella lingua corrispondente.

Cosa ci occorre:

  • le varie foto in formato icona delle bandiere dei vari paesi (le icone sono state reperite gratuitamente su http://www.iconboom.it/)
  • i vari link del traduttore di google delle varie lingue in cui vogliamo la traduzione.

 

Procediamo nella scittura del codice HTML:

<center>

<a target=”_blank” href=”http://google.com/translate_c?hl=it&sl=it&tl=en&u=http://programmifree.myblog.it/”>
<img src=”http://programmifree.myblog.it/images/flag/000141.gif”/></a>

<a target=”_blank” href=”http://google.com/translate_c?hl=it&sl=it&tl=fr&u=http://programmifree.myblog.it/”>
<img src=”http://programmifree.myblog.it/images/flag/000265.gif”/></a>

<a target=”_blank” href=”http://google.com/translate_c?hl=it&sl=it&tl=es&u=http://programmifree.myblog.it/”>
<img src=”http://programmifree.myblog.it/images/flag/000356.gif”/></a>

<a target=”_blank” href=”http://google.com/translate_c?hl=it&sl=it&tl=de&u=http://programmifree.myblog.it/”>
<img src=”http://programmifree.myblog.it/images/flag/000353.gif”/></a>

<a target=”_blank” href=”http://google.com/translate_c?hl=it&sl=it&tl=pt&u=http://programmifree.myblog.it/”>
<img src=”http://programmifree.myblog.it/images/flag/000459.gif”/></a>

</center>


Come personalizzare il traduttore:

Per far si che venga effettuata la traduzione della pagina web che vogliamo dobbiamo sostituire in ogni riga di codice all’
indirizzo http://programmifree.myblog.it l’indirizzo della pagina web che desideriamo (evidenziate nella foto sotto).

tradu-2.png

 

Il traduttore generato da questo codice HTML è presente e funzionante in questo blog (vedi figura successiva).

trad.jpg

 

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: