SlideShare ist ein Scribd-Unternehmen logo
1 von 22
El
Aprende a integrar videos, presentaciones o
paginas web de otros en la tuya
¿Qué es un iframe?
• Iframe es la abreviatura de Inline Frame
(marco incorporado, en inglés), permite
traer un documento dentro de un marco
¿Qué puedo hacer con un iframe?
• Integrar un documento, un
vídeo de Youtube, un
apresentación o el
contenido de otra página
web, y poder verlo sin
problema.
¿Qué hace un iframe?
• Puede integrar el contenido en cualquier lugar
dentro de tu página, sin tener que incluirlos en la
estructura de tu diseño web, como un elemento
tradicional.
• Sin embargo, el exceso de usar el iFrame, pone
lenta tu página. y ser un riesgo para la seguridad.
¿Cómo usar el iframe?
• Para insertar un iFrame se usa la etiqueta
<iframe> en un documento HTML. Copia
el código siguiente, pégalo en el bloc de
notas y guarda el archivo en formato .html:
Lógica del iframe
<iframe width=“…" height=“…" src="http…"
frameborder="0" atributos ></iframe>
Iframe youtube
<iframe width=“…" height=“…" src="https…"
frameborder="0" allowfullscreen></iframe>
Iframe slideshare
<iframe
src="//www.slideshare.net/slideshow/embed_co
de/key/s74R1E6jOMFaTa" width="595"
height="485" frameborder="0" marginwidth="0"
marginheight="0" scrolling="no"
style="border:1px solid #CCC; border-width:1px;
margin-bottom:5px; max-width: 100%;"
allowfullscreen> </iframe> <div style="margin-
bottom:5px"> <strong> <a
href="//www.slideshare.net/DocentesDigitales/w
ord-a-web" title="Word a web"
target="_blank">Word a web</a> </strong> from
<strong><a
href="https://www.slideshare.net/DocentesDigita
les" target="_blank">Club Docente
Digital</a></strong> </div>
Iframe otras web
• <iframe
• src="http://docentedigital.club/"
• width="718"
• height="485"
• frameborder="2"
• allowfullscreen>
• </iframe>
• &nbsp
• &nbsp
• &nbsp;
• <iframe
• src="http://aspesi.net/"
• width="742"
• height="485"
• frameborder="2"
• allowfullscreen>
• </iframe>
3 espacios

Weitere ähnliche Inhalte

Was ist angesagt? (9)

Internet
InternetInternet
Internet
 
Taller introducción a WordPress
Taller introducción a WordPressTaller introducción a WordPress
Taller introducción a WordPress
 
Slideshare
SlideshareSlideshare
Slideshare
 
Symbaloo
SymbalooSymbaloo
Symbaloo
 
Menú
MenúMenú
Menú
 
Guía de-instalación-del-moodle
Guía de-instalación-del-moodleGuía de-instalación-del-moodle
Guía de-instalación-del-moodle
 
Articulo de examen
Articulo de examenArticulo de examen
Articulo de examen
 
Menú
MenúMenú
Menú
 
Presentacion 3
Presentacion 3Presentacion 3
Presentacion 3
 

Ähnlich wie (HTML) Códigos del iframe para tu web

An evening with... Polymer Intro Meetup
An evening with... Polymer Intro MeetupAn evening with... Polymer Intro Meetup
An evening with... Polymer Intro MeetupArkhotech
 
Dixio ForWeb, el diccionario inteligente para tu web. Manual para instalar Di...
Dixio ForWeb, el diccionario inteligente para tu web. Manual para instalar Di...Dixio ForWeb, el diccionario inteligente para tu web. Manual para instalar Di...
Dixio ForWeb, el diccionario inteligente para tu web. Manual para instalar Di...Semantix
 
Introducción a symfony - decharlas
Introducción a symfony - decharlasIntroducción a symfony - decharlas
Introducción a symfony - decharlasDecharlas
 
Plantillajornadasversion2 100708010347-phpapp01
Plantillajornadasversion2 100708010347-phpapp01Plantillajornadasversion2 100708010347-phpapp01
Plantillajornadasversion2 100708010347-phpapp01Alfonso Alba
 
Creando una plantilla Joomla! de forma fácil
Creando una plantilla Joomla! de forma fácilCreando una plantilla Joomla! de forma fácil
Creando una plantilla Joomla! de forma fácilTito Alvarez
 
Trabajo practico nº 1.
Trabajo practico nº 1.Trabajo practico nº 1.
Trabajo practico nº 1.Meliperez
 
DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración
DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integraciónDISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración
DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integraciónedgarsaus85
 
Trabajo practico 3
Trabajo practico 3Trabajo practico 3
Trabajo practico 3luly-z
 
FRAMEWORD Yii
FRAMEWORD YiiFRAMEWORD Yii
FRAMEWORD Yiicritinasb
 

Ähnlich wie (HTML) Códigos del iframe para tu web (20)

Aplicaciones o herramientas para integrar a Moodle
Aplicaciones o herramientas para integrar a Moodle Aplicaciones o herramientas para integrar a Moodle
Aplicaciones o herramientas para integrar a Moodle
 
Video en boostrap
Video en boostrapVideo en boostrap
Video en boostrap
 
Yii framework
Yii frameworkYii framework
Yii framework
 
An evening with... Polymer Intro Meetup
An evening with... Polymer Intro MeetupAn evening with... Polymer Intro Meetup
An evening with... Polymer Intro Meetup
 
Dixio ForWeb, el diccionario inteligente para tu web. Manual para instalar Di...
Dixio ForWeb, el diccionario inteligente para tu web. Manual para instalar Di...Dixio ForWeb, el diccionario inteligente para tu web. Manual para instalar Di...
Dixio ForWeb, el diccionario inteligente para tu web. Manual para instalar Di...
 
Introducción a symfony - decharlas
Introducción a symfony - decharlasIntroducción a symfony - decharlas
Introducción a symfony - decharlas
 
Plantillajornadasversion2 100708010347-phpapp01
Plantillajornadasversion2 100708010347-phpapp01Plantillajornadasversion2 100708010347-phpapp01
Plantillajornadasversion2 100708010347-phpapp01
 
Introduccion a symfony
Introduccion a symfonyIntroduccion a symfony
Introduccion a symfony
 
Menu
MenuMenu
Menu
 
Creando una plantilla Joomla! de forma fácil
Creando una plantilla Joomla! de forma fácilCreando una plantilla Joomla! de forma fácil
Creando una plantilla Joomla! de forma fácil
 
Mariano
MarianoMariano
Mariano
 
Trabajo practico nº 1.
Trabajo practico nº 1.Trabajo practico nº 1.
Trabajo practico nº 1.
 
DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración
DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integraciónDISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración
DISEÑO DE INTERFACES WEB, Elementos multimedia. Creación e integración
 
Trabajo practico 3
Trabajo practico 3Trabajo practico 3
Trabajo practico 3
 
Mariuxi, julia
Mariuxi, juliaMariuxi, julia
Mariuxi, julia
 
FRAMEWORD Yii
FRAMEWORD YiiFRAMEWORD Yii
FRAMEWORD Yii
 
Slide point
Slide pointSlide point
Slide point
 
Entendiendo Yii
Entendiendo YiiEntendiendo Yii
Entendiendo Yii
 
Tp1
Tp1Tp1
Tp1
 
Joomla 3.0 avanzado
Joomla 3.0 avanzadoJoomla 3.0 avanzado
Joomla 3.0 avanzado
 

Mehr von Club Docente Digital

Clase 6 del bubble al el guion literario
Clase 6   del bubble al el guion literarioClase 6   del bubble al el guion literario
Clase 6 del bubble al el guion literarioClub Docente Digital
 
(W3) el fondo del video de introducción
(W3) el fondo del video de introducción(W3) el fondo del video de introducción
(W3) el fondo del video de introducciónClub Docente Digital
 
(HTML) Expresion web y web responsive
(HTML) Expresion web y web responsive(HTML) Expresion web y web responsive
(HTML) Expresion web y web responsiveClub Docente Digital
 
Como usar el paint para hacer tutoriales con atube
Como usar el paint para hacer tutoriales con atubeComo usar el paint para hacer tutoriales con atube
Como usar el paint para hacer tutoriales con atubeClub Docente Digital
 

Mehr von Club Docente Digital (20)

(WW) wordwall Clase 1
(WW) wordwall  Clase 1(WW) wordwall  Clase 1
(WW) wordwall Clase 1
 
(CR) Entrevista a auqui
(CR) Entrevista a auqui(CR) Entrevista a auqui
(CR) Entrevista a auqui
 
(CR) La Divina Revelación
(CR) La Divina Revelación(CR) La Divina Revelación
(CR) La Divina Revelación
 
(CR) Los registros akáshicos
(CR) Los registros akáshicos(CR) Los registros akáshicos
(CR) Los registros akáshicos
 
(CR) El hombre del 3036
(CR) El hombre del 3036(CR) El hombre del 3036
(CR) El hombre del 3036
 
(CR) El Basilisco de Roko
(CR) El Basilisco de Roko(CR) El Basilisco de Roko
(CR) El Basilisco de Roko
 
Clase 6 del bubble al el guion literario
Clase 6   del bubble al el guion literarioClase 6   del bubble al el guion literario
Clase 6 del bubble al el guion literario
 
Clase 5 tema, argumento y trama
Clase 5   tema, argumento y tramaClase 5   tema, argumento y trama
Clase 5 tema, argumento y trama
 
(CR) Enfermedades raras
(CR) Enfermedades raras(CR) Enfermedades raras
(CR) Enfermedades raras
 
(W3) el fondo del video de introducción
(W3) el fondo del video de introducción(W3) el fondo del video de introducción
(W3) el fondo del video de introducción
 
(CR) Secretos de la luna
(CR) Secretos de la luna(CR) Secretos de la luna
(CR) Secretos de la luna
 
(PA) Del argumento al guion
(PA) Del argumento al guion(PA) Del argumento al guion
(PA) Del argumento al guion
 
(CR) Otros profetas
(CR) Otros profetas(CR) Otros profetas
(CR) Otros profetas
 
(W3) Ensayando el rodaje
(W3) Ensayando el rodaje(W3) Ensayando el rodaje
(W3) Ensayando el rodaje
 
(HTML) Google drive como hosting
(HTML) Google drive como hosting(HTML) Google drive como hosting
(HTML) Google drive como hosting
 
(HTML) Expresion web y web responsive
(HTML) Expresion web y web responsive(HTML) Expresion web y web responsive
(HTML) Expresion web y web responsive
 
(PA) De la escaleta al argumento
(PA) De la escaleta al argumento(PA) De la escaleta al argumento
(PA) De la escaleta al argumento
 
Como usar el paint para hacer tutoriales con atube
Como usar el paint para hacer tutoriales con atubeComo usar el paint para hacer tutoriales con atube
Como usar el paint para hacer tutoriales con atube
 
(W3) Del bubble al pitch
(W3) Del bubble al pitch(W3) Del bubble al pitch
(W3) Del bubble al pitch
 
(W3) Ensayando el discurso
(W3) Ensayando el discurso(W3) Ensayando el discurso
(W3) Ensayando el discurso
 

Kürzlich hochgeladen

DETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORDETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORGonella
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfDaniel Ángel Corral de la Mata, Ph.D.
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfcoloncopias5
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docxAgustinaNuez21
 
Instrucciones para la aplicacion de la PAA-2024b - (Mayo 2024)
Instrucciones para la aplicacion de la PAA-2024b - (Mayo 2024)Instrucciones para la aplicacion de la PAA-2024b - (Mayo 2024)
Instrucciones para la aplicacion de la PAA-2024b - (Mayo 2024)veganet
 
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdfOswaldoGonzalezCruz
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxYeseniaRivera50
 
PPT_Formación integral y educación CRESE (1).pdf
PPT_Formación integral y educación CRESE (1).pdfPPT_Formación integral y educación CRESE (1).pdf
PPT_Formación integral y educación CRESE (1).pdfEDILIAGAMBOA
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxMartín Ramírez
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxdanalikcruz2000
 
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALEDUCCUniversidadCatl
 
Estrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfEstrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfromanmillans
 

Kürzlich hochgeladen (20)

DETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORDETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIOR
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
 
VISITA À PROTEÇÃO CIVIL _
VISITA À PROTEÇÃO CIVIL                  _VISITA À PROTEÇÃO CIVIL                  _
VISITA À PROTEÇÃO CIVIL _
 
DIA INTERNACIONAL DAS FLORESTAS .
DIA INTERNACIONAL DAS FLORESTAS         .DIA INTERNACIONAL DAS FLORESTAS         .
DIA INTERNACIONAL DAS FLORESTAS .
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docx
 
Instrucciones para la aplicacion de la PAA-2024b - (Mayo 2024)
Instrucciones para la aplicacion de la PAA-2024b - (Mayo 2024)Instrucciones para la aplicacion de la PAA-2024b - (Mayo 2024)
Instrucciones para la aplicacion de la PAA-2024b - (Mayo 2024)
 
TL/CNL – 2.ª FASE .
TL/CNL – 2.ª FASE                       .TL/CNL – 2.ª FASE                       .
TL/CNL – 2.ª FASE .
 
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdfTema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
 
PPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptxPPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptx
 
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
 
Aedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptxAedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptx
 
PPT_Formación integral y educación CRESE (1).pdf
PPT_Formación integral y educación CRESE (1).pdfPPT_Formación integral y educación CRESE (1).pdf
PPT_Formación integral y educación CRESE (1).pdf
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
 
Sesión La luz brilla en la oscuridad.pdf
Sesión  La luz brilla en la oscuridad.pdfSesión  La luz brilla en la oscuridad.pdf
Sesión La luz brilla en la oscuridad.pdf
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
 
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
 
Earth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversaryEarth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversary
 
Estrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdfEstrategia de Enseñanza y Aprendizaje.pdf
Estrategia de Enseñanza y Aprendizaje.pdf
 

(HTML) Códigos del iframe para tu web

  • 1. El Aprende a integrar videos, presentaciones o paginas web de otros en la tuya
  • 2. ¿Qué es un iframe? • Iframe es la abreviatura de Inline Frame (marco incorporado, en inglés), permite traer un documento dentro de un marco
  • 3. ¿Qué puedo hacer con un iframe? • Integrar un documento, un vídeo de Youtube, un apresentación o el contenido de otra página web, y poder verlo sin problema.
  • 4. ¿Qué hace un iframe? • Puede integrar el contenido en cualquier lugar dentro de tu página, sin tener que incluirlos en la estructura de tu diseño web, como un elemento tradicional. • Sin embargo, el exceso de usar el iFrame, pone lenta tu página. y ser un riesgo para la seguridad.
  • 5. ¿Cómo usar el iframe? • Para insertar un iFrame se usa la etiqueta <iframe> en un documento HTML. Copia el código siguiente, pégalo en el bloc de notas y guarda el archivo en formato .html:
  • 6. Lógica del iframe <iframe width=“…" height=“…" src="http…" frameborder="0" atributos ></iframe>
  • 7.
  • 8. Iframe youtube <iframe width=“…" height=“…" src="https…" frameborder="0" allowfullscreen></iframe>
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. Iframe slideshare <iframe src="//www.slideshare.net/slideshow/embed_co de/key/s74R1E6jOMFaTa" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin- bottom:5px"> <strong> <a href="//www.slideshare.net/DocentesDigitales/w ord-a-web" title="Word a web" target="_blank">Word a web</a> </strong> from <strong><a href="https://www.slideshare.net/DocentesDigita les" target="_blank">Club Docente Digital</a></strong> </div>
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 22. • <iframe • src="http://docentedigital.club/" • width="718" • height="485" • frameborder="2" • allowfullscreen> • </iframe> • &nbsp • &nbsp • &nbsp; • <iframe • src="http://aspesi.net/" • width="742" • height="485" • frameborder="2" • allowfullscreen> • </iframe> 3 espacios