Cómo colocar imágenes una al lado de la otra en una página web

Escrito por kristen waters | Traducido por luis alberto fuentes schwab
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo colocar imágenes una al lado de la otra en una página web
Cómo colocar imágenes una al lado de la otra en una página web. (Ryan McVay/Photodisc/Getty Images)

Colocar imágenes una junto a la otra en una página web se puede hacer de dos maneras. Puedes utilizar tablas y colocar cada una de las imágenes en su propia celda. También puedes utilizar las hojas de estilo en cascada (CSS) en para posicionar las imágenes. Los desarrolladores web a menudo prefieren utilizar las CSS, ya que proporcionan un mayor control sobre la ubicación de las imágenes.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Necesitarás

  • Conocimientos básicos de HTML

Lista completaMinimizar

Instrucciones

    Tablas

  1. 1

    Abre un editor de texto como el Bloc de notas de Windows.

  2. 2

    Diseña la página web como cualquier otro documento HTML.

  3. 3

    Crea una tabla para las imágenes de la siguiente manera

    GO <table> <tr> <td> <img src=\"images/Pic1.JPG\" height=\"200px\" width=\"300px\" /> </td> <td> <img src=\"images/Pic2.JPG\" height=\"200px\" width=\"300px\" /> </td> </tr> </table>

    Esta tabla consiste en una sola fila con cada imagen en su propia celda.

  4. 4

    Guarda y cierra el documento.

  5. 5

    Coloca las imágenes en un directorio llamado "\imágenes\" en el servidor web.

  6. 6

    Coloca el documento HTML en el servidor web.

    CSS

  1. 1

    Abre un editor de texto.

  2. 2

    Diseña la página web como cualquier otro documento HTML.

  3. 3

    Coloca las imágenes en la página de la siguiente manera :

    <div style=\"float:left;\"> <img src=\"images/Pic1.JPG\" style = \"height:200px; width:300px;\" /> <img src=\"images/Pic2.JPG\" style = \"height:200px; width:300px;\" /> </div>

  4. 4

    Guarda y cierra el documento.

  5. 5

    Coloca las imágenes en un directorio llamado "\imágenes\" en el servidor web

  6. 6

    Coloca el documento HTML en el servidor 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