Material de apoyo para la materia programacion en web 1 de la FCT - UNCA. Basado en la página librosweb.

1. INTRODUCCIÓN A HTML –
XHTML – Clase 02
1. Listas
2. Imágenes y objetos
3. Tablas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 1

2. LISTAS
 NO ORDENADAS: <ul> + <li>
 ORDENADAS: <ol> + <li>
 DE DEFINICIÓN (Como un diccionario): <dl> + <dt> + <dd>
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 2
<h1>Listas</h1>
<h2>NO ORDENADAS</H2>
<ul>
<li>elemento1</li>
<li>elemento2</li>
<li>elemento3</li>
</ul>
<h2> ORDENADAS</h2>
<ol>
<li>elemento1</li>
<li>elemento2</li>
<li>elemento3</li>
</ol>
<h2>DE DEFINICIÓN</h2>
<dl>
<dt>Definicion1</dt>
<dd>concepto1: consiste en bla bla bla
</dd>
<dt>Definicion2</dt>
<dd>concepto2: consiste en bla bla bla
</dd>
<dt>Definicion2</dt>
<dd>concepto2: consiste en bla bla bla
</dd>
</dl>

3. Imágenes y objetos:
Imágenes
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 3
<img src=“/imágenes/logo.gif" alt="Logotipo de Mi Sitio" />
Recomendados: Gif, jpg, png

4. Imágenes y objetos: Mapas de
Imágenes
 Un mapa de imagen permite definir diferentes
zonas “clickeables" dentro de una imagen.
 El usuario puede pinchar sobre cada una de las
zonas definidas y cada una de ellas puede
apuntar a una URL diferente.
 Las zonas o regiones que se pueden definir en
una imagen se crean mediante rectángulos,
círculos y polígonos.
 Para crear un mapa de imagen, en primer lugar
se inserta la imagen original mediante la
etiqueta <img>.
 A continuación, se utiliza la etiqueta <map> para
definir las zonas o regiones de la imagen.
 Cada zona se define mediante la
etiqueta <area>.
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 4

5. Imágenes y objetos: Mapas de
Imágenes
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 5
Si una imagen utiliza un
mapa de imagen, debe
indicarlo mediante el
atributo usemap. El valor
del atributo debe ser el
nombre del mapa de
imagen definido en otra
parte del mismo
documento HTML:<img
src="mapa_mundo.gif"
usemap="#continentes" />
...
<map
name="continentes"> ...
</map>

6. Imágenes y objetos: Mapas de
Imágenes Las áreas se definen mediante el atributo shape que indica el tipo de
área y coords que es una lista de coordenadas cuyo significado
depende del tipo de área definido.
 El enlace de cada área se define mediante el atributo href, con la misma
sintaxis y significado que para los enlaces normales.
 El siguiente ejemplo muestra una imagen sencilla que contiene cuatro
figuras geométricas:
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 6
<img src="imagen.gif" 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>

7. Imágenes y objetos: Objetos
 HTML permite incluir en las páginas web elementos mucho más complejos,
como por ejemplo:
 Applets de Java y vídeos en formato QuickTime o Flash.
 La mayoría de este tipo de contenidos no los interpreta el navegador
directamente,
 sino que hace uso de pequeños programas llamados plugins y que se encargan
de tratar con este tipo de elementos complejos.
 La etiqueta <object> es la que permite "embeber" o incluir en las páginas HTML
cualquier tipo de contenido complejo:
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 7
<object data="Planeta.mpeg"
type="application/mpeg"
/>

8. Imágenes y objetos: Objetos
 A los objetos también se les puede pasar información
adicional en forma de parámetros mediante la
etiqueta <param>:
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 8
<object data="..." type="..."> <param name="parametro1" value="40" />
<param name="parametro2" value="20" />
<param name="parametro3" value="texto de prueba" />
</object>

9. Imágenes y objetos: Objetos
 Uno de los principales inconvenientes de <object> es la forma de incluir
vídeos en formato Flash en las páginas HTML. Si se utiliza el siguiente
código:
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 9
<object data="nombre_video.swf" type="application/x-shockwave-flash"></object>
 provoca que algunos navegadores como Internet Explorer no
visualicen el vídeo hasta que se ha descargado completamente.
Si se trata de un vídeo largo, esta solución no es válida para el
usuario. (PROBEMOS!!)
 se utiliza una solución alternativa para incluir vídeos Flash
en las páginas HTML: el uso de la etiqueta <embed>.
Aunque esta solución funciona correctamente, no se trata
de una solución válida desde el punto de vista del
estándar de XHTML

10. Imágenes y objetos: Objetos
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 10
Los sitios web más
populares de vídeos en
formato Flash
proporcionan un código
similar al siguiente para
incluir sus vídeos en las
páginas HTML:
<object width="425" height="350">
<param name="movie"
value="http://www.youtube.com/v/MsH0rBWCYjs">
</param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/MsH0rBWCYjs"
type="application/x-shockwave-flash"
wmode="transparent" width="425" height="350">
</embed>
</object>
Esto es correcto para el
usuario, pero no válido
pues la
etiqueta<embed> no es
parte del estándar
XHTML.

11. Tablas
 NO SE DEBEN utilizar para definir la
estructura de las páginas web.
 Tres etiquetas: <table> para crear la
tabla, <tr> (table row) para crear cada fila
y <td> (table data cell) para crear cada
columna.
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 11

12. Tablas: Tablas básicas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 12
<h1>Listado de cursos</h1>
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>Curso1</td>
<td>Horas1</td>
<td>Horario 1</td>
</tr>
<tr>
<td>Curso2</td>
<td>Horas2</td>
<td>Horario 2</td>
</tr>
</table>
Primera fila
Segunda
fila
Tercera fila
Primera
Columna
Primera
Columna
Primera
Columna

13. Tablas: Tablas básicas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 13

14. Tablas: Tablas básicas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 14

15. Tablas: Tablas básicas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 15
Algunas de las celdas de la tabla se utilizan como cabecera de las demás celdas de la fila o de la
columna.
CAPTION: HTML define la etiqueta <caption> para establecer la leyenda o título de una tabla. La etiqueta debe colocarse
inmediatamente después de la etiqueta <table> y cada tabla sólo puede incluir una etiqueta <caption>.

16. </table>
<table>
Tablas: Tablas básicas.
Ejemplo:
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 16
<tr>
<th scope="col">Nombre del Alumno</th>
<th scope="col">TP</th>
<th scope="col">EP</th>
<th scope="col">Total</th>
</tr>
<tr>
<td>Alumno1</td>
<td>25</td>
<td>15</td>
<td>40</td>
</tr>
<tr>
<th scope="row">Promedio</th>
<td><strong>24</strong></td>
<td><strong>15,5</strong></td>
<td><strong>39,5</strong></td>
</tr>

17. Tablas: Tablas básicas.
Ejercicio
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 17

18. Tablas: Tablas básicas
complejas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 18
Si queremos juntar varias columnas para formar una columna ancha o unir varias filas para formar una fila más alta que las demás,
debemos fusionar las filas o columnas. Para fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>

19. Tablas: Tablas básicas
complejas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 19
<table>
<tr>
<td colspan="3">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td colspan="2">D</td>
<td>E</td>
</tr>
<tr>
<td colspan="4">F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
</table>
<table>
<tr>
<td>A</td>
<td>B</td>
<td rowspan="3">C</td>
<td>D</td>
</tr>
<tr>
<td rowspan="2">E</td>
<td>F</td>
<td rowspan="3">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
</tr>
</table>
A B
C
D
E
F
GH
I J K

20. Tablas: Tablas básicas
complejas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 20
MARCA /
MODELO
ACER S7-391-
9411
TOSHIBA
U845W-
S4180
HP
ELITEBOOK
8470P
IMAGEN
DISCO DURO 128 GB SSD
MEMORIA 8 GB
MONITOR 14"
CORE I5
CORE I7
PROVEEDOR DIVISERV SYS DATA LAB
PROCESADOR
6 GB
256 GB SSD
13,3"
CORE I7 CORE I7

21. Tablas: Tablas Avanzadas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 21
• Las tablas más avanzadas disponen de una sección de cabecera, una sección de pie
y varias secciones de datos.
• Es posible agrupar varias columnas de forma lógica para poder aplicar estilos
similares a un determinado grupo de columnas.
La cabecera de la tabla se define
con la etiqueta <thead>, el pie de
la tabla se define
mediante <tfoot> y cada sección
de datos se define con una
etiqueta <tbody>.
Cada tabla puede contener
solamente una cabecera y un pie,
pero puede incluir un número
ilimitado de secciones.
Si se define una cabecera y/o un
pie, las
etiquetas <thead> y/o <tfoot> de
ben colocarse inmediatamente
antes que cualquier
etiqueta <tbody>.

22. Tablas: Tablas Avanzadas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 22
<table summary="Análisis de ventas anuales">
<caption>Análisis de ventas anuales</caption>
<thead>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th colspan="4" scope="col">Expansión de ventas</th>
</tr>
<tr>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
<tr>
<th colspan="4" scope="col">Expansión de ventas</th>
</tr>
</tfoot>
Análisis de ventas anuales
AÑO
Expansión de ventas
Producto
A
Producto
B
Producto
C
Producto
D
AÑO
Producto
A
Producto
B
Producto
C
Producto
D
Expansión de ventas
El elemento <tfoot> siempre se
escribe antes que cualquier
elemento <tbody> en el código
HTML.

23. Tablas: Tablas Avanzadas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 23
<tbody>
<tr>
<th scope="row">N-3</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th scope="row">N-2</th>
<td>3</td>
<td>5</td>
<td>8</td>
<td>4</td>
</tr>
<tr>
<th scope="row">N-1</th>
<td>4</td>
<td>4</td>
<td>7</td>
<td>3</td>
</tr>
<tr>
<th scope="row">N</th>
<td>5</td>
<td>7</td>
<td>6</td>
<td>2</td>
</tr>
</tbody>
</table>
Producto
A
Producto
B
Producto
C
Producto
D
Producto
A
Producto
B
Producto
C
Producto
D
AÑO
Expansión de ventas
AÑO
Expansión de ventas
N - 3 - - - -
N - 2 3 5 8 4
N - 1 4 4 7 3
N 5 7 6 2
La etiqueta <tbody> permite realizar agrupaciones
de filas, pero en ocasiones se necesitan agrupar
columnas.
Aunque su uso no es muy común, HTML define
dos etiquetas similares para agrupar
columnas: <col> y <colgroup>.

24. Tablas: Tablas Avanzadas
24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 24
MARCA /
MODELO
ACER S7-391-
9411
TOSHIBA
U845W-
S4180
HP
ELITEBOOK
8470P
IMAGEN
DISCO DURO 128 GB SSD
MEMORIA 8 GB
MONITOR 14"
CORE I5
CORE I7
DISCO DURO
MEMORIA
MONITOR 14"
PROCESADOR
PROVEEDOR DIVISERV SYS DATA LAB
Garantía: 3 meses
Descuento: hasta 50%
Descuento: hasta 30%
128 GB SSD
4 GB
15,6"
CORE I5
Garantía: 6 meses
PROCESADOR
6 GB
256 GB SSD
13,3"
CORE I7 CORE I7

25. 24/03/2014
FCT UNCA - PROG WEB I - ING.
HÉCTOR ESTIGARRIBIA 25
Fuentes:
http://librosweb.es/xhtml/capitulo_5.html
http://librosweb.es/xhtml/capitulo_6.html
http://librosweb.es/xhtml/capitulo_7.html