SlideShare a Scribd company logo
1 of 2
Download to read offline
COLEGIO NACIONAL NICOLAS ESGUERRA
PAGINA WEB 3
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 especificarse a través del atributo src.
<img src="imagenes/logo_animales.gif">
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.
<img src="imagenes/gatito.gif" alt="Imagen gato" >
Borde de una imagen
En general, al visualizar una página en un navegador las imágenes aparecen sin ningún
borde alrededor, pero es posible establecer uno a través del atributo border.
El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del
borde.
<a href="http://www.aulaclic.com" target
="_blank" ><img src="imagenes/logo_animales.gif" border="4" ></a>
Tamaño de una imagen
A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de
la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen,
sino que lo que varía es la visualización de la imagen en el navegador.
<img src="imagenes/logo_animales.gif" width="200" height="80">
Alineación de una imagen
La alineación de las imágenes se establece a través del atributo align. Este atributo indica
la alineación de las imágenes con respecto a la línea de texto en la que se encuentran.
Los valores del atributo align pueden ser los siguientes:
PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una web de
animales

More Related Content

What's hot (19)

Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Pagina web 4.
Pagina web 4.Pagina web 4.
Pagina web 4.
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Pagina Web 4
Pagina Web 4 Pagina Web 4
Pagina Web 4
 
Pagina web iv
Pagina web ivPagina web iv
Pagina web iv
 
Imagenes
ImagenesImagenes
Imagenes
 
ñ{ññññ
ñ{ñññññ{ññññ
ñ{ññññ
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Pagina web lV
Pagina web lVPagina web lV
Pagina web lV
 
36647
3664736647
36647
 
pagina web IV
pagina web IVpagina web IV
pagina web IV
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Hhh .l.
Hhh .l.Hhh .l.
Hhh .l.
 
WEB IV
WEB IVWEB IV
WEB IV
 
Colegio nacional nicolas esguerrra
Colegio nacional nicolas esguerrraColegio nacional nicolas esguerrra
Colegio nacional nicolas esguerrra
 
Martin lopoez 905 30
Martin lopoez 905 30Martin lopoez 905 30
Martin lopoez 905 30
 
Martin lopoez 905
Martin lopoez 905Martin lopoez 905
Martin lopoez 905
 

Viewers also liked (17)

Circuitos integrados
Circuitos integradosCircuitos integrados
Circuitos integrados
 
Mapa conceptual info
Mapa conceptual infoMapa conceptual info
Mapa conceptual info
 
Task 2 contents
Task 2 contentsTask 2 contents
Task 2 contents
 
valentin 2
valentin 2valentin 2
valentin 2
 
Compostagem
CompostagemCompostagem
Compostagem
 
Youtube
Youtube Youtube
Youtube
 
Alejandro chacon ingenieria economica
Alejandro chacon ingenieria economicaAlejandro chacon ingenieria economica
Alejandro chacon ingenieria economica
 
2
22
2
 
Sesión 08
Sesión 08Sesión 08
Sesión 08
 
Cartão no x5 em bitmap
Cartão no x5  em bitmapCartão no x5  em bitmap
Cartão no x5 em bitmap
 
IEEE officer application form
IEEE officer application formIEEE officer application form
IEEE officer application form
 
1
11
1
 
valentin
valentinvalentin
valentin
 
1 das horas extras
1 das horas extras1 das horas extras
1 das horas extras
 
reference VivaVision
reference VivaVisionreference VivaVision
reference VivaVision
 
Matemática
MatemáticaMatemática
Matemática
 
La canción andina
La canción andinaLa canción andina
La canción andina
 

Similar to 3 (17)

Byb3
Byb3Byb3
Byb3
 
Imagenes
ImagenesImagenes
Imagenes
 
Web 4
Web 4Web 4
Web 4
 
Web IV
Web IVWeb IV
Web IV
 
242310
242310242310
242310
 
Imagen
ImagenImagen
Imagen
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Html iv
Html ivHtml iv
Html iv
 
Fdfdv dsvds
Fdfdv dsvdsFdfdv dsvds
Fdfdv dsvds
 
pagina web IV
pagina web IV pagina web IV
pagina web IV
 
Colegio nacional nicolás es guerra
Colegio nacional nicolás es guerraColegio nacional nicolás es guerra
Colegio nacional nicolás es guerra
 
Colegio nacional nicolas4
Colegio nacional nicolas4Colegio nacional nicolas4
Colegio nacional nicolas4
 
Pio pio
Pio pioPio pio
Pio pio
 
Web
WebWeb
Web
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 
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
 

More from tovarfelipe (6)

Tovar valentin
Tovar valentinTovar valentin
Tovar valentin
 
Tovar
Tovar Tovar
Tovar
 
4
44
4
 
Tablas
TablasTablas
Tablas
 
Tovar
TovarTovar
Tovar
 
Tovar (1)
Tovar (1)Tovar (1)
Tovar (1)
 

Recently uploaded

Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Fernando Solis
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
pvtablets2023
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
RigoTito
 

Recently uploaded (20)

Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración Ambiental
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdf
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 

3

  • 1. COLEGIO NACIONAL NICOLAS ESGUERRA PAGINA WEB 3 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 especificarse a través del atributo src. <img src="imagenes/logo_animales.gif"> 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. <img src="imagenes/gatito.gif" alt="Imagen gato" > Borde de una imagen En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde alrededor, pero es posible establecer uno a través del atributo border. El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde. <a href="http://www.aulaclic.com" target ="_blank" ><img src="imagenes/logo_animales.gif" border="4" ></a> Tamaño de una imagen A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen en el navegador.
  • 2. <img src="imagenes/logo_animales.gif" width="200" height="80"> Alineación de una imagen La alineación de las imágenes se establece a través del atributo align. Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran. Los valores del atributo align pueden ser los siguientes: PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una web de animales