Cómo insertar dos imágenes horizontalmente con HTML

Escrito por sara williams | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo insertar dos imágenes horizontalmente con HTML
Embed images using HTML and align them with CSS. (Digital Vision./Digital Vision/Getty Images)

En HTML necesitas insertar una imagen utilizando etiquetas y luego definir el estilo usando hojas de estilo, Cascading Style Sheet (CSS por sus siglas en inglés). Puedes colocar las imágenes en una fila horizontal “flotante”, pero mantener las imágenes flotantes puede arruinar el diseño de tus páginas Web. Agrega una etiqueta alrededor de las imágenes para ayudar a mantenerlas en su lugar. Después de alinear las imágenes, usa CSS para añadirle espacio y otro estilo. Esta técnica es útil para crear páginas con galerías de imágenes.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Añade una etiqueta <img> para cada imagen en el documento HTML. Coloca cada etiqueta <img> en su propia línea, pero aún junto a la otra. Utiliza el atributo "src" para definir la ruta del archivo, la dirección Web a cada imagen, de este modo: *<img src="path/to/image1.png"> <img src = "path/to/image2. png ">

  2. 2

    Guarda el archivo HTML y compruébalo en el navegador. Si el sitio ya se encuentra alojado en un servidor Web, recuerda que debes cargar el archivo HTML actualizado, más las dos imágenes. Ambas imágenes se mostrarán pegadas. Esto sucede porque a pesar de que poner cada <img> en su propia línea, no se encuentran dentro de una etiqueta <p> para crear párrafos o no se agregó una etiqueta * para romper las líneas. A veces, tu código CSS hará que no se muestren las imágenes lado a lado. Sin embrago, también necesitarás CSS para dar espacio de las imágenes.

  3. 3

    Edita el CSS de tu página Web para asegurarte de que las imágenes siempre se alineen horizontalmente. Agrega el código CSS en un archivo externo .CSS o entre las etiquetas <style>, que van entre las etiquetas de encabezado en la parte superior de tu documento HTML. Aquí está el código de ejemplo: img {float: left; margin-right: 10px; margin-bottom: 10px;} El código anterior "flota" cada instancia de la etiqueta a la izquierda de lo que esté al lado de la página. Cualquier cosa a la derecha de una etiqueta de flota a la izquierda se envuelve alrededor del elemento flotante. Añade el relleno o el espacio a los márgenes de las imágenes.

  4. 4

    Rodea <img> con una etiqueta <div> y dale a la etiqueta <div> un atributo ID. El nombre del atributo ID será algo único y significativo. Aquí está un ejemplo: <div id="images"> src="path/to/image1.png" <img /> <img src="path/to/image2.png" /> </ div>

  5. 5

    Escribe el siguiente código CSS para mantener tus imágenes "flotando" en otros contenidos: # imágenes {clear: both;} También puedes cambiar el código CSS para flotar sólo imágenes que se encuentren entre las etiquetas <div> con un ID de "imágenes "de esta manera: *# imágenes img {float: left;}

Consejos y advertencias

  • Aprende el modelo de caja CSS por dentro y por fuera para comprender mejor la forma de colocar imágenes, texto y más en tus páginas Web. El modelo de caja describe cómo el tamaño y los bordes de las imágenes HTML son calculados por los navegadores.
  • Siempre realiza copias de seguridad de los archivos HTML y CSS cuando edites páginas Web.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles