9. Cómo insertar código HTML (vídeos, flash, etc)

Además de poner enlaces hacia los recursos, podemos insertarlos para que puedan visualizarse desde nuestro blog. Las presentaciones de diapositivas, las actividades interactivas en formato flash, los vídeos que están en Internet, etc. todos ellos te ofrecen un código HTML. El código HTML es el lenguaje que usan las páginas webs y los blogs para transmitir información por Internet. Cuando redactamos contenidos en una entrada el blog, automáticamente se convierte en lenguaje HTML que podemos ver pulsando en la pestaña HTML. Por ejemplo, cuando estás escribiendo y pones una palabra en negrita, como esta, tu blog ha escrito en código HTML esto: "<b>esta</b>" (la <b> indica que está en negrita).

1. Copiamos el código HTML del documento que queremos insertar. 

Hay que localizar este código, copiarlo, y pegarlo en nuestro blog. En cada servicio este código está en un lugar distinto:

•  Para los vídeos de YouTube hay que abrir el vídeo en se página específica y en la barra que hay debajo se pulsa en Compartir, luego en Incrustar y si pulsas en Más opciones puedes cambiar el tamaño.  

• Para los documentos Google (presentaciones, formularios,etc.), el código se encuentra pulsando en Archivo (arriba a la izquierda), Publicar en la Web y en el cuadro que aparece pulsamos en Incrustar (podemos elegir el tamaño del documento). Una vez seleccionado el código se copia y se pega en una entrada de vuestro blog. Modificando el código HTML de los elementos que hemos incrustado, podemos modificarlos hasta adaptarlos a nuestro gusto. Un caso habitual es ajustar los vídeos al ancho de nuestro blog.

• El código HTML de los documentos Educaplay está en la página de la actividad a la derecha (bajo Insertar) 

2. Entramos en nuestra entrada

1. Primero hay que entrar en tu cuenta gmail. Abre el buscador de google para poder iniciar sesión (www.google.es). Pulsa en iniciar sesión (arriba a la derecha, véase imagen lateral flecha roja). Ahí se pone el correo de gmail y la contraseña.
2. Entra en tu cuenta de blogger puedes hacerlo de dos formas: 
1. Desde este enlace: http://www.blogger.com/ o desde google (www.google.es) 
2. Desplegando el menú superior pulsando luego en "blogger"
3. Pulsamos en el título del blog. 
3. Pulsamos en la entrada en la que queremos incrustar el código HTML

3. Cambiamos el editor de entradas y pegamos el código

Para poner código hay que pulsar en la pestaña que pone HTML (imagen inferior) para cambiar el editor de entradas en forma de HTML. Sólo ahí podemos pegar el código, si lo hacemos en el editor normal, el código se copiará como texto y no se visualizará el archivo.

Si el código lo pegas en una entrada nueva es muy fácil. Si vais a ponerlo en una entrada que ya tiene contenidos, lo mejor es pegarlo al final. Lo más complicado el localizar el punto exacto donde  pegar el código si quieres que aparezca en medio de la entrada. 

Una vez que lo hemos pegado, podemos pulsar en Redactar para volver a ver la entrada que estamos editando e su forma normal.

4. Posibilidad: cambiar manualmente el tamaño del objeto incrustado

La mayoría de los servicios que te ofrecen insertar los documentos en código HTML, también te permiten elegir entre varias opciones de tamaño.

Como no siempre estos tamaños se ajustan al diseño de nuestro blog, también podemos cambiar sus dimensiones de otra forma, para adaptarlo a la anchura de nuestro blog.

1. Pulsamos en la pestaña HTML para ver el código HTML del objeto que hemos insertado
2. Vamos a modificar la parte del código que marca el tamaño, para ello hay que localizar las cifras que hay cerca de width (ancho) y height (alto). Eso mide el tamaño del objeto incrustado. 

 

3.  Ahora se trata de que lo modifiques, aumentando o reduciendo las cifras hasta conseguir que el objeto ocupe todo el ancho de tu entrada. La única forma es poner una cifra nueva y probarla pulsando en vista previa, después repetir la operación hasta lograr la dimensión idónea.

1. Otros códigos HTML para usuarios más avanzados

Insertar un enlace a un zona intermedia de una página:
<a name="recursospormaterias">Recursos por materias</a>

El enlace se hace con la URL de la página + almuadilla + nombre del enlace:  

http://www.profesorfrancisco.es/#recursosporasignaturas