Insertar imágenes

Bien ahora te enseñare como puedes insertar imígenes en tu página Web, eso significa que es hora de darle más estilo a tu página Web, en realidad es muy simple y no te demoraras mucho, ya casi acabas el curso así que animo que no falta nada ¿ok?.

La etiqueta

La etiqueta que usaremos es muy fácil y simple no te demoraras en usarla, esta etiqueta la pondremos dentro del cuerpo de la página ósea dentro de y , en el lugar donde quieras que se vea la imágen, y colocas el siguiente código .

Ahora te explicare como se compone el código ¿ok? Donde dice "imagen2.png" pondremos el nombre de nuestra imagen, recuerda ponerlo con todo y extensión, donde dice "124" colocamos el ancho de nuestra imagen, donde dice "123" colocaremos el alto de nuestra imagen, recuerda que esta medida esta en pixeles jeje casi me olvido de decírtelo ¡ups!, bien por último donde dice "Mi primera imagen en Web" colocaremos el mensaje que aparecerá cuando pongas el cursor sobre la imagen, ya conociendo esto se te ara fácil personalizar tus imágenes.

Poner la etiqueta (si en el anterior caso escogiste una imagen de fondo)

Listo ahora abre la página con el bloc de notas y escribe lo siguiente:

  1. <html>
  2. <head>
  3. <title>Mi primera web</title>
  4. </head>
  5. <body background="imagen.jpg">
  6. <p>Mi primer parrafo en HTML.</p>
  7. <p>Gracias a <a href="http://sqimperiun.webcindario.com">SQimperiun</a></p>
  8. <img src="imagen2.png" width="124" height="123" alt="Mi primera imagen en Web">
  9. </body>
  10. </html>

Poner la etiqueta (si en el anterior caso escogiste un color de fondo)

Listo ahora abre la página con el bloc de notas y escribe lo siguiente:

  1. <html>
  2. <head>
  3. <title>Mi primera web</title>
  4. </head>
  5. <body bgcolor="#555555">
  6. <p>Mi primer parrafo en HTML.</p>
  7. <p>Gracias a <a href="http://sqimperiun.webcindario.com">SQimperiun</a></p>
  8. <img src="imagen2.png" width="124" height="123" alt="Mi primera imagen en Web">
  9. </body>
  10. </html>

Ahora si, podemos mostrarles a nuestros amigos todas nuestras imágenes en nuestra propia Web, fácil, sin problemas y sin tener que recortar revistas jeje :) . Si lo deseas puedes comparar tu página con este ejemplo:

Ejemplo 6 y Ejemplo 7

Nota

Al igual que la opción , podemos omitir los atributos y , si lo haces el explorador de forma predeterminada pondrá las dimensiones de la imagen original, pero no te sugerimos omitir el atributo , ya que se debe poner en todas las imagenes, para cumplir con los estandares de W3C (World Wide Web Consortium).

La imagen debe estar en la misma carpeta donde tienes la página, luego te dire como poner imágenes en otras carpetas, pero eso será después ¿ok?. Además la imagen a poner puede tener la extención , , o , si es diferente no se verá.

Reportar errores