Este documento explica cómo insertar y modificar imágenes en páginas web usando etiquetas HTML. Explica los atributos src, alt, border, width y height de la etiqueta <img> y cómo se usan para especificar la ruta de la imagen, texto alternativo, borde, ancho y alto. También incluye código de ejemplo mostrando cómo aplicar estos atributos.

1. ANDRES VERGEL MOLINA
905
LUIS MIGUEL GUEVARA
PAGINA WED IV
IMAGEN<IMG>:
Todas laspáginaswebacostumbrana tenerunciertonú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:
<img src="imagenes/logo_animales.gif">

2. 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:
<img src="gatito.gif"alt="Imagengato">
Perohemoscometidounerror,ya que dichaimagennose encuentraenel mismodirectorioque
el documento actual,sinoque se encuentradentrode lacarpetaimagenes.Enlugarde la imagen
se mostrará lo siguiente:
Imagengato
Si en lugardel códigoanteriorhubiéramosinsertadoel siguiente código:
<img src="imagenes/gatito.gif"alt="Imagengato">
BORDE DE UNAIMAGEN:
En general,al visualizarunapáginaenunnavegadorlasimágenesaparecensinningúnborde
alrededor,peroesposibleestablecerunoatravésdel atributoborder.
El atributoborderpuede tomarvaloresnuméricos,que indicanel grosor enpíxelesdel borde.
Por ejemplo,parainsertarlasiguiente imagenconborde:
Habría que escribir:
<img src="imagenes/logo_animales.gif"border="4">
Hay que tenerencuentaque el borde de laimagensiempre seráde colornegro,a noser que la
imagencontengaunenlace,encuyocaso el colordel borde seráel color establecidoparalos
vínculos.
Por ejemplo,parainsertarlasiguiente imagenconborde ycon unenlace:

3. Habría que escribir:
<a href="http://www.aulaclic.com"target="_blank"><imgsrc="imagenes/logo_animales.gif"
border="4" ></a>
Si se deseaestablecerunvínculosobre unaimagenyno se deseaque se muestre el borde (que
por su colorindicaque existe dichovínculo),esnecesarioestablecerborder="0".
TAMAÑO DE UNAIMAGEN:
Cuandoinsertamosunaimagen,estase muestraenlosnavegadoresconsutamañooriginal,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.
El valorque puedentomarlosatributoswidthyheighthade ser un número,acompañadode %
cuandose desee que seaenporcentaje conrespectoalapágina.
Por ejemplo,parainsertarlasiguiente imagen(cuyotamañooriginalerade 122 píxelesde anchura
y 71 píxelesde altura) con200 píxelesde anchuray 80 píxelesde altura:
Habría que escribir:
<img src="imagenes/logo_animales.gif"width="200"height="80">
Al modificarel tamañode la imagenatravésde estosatributosesmuyprobable que laimagen
resultante noseade buenacalidad,encomparaciónde cómopodría quedarmodificándola desde
un editorexterno,comoFireworks.

4. CODIGO:
<img src="imagenes/carro1.jpg" alt="logo skyline" border="3" width="400" height="160">
<img src="imagenes/carro2.jpg" alt="logo skyline" border="3" width="400" height="160">
<img src="imagenes/carro3.jpg" alt="logo skyline" border="3" width="400" height="160">
<img src="imagenes/logo2.jpg" alt="logoskyline" border="6" width="400" height="160">