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

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

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)

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.

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

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

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)

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

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

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

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”>

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.(#).

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

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)

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”