SlideShare una empresa de Scribd logo
1 de 3
EVIDENCIA lll : IMÁGENES
Cristian quicazan
Sergio rincón
903
Imagen <img>
Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su
apariencia, o dotarla de una mayor información visual.
Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de
cierre.
El nombre de la imagen ha de especificarsea través del atributo src.
Por ejemplo, para insertar la siguienteimagen:
Habría que escribir:
<img src="imagenes/nosecoloquele.jpg">
Teniendo en cuenta que la imagen se llama logo_animales.gif y queestá dentro de la carpeta imágenes,que
se encuentra en el mismo directorio que el documento actual (referencia relativa al documento).Para
trabajar deuna forma más sencillay ordenada,es recomendable que todos los documentos html se
encuentren en un mismo directorio,y que dentro de este directorio existan diferentes carpetas para agrupar
otros objetos, como puede ser una carpeta destinada a almacenar imágenes,o una carpeta destinada a
almacenar archivosdeaudio,etc.
Existen una seriede formatos de imagen más recomendables que otros para ser introducidos en una página
web. Esta información puedes consultarlaaquí .
Texto alternativo
Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el
valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la
imagen.
Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros
deseemos, gracias al atributo alt.
Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen
gato, para ello insertamos el siguiente código:
<img src="gatito.gif" alt="tampoconose.jpg" >
Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el
documento actual, sino que se encuentra dentro de la carpeta imágenes. En lugar de la imagen se mostrará
lo siguiente:
Imagen gato
Si en lugar del código anterior hubiéramos insertado el siguiente código:
<img src="imagenes/gatito.gif" alt="coloquee.jpg" >
La imagen habría mostrado correctamente:
Imagen gato
El texto alternativo se muestra también al situar el puntero sobre la imagen. Si situas el puntero sobre la
imagen durante unos segundos, verás como aparece el texto Imagen gato.
El texto alternativo es muy útil a la hora de diseñar páginas más asequibles a los invidentes ya que los
programas lectores son capaces de leer el texto alternativo.

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Web 4
Web 4Web 4
Web 4
 
Niolas percho
Niolas perchoNiolas percho
Niolas percho
 
Colegio nacional nicolás es guerra
Colegio nacional nicolás es guerraColegio nacional nicolás es guerra
Colegio nacional nicolás es guerra
 
Web IV
Web IVWeb IV
Web IV
 
Martin lopoez 905
Martin lopoez 905Martin lopoez 905
Martin lopoez 905
 
Martin lopoez 905 30
Martin lopoez 905 30Martin lopoez 905 30
Martin lopoez 905 30
 
pagina web IV
pagina web IV pagina web IV
pagina web IV
 

Similar a Imágenes en HTML: etiqueta <img> y atributos src y alt

Similar a Imágenes en HTML: etiqueta <img> y atributos src y alt (20)

Colegio nacional nicolás esguerra 4
Colegio nacional nicolás esguerra 4Colegio nacional nicolás esguerra 4
Colegio nacional nicolás esguerra 4
 
Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 
Imagenes
ImagenesImagenes
Imagenes
 
Imagenes
ImagenesImagenes
Imagenes
 
Ernesto dertas
Ernesto dertasErnesto dertas
Ernesto dertas
 
Imagenes
ImagenesImagenes
Imagenes
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Pagina web 4.
Pagina web 4.Pagina web 4.
Pagina web 4.
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
pag 4
pag 4pag 4
pag 4
 
O 150928120321-lva1-app6892
O 150928120321-lva1-app6892O 150928120321-lva1-app6892
O 150928120321-lva1-app6892
 
word
wordword
word
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
987+ m47
987+ m47987+ m47
987+ m47
 
Taller4
Taller4Taller4
Taller4
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Tema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en htmlTema 05 trabajando con imagenes en html
Tema 05 trabajando con imagenes en html
 
Rtgfvgbvyh (1)
Rtgfvgbvyh (1)Rtgfvgbvyh (1)
Rtgfvgbvyh (1)
 

Más de sergio804

Evidencia clase 5
Evidencia clase 5Evidencia clase 5
Evidencia clase 5sergio804
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerrasergio804
 
base de datos #1
base de datos #1base de datos #1
base de datos #1sergio804
 
Chachan y yo
Chachan y yoChachan y yo
Chachan y yosergio804
 
Colegio nacional nicolas esguerrasdf
Colegio nacional nicolas esguerrasdfColegio nacional nicolas esguerrasdf
Colegio nacional nicolas esguerrasdfsergio804
 
Rincon yopfasdfF
Rincon yopfasdfFRincon yopfasdfF
Rincon yopfasdfFsergio804
 
Presentación1aa
Presentación1aaPresentación1aa
Presentación1aasergio804
 
Colegio nacional nicolás esguerra111
Colegio nacional nicolás esguerra111Colegio nacional nicolás esguerra111
Colegio nacional nicolás esguerra111sergio804
 
Colegio nacional nicolás esguerra (1)
Colegio nacional nicolás esguerra (1)Colegio nacional nicolás esguerra (1)
Colegio nacional nicolás esguerra (1)sergio804
 
Presentación111aa
Presentación111aaPresentación111aa
Presentación111aasergio804
 
Colegio nacional nicolás esguerraaaaaaa
Colegio nacional nicolás esguerraaaaaaaColegio nacional nicolás esguerraaaaaaa
Colegio nacional nicolás esguerraaaaaaasergio804
 
Lego mindstorm nxt (2)ba
Lego mindstorm nxt (2)baLego mindstorm nxt (2)ba
Lego mindstorm nxt (2)basergio804
 
Sin título4acc
Sin título4accSin título4acc
Sin título4accsergio804
 

Más de sergio804 (20)

Menu
MenuMenu
Menu
 
Menu
MenuMenu
Menu
 
Evidencia clase 5
Evidencia clase 5Evidencia clase 5
Evidencia clase 5
 
Char
CharChar
Char
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
base de datos #1
base de datos #1base de datos #1
base de datos #1
 
Chachan y yo
Chachan y yoChachan y yo
Chachan y yo
 
Colegio nacional nicolas esguerrasdf
Colegio nacional nicolas esguerrasdfColegio nacional nicolas esguerrasdf
Colegio nacional nicolas esguerrasdf
 
Rincon yopfasdfF
Rincon yopfasdfFRincon yopfasdfF
Rincon yopfasdfF
 
Presentación1aa
Presentación1aaPresentación1aa
Presentación1aa
 
Colegio nacional nicolás esguerra111
Colegio nacional nicolás esguerra111Colegio nacional nicolás esguerra111
Colegio nacional nicolás esguerra111
 
Colegio nacional nicolás esguerra (1)
Colegio nacional nicolás esguerra (1)Colegio nacional nicolás esguerra (1)
Colegio nacional nicolás esguerra (1)
 
Presentación111aa
Presentación111aaPresentación111aa
Presentación111aa
 
Colegio nacional nicolás esguerraaaaaaa
Colegio nacional nicolás esguerraaaaaaaColegio nacional nicolás esguerraaaaaaa
Colegio nacional nicolás esguerraaaaaaa
 
Lego mindstorm nxt (2)ba
Lego mindstorm nxt (2)baLego mindstorm nxt (2)ba
Lego mindstorm nxt (2)ba
 
Aaaaaaa
AaaaaaaAaaaaaa
Aaaaaaa
 
aSuki
aSukiaSuki
aSuki
 
aA
aAaA
aA
 
Suki z
Suki zSuki z
Suki z
 
Sin título4acc
Sin título4accSin título4acc
Sin título4acc
 

Último

TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdf
TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdfTALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdf
TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdfMiguelGomez900779
 
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdf
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdfLAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdf
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdfwilangelfmendoza
 
TEMA #1 EXPLOTACIONES PORCINAS EN VENEZUELA 1er tema.pptx
TEMA #1 EXPLOTACIONES PORCINAS EN VENEZUELA 1er tema.pptxTEMA #1 EXPLOTACIONES PORCINAS EN VENEZUELA 1er tema.pptx
TEMA #1 EXPLOTACIONES PORCINAS EN VENEZUELA 1er tema.pptxGilbertoGutierrezRiv
 
SELECCION DEL TALENTO Y COMPETENCIAS (3).pdf
SELECCION DEL TALENTO Y COMPETENCIAS (3).pdfSELECCION DEL TALENTO Y COMPETENCIAS (3).pdf
SELECCION DEL TALENTO Y COMPETENCIAS (3).pdfdarwinciro39039
 
Taller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uMLTaller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uMLAderMogollonLuna
 
2° PLANIFICACIÓN POR COMPETENCIA (1).doc
2° PLANIFICACIÓN POR COMPETENCIA (1).doc2° PLANIFICACIÓN POR COMPETENCIA (1).doc
2° PLANIFICACIÓN POR COMPETENCIA (1).docAnaRuiz123884
 
PPT obligaciones ambientales oefa minan.pptx
PPT obligaciones ambientales oefa minan.pptxPPT obligaciones ambientales oefa minan.pptx
PPT obligaciones ambientales oefa minan.pptxDanmherJoelAlmironPu
 
10.-CALVINISMO-v.s-ARMINIANISMO jkllkikjj
10.-CALVINISMO-v.s-ARMINIANISMO jkllkikjj10.-CALVINISMO-v.s-ARMINIANISMO jkllkikjj
10.-CALVINISMO-v.s-ARMINIANISMO jkllkikjjjuanpabloayonlopez
 
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptx
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptxPPT SESION 5 ARTE Y CREATIVIDAD (1).pptx
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptxNeymaRojasperez1
 
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.karlapatriciapms16
 

Último (10)

TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdf
TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdfTALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdf
TALLER SOBRE METODOLOGÍAS DE DESARROLLO DE SOFTWARE..pdf
 
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdf
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdfLAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdf
LAS TETAS DE MARIA GUEVARA REVISTA DIGITAL INF.pdf
 
TEMA #1 EXPLOTACIONES PORCINAS EN VENEZUELA 1er tema.pptx
TEMA #1 EXPLOTACIONES PORCINAS EN VENEZUELA 1er tema.pptxTEMA #1 EXPLOTACIONES PORCINAS EN VENEZUELA 1er tema.pptx
TEMA #1 EXPLOTACIONES PORCINAS EN VENEZUELA 1er tema.pptx
 
SELECCION DEL TALENTO Y COMPETENCIAS (3).pdf
SELECCION DEL TALENTO Y COMPETENCIAS (3).pdfSELECCION DEL TALENTO Y COMPETENCIAS (3).pdf
SELECCION DEL TALENTO Y COMPETENCIAS (3).pdf
 
Taller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uMLTaller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uML
 
2° PLANIFICACIÓN POR COMPETENCIA (1).doc
2° PLANIFICACIÓN POR COMPETENCIA (1).doc2° PLANIFICACIÓN POR COMPETENCIA (1).doc
2° PLANIFICACIÓN POR COMPETENCIA (1).doc
 
PPT obligaciones ambientales oefa minan.pptx
PPT obligaciones ambientales oefa minan.pptxPPT obligaciones ambientales oefa minan.pptx
PPT obligaciones ambientales oefa minan.pptx
 
10.-CALVINISMO-v.s-ARMINIANISMO jkllkikjj
10.-CALVINISMO-v.s-ARMINIANISMO jkllkikjj10.-CALVINISMO-v.s-ARMINIANISMO jkllkikjj
10.-CALVINISMO-v.s-ARMINIANISMO jkllkikjj
 
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptx
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptxPPT SESION 5 ARTE Y CREATIVIDAD (1).pptx
PPT SESION 5 ARTE Y CREATIVIDAD (1).pptx
 
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
Usabilidad y experiencia de usuario, UI,UX, Diseño grafico.
 

Imágenes en HTML: etiqueta <img> y atributos src y alt

  • 1. EVIDENCIA lll : IMÁGENES Cristian quicazan Sergio rincón 903 Imagen <img> Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarsea través del atributo src. Por ejemplo, para insertar la siguienteimagen: Habría que escribir: <img src="imagenes/nosecoloquele.jpg"> Teniendo en cuenta que la imagen se llama logo_animales.gif y queestá dentro de la carpeta imágenes,que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento).Para trabajar deuna forma más sencillay ordenada,es recomendable que todos los documentos html se encuentren en un mismo directorio,y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imágenes,o una carpeta destinada a almacenar archivosdeaudio,etc.
  • 2. Existen una seriede formatos de imagen más recomendables que otros para ser introducidos en una página web. Esta información puedes consultarlaaquí . Texto alternativo Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt. Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código: <img src="gatito.gif" alt="tampoconose.jpg" > Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imágenes. En lugar de la imagen se mostrará lo siguiente: Imagen gato Si en lugar del código anterior hubiéramos insertado el siguiente código: <img src="imagenes/gatito.gif" alt="coloquee.jpg" > La imagen habría mostrado correctamente: Imagen gato
  • 3. El texto alternativo se muestra también al situar el puntero sobre la imagen. Si situas el puntero sobre la imagen durante unos segundos, verás como aparece el texto Imagen gato. El texto alternativo es muy útil a la hora de diseñar páginas más asequibles a los invidentes ya que los programas lectores son capaces de leer el texto alternativo.