Cómo incrustar objetos de otras páginas usando HTML

1. Blogger desde dentro
HTML para incrustar
contenidos
X
Javier Blanco (2015)
bloggerdesdedentro.blogspot.com

2. Blogger desde dentro
X: HTML para incrustar contenidos
1
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Los servidores WEB y tu navegador
hablan un lenguaje que desconoces
<td><div class="separator" style="clear: both; text-align: center;">
<a href="http://bloggerdesdedentro.blogspot.com/p/guia-de-
contenidos.html"><img
alt="http://bloggerdesdedentro.blogspot.com/p/guia-de-
contenidos.html" border="0" src="http://4.bp.blogspot.com/-
OKHpaaKXpEw/VLFxBTDNZYI/AAAAAAAAC28/gKuY6xigtYg/s1600/logo_ty
peweriter.png" /></a></div>
</td>
<td>Continuar aquí aprendiendo cómo trabajar con Blogger</td>
Es el HTML: HiperText Mark-Up
Language.
Un lenguaje ligero y rápido de
interpretar para el navegador.
Blogger construye sus páginas
realmente en HTML, aunque nos
facilita el trabajo “engañándonos” con
el editor y algunas herramientas más.
Pero para
conseguir algunas
cosas necesitas
tocar HTML

3. Blogger desde dentro
X: HTML para incrustar contenidos
2
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Acceder a la edición del código HTML
en Blogger es tan fácil como hacer clic
en un botón
Edición normal
(Wysiwyg): Lo
que ves es lo
que obtienes
Edición HTML
(RAW): En crudo.
Lo que
realmente hay
A menos que
seas un experto,
naturalmente
Cuando editas HTML es como
si entraras en terreno
comanche: ¡Hay que entrar,
hacer lo que tengas que
hacer, y salir a toda leche!

4. Blogger desde dentro
X: HTML para incrustar contenidos
3
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Para conseguir algunas cosas
necesitamos usar HTML directamente
HTML
Poner un Menú
Plasmar una tabla
Crear efectos complejos
Crear formularios
Incrustar objetos

5. Blogger desde dentro
X: HTML para incrustar contenidos
4
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Entraremos en HTML para poder
incrustar objetos de otros sitios como
Youtube, Slideshare o Google Drive
Un objeto incrustado (Embedded) no está realmente
en nuestro blog, pero aparece en él como si lo
estuviera.
Incrustar objetos de otras
páginas da a la nuestra un
aspecto profesional,
moderno y útil.

6. Blogger desde dentro
X: HTML para incrustar contenidos
5
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Incrustando un vídeo
desde YouTube (1)
1
Localiza el vídeo
que desees
incrustar
Puedes subir tus
propios vídeos con tu
cuenta Google
• Resolución
• Subtítulos
• Minuto de comienzo
2
Ajusta los
parámetros de
vísualización
• Resolución
• Subtítulos
• Minuto de comienzo
3 Pulsa en
“Compartir”

7. Blogger desde dentro
X: HTML para incrustar contenidos
6
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Incrustando un vídeo
desde YouTube (2)
4 Elige la opción
“INSERTAR”
5
Ajusta los
parámetros y copia
el código
Tamaño del vídeo
Opciones del
reproductor
Muestra
Código HTML a
incrustar. Cuando
hayas ajustado los
parámetros
cópialo (Ctrl + C)

8. 8
Blogger desde dentro
X: HTML para incrustar contenidos
7
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Incrustando un vídeo
desde YouTube (3)
6
Marca el lugar
donde quieres
incrustarlo
En edición normal
Usa tu propia
marca
¡Es un
truco!
7
En HTML sustituye
la marca por el
código
Vuelve a Redactar
para ver el
resultado
La marca es más
fácil de encontrar
en medio de esa
maraña de código

9. Blogger desde dentro
X: HTML para incrustar contenidos
8
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Concepto de iFrame o marco
electrónico
Acabas de
incrustar un vídeo
a través de la
utilidad iframe de
HTML.
Numerosas
páginas facilitan
iframes de sus
contenidos para
que los incrustes
en tu blog de la
misma manera.
La gente más famosa de
la blogosfera sabe hacer
uso de todas las
herramientas que
tienen a mano
Pero recuerda que
todo está
supeditado al valor
de tus entradas

10. Javier Blanco (2015)
bloggerdesdedentro.blogspot.com