Clase 3 IMÁGENES Existen tres tipos de formato de imágenes que se pueden Insertar en un documento HTML: JPEG GIF PNG.

Presentación del tema: "Clase 3 IMÁGENES Existen tres tipos de formato de imágenes que se pueden Insertar en un documento HTML: JPEG GIF PNG."— Transcripción de la presentación:

1 Clase 3 IMÁGENES Existen tres tipos de formato de imágenes que se pueden Insertar en un documento HTML: JPEG GIF PNG

2 Clase 3 Para insertar una imagen se usa la etiqueta: Ej.:

3 Clase 3 ATRIBUTOS DE LAS IMÁGENES BORDER: (Tamaño del borde alrededor de una imagen) WIDTH: (Ancho en pixeles de la imagen) HEIGHT: (Altura en pixeles de la imagen)

4 Clase 3 ATRIBUTOS DE LAS IMÁGENES NAME: (Darle un nombre a la imagen) ALIGN: (Alinear la imagen con respecto al texto de un documento). Tenemos left, right, top, abscenter, middle, center, bottom, texttop, textbottom.

5 Clase 3 El atributo “ALIGN” Align=top Align=center Align=bottom

6 Clase 3 El atributo “ALIGN” Align=textop Align=middle Align=textbottom

7 Clase 3 ATRIBUTOS DE LAS IMÁGENES HSPACE: (Espacio a la derecha e izquierda de una imagen). RSPACE: (Espacio arriba y abajo de una imagen) ALT: (Sirve para dar una descripción a la imagen)

8 Clase 3 ATRIBUTOS DE LAS IMÁGENES LONGDESC: (Es un vínculo hacia un documento que explica detalladamente la imagen)

9 Clase 3 IMÁGENES FLOTANTE: La imagen puede quedar a la izquierda de un párrafo texto. (align = left) Este es un ejemplo para mostrar la imagen a la Izquierda del texto

10 Clase 3 La imagen puede quedar a la derecha de un párrafo texto. (align = right) Este es un ejemplo para mostrar la imagen a la derecha del texto

11 Clase 3 Convirtiendo Imágenes en Hipervínculos Para utilizar una imagen como hipervínculos se debe usar las siguientes sentencias. Ej.: <Img Src=“mi_imagen.gif” Border = 0 height=86 width = 56 alt=“mi imagen”>

12 Clase 3 MAPAS DE IMÁGENES En HTML un mapa es una imagen que está dividida en varias regiones y cada región contiene un hipervínculo. Definición de las regiones del mapa....... El Name “mimapa” corresponderá al nombre que se debe colocar en el atributo USEMAP, el cual se coloca en la marca, precidida con un gato.(#).

13 Clase 3 Ej.: <AREA SHAPE =“RECTANGLE” coords=“1,1,75,46” Href=“indice.html”>

14 Clase 3 Atributos del AREA, la cual permite difinir las regiones de un mapa. <Area Shape=“rectangle” href=“home.html” coords = “0,0,118,28”.> SHAPE: (tenemos formas como rectangle, poly, circle) HREF: (Documento o sitio vinculado) COORDS: (Coordenadas de acuerdo a la figura)

15 Clase 3 Coords = “left-x, top-y, right-x, bottom-y” Coords=“centro-x, centro-y, radio” Coords=“x1,y1, x2,y2, x3,y3, xn,yn”