HTML5 - Tutorial 12: iframe

💻 #HTML5 - Tutorial 12: iframe HTML

In questo #tutorial del corso di HTML (in italiano) vedremo:

• Cos'è un iframe / What are HTML Iframes
• Sintassi iframe HTML / HTML Iframe Syntax
• Come impostare Altezza e Larghezza di un iframe / Iframe - Set Height and Width
• Come stilizzare o rimuovere il bordo di un iframe / Iframe - Remove the Border
• Come usare un iframe come destinazione per un collegamento / #iframe - Target for a Link

📌 Cos'è un iframe, la sua sintassi

Un iframe HTML viene utilizzato per visualizzare una pagina Web all'interno di una pagina Web.

La sintassi usata per incorporare una pagina web dentro un’altra pagina è la seguente:
﹤iframe src="url" title="descrizione"﹥﹤/iframe﹥

NB: è buona norma includere sempre un attributo title perché viene utilizzato dagli screen reader per leggere il contenuto dell'iframe.

📌 Come impostare Altezza e Larghezza di un iframe

Per specificare le dimensioni dell’iframe si usano gli attributi width e height.

Ad esempio:

NB: Di default, l’unità di misura è il pixel.

In alternativa è possibile aggiungere l’attributo style e utilizzare le proprietà CSS width e height

📌 Rimuovere o stilizzare un bordo

Per impostazione predefinita, ogni iframe ha un bordo, per rimuoverlo basta aggiungere l’attributo style e utilizzare la proprietà border impostata su none.

È possibile anche modificare a piacimento dimensione, stile e colore del bordo come nell’esempio:

📌 Destinazione per un collegamento

Un iframe può essere utilizzato come destinazione per un collegamento.
Per far ciò, l’attributo target del collegamento deve far riferimento all’attributo name dell’iframe.

Buona visione

💼 Ing. Francesca Martorana

[ostapfedchuk]

Grazie mille per la tua spiegazione ottima, abbiamo iniziato a fare html da poco e io ho deciso di andare molto avanti.Ripeto ancora io tuo tutorial è stato chiarissimo.=)