SlideShare una empresa de Scribd logo
1 de 3
Colegio Nacional Nicolás Esguerra
Edificamos Futuro
Jean Alejandro Suarez Vásquez
Nicolás Javier Suarez Sánchez
PAGINA WEB IV
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.
Por ejemplo, para insertar la siguiente imagen:
Habría que escribir:
<img src="imagenes/logo_animales.gif">
Textoalternativo
Cuando una imagen no puede ser visualizada en el navegador, cosa que
puede ocurrir al especificar mal el valor del atributo src, apareceun recuadro
blanco con una X roja en su lugar, junto con el nombre de la imagen.
Podemos hacer que en lugar de mostrarseel nombrede la imagen aparezca
el texto que nosotros deseemos, gracias alatributo 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="imagenes/gatito.gif"alt="Imagengato">
Alineaciónde una imagen
La alineación de las imágenes seestablece 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 atributoalignpuedenser los siguientes:
Valor Significado Ejemplo
absbott
om
inferior absoluta Imagencon
texto
absmiddle medio absoluta Imagencon
texto
baseline línea de base Imagencon
texto
bottom inferior Imagencon
texto
left izquierda
Imagencon
texto
middle medio Imagencon
texto
right derecha
Imagencon
texto
texttop texto superior Imagencon
texto
top superior Imagencon
texto
El resultado de aplicar uno u otro valor puede tener el mismo resultado,
como ocurrecon los valores baseline y bottom, o con los valores texttop y
top.
Para insertar el texto y la imagen siguientes:
PerrosGatos Una web de animales
Habría que escribir:
PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una web
de animales
Este tipo de alineación la recomendamos cuando es una imagen pequeña
que queremos fundir con la línea de texto sin que por ello cree una
separación demasiado grande entre la línea donde se encuentra la imágen y
las líneas superior y inferior. Por ejemplo para la imagen de un icono de
cualquier programa, deun botón, etc...
Si la imagen es muy grande, conviene dejarla aislada del texto (no ajustarla a
la derecha ni a la izaquierda sino colocarla en un bloque aparte).

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Codigo de i
Codigo de iCodigo de i
Codigo de i
 
Prac.imagenes
Prac.imagenes Prac.imagenes
Prac.imagenes
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 
Colegio nacional nicolas4
Colegio nacional nicolas4Colegio nacional nicolas4
Colegio nacional nicolas4
 
Taller4
Taller4Taller4
Taller4
 
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
 
HTML
HTMLHTML
HTML
 
Pagina web 4.
Pagina web 4.Pagina web 4.
Pagina web 4.
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Inf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_ValenzuelaInf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_Valenzuela
 
Inf2 exc12 p1_a_unidad 3_html_josue rodriguez
Inf2 exc12 p1_a_unidad 3_html_josue rodriguezInf2 exc12 p1_a_unidad 3_html_josue rodriguez
Inf2 exc12 p1_a_unidad 3_html_josue rodriguez
 
Inf2-exc-1-diego alvarez
Inf2-exc-1-diego alvarezInf2-exc-1-diego alvarez
Inf2-exc-1-diego alvarez
 
Daniela Vera
Daniela VeraDaniela Vera
Daniela Vera
 
Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?
Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?
Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?
 

Destacado (10)

Mapa conceptual html 1
Mapa conceptual html 1Mapa conceptual html 1
Mapa conceptual html 1
 
Pagina web III
Pagina web IIIPagina web III
Pagina web III
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
pag web 3
pag web 3pag web 3
pag web 3
 
Mapa conceptual
Mapa conceptualMapa conceptual
Mapa conceptual
 
fuentes
fuentesfuentes
fuentes
 
Doc1
Doc1Doc1
Doc1
 
mapa CONCEPTUAL
mapa CONCEPTUALmapa CONCEPTUAL
mapa CONCEPTUAL
 
Mapa conceptual Peces
Mapa conceptual PecesMapa conceptual Peces
Mapa conceptual Peces
 
Jjjjjjj
JjjjjjjJjjjjjj
Jjjjjjj
 

Similar a pag 4

Similar a pag 4 (20)

242310
242310242310
242310
 
Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5Creacion Pagina Web Unidad 5
Creacion Pagina Web Unidad 5
 
Imagenes
ImagenesImagenes
Imagenes
 
Imagenes
ImagenesImagenes
Imagenes
 
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
Colegionacionalnicolsesguerra 15091711-app6892-150924155136-lva1-app6891
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
Evidencia iv
Evidencia ivEvidencia iv
Evidencia iv
 
Html4 imagnes
Html4 imagnesHtml4 imagnes
Html4 imagnes
 
Imágenes en html
Imágenes en htmlImágenes en html
Imágenes en html
 
Evidencia iv
Evidencia ivEvidencia iv
Evidencia iv
 
Colegio nicolás esguerra
Colegio nicolás esguerraColegio nicolás esguerra
Colegio nicolás esguerra
 
Imágenes En Paginas Web
Imágenes En Paginas WebImágenes En Paginas Web
Imágenes En Paginas Web
 
Curso HTML 5 & jQuery - Leccion 3
Curso HTML 5 & jQuery - Leccion 3Curso HTML 5 & jQuery - Leccion 3
Curso HTML 5 & jQuery - Leccion 3
 
Byb3
Byb3Byb3
Byb3
 
Byb3
Byb3Byb3
Byb3
 
Peres el dios
Peres el diosPeres el dios
Peres el dios
 
Pagina web 4
Pagina web 4Pagina web 4
Pagina web 4
 
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
 
13imagenes
13imagenes13imagenes
13imagenes
 
3
33
3
 

Más de Nicolas Sanchez (20)

Base actualizada nico 6
Base actualizada nico 6Base actualizada nico 6
Base actualizada nico 6
 
Base actualizada
Base actualizada Base actualizada
Base actualizada
 
Base actualizada
Base actualizada Base actualizada
Base actualizada
 
normsas i-contec
normsas i-contecnormsas i-contec
normsas i-contec
 
Detectar y seguir líneas por nxt
Detectar y seguir líneas por nxt Detectar y seguir líneas por nxt
Detectar y seguir líneas por nxt
 
Expodidactica trl presentacion
Expodidactica trl presentacion Expodidactica trl presentacion
Expodidactica trl presentacion
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
educacion
educacioneducacion
educacion
 
Llllllslsl58
Llllllslsl58Llllllslsl58
Llllllslsl58
 
Lego nxt
Lego nxtLego nxt
Lego nxt
 
Lego nxt
Lego nxtLego nxt
Lego nxt
 
Presentacióny
PresentaciónyPresentacióny
Presentacióny
 
Corrección de la evaluación 2
Corrección de la evaluación 2Corrección de la evaluación 2
Corrección de la evaluación 2
 
Alejo y n
Alejo y nAlejo y n
Alejo y n
 
jh
jhjh
jh
 
uj
ujuj
uj
 
j
jj
j
 
ik
ikik
ik
 
k
kk
k
 
kj
kjkj
kj
 

Último

linea de tiempo television y su avance en los años
linea de tiempo television y su avance en los añoslinea de tiempo television y su avance en los años
linea de tiempo television y su avance en los añosMaraPazCrdenas
 
9-Sociales-Colombia siglo XX.pdf sociales
9-Sociales-Colombia siglo XX.pdf sociales9-Sociales-Colombia siglo XX.pdf sociales
9-Sociales-Colombia siglo XX.pdf socialesJhonathanRodriguez10
 
Presentación Materiales para la Construcción.ppt
Presentación Materiales para la Construcción.pptPresentación Materiales para la Construcción.ppt
Presentación Materiales para la Construcción.pptCARLOSAXELVENTURAVID
 
PLANIFICACION ANUAL , año 2024. nivel primaria
PLANIFICACION ANUAL , año 2024. nivel primariaPLANIFICACION ANUAL , año 2024. nivel primaria
PLANIFICACION ANUAL , año 2024. nivel primariajosevilla696981
 
Home Assistant - Un Hub para controlarlos a todos
Home Assistant - Un Hub para controlarlos a todosHome Assistant - Un Hub para controlarlos a todos
Home Assistant - Un Hub para controlarlos a todosDebora Gomez Bertoli
 
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptxRosiClaros
 
PERFIL SECRETARIAL - SECRETARIADO EJECUTIVO
PERFIL SECRETARIAL - SECRETARIADO EJECUTIVOPERFIL SECRETARIAL - SECRETARIADO EJECUTIVO
PERFIL SECRETARIAL - SECRETARIADO EJECUTIVOAdrianaBernal82
 
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
 

Último (8)

linea de tiempo television y su avance en los años
linea de tiempo television y su avance en los añoslinea de tiempo television y su avance en los años
linea de tiempo television y su avance en los años
 
9-Sociales-Colombia siglo XX.pdf sociales
9-Sociales-Colombia siglo XX.pdf sociales9-Sociales-Colombia siglo XX.pdf sociales
9-Sociales-Colombia siglo XX.pdf sociales
 
Presentación Materiales para la Construcción.ppt
Presentación Materiales para la Construcción.pptPresentación Materiales para la Construcción.ppt
Presentación Materiales para la Construcción.ppt
 
PLANIFICACION ANUAL , año 2024. nivel primaria
PLANIFICACION ANUAL , año 2024. nivel primariaPLANIFICACION ANUAL , año 2024. nivel primaria
PLANIFICACION ANUAL , año 2024. nivel primaria
 
Home Assistant - Un Hub para controlarlos a todos
Home Assistant - Un Hub para controlarlos a todosHome Assistant - Un Hub para controlarlos a todos
Home Assistant - Un Hub para controlarlos a todos
 
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx
 
PERFIL SECRETARIAL - SECRETARIADO EJECUTIVO
PERFIL SECRETARIAL - SECRETARIADO EJECUTIVOPERFIL SECRETARIAL - SECRETARIADO EJECUTIVO
PERFIL SECRETARIAL - SECRETARIADO EJECUTIVO
 
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
 

pag 4

  • 1. Colegio Nacional Nicolás Esguerra Edificamos Futuro Jean Alejandro Suarez Vásquez Nicolás Javier Suarez Sánchez PAGINA WEB IV 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. Por ejemplo, para insertar la siguiente imagen: Habría que escribir: <img src="imagenes/logo_animales.gif"> Textoalternativo Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, apareceun recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarseel nombrede la imagen aparezca el texto que nosotros deseemos, gracias alatributo 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="imagenes/gatito.gif"alt="Imagengato">
  • 2. Alineaciónde una imagen La alineación de las imágenes seestablece 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 atributoalignpuedenser los siguientes: Valor Significado Ejemplo absbott om inferior absoluta Imagencon texto absmiddle medio absoluta Imagencon texto baseline línea de base Imagencon texto bottom inferior Imagencon texto left izquierda Imagencon texto middle medio Imagencon texto right derecha Imagencon texto texttop texto superior Imagencon texto top superior Imagencon texto
  • 3. El resultado de aplicar uno u otro valor puede tener el mismo resultado, como ocurrecon los valores baseline y bottom, o con los valores texttop y top. Para insertar el texto y la imagen siguientes: PerrosGatos Una web de animales Habría que escribir: PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una web de animales Este tipo de alineación la recomendamos cuando es una imagen pequeña que queremos fundir con la línea de texto sin que por ello cree una separación demasiado grande entre la línea donde se encuentra la imágen y las líneas superior y inferior. Por ejemplo para la imagen de un icono de cualquier programa, deun botón, etc... Si la imagen es muy grande, conviene dejarla aislada del texto (no ajustarla a la derecha ni a la izaquierda sino colocarla en un bloque aparte).