✅ HTML5, elementi incorporati

Sommario

Molte volte nei nostri documenti HTML Dobbiamo arricchire il contenuto e non si tratta più di aggiungere un'immagine ma anche di farlo a livello mediatico in generale, per questo dobbiamo includere contenuti da altre pagine, includere video, ecc. Per fare ciò, vedremo come incorporare altri tipi di elementi diversi dalle immagini.
Per includere il contenuto HTML utilizzeremo l'elemento iframe, Questo elemento ci permette di includere una pagina diversa da quella corrente nel nostro documento, gli attributi che ha sono i seguenti:

src
srcdoc
patata dolce
larghezza
altezza
sandbox
senza soluzione di continuità

Diamo un'occhiata a un esempio a livello di codice di come implementare a iframe in un documento HTML5:

 Esempio

Frutta che mi piace
Le attività che mi piacciono

In questo esempio vediamo come utilizziamo alcuni elementi a per generare collegamenti con i quali possiamo caricare un documento diverso all'interno del iframe, al suo interno vediamo attributi come patata dolce che indica il nome dell'elemento, come larghezza sì altezza che ci permettono di impostare la dimensione dell'elemento.
Vediamo come appare questo esempio quando lo eseguiamo nel nostro browser:

In HTML5 abbiamo due nuovi attributiVediamo il primo senza soluzione di continuità, questo attributo ci permette di mostrare il iframe come se fosse parte integrante del nostro documento, cioè un utente non si accorgerebbe di vedere contenuti che non appartengono al sito, il secondo attributo, sandbox, ci aiuta a impedire che i seguenti attributi funzionino all'interno del documento che si apre nel iframe:

script
forme
plugin
collegamenti ad altri documenti

I valori che l'attributo può assumere sandbox sono come segue:

moduli di autorizzazione: Consente l'uso di moduli.
consentire-script: Consente l'uso di script, come javascript.
consentire-top-navigazione: Abilita i collegamenti in modo che possano sostituire il documento corrente da cui il iframe o anche aprire nuove schede e finestre.
consentire-stessa-origine: Consente il contenuto del iframe essere trattato come se fosse stato generato all'interno dello stesso documento che effettua la chiamata.

Questo elemento ci permette di incorporare oggetti nel nostro documento HTML, come un video di Youtube, Vediamo un esempio di questo:

 Esempio

Come possiamo vedere nell'esempio abbiamo l'attributo src che indica l'origine dell'oggetto da incorporare, quindi il genere che ci dice che tipo di oggetto è, così come il larghezza e il altezza per impostare la dimensione del nostro elemento.
Questo elemento è abbastanza utile quando si continua ad arricchire le nostre pagine, ora non solo con altri documenti e immagini, ma anche con video e contenuti flash.
Con questo finiamo questo tutorial, dovremmo già essere in grado di produrre documenti HTML arricchiti, che si adattano all'immagine che potremmo avere nella nostra mente di come dovrebbe apparire la nostra pagina, sia per mostrare immagini che video da diversi tipi di fonti.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo