Imágenes en HTML

343 views
228 views

Published on

Como incorporar imágenes en documentos de marcado HTML, además de explicar los atributos de incorporación de las imágenes por CSS

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
343
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Imágenes en HTML

  1. 1. IMAGENES DEFINIDAS POR HTML Y DETERMINADAS POR CSS martes 20 de agosto de 2013
  2. 2. <body> la etiqueta HTML de imagen (img) define la incorporación de una imagen en un documento, que no tiene una tag correspondiente de cierre pero que puede acompañarse de los siguientes atributos: </body> <img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” /> martes 20 de agosto de 2013
  3. 3. src: Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar. <img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” /> indica el nombre o ruta martes 20 de agosto de 2013
  4. 4. width: Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar. <img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” /> indica el ancho martes 20 de agosto de 2013
  5. 5. height: Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen. <img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” /> indica el alto martes 20 de agosto de 2013
  6. 6. alt: Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima. <img src=”foto.jpg” width=”520” height=”140” alt=”referencia de la imagen” /> alternativa martes 20 de agosto de 2013
  7. 7. ATRIBUTOS DE IMAGENES COMO ADMINISTRA CSS LAS IMAGENES martes 20 de agosto de 2013
  8. 8. background-image: La propiedad background-image establece la imagen de fondo de un elemento. Cuando se define una imagen de fondo (background image), también debería definirse un background color (color de fondo) similar para aquellos que no cargan las imágenes. #header { background-image: url(imagenes/fondo.jpg); } nombre del selector martes 20 de agosto de 2013
  9. 9. url: determina cual es la ubicación de la imagen que se va a utilizar en relación al documento HTML. #header { background-image: url(imagenes/fondo.jpg); } define la ruta de la imagen martes 20 de agosto de 2013
  10. 10. (...): expresa el nombre del archivo de imagen que se va a utilizar y su extensión #header { background-image: url(imagenes/fondo.jpg); } nombre del archivo martes 20 de agosto de 2013
  11. 11. background-repeat: determina como se repite la imagen de fondo de un elemento. El valor repeat-x repetirá la imagen horizontalmente mientras que el valor repeat-y repetirá la imagen verticalmente #header { background-image: url(imagenes/fondo.jpg); background-repeat: repeat-x; } nombre del selector martes 20 de agosto de 2013
  12. 12. preguntas?? martes 20 de agosto de 2013

×