Cómo centrar un iFrame

Publicado: 2022-04-20

Si alguna vez agregó un iFrame a una página web, sabe lo frustrante que puede ser descubrir que el contenido no se muestra como usted desea. Aquellos familiarizados con HTML probablemente entiendan esta lucha, así como el deseo de incluir iFrames en primer lugar.

Si no está familiarizado con los iFrames, son un elemento HTML que muestra el contenido de una página web en otra . Probablemente haya visto un iFrame antes mientras visitaba un sitio web, incluso si no lo sabía. Muchos iFrames son anuncios que muestran información del sitio web del anunciante. Otros incorporan videos, publicaciones e incluso mapas. Ya sea que edite HTML todo el tiempo o recién esté comenzando su viaje de codificación, este artículo le enseñará todo lo que necesita saber para centrar un iFrame.

Primero, explicaremos en profundidad qué es un iFrame y por qué querrías centrar uno. Luego, cubriremos algunos conceptos básicos sobre HTML y cómo usan los iFrames. Finalmente, lo guiaremos a través de los pasos para centrar un iFrame en su página web usando el atributo de alineación.

marco flotante html

Tabla de contenido

¿Qué es un iFrame?

Un iFrame es el término abreviado para un marco en línea. Los marcos en línea son elementos HTML que pueden mostrar otros elementos HTML , así como código de otros sitios web como Facebook o YouTube. En pocas palabras, un iFrame es una ventana dentro de una página web que le permite ver el contenido de otra página web. Los iFrames pueden ser una excelente manera de incorporar algo en su página web de forma rápida y sencilla. Si bien requieren algunos conocimientos de HTML, pueden ser una forma muy sencilla de mejorar su página web. Las empresas pueden beneficiarse especialmente del uso de iFrames dentro de su sitio web. Los iFrames en lugar de enlaces o imágenes estáticas pueden hacer que el sitio web de su empresa se vea más profesional. Incluso pueden ser una fuente de ingresos si se utilizan para mostrar anuncios de otras empresas.

Los iFrames se pueden usar para incorporar anuncios , videos de YouTube, publicaciones en redes sociales e incluso mapas en línea en páginas web. El uso de un iFrame incluye este contenido directamente en la página web, lo que significa que no tendrá que actualizar constantemente la información. En su lugar, se actualizará automáticamente junto con el material de origen. Por ejemplo, el uso de un iFrame para incluir una publicación en las redes sociales brinda a los lectores acceso directo a la publicación. Si la publicación se elimina, edita o obtiene nuevas interacciones, el iFrame lo reflejará. Las capturas de pantalla pueden mostrar cierta información, pero no serán tan dinámicas como un iFrame. Una captura de pantalla tampoco incluirá un enlace al contenido en sí. A menudo, hacer clic en un iFrame lo lleva directamente a su origen. Sin embargo, una de las pocas desventajas de un iFrame es el hecho de que los iFrames pueden perder el acceso al contenido si se elimina.

¿Por qué querría usar un iFrame en mi página web?

Los iFrames mejoran la apariencia general de su página web al brindarles a los usuarios acceso directo al contenido. Por ejemplo, los videos de YouTube incrustados mediante iFrames se reproducen directamente en la página web. No hay necesidad de esperar a que la página web siga un enlace o busque el video. De esta manera, los lectores pueden ver un video sin tener que salir de tu página. Esto también puede reducir el tiempo de carga al incluir el video como una página dentro de su página. El tiempo que tarda una página en cargarse puede afectar seriamente la cantidad de tráfico que recibe un sitio web .

Incrustar cosas como Google Maps puede proporcionar direcciones fácilmente sin tener que buscarlas. Dado que los iFrames acceden directamente a otras páginas web, las direcciones siempre estarán actualizadas. Esto puede ser una adición útil a cualquier página web que se centre en una ubicación específica, como un artículo sobre una atracción turística. Del mismo modo, las empresas pueden querer incluir un pin de su dirección en Google Maps en su sitio web. El uso de un iFrame de Google Maps brinda a los visitantes la opción de obtener direcciones rápidamente haciendo clic en el iFrame.

centrar un iframe

Centrar un iFrame

Los iFrames están destinados a mejorar la función y la apariencia de una página web, por lo que es muy importante incorporarlos correctamente. Su video de YouTube o su publicación en las redes sociales puede parecer extraño si no está centrado en una página web. Las empresas deben considerar especialmente la apariencia de su sitio web. Dado que el contenido puede mejorar significativamente su sitio web , debe asegurarse de que se muestre correctamente. De lo contrario, es posible que su sitio web no se vea muy profesional o bien hecho. Afortunadamente, centrar un iFrame es simple. Todo lo que necesita es un poco de conocimiento HTML de nivel superficial.

Marco flotante HTML

HTML, o lenguaje de marcado de hipertexto , es la información que le dice a un navegador web cómo mostrar una página particular de un sitio web. Se compone de una larga cadena de código que se puede editar y cambiar agregando o eliminando secciones de código. Estos cambios afectan la forma en que se muestra la página web y su función.

HTML se compone de etiquetas, elementos y atributos. Las etiquetas son el código inicial y final alrededor de un elemento. Le dicen al navegador web dónde comienza y termina un elemento. Esto permite que el elemento se exprese de forma adecuada y completa sin que se pierda entre otros códigos. Los elementos son las estructuras que se expresarán en una página web. Por ejemplo, los iFrames son un elemento HTML. Cuando se coloca entre dos etiquetas, un elemento iFrame en un código HTML mostrará un iFrame en su sitio web. Por último, los atributos afectan cómo se muestra un elemento. Estos pueden afectar el tamaño, la posición o incluso incluir texto agregado en las imágenes.

La edición del código HTML de un sitio web cambia su apariencia y función. La edición de HTML puede implicar un editor de HTML como NotePad o KompoZer. En estos programas de edición, puede realizar cambios en su HTML editando su código directamente. Esta es una excelente manera de construir o desarrollar su sitio web si es particularmente experto en tecnología. Si edita su HTML usted mismo, podrá incluir imágenes , cambiar texto e incorporar iFrames.

como centrar un iframe

Uso de iFrame en su sitio web

El primer paso para incorporar un iFrame en su sitio web es encontrar el contenido que desea mostrar. Si desea incluir un video de YouTube, haga clic en el botón "compartir". Esto debería proporcionarle algunas opciones para compartir el video. Haga clic en la opción que dice "incrustar" . Al hacer clic en este botón, aparecerá el texto HTML de iFrame exacto que desea incluir. Ahora, todo lo que tiene que hacer es copiar y pegar esta información en su HTML. Del mismo modo, las publicaciones en las redes sociales también tendrán opciones para insertar una publicación.

Para otros tipos de contenido, podría ser más fácil usar un enlace a un sitio web dentro de su HTML. Para incorporar este tipo de iFrame en su sitio web, comience abriendo su editor de HTML preferido. En su editor, busque el código donde desea agregar su iFrame. Comience escribiendo “<iframe src=”. El "src" aquí significa fuente, por lo que se supone que lo que sigue es la fuente del contenido que se muestra en el iFrame. Aquí es donde querrá copiar y pegar el enlace al contenido que desea mostrar. El enlace debe estar entre comillas que terminen donde termina el enlace.

Después de haber incluido la fuente entre comillas, incluya la altura y el ancho que desea para el iFrame. La altura y el ancho de un iFrame generalmente se miden en píxeles, pero también se pueden medir en porcentajes. Finalmente, cierre esta etiqueta iFrame escribiendo "iFrame>". Si ha hecho esto correctamente, ¡debería tener un iFrame exitoso en su sitio web! Ahora que ha establecido un iFrame, asegúrese de que esté centrado en su página.

Centro de alineación de iFrame

Centrar un iFrame es una parte muy importante del aspecto de su página web. Puede ser increíblemente frustrante hacer el esfuerzo de crear un iFrame, solo para que esté ligeramente desviado. ¡Afortunadamente, centrar un iFrame es incluso más fácil que crear uno desde cero! Al igual que crear un iFrame, requiere que edites tu HTML.

Abre tu editor de HTML y encuentra el iFrame que buscas centrar. Dentro del código para ese iFrame, escriba "align=center". Esto le indicará a su página que centre el iFrame. También puede centrar la imagen editando su alto y ancho en la página. Nuevamente, estos se pueden medir en píxeles o porcentajes.

Incluso puede alinear su iFrame de manera diferente si no desea que esté centrado. En lugar de centro, escriba "izquierda", "derecha", "abajo" o "arriba" después de "alinear =". Su iFrame se colocará en consecuencia según este texto. La herramienta utilizada para esto se llama "atributo de alineación". El atributo de alineación hace que cambiar la posición de su iFrame sea muy sencillo. Si bien centrar los iFrames es excelente para el contenido importante, algunos iFrames como los que se usan para mostrar anuncios pueden ser más adecuados al costado de una página web.

iframe alinea el centro

Centrar iFrames

Los iFrames son una excelente manera de combinar contenido en su sitio web, pero hacer que se vea bien puede ser complicado. Simplemente abra el código de iFrames y agregue "align=center" al elemento. Ahora puede tener más control sobre cómo su página web muestra su contenido. El contenido que se muestra en iFrames puede ser una gran mejora para el aspecto y la función general de su página web. Dado que los iFrames funcionan como ventanas a la información de otro sitio web, su página web puede colocar todo tipo de información importante en un solo lugar. Los anuncios, videos y mapas se pueden agregar fácilmente a su página web a través de HTML.