Pagina aggiornata... Sabato, 09 settembre 2023 * Tempo di caricamento 0.60 secondi
Link navigazione : Home telaioHome ~ Tutorial ~ Html » Iframe - Finestre pagina personalizzate

..:: Iframe ::..

Una delle tante piccole utilissime magie del web... "iframe" ovvero
uno speciale box che ci permette di visualizzare in modo assolutamente personalizzato
il contenuto di una pagina web in un qualsiasi punto del nostro spazio

Largamente utilizzati nel web sopratutto per postare gadget e accessori
ma anche per la realizzazione di siti web

Perché è necessario un iframe per postare un gadget o un accessorio web?

Molto spesso i gadget o gli accessori web hanno dei codici molto lunghi, in alcuni casi è anche necessario
dividere le parti, (parte tra <head> e </head> e parte tra <body> e </body>) alcuni script vanno
in conflitto con altri presenti nella pagina, altri ancora si possono postare una sola volta in una pagina,
per cui l'uso degli iframe diventa indispensabile, sia per chi li distribuisce che per chi li preleva,
specie se è poco pratico con la gestione dei codici.

Il codice base per un iframe è questo:

<iframe name="xx" src="http://url pagina web" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="xx" height="xx" allowtransparency="true"></iframe>

- Vediamo a cosa servono i vari parametri:

<iframe : apertura tag

name="xx" : parametro essenziale identificativo per l'apertura dei link se l'iframe è utilizzato
nella struttura di un sito, non necessario nella realizzazione di un gadget

src="http://url pagina web" : indirizzo web della pagina che si desidera visualizzare

frameborder="0" : parametro per i bordi

marginheight="0" marginwidth="0" : parametri per i margini

scrolling="no" : parametro per lo scroll, per i gadget si esclude impostando "no"
nella struttura di un sito si inserisce impostando "auto"

width="xx" height="xx" : larghezza e altezza dell'iframe in base alle esigenze di visualizzazione

allowtransparency="true" : strasparenza dell'iframe, parametro necessario per IE, nello style
della pagina in cui viene postato il gadget andrà inserito questo parametro:
body { background-color=transparent;}
(N.B.: Il parametro allowtransparency="true" non passa la validazione w3c)

></iframe> : chiusura tag

Quando utilizziamo l'iframe per un gadget dobbiamo preoccuparci di inserire l'url esatto
della pagina in cui è inserito, impostare le esatte misure per la larghezza e l'altezza del gadget
nel caso in cui serva aggiungere il parametro per la trasparenza.

Lasciamo a "0" i parametri frameborder, marginheight, marginwidth, non cancellateli,
altrimenti si vedranno i contorni della "finestra" e l'effetto non sarà piacevole >_<'

Piccolo esempio...

Iframe completo

Iframe senza i parametri
frameborder, marginheight, marginwidth


- Nell'iframe completo, è inserito anche il parametro allowtransparency="true",
l'immagine usata non ha un bordo regolare (rettangolo) quindi senza
la trasparenza si visualizzerebbe uno sfondo bianco, se usate IE
lo vedete nel secondo iframe^^



Come procedere...

Prepariamo il nostro gadget e mettiamolo online in una pagina del nostro spazio, che deve essere
necessariamente un sito web, anche se postiamo i nostri lavori su un blog, possiamo creare un account
su un hostigh per siti, tipo Altervista che offre tanto spazio assolutamente gratuito...

^__________^ Guida dettagliata... || Un sito su Altervista ||

Come dicevo, mettiamo online il nostro gadget e recuperiamo url della pagina,
andiamo nel pannello di controllo del nostro spazio, apriamo la pagina e copiamo direttamente
dalla barra del browser l'indirizzo web della pagina (url) quindi scriviamolo nel nostro codice iframe;
è sottinteso che eseguiremo questa procedura lavorando su una nuova pagina del nostro Editor html

<iframe src="http://url pagina gadget/accessorio" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="**" height="**" allowtransparency="true"></iframe>

Inseriamo le giuste misure negli appositi parametri "width="**" height="**"" dell'iframe
nel caso utilizziamo un immagine o una table con misure note ci basterà appunto riportarle nei parametri,
se invece, e può capitare, di non avere la certezza delle misure, possiamo dare un colore di sfondo alla pagina
in cui lavoriamo, togliere momentaneamente se lo abbiamo inserito il parametro allowtransparency="true"
e sistemare quindi le misure affinché siano precise.

- Nella maggior parte degli Editor html è presente l'opzione "Doppia visualizzazione" cioè
la pagina in cui si lavora è divisa in due parti, nella parte superiore si scrive il codice in quella inferiore
si visualizza il lavoro, agendo nella parte inferiore possiamo sistemare le misere del box^^

Misure iframe

- Non ci resta che copiare il codice iframe nella pagina che metteremo online per poter prelevare i gadget^^

Rifiniamo il codice con due piccole stringhe che serviranno sia come credits che
per individuare facilmente il codice una volta postato in uno spazio:

<!-- Gadget by Tuo nome -->
<iframe src="http://url pagina web" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="**" height="**" allowtransparency="true"></iframe>
<!-- Gadget by Tuo nome -->

# Prelevate qui il codice base:



Possiamo inserire vari iframe in una pagina, senza esagerare però altrimenti diventa troppo pesante
e ci vorrà un secolo per visualizzarla utilizziamo una table per un'anteprima ordinata e gradevole ^_^

Potete leggere il tutorial qui -> Pagina anteprima gadget



- Avremmo bisogno di una Textarea affinché il codice da prelevare... rimanga codice!
Un altro piccolo box magico, ecco la guida per il codice e i vari parametri: Textarea

Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


ೡ Dai un giudizio a questa guida... Grazie ^_^



100%
Voti totali: 9
Rating... 5




Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* Gif...

  


- Pagina visitata da 5435 utenti


 H: 
Buon Autunno !





* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥

..:: Basi ::..



..:: html ::..








..:: Script page ::..




..:: Script gadget ::..




Accessori e gadget del telaio...


..: Spazio web...


Realizzare e gestire un sito web
con l'hosting free più famoso...



Gif  & co... Penelope ♥


Pagina Facebook
del telaio...




 

I vostri messaggi...

Penelope
02/10/2023 17:01:02
Grazie infinite cara Grazia, mi dispiace molto vedere spazi trascurati quando poi basta avere un po' di pazienza per sistemare ti ringrazio anche per aver aggiunto informazioni molto utili
Un abbraccio forte ♥
ೡ ...commentario
 
Grazia
01/10/2023 17:51:03
Ciao Penny, buona domenica! Hai fatto benissimo a scrivere questa guida sull'HTTPS, con Altervista hanno fatto le cose per bene, anche se si installa uno spazio web "classico", come hai scritto tu, e persino se si installa WordPress è tutto automatico, con un click nel pannello di controllo, ma non tutti lo sanno, era giusto farlo presente! Wordpress (che io adoro perchè è veramente versatile) dal canto suo, offre un'infinità di plugin per attivare l'https, il fatto è che bisogna essere molto, molto attenti, altrimenti il sito praticamente si "rompe" *-* Per fortuna quasi tutte le piattaforme si sono adeguate, tranne la bellissima Eklablog, non comprendo il perchè. Ok, perdona lo "sproloquio", un abbraccio ed alla prossima!!
ೡ Scritto in... Il telaio di Penelope...
 
Penelope
27/09/2023 17:12:31
Ciao Calcifer grazie infinite anche io sono felice di essere tornata
ೡ Scritto in... 'https' Hyper Text Transfer Protocol Secure
 
Calcifer
27/09/2023 15:08:42
AAh, che bello vederti di nuovo attiva! :) Aspettavo da anni il tuo ritorno ♥
ೡ Scritto in... 'https' Hyper Text Transfer Protocol Secure
 
Cleo
25/09/2023 17:58:11
ho fatto un giretto e' tutto ancora piu' bello un abbraccio e grazie per il banner inserito un abbraccio
ೡ Scritto in... *Amici del telaio...*
 
Gabriella
25/09/2023 12:21:45
Bentornata Penelope , ho prelevato un tuo bellissimo bottone. Grazie di cuore !
ೡ Scritto in... Bottoni top pagina
 
Grazia
24/09/2023 19:16:50
Ciao Penny cara, nel messaggio precedente ho omesso di scrivere quella che sembra una ovvietà, ma la scrivo lo stesso: il tuo sito è fantastico, come sempre, la maestra dei codici è tornata 😄😄😄😄 Un abbraccio e serena domenica sera di cuore ❤️
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
21/09/2023 10:24:25
Carissima Penelope, è una gioia immensa leggerti di nuovo! Sono felicissima tu sia tornata online, hai fatto benissimo, gli hobby aiutano tantissimo a risollevare l'animo ...brava! Oltre al mio piccolo blogghino per esempio io mi sto dedicando ai disegni fatti a mano e mi rilassano tantissimo! Ti cerco su Fb così ci sentiamo, se ti fa piacere, più spesso...ti abbraccio immensamente cara amica, a presto!
ೡ ...commentario
 
Cleo
20/09/2023 16:39:32
Ciao tesoro i miei banner sono qui [Link]
ೡ Scritto in... Il telaio di Penelope...
 
Cleo
20/09/2023 12:48:48
Bentornata e' bellissimo rivedere il tuo Sito on line
ೡ ...commentario
 

Referer...