El documento describe cómo insertar imágenes en una página web utilizando las etiquetas <img> y sus atributos src, alt, border, width y height. Explica que la etiqueta <img> no requiere etiqueta de cierre y que el atributo src especifica la ruta de la imagen. También cubre el uso del atributo alt para proveer texto alternativo y los atributos border, width y height para controlar el borde, ancho y alto de las imágenes.
TERCER GRADO PROGRAMACION ANUAL CCSS 3° - 2024.docx
Pagina web 4
1. PAGINA WEB 4
IMÁGENES
Imagen <img>
Todaslas páginasweb acostumbran a tener un cierto
número de imágenes, que permiten mejorar su apariencia,
o dotarla de una mayor informaciónvisual.
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
Cuandouna imagen no puede ser visualizadaen el
navegador, cosa que puede ocurrir al especificarmal el
2. valordel atributo src, aparece un recuadro blancocon 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, imaginaque deseamos mostrar una imagen
llamadagatito.gif, con el texto alternativoImagen gato,
para ello insertamos el siguiente código:
<img src="gatito.gif" alt="Imagen gato" >
Borde de una imagen
En general, al visualizaruna páginaen un navegadorlas
imágenes aparecen sin ningún borde alrededor, pero es
posible establecer uno a través del atributo border.
El atributoborder puede tomar valores numéricos, que
indicanel grosor en píxeles del borde.
<img src="imagenes/logo_animales.gif"border="4" >
Tamaño de una imagen
Cuandoinsertamos una imagen, esta se muestra en los
navegadores con su tamaño original, pero por diversos
motivos puede interesarnos modificardicho tamaño.
A través de los atributoswidth (anchura) y height (altura)
puede modificarse el tamaño de la imagen. Dicho cambio de
3. tamaño no se aplica directamente sobre el archivo de
imagen, sino que lo que varía es la visualizaciónde la
imagen en el navegador.
<img src="imagenes/logo_animales.gif"width="200"
height="80">
CODIGO :
<html>
<head>
<title>sportingoods903</title>
</head>
<imgsrc="imagenes/LOGOEMPRESA.jpg"alt="EMPRESA LOGOborder="5"
width="500" height="250">
<!--paginaweblaelaboromarlontellezymarco suarezdel grado903//-->.
<bodybgcolor="#2EFEF7">
<hr>
<MARQUEE><H2>MI PRIMERA PAGINA WEB</MARQUEE></H2> <br>
<hr>
<blockquote>
nuetracompañiaofrece:<br>
productosde alta calidadcon todolorelacionadoenel deporte
</blockquote>
<fontcolor="#BLACK"size="4"face="ComicSansMS"><B>PELOTA</B></font>
<fontcolor="#BLACK"size="4"face=" Arial"><I><B>DE TENNIS</I></B></font>
<H3><P ALIGN="CENTER"> Pelotade tenis.Utilizadaparalarealizacióndel deporte tenis;las
mismasdebentenerun
diámetrode 6.35 centímetrosymenorde 6.67, de coloramarillo,siendoesteel únicocolorque
puede utilizarse
acompañadocon blancopara mejorarla visualizaciónde losjugadoresytambiénde los
espectadoresportelevisión.
</P><H3>
<imgsrc="imagenes/logotenis.jpg"alt="TENISLOGOborder="15"width="300" height="250">
<img src="imagenes/pelotade teniss.jpg"alt="TENISPELOTA border="5"width="300"
height="250">
<HR>GUAYOS NIKE<HR/>
<H3><P ALIGN="CENTER"> CR Mercurial VaporSuperflyII. Descripción:ofrecenel innovador
sistemade tracción
