tag iframe in html

Pubblicato da progettandopc il

Il tag iFrame, nel linguaggio HTML, ha lo scopo di mostrare il contenuto di una pagina web all’interno di un altra pagina. Il contenuto viene mostrato sulla pagina all’interno di un riquadro i quali bordi possono avere spessori più o meno accentuati.

Il tag <iframe> all’interno di una pagina web

Per inserire il tag iFrame all’interno di una pagina web è sufficiente utilizzare il seguente codice:

  <iframe src="https://www.progettandopc.com" width="500" height="500">
  </iframe>

Utilizzando l’attributo src inseriamo l’URL contenuto nell’iframe.

Width e height (i cui valori vanno indicati in pixel) indicano rispettivamente la larghezza e l’altezza dell’iframe. Se vogliamo che l’iFrame di adatti in automatico alla larghezza dello schermo è sufficiente utilizzare width=”100%”.

Per rendere più completo l’iframe possiamo aggiungere un contenuto alternativo per i browser che non sono in grado di leggere gli iframe.

Per avere un iframe con contenuto alternativo utilizzeremo il seguente codice:

<iframe src="https://www.progettandopc.com" width="500" height="500">
<p>Contenuto alternativo <a href="https://www.progettandopc.com">su progettando pc</a></p>
</iframe>

Se vogliamo dare un nome all’iframe utilizzeremo il seguente codice:

<iframe src="https://www.progettandopc.com" name="nomeiframe" width="500" height="500"></iframe>

Per rimuovere il bordo dall’iframe è sufficiente utilizzare l’attributo frameborder, in questo caso con valore zero (aumentando il valore si andrà di conseguenza ad accentuare il bordo). Per rimuovere il bordo utilizzeremo dunque il seguente codice:

<iframe src="https://www.progettandopc.com" width="500" height="500"  frameborder="0"></iframe>

L’attributo scrolling permette di scegliere se visualizzare la barra di scorrimento oppure no.

Questo attributo può assumere tre valori:

  • YES –> visualizza la barra di scorrimento
  • NO –> non visualizza la barra di scorrimento
  • AUTO –> determina in automatico quando visualizzare la barra di scorrimento

Supponendo di voler disattivare la barra di scorrimento utilizzeremo il seguente codice:

<iframe src="https://www.progettandopc.com" width="500" height="500"  frameborder="0" scrolling="no"></iframe>

WordPress e iframe

Per utilizzare l’iframe all’interno di pagine create con wordpress è possibile creare un blocco “html personalizzato”. Per farlo premere sul pulsante “+” e scegliere la voce “html personalizzato”.

All’interno del blocco “html personalizzato” utilizzare i codici forniti in questo articolo.