Cómo importar HTML en Google Docs

by Janeth Kent Date: 18-06-2020 html googledocs google

Google Docs es un procesador de textos muy flexible en muchos sentidos, pero lo que mucha gente no se da cuenta es que se puede incrustar HTML en un Google Doc.

Hay varias maneras de hacer esto. Uno es copiar un documento HTML directamente de un navegador y pegarlo en un Google Doc. El otro es un truco usando la función importarHTML en Google Sheets para personalizar el formato HTML que luego puedes incrustar en un Google

1. Incrustar una página HTML en un Google Doc

Si estás escribiendo un documento que requiere información de la web, lo último que quieres hacer es pegar esa información como texto.

Esto se debe a que la mayoría de la información en línea contiene información como tablas, gráficos, imágenes y más. Por ejemplo, tomar notas para la investigación de un ensayo sería mucho más fácil si se pudiera incrustar HTML en un Google doc desde una página web.

Afortunadamente, hacer esto en Google Docs es muy fácil. Se simplifica por el hecho de que Google Docs insertará automáticamente las páginas web pegadas para incluir el formato original, en la medida de lo posible.

Selecciona la sección de la página web que desea incluir en su documento. Presione Ctrl-C en el teclado para copiar esa sección.

A continuación, abre el documento de Google en el que quieres incrustar esa página HTML, haz clic con el botón derecho del ratón y selecciona Pegar. Asegúrate de seleccionar Pegar y no Pegar sin formato.

Cuando selecciones Pegar, Google Docs importará automáticamente la sección de la página que hayas copiado tanto como sea posible en el formato que aparece en la página original. Esto incluye imágenes, enlaces URL y encabezados.

Puedes ver que los enlaces están en vivo al pasar el cursor sobre uno. En Google Docs verás aparecer el enlace externo.

Es posible que en algunos casos el formato de la imagen (como la alineación en la página) no coincida perfectamente con la página original de la que se ha copiado.

Puedes arreglar esto seleccionando la imagen, seleccionando el icono de texto de alineación izquierda en la cinta y el icono de texto de envoltura debajo de la imagen

2. Incrustar HTML en Google Doc con importHtml

Otro método para incrustar HTML en su documento de Google es incrustar el HTML en Google Sheets usando la función importHtml. Luego puedes insertarlo en Google Docs.

Ten en cuenta que en lugar de incrustar una sección de la página, esta función insertará la página entera. Sin embargo, hay una forma de evitarlo utilizando un número de índice en la sintaxis de la función para importar sólo una tabla o lista de la página.

Por ejemplo, digamos que quieres incrustar la cuarta tabla de la página web de Wikipedia sobre la demografía de los Estados Unidos. Primero, abre una nueva hoja de cálculo de Google Sheets. En la primera celda de la hoja de cálculo, escribe la función:

=ImportHTML("https://en.wikipedia.org/wiki/Demographics_of_the_United_States", "table", 4)

Al presionar Enter, esto importará la cuarta tabla de la página web y la insertará en la tabla donde está el cursor.

Ahora tienes los datos HTML importados que puedes usar para incrustarlos en Google Docs. Formatea esta tabla como quieras que se vea en Google Docs.

- Para ello, selecciona la tabla en Google Sheets y presiona Ctrl-C para copiar la tabla.

- Coloca el cursor en el documento de Google Docs donde quieras colocar la tabla, haz clic con el botón derecho del ratón y selecciona Pegar.
Verás una ventana emergente con un par de opciones.

- Selecciona Enlazar a la hoja de cálculo y selecciona el botón Pegar.

Esto inserta la tabla de Google Sheets en Google Docs exactamente en el formato original.

Al vincular la tabla, siempre podrás actualizar la tabla en Google Sheets y ésta se actualizará automáticamente en Google Docs.

3. Incrustar HTML en Google Docs usando Word

Si tienes tu código HTML simple guardado en un archivo .html o .htm, puedes abrirlo primero en Microsoft Word. Word siempre trata de renderizar un archivo HTML. A continuación, puedes importar este documento a Google Docs y copiar toda la página o una sección de la página en el documento que estás editando.

Para ello, abre Microsoft Word y su archivo HTML. Deberías ver el archivo renderizado de la forma en que se vería dentro de un navegador.

Guarda este documento en formato Word.
Luego, vuelve a Google Drive y sube el archivo a tu cuenta de Google Drive.
Una vez subido, haz clic con el botón derecho del ratón y selecciona Abrir con, y selecciona Google Docs.

Esto abrirá el documento en formato Google Docs, con un formato lo más parecido a la representación HTML posible.

Ahora puedes copiar el archivo HTML completo, o sólo la sección que quieras. Luego pégalo en el documento de Google Docs que estás editando.

Estas son tres formas de incrustar HTML en un documento de Google. La opción que elija depende de las herramientas que tenga disponibles. También depende de si quieres la página completa o sólo una sección y de cuánta precisión necesites que coincida con el formato original renderizado en HTML.

 
by Janeth Kent Date: 18-06-2020 html googledocs google visitas : 11830  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Artículos relacionados

Guia: Como escribir los enlaces mailto en puro HTML

¿Qué es el enlace mailto El enlace Mailto es un tipo de enlace HTML que activa el cliente de correo predeterminado en el ordenador para enviar un correo electrónico. El navegador web…

Transiciones y Transformaciones CSS : guia básica con ejemplos

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las…

Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener…

Imágenes responsivas y atributos srcset and sizes

En la revolución del diseño web, las imágenes son una cosa que aparentemente se ha quedado atrás. Hasta hace relativamente poco, servir diferentes imágenes en función del tamaño de la…

24 recursos gratuitos para programadores novatos

Cuando estamos descubriendo nuevas áreas, una pequeña ayuda es siempre bien venida. En la programación, los recursos existen en grandes cantidades para ayudar a todos los tipos de desarrolladores. Para…

HTML: Geolocalizar una página web con los tags GEO

En este pequeño tutorial mostraremos como geolocalizar de manera sencilla una determinada página web usando las etiquetas meta del head. Las tres principales etiquetas meta de geolocalización son: geo.position La etiqueta geo.position contiene…

10 increíbles experimentos con HTML5

Los laboratorios de innovación se llenan de creación e ideas impresionantes. Este es el caso de Chrome Experiments, creado para que los desarrolladores  den rienda suelta a la  imaginación y expongan…

Reproductores Audio y Video en HTML5

Una de las aportaciones más útiles de  HTML5, es la posibilidad de mejorar la reproducción de archivos multimedia, audio y video, en nuestra web. Además HTML5 nos permite construir reproductores tanto…

Cómo crear un selector de color con HTML5 Canvas

HTML5 Canvas es una tecnología que permite a los desarrolladores generar gráficos y animaciones en tiempo real utilizando JavaScript. Proporciona un lienzo en blanco en el cual se pueden dibujar…

Clicky