Cómo insertar dos imágenes horizontalmente con HTML (En 5 Pasos)
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.
Paso 1
Añade una etiqueta para cada imagen en el documento HTML. Coloca cada etiqueta
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: *
Paso 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 en su propia línea, no se encuentran dentro de una etiqueta
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.
Paso 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