1. Desarrollo web con Flash Práctica 3
Práctica 3 Imágenes y Tablas
Imágenes
En una página HTML se pueden encontrar dos tipos de imágenes, de contenido y de
adorno. Las imágenes de contenido proporcionan información dentro del contexto, las
imágenes de adorno son usadas dentro de los templates y estilos, para dar una mejor vista
de la página.
En esta práctica veremos cómo incorporar imágenes de contenido, dejando las imágenes
de adorno para las CSS.
Etiqueta Atributos comunes Tipo Descripción
img src=”url” En línea y Incrusta imágenes en los
alt=”texto_over” etiqueta vacía documentos
name=”texto”
height=”#px”
width=”#px”
Ejemplo: <img src="img/logo.png" alt="Logotipo del sitio" height="50px" width="50px" />
Se recomienda usar png, jpg, y gif para las imágenes, para asegurar que sea mostrada por
todos los navegadores gráficos.
Width y Height son excepción a la norma de la separación de contenido del formato, con
el fin de no tener que definir la css para cada imagen por separado.
Ejercicio 1:
Descargar 4 imágenes de internet y acomodarlas dentro de una página HTML, y
ajustarlas a diferentes tamaños.
Ing. Hugo Mendieta Pacheco 1

2. Desarrollo web con Flash Práctica 3
Mapas de imágenes
Aunque en desuso, los mapas en las imágenes pueden llegar a ser útiles dentro de las
páginas HTML. El mapa permite definir zonas hacia una liga, dentro de una imagen. La
etiqueta map hace uso de una etiqueta img.
Etiqueta Atributos comunes Tipo Descripción
map name=”texto” Bloque y en Define un mapa de imagen
línea
area href=”url” Etiqueta vacía Definen áreas de un mapa de
nohref=”nohref” imágen
shape=”default | rect |
circle | poly”
cords=”#1,#2,#3,…”
Ejemplo:
<img src="imagen.png" usemap="#mapa_zonas" />
<map name="mapa_zonas">
<area shape="rect" coords="20,25,84,113" href="rectangulo.html" />
<area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24" href="triangulo.html"/>
<area shape="circle" coords="130,114,29" href="circulo.html" />
<area shape="rect" coords="19,156,170,211" href="mailto:rectangulo@direccion.com" />
<area shape="default" nohref="nohref" />
</map>
Ing. Hugo Mendieta Pacheco 2

3. Desarrollo web con Flash Práctica 3
Tablas
Las tablas son estructuras para mostrar información de manera tabular, sin embargo es
incorrectamente usado en el estilo y diseño de páginas. Para esta actividad es
recomendable otro tipo de tratamientos.
Ejemplo:
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>HTML</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 - 20:00</td>
</tr>
</table>
Ing. Hugo Mendieta Pacheco 3

4. Desarrollo web con Flash Práctica 3
Etiqueta Atributos comunes Tipo Descripción
table summary=”texto(*)” En bloque Define una tabla.
tr En bloque Define una fila de datos.
td abbr=”texto(*)” En bloque Define una celda, las celdas
colspan=”#” forman columnas.
rowspan=”#”
th abbr=”texto(*)” En bloque Define una cabecera de fila o
colspan=”#” columna.
rowspan=”#”
caption En línea Titulo o leyenda de la tabla
* Usabilidad, para los buscadores y navegadores de voz.
Ejercicio 2:
Desarrolla la siguiente tabla en una página html.
Ing. Hugo Mendieta Pacheco 4