1. COLEGIO NACIONAL NICOLAS ESGUERRA
EDIFICAMOS FUTRO
KEVINJULIANNEISA GONZALEZ 906
PAGINA WEB IV
Imagen <img>
Todas laspáginaswebacostumbrana tenerun ciertonúmerode imágenes,que permitenmejorar
su apariencia,odotarlade una mayor informaciónvisual.
Para insertarunaimagenesnecesarioinsertarlaetiqueta<img>.Dichaetiquetanonecesita
etiquetade cierre.
El nombre de la imagenhade especificarseatravésdel atributosrc.
Por ejemplo,parainsertarlasiguiente imagen:
Habría que escribir:
<img src="imagenes/logo_animales.gif">
Texto alternativo
Cuandouna imagennopuede servisualizadaenel navegador,cosaque puede ocurriral
especificarmal el valordel atributosrc,aparece un recuadroblancocon una X roja ensu lugar,
juntocon el nombre de la imagen.
Podemoshacerque enlugarde mostrarse el nombre de laimagenaparezcael textoque nosotros
deseemos,graciasal atributoalt.
Por ejemplo,imaginaque deseamosmostrarunaimagenllamadagatito.gif,conel texto
alternativoImagengato,paraelloinsertamosel siguientecódigo:
2. <img src="gatito.gif"alt="Imagengato">
Si en lugardel códigoanteriorhubiéramosinsertadoel siguiente código:
<img src="imagenes/gatito.gif"alt="Imagengato">
Borde de una imagen
En general,al visualizarunapáginaenunnavegadorlasimágenesaparecensinningúnborde
alrededor,peroesposibleestablecerunoatravésdel atributoborder.
El atributoborderpuede tomarvaloresnuméricos,que indicanel grosorenpíxelesdel borde.
Por ejemplo,parainsertarlasiguiente imagenconborde:
Habría que escribir:
<img src="imagenes/logo_animales.gif"border="4">
Tamaño de una imagen
Cuandoinsertamosunaimagen,estase muestraenlosnavegadoresconsutamaño original,pero
por diversosmotivospuede interesarnosmodificardichotamaño.
A travésde losatributoswidth(anchura) yheight(altura) puede modificarse el tamañode la
imagen.Dichocambiode tamañono se aplicadirectamente sobre el archivode imagen,sinoque
loque varía esla visualizaciónde laimagenenel navegador.
Habría que escribir:
<img src="imagenes/logo_animales.gif"width="200"height="80">
3. Alineaciónde una imagen
La alineaciónde lasimágenesse establece atravésdel atributoalign.Este atributoindicala
alineaciónde lasimágenesconrespectoala líneade textoenla que se encuentran.
Los valoresdel atributoalignpuedenserlossiguientes:
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
Habría que escribir:
PerrosGatos<imgscr="imagenes/logo_animales.gif"align="middle">Unawebde animales